Merge branch 'frontend' into app

frontend/package.json

@@ -14,6 +14,7 @@
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",
     "bfj": "^7.0.2",
+    "bootstrap": "^5.3.3",
     "browserslist": "^4.18.1",
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
@@ -40,6 +41,7 @@
     "prompts": "^2.4.2",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
+    "react-bootstrap": "^2.10.2",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.11.0",

frontend/src/API/Fetch.js

@@ -1,16 +1,27 @@
 import { HttpMethod } from "@data/enums"
 
+
+const headers = {
+    "Content-Type": "application/json; charset=utf-8",
+    "Access-Control-Allow-Origin": "*"
+}
+
+
+
 export default async function Fetch({ action, method, body }) {
 
-    var url = `${process.env.REACT_APP_SERVER_URL}${action}`
+    // var url = `${process.env.REACT_APP_SERVER_URL}${action}`
+
+    var url = `http://92.255.77.65:80/${action}`
+    // url = `http://92.255.77.65/${action}`
+
+    console.log(action, method)
 
     if (method === HttpMethod.GET) {
         var data = await fetch(url, {
             method: "GET",
             credentials: "same-origin",
-            headers: {
-                "Content-Type": "application/json; charset=utf-8",
-            }
+            headers: headers
         })
             .then((response) => response.json())
             .then((data) => {
@@ -24,13 +35,13 @@ export default async function Fetch({ action, method, body }) {
         return data
 
     } else {
+
+        console.log(headers)
         var data = await fetch(url, {
             method: method,
             credentials: "same-origin",
-            headers: {
-                "Content-Type": "application/json; charset=utf-8",
-            },
-            body: body ? JSON.stringify(body) : "",
+            headers: headers,
+            body: body ? JSON.stringify(body) : ""
         })
             .then((response) => response.json())
             .then((data) => {

frontend/src/App.jsx

@@ -1,12 +1,42 @@
 import "./styles/App.css"
-import "./styles/theme.css"
+import "bootstrap/dist/css/bootstrap.min.css"
+
+import { useState } from "react"
+import { Row } from "react-bootstrap"
+import { HttpMethod } from "@data/enums"
+import Fetch from "@API/Fetch"
+import PredictForm from "components/PredictForm"
 
 export default function App() {
 
+    var [predict, setPredict] = useState(0)
+
+    async function getPredict(date) {
+        var data = await Fetch({ action: "api/v1/predict/", method: HttpMethod.POST })
+
+        if (data && data.ok) {
+            // console.log(data)
+            // setPredict(data.predict)
+        }
+        setPredict(Math.random())
+    }
+
     return (
         <div className="App">
-            Hello
+            <br />
+            <h2 className="text-center">Сгенерить предикт на следующий день</h2>
+            <br />
+
+            <PredictForm func={getPredict} />
+
+            <br />
+            <br />
+
+            {predict > 0 &&
+                <Row className="Row green text-large">
+                    {predict}
+                </Row>
+            }
         </div>
     )
-
 }

frontend/src/components/PredictForm.jsx

@@ -0,0 +1,35 @@
+import { useState } from "react"
+import { Button, Form, InputGroup } from "react-bootstrap"
+
+export default function PredictForm({ func }) {
+
+    var [date, setDate] = useState(undefined)
+
+    async function callFunc(event) {
+        await event.preventDefault()
+        var date_obj = Date.parse(date)
+        return await func(date_obj)
+    }
+
+    return (
+        <>
+            <Form formAction="POST" onSubmit={e => callFunc(e)}>
+                <Form.Group className="mb-3">
+                    <InputGroup className="mb-3">
+                        <Form.Control
+                            type="date"
+                            onChange={e => setDate(e.target.value)}
+                        />
+                        <Button
+                            variant="outline-secondary"
+                            id="button-addon1"
+                            type="submit"
+                        >
+                            get predict
+                        </Button>
+                    </InputGroup>
+                </Form.Group>
+            </Form>
+        </>
+    )
+}

frontend/src/data/enums.js

@@ -4,9 +4,3 @@ export var HttpMethod = {
     PUT: "PUT",
     DELETE: "DELETE"
 }
-
-export var Theme = {
-    NAME: "theme",
-    LIGHT: "light",
-    DARK: "dark"
-}

frontend/src/styles/App.css

@@ -5,6 +5,26 @@
 }
 
 body {
-    padding: 0 150px;
+    padding: 0 20%;
     font-family: sans-serif;
+}
+
+
+.text-large {
+    font-size: x-large;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.green {
+    background-color: rgb(129, 235, 165);
+    border: 3px solid rgb(78, 215, 124);
+}
+
+.Row {
+    padding: 20px;
+    border-radius: 10px;
+    justify-content: center;
 }