web client v0.4 (edit restaurant info)

src/components/Dialogs/EditRestaurant.js

@@ -14,6 +14,13 @@ import RestaurantMenuIcon from "@material-ui/icons/RestaurantMenu";
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import AddIcon from "@material-ui/icons/Add";
 import Badge from "@material-ui/core/Badge";
+//--------------
+import EditRestaurantInfo from "../EditRestaurant/EditRestaurantInfo";
+import EditRestaurantLocation from "../EditRestaurant/EditRestaurantLocation";
+import EditRestaurantLunch from "../EditRestaurant/EditRestaurantLunch";
+import EditRestaurantMenu from "../EditRestaurant/EditRestaurantMenu";
+import EditRestaurantPhoto from "../EditRestaurant/EditRestaurantPhoto";
+import EditRestaurantSubscription from "../EditRestaurant/EditRestaurantSubscription";
 
 const useStyles = makeStyles((theme) => ({
   main: {
@@ -31,7 +38,7 @@ const useStyles = makeStyles((theme) => ({
   },
   secondary: {
     "& .MuiListItemText-secondary": {
-      color: "#7b7b7b",
+      color: "#868686",
       fontSize: "13px",
     },
   },
@@ -103,6 +110,7 @@ export default function EditRestaurant(props) {
               </Badge>
             </ListItemIcon>
             <ListItemText
+              className={classes.secondary}
               primary="Subskrypcja"
               secondary={badgeData.secondaryText}
             />
@@ -156,36 +164,12 @@ export default function EditRestaurant(props) {
         </List>
         <Divider />
       </div>
-      {tab === 0 && (
-        <div className="editRestaurant-tab">
-          <p>Informacje</p>
-        </div>
-      )}
-      {tab === 1 && (
-        <div className="editRestaurant-tab">
-          <p>Subskrypcja</p>
-        </div>
-      )}
-      {tab === 2 && (
-        <div className="editRestaurant-tab">
-          <p>Zdjęcie</p>
-        </div>
-      )}
-      {tab === 3 && (
-        <div className="editRestaurant-tab">
-          <p>Lokalizacja</p>
-        </div>
-      )}
-      {tab === 4 && (
-        <div className="editRestaurant-tab">
-          <p>Menu</p>
-        </div>
-      )}
-      {tab === 5 && (
-        <div className="editRestaurant-tab">
-          <p>Lunch menu</p>
-        </div>
-      )}
+      {tab === 0 && <EditRestaurantInfo restaurant={restaurant} />}
+      {tab === 1 && <EditRestaurantSubscription restaurant={restaurant} />}
+      {tab === 2 && <EditRestaurantPhoto restaurant={restaurant} />}
+      {tab === 3 && <EditRestaurantLocation restaurant={restaurant} />}
+      {tab === 4 && <EditRestaurantMenu restaurant={restaurant} />}
+      {tab === 5 && <EditRestaurantLunch restaurant={restaurant} />}
     </div>
   );
 }

src/components/Dialogs/NewRestaurant.js

@@ -22,6 +22,7 @@ import InfoDialog from "../Output/InfoDialog";
 import { prepareTags } from "../../Services.js";
 import axios from "axios";
 import { useSelector } from "react-redux";
+import InputWorkingHours from "../Input/InputWorkingHours";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
@@ -35,9 +36,11 @@ import ButtonPrimary from "../Input/ButtonPrimary";
 
 const useStyles = makeStyles((theme) => ({
   root: {
+    margin: "auto",
     textAlign: "center",
+    maxHeight: "700px",
     "& .MuiPaper-root": {
-      minWidth: "30%",
+      width: "auto",
       backgroundColor: "#262626",
       color: "#bbbbbb",
     },
@@ -70,15 +73,6 @@ const useStyles = makeStyles((theme) => ({
       color: "#bbbbbb",
     },
   },
-  timePicker: {
-    margin: theme.spacing(2),
-    "& .MuiInputBase-root": {
-      color: "#bbbbbb",
-    },
-    "& .MuiInputLabel-root": {
-      color: "#bbbbbb",
-    },
-  },
   stepLabel: {
     "& .MuiStepLabel-label": {
       color: "#bbbbbb",
@@ -97,14 +91,23 @@ export default function NewRestaurant() {
     coordinates: [52.354293, 19.42377],
     placesId: "",
     imgURL: "",
-    hoursFrom: "07:00",
-    hoursTo: "23:00",
+    workingHours: {
+      pn: "8:00 - 22:00",
+      wt: "8:00 - 22:00",
+      sr: "8:00 - 22:00",
+      cz: "8:00 - 22:00",
+      pt: "8:00 - 22:00",
+      sb: "8:00 - 22:00",
+      nd: "8:00 - 22:00",
+    },
     description: "",
     tags: [],
     phone: "",
-    facebook: "",
-    instagram: "",
-    www: "",
+    links: {
+      facebook: "",
+      instagram: "",
+      www: "",
+    },
     nameError: false,
     cityError: false,
     adressError: false,
@@ -141,12 +144,10 @@ export default function NewRestaurant() {
       coordinates: state.coordinates,
       placesId: state.placesId,
       imgURL: state.imgURL,
-      workingHours: `${state.hoursFrom} - ${state.hoursTo}`,
+      workingHours: state.workingHours,
       description: state.description,
       tags: formattedTags,
-      facebook: state.facebook,
-      instagram: state.instagram,
-      www: state.www,
+      links: state.links,
       phone: state.phone,
       hidden: false,
     };
@@ -345,37 +346,11 @@ export default function NewRestaurant() {
                     ),
                   }}
                 />
-                <TextField
-                  label="Otwarcie"
-                  type="time"
-                  onChange={(event) =>
-                    setState({ ...state, hoursFrom: event.target.value })
+                <InputWorkingHours
+                  hours={state.workingHours}
+                  setHours={(hours) =>
+                    setState({ ...state, workingHours: hours })
                   }
-                  variant="outlined"
-                  value={state.hoursFrom}
-                  className={styles.timePicker}
-                  InputLabelProps={{
-                    shrink: true,
-                  }}
-                  inputProps={{
-                    step: 300, // 5 min
-                  }}
-                />
-                <TextField
-                  label="Zamknięcie"
-                  type="time"
-                  onChange={(event) =>
-                    setState({ ...state, hoursTo: event.target.value })
-                  }
-                  variant="outlined"
-                  value={state.hoursTo}
-                  className={styles.timePicker}
-                  InputLabelProps={{
-                    shrink: true,
-                  }}
-                  inputProps={{
-                    step: 300, // 5 min
-                  }}
                 />
                 <div className="newRestaurant-content-fullwidth">
                   <TextField
@@ -434,9 +409,12 @@ export default function NewRestaurant() {
                   className={styles.textInput}
                   label="Facebook"
                   variant="outlined"
-                  value={state.facebook}
+                  value={state.links.facebook}
                   onChange={(event) =>
-                    setState({ ...state, facebook: event.target.value })
+                    setState({
+                      ...state,
+                      links: { ...state.links, facebook: event.target.value },
+                    })
                   }
                   InputProps={{
                     startAdornment: (
@@ -450,9 +428,12 @@ export default function NewRestaurant() {
                   className={styles.textInput}
                   label="Instagram"
                   variant="outlined"
-                  value={state.instagram}
+                  value={state.links.instagram}
                   onChange={(event) =>
-                    setState({ ...state, instagram: event.target.value })
+                    setState({
+                      ...state,
+                      links: { ...state.links, instagram: event.target.value },
+                    })
                   }
                   InputProps={{
                     startAdornment: (
@@ -466,9 +447,12 @@ export default function NewRestaurant() {
                   className={styles.textInput}
                   label="www"
                   variant="outlined"
-                  value={state.www}
+                  value={state.links.www}
                   onChange={(event) =>
-                    setState({ ...state, www: event.target.value })
+                    setState({
+                      ...state,
+                      links: { ...state.links, www: event.target.value },
+                    })
                   }
                   InputProps={{
                     startAdornment: (
@@ -505,13 +489,15 @@ export default function NewRestaurant() {
               />
             </Paper>
           )}
-          {activeStep !== 0 && (
-            <ButtonPrimary onClick={handlePreviousButton} text="Cofnij" />
-          )}
-          <ButtonSecondary
-            onClick={handleNextButton}
-            text={activeStep === 2 ? "Dodaj lokal" : "Dalej"}
-          />
+          <div className="newRestaurant-bottom">
+            {activeStep !== 0 && (
+              <ButtonPrimary onClick={handlePreviousButton} text="Cofnij" />
+            )}
+            <ButtonSecondary
+              onClick={handleNextButton}
+              text={activeStep === 2 ? "Dodaj lokal" : "Dalej"}
+            />
+          </div>
         </DialogContent>
       </Dialog>
     </div>