web client v0.2 (add restaurant OK, settings OK)

2020-09-19 18:16:26 +02:00
parent 732ad74657
commit 68ecf13aa1
16 changed files with 546 additions and 86 deletions
--- a/src/components/Dialogs/Settings.js
+++ b/src/components/Dialogs/Settings.js
@@ -0,0 +1,153 @@
+import React, { useState } from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import Dialog from "@material-ui/core/Dialog";
+import Divider from "@material-ui/core/Divider";
+import { makeStyles } from "@material-ui/core/styles";
+import ButtonSecondary from "../Input/ButtonSecondary";
+import ButtonPrimary from "../Input/ButtonPrimary";
+import IconButton from "@material-ui/core/IconButton";
+import TextField from "@material-ui/core/TextField";
+import CloseIcon from "@material-ui/icons/Close";
+import { useSelector } from "react-redux";
+import { useHistory } from "react-router-dom";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    textAlign: "center",
+    "& .MuiPaper-root": {
+      minWidth: "30%",
+      backgroundColor: "#262626",
+      color: "#bbbbbb",
+    },
+  },
+  closeButton: {
+    color: "#bbbbbb",
+    position: "absolute",
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+  },
+  textInput: {
+    margin: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  textInputFullWidth: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiFormHelperText-root": {
+      color: "#bbbbbb",
+    },
+  },
+  timePicker: {
+    margin: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  stepLabel: {
+    "& .MuiStepLabel-label": {
+      color: "#bbbbbb",
+    },
+    "& .MuiStepLabel-active": {
+      color: "#bbbbbb",
+    },
+  },
+}));
+
+export default function Settings() {
+  const history = useHistory();
+  const style = useStyles();
+  const data = useSelector((state) => state.data.userData);
+  const initialState = {
+    firstname: data.firstname,
+    lastname: data.lastname,
+    email: data.userEmail,
+    NIP: data.billing.NIP,
+    adress: data.billing.adress,
+    companyName: data.billing.companyName,
+  };
+  const [state, setState] = useState(initialState);
+  return (
+    <Dialog aria-labelledby="settings-title" className={style.root} open={true}>
+      <DialogTitle id="settings-title">Ustawienia konta</DialogTitle>
+      <IconButton
+        className={style.closeButton}
+        onClick={() => {}}
+        aria-label="close"
+      >
+        <CloseIcon />
+      </IconButton>
+      <Divider />
+      <DialogContent>
+        <TextField
+          className={style.textInput}
+          value={state.firstname}
+          onChange={(event) =>
+            setState({ ...state, firstname: event.target.value })
+          }
+          label="Imię"
+          variant="outlined"
+        />
+        <TextField
+          className={style.textInput}
+          value={state.lastname}
+          onChange={(event) =>
+            setState({ ...state, lastname: event.target.value })
+          }
+          label="Nazwisko"
+          variant="outlined"
+        />
+        <TextField
+          className={style.textInput}
+          value={state.email}
+          onChange={(event) =>
+            setState({ ...state, email: event.target.value })
+          }
+          label="Email"
+          variant="outlined"
+        />
+        <TextField
+          className={style.textInput}
+          value={state.companyName}
+          onChange={(event) =>
+            setState({ ...state, companyName: event.target.value })
+          }
+          label="Nazwa firmy"
+          variant="outlined"
+        />
+        <TextField
+          className={style.textInput}
+          value={state.NIP}
+          onChange={(event) => setState({ ...state, NIP: event.target.value })}
+          label="NIP"
+          variant="outlined"
+        />
+        <TextField
+          className={style.textInput}
+          value={state.adress}
+          onChange={(event) =>
+            setState({ ...state, adress: event.target.value })
+          }
+          label="Adres firmy"
+          variant="outlined"
+        />
+        <ButtonPrimary onClick={() => history.push("/")} text="Anuluj" />
+        <ButtonSecondary text="Zapisz" />
+      </DialogContent>
+    </Dialog>
+  );
+}