From 87bebf8ae63a919c6068142e27f74f6cbf0902cb Mon Sep 17 00:00:00 2001 From: Aquaticholic Date: Fri, 28 Jan 2022 13:40:10 +0000 Subject: [PATCH] INPUT PAGE WIP --- webserver/package.json | 5 +- webserver/src/{App.js => App.jsx} | 15 + webserver/src/{DbContext.js => DbContext.jsx} | 0 .../{DashboardPage.js => DashboardPage.jsx} | 0 webserver/src/Pages/InputPage.js | 73 ---- webserver/src/Pages/InputPage.jsx | 363 ++++++++++++++++++ .../{NotFoundPage.js => NotFoundPage.jsx} | 0 webserver/src/Pages/WelcomePage.css | 16 +- .../Pages/{WelcomePage.js => WelcomePage.jsx} | 2 +- webserver/src/components/InputNumberField.jsx | 61 +++ .../Navigation/Drawer/SideDrawer.css | 5 +- .../src/components/Navigation/PagesList.js | 4 +- .../Navigation/Toolbar/Toolbar copy.css | 58 +++ .../components/Navigation/Toolbar/Toolbar.css | 10 +- ...reportWebVitals.js => reportWebVitals.jsx} | 0 .../src/{setupTests.js => setupTests.jsx} | 0 16 files changed, 526 insertions(+), 86 deletions(-) rename webserver/src/{App.js => App.jsx} (66%) rename webserver/src/{DbContext.js => DbContext.jsx} (100%) rename webserver/src/Pages/DashboardPage/{DashboardPage.js => DashboardPage.jsx} (100%) delete mode 100644 webserver/src/Pages/InputPage.js create mode 100644 webserver/src/Pages/InputPage.jsx rename webserver/src/Pages/{NotFoundPage.js => NotFoundPage.jsx} (100%) rename webserver/src/Pages/{WelcomePage.js => WelcomePage.jsx} (84%) create mode 100644 webserver/src/components/InputNumberField.jsx create mode 100644 webserver/src/components/Navigation/Toolbar/Toolbar copy.css rename webserver/src/{reportWebVitals.js => reportWebVitals.jsx} (100%) rename webserver/src/{setupTests.js => setupTests.jsx} (100%) diff --git a/webserver/package.json b/webserver/package.json index c0ceb9a..5976d8e 100644 --- a/webserver/package.json +++ b/webserver/package.json @@ -17,7 +17,10 @@ "react-router": "^6.2.1", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", - "web-vitals": "^2.1.3" + "web-vitals": "^2.1.3", + "@material-ui/core": "^4.12.3", + "@material-ui/icons": "^4.11.2" + }, "scripts": { "start": "react-scripts start", diff --git a/webserver/src/App.js b/webserver/src/App.jsx similarity index 66% rename from webserver/src/App.js rename to webserver/src/App.jsx index 2203370..cd1626d 100644 --- a/webserver/src/App.js +++ b/webserver/src/App.jsx @@ -16,10 +16,24 @@ import NotFoundPage from "./Pages/NotFoundPage"; import DashboardPage from "./Pages/DashboardPage/DashboardPage"; import WelcomePage from "./Pages/WelcomePage"; import InputPage from "./Pages/InputPage"; +import { createMuiTheme, ThemeProvider } from '@material-ui/core' +import { Formik, Field, Form } from 'formik'; +import { TextField, Button, Grid, FormRow, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment } from "@material-ui/core"; +import { AddCircleOutline, RemoveCircleOutline} from "@material-ui/icons"; + + function App() { + const darkTheme = createMuiTheme({ + + // Theme settings + palette: { + type: "dark", + }, + }); return (
+ @@ -32,6 +46,7 @@ function App() { +
); } diff --git a/webserver/src/DbContext.js b/webserver/src/DbContext.jsx similarity index 100% rename from webserver/src/DbContext.js rename to webserver/src/DbContext.jsx diff --git a/webserver/src/Pages/DashboardPage/DashboardPage.js b/webserver/src/Pages/DashboardPage/DashboardPage.jsx similarity index 100% rename from webserver/src/Pages/DashboardPage/DashboardPage.js rename to webserver/src/Pages/DashboardPage/DashboardPage.jsx diff --git a/webserver/src/Pages/InputPage.js b/webserver/src/Pages/InputPage.js deleted file mode 100644 index 0d74554..0000000 --- a/webserver/src/Pages/InputPage.js +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react' -import { useLocalDb } from '../DbContext'; -// import { Button, Intent, Spinner } from "@blueprintjs/core"; -import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer'; -import componentTypes from '@data-driven-forms/react-form-renderer/component-types'; -import componentMapper from '@data-driven-forms/blueprint-component-mapper/component-mapper'; -import FormTemplate from '@data-driven-forms/blueprint-component-mapper/form-template'; - -const schema = { - fields: [ - { - component: componentTypes.TEXT_FIELD, - name: 'name', - label: 'Your name', - isRequired: true, - // validate: [{type: validatorTypes.REQUIRED}], - default: 'Dave doe' - }, - { - name: "scoutedteam", - label: "Team Scouted", - component: componentTypes.TEXT_FIELD, - isRequired: true - }, - { - name: "shooterpoints", - label: "Shooter Points", - component: componentTypes.TEXT_FIELD, - isRequired: true - }, - { - name: "climberpoints", - label: "Climber Points", - component: componentTypes.TEXT_FIELD, - isRequired: true - }, - { - name: "amountclimbed", - label: "Amount of rungs Climbed", - component: componentTypes.TEXT_FIELD, - isRequired: true - }, - { - name: "amountshot", - label: "Amount of balls shot", - component: componentTypes.TEXT_FIELD, - isRequired: true - }, - { - name: "amountclimbed", - label: "Amount of balls in", - component: componentTypes.TEXT_FIELD, - isRequired: true - } - - ] -} - -const InputPage = () => { - const localdb = useLocalDb(); - console.log(localdb); - return ( -
- -
- ) -} - -export default InputPage \ No newline at end of file diff --git a/webserver/src/Pages/InputPage.jsx b/webserver/src/Pages/InputPage.jsx new file mode 100644 index 0000000..aedf4fa --- /dev/null +++ b/webserver/src/Pages/InputPage.jsx @@ -0,0 +1,363 @@ +import React from "react"; +import { useLocalDb } from "../DbContext"; +// import { Button, Intent, Spinner } from "@blueprintjs/core"; +import FormRenderer from "@data-driven-forms/react-form-renderer/form-renderer"; +import componentTypes from "@data-driven-forms/react-form-renderer/component-types"; +import componentMapper from "@data-driven-forms/blueprint-component-mapper/component-mapper"; +import FormTemplate from "@data-driven-forms/blueprint-component-mapper/form-template"; +import { Formik, Field, Form } from "formik"; +import InputNumberField from "../components/InputNumberField.jsx"; +import { + TextField, + Button, + Grid, + FormRow, + Checkbox, + Radio, + FormControlLabel, + FormControl, + FormLabel, + RadioGroup, + IconButton, + InputAdornment, +} from "@material-ui/core"; +import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons"; + +const InputPage = () => { + const localdb = useLocalDb(); + console.log(localdb); + return ( +
+ { + setTimeout(() => { + localdb + .put({ + _id: new Date().toISOString(), + ...values, + }) + .then((result) => { + alert("Input Saved Successfully!"); + console.log(result); + }) + .catch((err) => { + console.log("Failed To Save Input!"); + alert(err); + }); + // alert(JSON.stringify(values, null, 2)); + resetForm(); + setSubmitting(false); + }, 400); + }} + > + {({ + values, + setValues, + errors, + touched, + handleChange, + handleBlur, + handleSubmit, + isSubmitting, + }) => ( +
+ + + {" "} + {" "} + + + {" "} + {" "} + + + + Alliance + + + } + label="Red" + /> + + } + label="Blue" + /> + + + + +
+
+ + + + + + + + + + + + + {" "} + + + {" "} + {" "} + + + {" "} + {" "} + + {" "} + + +
+
+ + + + Climbing + + + } + label="None" + /> + + } + label="Low" + /> + + } + label="Mid" + /> + + } + label="High" + /> + + } + label="Traversal" + /> + + + + +
+
+ + + + {" "} + {" "} + + {" "} + {" "} + + + + {" "} + {" "} + + {" "} + + + {/* {" "} */} + {" "} + + +
+
+ + + {" "} + {" "} + + + {" "} + {" "} + + + {" "} + {" "} + + + +
+ + + + + )} + +
+ ); +}; + +export default InputPage; diff --git a/webserver/src/Pages/NotFoundPage.js b/webserver/src/Pages/NotFoundPage.jsx similarity index 100% rename from webserver/src/Pages/NotFoundPage.js rename to webserver/src/Pages/NotFoundPage.jsx diff --git a/webserver/src/Pages/WelcomePage.css b/webserver/src/Pages/WelcomePage.css index 1a25e1e..e2cbb0a 100644 --- a/webserver/src/Pages/WelcomePage.css +++ b/webserver/src/Pages/WelcomePage.css @@ -1,6 +1,12 @@ -.center { +.welcome { display: block; - margin-left: auto; - margin-right: auto; - width: 50%; - } \ No newline at end of file + /* margin-left: auto; + margin-right: auto; */ + width: 100%; + text-align: center; + margin: auto; +} + +.welcome img { + max-width: 100%; +} \ No newline at end of file diff --git a/webserver/src/Pages/WelcomePage.js b/webserver/src/Pages/WelcomePage.jsx similarity index 84% rename from webserver/src/Pages/WelcomePage.js rename to webserver/src/Pages/WelcomePage.jsx index 15c1dff..dacee5a 100644 --- a/webserver/src/Pages/WelcomePage.js +++ b/webserver/src/Pages/WelcomePage.jsx @@ -3,7 +3,7 @@ import "./WelcomePage.css"; import "../App.css"; const WelcomePage = () => { return ( -
+

Welcome to Ridgebotics Scouting Web Application 2022

diff --git a/webserver/src/components/InputNumberField.jsx b/webserver/src/components/InputNumberField.jsx new file mode 100644 index 0000000..5e4168b --- /dev/null +++ b/webserver/src/components/InputNumberField.jsx @@ -0,0 +1,61 @@ +import React from "react"; +import { Formik, Field, Form, useFormikContext } from "formik"; +import { + TextField, + Button, + Grid, + FormRow, + Checkbox, + Radio, + FormControlLabel, + FormControl, + FormLabel, + RadioGroup, + IconButton, + InputAdornment, +} from "@material-ui/core"; +import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons"; + +const InputNumberField = (props) => { + const { values, setValues } = useFormikContext(); + return ( + + { + setValues({ + ...values, + [props.name]: Math.max(parseInt(values[props.name]) - 1, 0), + }); + }} + > + + + + ), + endAdornment: ( + + { + setValues({ + ...values, + [props.name]: parseInt(values[props.name]) + 1, + }); + }} + > + + + + ), + }} + /> + ); +}; + +export default InputNumberField; diff --git a/webserver/src/components/Navigation/Drawer/SideDrawer.css b/webserver/src/components/Navigation/Drawer/SideDrawer.css index 089fb36..af22f4b 100644 --- a/webserver/src/components/Navigation/Drawer/SideDrawer.css +++ b/webserver/src/components/Navigation/Drawer/SideDrawer.css @@ -31,8 +31,11 @@ .side_drawer a { color: white; text-decoration: none; - font-size: 2rem; + font-size: 3rem; z-index: 1; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-right: 1000%; } .side_drawer a:hover, diff --git a/webserver/src/components/Navigation/PagesList.js b/webserver/src/components/Navigation/PagesList.js index 7901962..bd6ea7e 100644 --- a/webserver/src/components/Navigation/PagesList.js +++ b/webserver/src/components/Navigation/PagesList.js @@ -4,8 +4,8 @@ import { Link } from "react-router-dom"; const PagesList = props => { return (
    - - +
  • Dashboard
    • +
  • Input
) } diff --git a/webserver/src/components/Navigation/Toolbar/Toolbar copy.css b/webserver/src/components/Navigation/Toolbar/Toolbar copy.css new file mode 100644 index 0000000..4dd1e74 --- /dev/null +++ b/webserver/src/components/Navigation/Toolbar/Toolbar copy.css @@ -0,0 +1,58 @@ +.toolbar { + position: sticky; + top: 0px; + left: 0; + width: 100%; + background: #00a65a; + height: 56px +} + +.toolbar_navigation { + display: flex; + height: 100%; + align-items: center; + padding: 0 1rem; +} + +.toolbar_logo { + margin-left: 0.5rem; +} + +.toolbar_logo a { + color: white; + text-decoration: none; + font-size: 2.0rem; + height: 100%; +} + +.toolbar_spacer { + flex: 1; +} + +.toolbar_items ul { + list-style: none; + margin: 0; + padding: 0 0; + display: flex; +} + +.toolbar_items li { + padding: 0 0.6rem; +} + +.toolbar_items button { + color: white; + text-decoration: none; + font-size: 1.5rem; +} + +.toolbar_items a:hover, +.toolbar_items a:active { + color: #ff3b76; +} + +@media (max-width: 768px) { + .toolbar_items { + display: none; + } +} \ No newline at end of file diff --git a/webserver/src/components/Navigation/Toolbar/Toolbar.css b/webserver/src/components/Navigation/Toolbar/Toolbar.css index 3b1d4dc..9f7af80 100644 --- a/webserver/src/components/Navigation/Toolbar/Toolbar.css +++ b/webserver/src/components/Navigation/Toolbar/Toolbar.css @@ -22,7 +22,6 @@ color: white; text-decoration: none; font-size: 2.0rem; - height: 100%; } .toolbar_spacer { @@ -37,14 +36,19 @@ } .toolbar_items li { + color: white; + background-color: #00000000; + + text-decoration: none; + font-size: 1.5rem; padding: 0 0.6rem; } .toolbar_items a { color: white; text-decoration: none; - font-size: 1.5rem; - height: 200%; + padding-top: 0.8rem; + padding-bottom: 0.8rem; } .toolbar_items a:hover, diff --git a/webserver/src/reportWebVitals.js b/webserver/src/reportWebVitals.jsx similarity index 100% rename from webserver/src/reportWebVitals.js rename to webserver/src/reportWebVitals.jsx diff --git a/webserver/src/setupTests.js b/webserver/src/setupTests.jsx similarity index 100% rename from webserver/src/setupTests.js rename to webserver/src/setupTests.jsx