web client v0.8

src/components/Dialogs/AddToSet.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+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 IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+
+export default function AddToSet(props) {
+  const loginStyles = makeStyles((theme) => ({
+    root: {
+      textAlign: "center",
+      "& .MuiPaper-root": {
+        backgroundColor: "#262626",
+        color: "#bbbbbb",
+        minWidth: "360px",
+      },
+    },
+    closeButton: {
+      color: "#bbbbbb",
+      position: "absolute",
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+    },
+    set: {
+      width: "100%",
+    },
+  }));
+
+  const loginClass = loginStyles();
+
+  const Sets = props.lunchMenu.map((lunchSet) => {
+    return (
+      <ListItem
+        button
+        key={lunchSet.lunchSetName}
+        onClick={() => props.add(lunchSet.lunchSetName)}
+      >
+        <ListItemText primary={lunchSet.lunchSetName} />
+      </ListItem>
+    );
+  });
+
+  return (
+    <Dialog
+      className={loginClass.root}
+      onClose={props.cancel}
+      open={props.open}
+      aria-labelledby="login-title"
+    >
+      <DialogTitle id="login-title">Wybierz zestaw</DialogTitle>
+      <IconButton
+        className={loginClass.closeButton}
+        onClick={props.cancel}
+        aria-label="close"
+      >
+        <CloseIcon />
+      </IconButton>
+      <Divider />
+      <DialogContent>
+        <List className={loginClass.set}>{Sets}</List>
+      </DialogContent>
+    </Dialog>
+  );
+}