web client changfed

2020-10-06 22:03:53 +02:00
parent 06728d32f1
commit becf66a5fa
12 changed files with 202 additions and 92 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -9094,9 +9094,9 @@
      }
    },
    "node-forge": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ=="
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
    },
    "node-gyp": {
      "version": "3.8.0",
@@ -12177,11 +12177,11 @@
      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
    },
    "selfsigned": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
      "requires": {
-        "node-forge": "0.9.0"
+        "node-forge": "^0.10.0"
      }
    },
    "semver": {
--- a/src/components/Output/CardDish.js
+++ b/src/components/Output/CardDish.js
@@ -1,21 +1,27 @@
 import React from "react";
 import Pictograms from "./Pictograms";
 import { extractTags } from "../../Services";
+import { useHistory } from "react-router-dom";
+import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";

 export default function CardDish(props) {
+  const history = useHistory();
  const {
    name,
    price,
    imgUrl,
-    //notes,
    weight,
-    //vegan,
-    //vegetarian,
+    vegan,
+    vegetarian,
    allergens,
+    _id,
  } = props.dish;

  return (
-    <div className="carddish-container">
+    <div
+      className="carddish-container"
+      onClick={() => history.push(`/dish/${_id}`)}
+    >
      <div className="carddish-left">
        <div
          className="carddish-img"
@@ -25,12 +31,17 @@ export default function CardDish(props) {
          <div className="carddish-left-upper">
            <h2>{name}</h2>
            <p>Porcja: {weight}</p>
+            <p>
+              {vegan && "Danie wegańskie  "}
+              {vegetarian && "Danie wegetariańskie"}
+            </p>
          </div>
          <Pictograms pictograms={extractTags(allergens)} />
        </div>
      </div>
      <div className="carddish-right">
-        <h5>{price} zł</h5>
+        <h5>{!props.hidePrice && `${price} zł`}</h5>
+        <KeyboardArrowRightIcon color="primary" />
      </div>
    </div>
  );
--- a/src/components/Output/DishesCategory.js
+++ b/src/components/Output/DishesCategory.js
@@ -23,7 +23,7 @@ export default function DishesCategory(props) {
  const dishCards = dishes.map((dish) => {
    return (
      <ListItem key={dish._id}>
-        <CardDish dish={dish}></CardDish>
+        <CardDish hidePrice={props.hidePrice} dish={dish}></CardDish>
      </ListItem>
    );
  });
@@ -33,7 +33,9 @@ export default function DishesCategory(props) {
      <AccordionSummary
        expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
      >
-        <h4>{props.name}</h4>
+        <h4>
+          {props.name} <span>{props.price && `(${props.price}zł)`}</span>
+        </h4>
      </AccordionSummary>
      <List>{dishCards}</List>
    </Accordion>
--- a/src/components/Output/Footer.js
+++ b/src/components/Output/Footer.js
@@ -4,7 +4,7 @@ export default class Footer extends React.Component {
  render() {
    return (
      <div className="footer">
-        <p>Bankai Software 2020</p>
+        <p>Bankai Software 2020 (wersja testowa aplikacji)</p>
      </div>
    );
  }
--- a/src/components/Output/LunchMenu.js
+++ b/src/components/Output/LunchMenu.js
@@ -0,0 +1,32 @@
+import React from "react";
+import DishesCategory from "./DishesCategory";
+import { useSelector } from "react-redux";
+
+export default function LunchMenu(props) {
+  const dishlist = useSelector((state) => state.dishes);
+  const { restaurant } = props;
+  const lunchMenu = restaurant.lunchMenu;
+  function filterDishes(dishes, set) {
+    var result = [];
+    dishes.map((dish) => {
+      if (set.lunchSetDishes.includes(dish._id)) {
+        result.push(dish);
+      }
+      return true;
+    });
+    return result;
+  }
+  const sets = lunchMenu.map((set) => {
+    return (
+      <DishesCategory
+        key={set.lunchSetName}
+        name={set.lunchSetName}
+        price={set.lunchSetPrice}
+        hidePrice={true}
+        dishes={filterDishes(dishlist, set)}
+      />
+    );
+  });
+
+  return <div className="dishlist-container">{sets}</div>;
+}
--- a/src/components/Output/Pictograms.js
+++ b/src/components/Output/Pictograms.js
@@ -1,4 +1,5 @@
 import React from "react";
+import Tooltip from "@material-ui/core/Tooltip";
 // ICONS
 import alcohol from "../../public/i_alcohol.svg";
 import card from "../../public/i_card.svg";
@@ -18,12 +19,14 @@ import vegetarian from "../../public/i_vegetarian.svg";

 export default function (props) {
  const pictograms = props.pictograms.map((pictogram, index) => (
+    <Tooltip title={getTooltip(pictogram)}>
      <img
        key={index}
        className="pictogram"
        src={getImage(pictogram)}
        alt={pictogram}
      />
+    </Tooltip>
  ));

  return <div className="pictograms-container">{pictograms}</div>;
@@ -65,3 +68,40 @@ function getImage(name) {
      return card;
  }
 }
+
+function getTooltip(name) {
+  switch (name) {
+    case "alcohol":
+      return "Serwujemy alkohol";
+    case "cardPayments":
+      return "Zapłacisz kartą";
+    case "delivery":
+      return "Dowozimy";
+    case "eggs":
+      return "Jaja";
+    case "gluten":
+      return "Gluten";
+    case "glutenFree":
+      return "Bezglutenowe";
+    case "lactose":
+      return "Laktoza";
+    case "lactoseFree":
+      return "Bez laktozy";
+    case "peanuts":
+      return "Orzechy";
+    case "petFriendly":
+      return "Lubimy zwierzęta";
+    case "seaFood":
+      return "Owoce morza";
+    case "sesame":
+      return "Sezam";
+    case "soy":
+      return "Soja";
+    case "vegan":
+      return "Wegańskie";
+    case "vegetarian":
+      return "Wegetariańskie";
+    default:
+      return "Podpowiedź";
+  }
+}
--- a/src/components/Output/Restaurant.js
+++ b/src/components/Output/Restaurant.js
@@ -8,6 +8,8 @@ import { useSelector, useDispatch } from "react-redux";
 import { fetchRestaurant } from "../../actions";
 import GoogleMapStatic from "./GoogleMapStatic";
 import WorkingHours from "./WorkingHours";
+import Social from "./Social";
+import LunchMenu from "./LunchMenu";

 export default function Restaurant(props) {
  const restaurant = useSelector((state) => state.restaurant);
@@ -51,6 +53,13 @@ export default function Restaurant(props) {
              <span className="restaurant-span">{restaurant.phone}</span>
            </p>
          )}
+          {restaurant.links && (
+            <Social
+              facebook={restaurant.links.facebook}
+              instagram={restaurant.links.instagram}
+              www={restaurant.links.www}
+            />
+          )}
          <WorkingHours hours={restaurant.workingHours} />
          <hr />
          <h5>Lokalizacja</h5>
@@ -61,6 +70,11 @@ export default function Restaurant(props) {
      </div>
      <div className="restaurant-content">
        <div className="restaurant-dishes">
+          {restaurant.lunchHours && (
+            <h3>Lunch menu ({restaurant.lunchHours})</h3>
+          )}
+          {showDishList === false && <CircularProgress />}
+          {showDishList === true && <LunchMenu restaurant={restaurant} />}
          <h3>Menu</h3>
          {showDishList === false && <CircularProgress />}
          {showDishList === true && <DishList />}
@@ -69,9 +83,3 @@ export default function Restaurant(props) {
    </div>
  );
 }
-
-//
-
-/* {restaurant.location !== undefined && (
-  <GoogleMapStatic coordinates={restaurant.location.coordinates} />
-)} */
--- a/src/components/Output/Social.js
+++ b/src/components/Output/Social.js
@@ -3,29 +3,41 @@ import FacebookIcon from "@material-ui/icons/Facebook";
 import TwitterIcon from "@material-ui/icons/Twitter";
 import InstagramIcon from "@material-ui/icons/Instagram";
 import IconButton from "@material-ui/core/IconButton";
+import LanguageIcon from "@material-ui/icons/Language";
 import { openInNewTab } from "../../Services.js";

 export default function Social(props) {
  return (
    <div className="social-container">
+      {props.facebook && (
        <IconButton
-        onClick={() => openInNewTab("https://www.facebook.com")}
+          onClick={() => openInNewTab(props.facebook)}
          color="secondary"
        >
          <FacebookIcon />
        </IconButton>
+      )}
+      {props.twitter && (
        <IconButton
-        onClick={() => openInNewTab("https://twitter.com/menuifood")}
+          onClick={() => openInNewTab(props.twitter)}
          color="secondary"
        >
          <TwitterIcon />
        </IconButton>
+      )}
+      {props.instagram && (
        <IconButton
-        onClick={() => openInNewTab("https://www.instagram.com")}
+          onClick={() => openInNewTab(props.instagram)}
          color="secondary"
        >
          <InstagramIcon />
        </IconButton>
+      )}
+      {props.www && (
+        <IconButton onClick={() => openInNewTab(props.www)} color="secondary">
+          <LanguageIcon />
+        </IconButton>
+      )}
    </div>
  );
 }
--- a/src/components/Output/WorkingHours.js
+++ b/src/components/Output/WorkingHours.js
@@ -7,48 +7,26 @@ export default function WorkingHours(props) {
      {hours && (
        <div>
          <h5>Godziny otwarcia</h5>
-          <p>
-            Pn:{" "}
-            <span className="restaurant-span">
-              {hours.pn ? hours.pn : "Nieczynne"}
-            </span>
-          </p>
-          <p>
-            Wt:{" "}
-            <span className="restaurant-span">
-              {hours.wt ? hours.wt : "Nieczynne"}
-            </span>
-          </p>
-          <p>
-            Śr:{" "}
-            <span className="restaurant-span">
-              {hours.sr ? hours.sr : "Nieczynne"}
-            </span>
-          </p>
-          <p>
-            Czw:{" "}
-            <span className="restaurant-span">
-              {hours.cz ? hours.cz : "Nieczynne"}
-            </span>
-          </p>
-          <p>
-            Pt:{" "}
-            <span className="restaurant-span">
-              {hours.pt ? hours.pt : "Nieczynne"}
-            </span>
-          </p>
-          <p>
-            So:{" "}
-            <span className="restaurant-span">
-              {hours.sb ? hours.sb : "Nieczynne"}
-            </span>
-          </p>
-          <p>
-            Nie:{" "}
-            <span className="restaurant-span">
-              {hours.nd ? hours.nd : "Nieczynne"}
-            </span>
-          </p>
+          <div className="hours">
+            <div className="hours-left">
+              <p>Pn:</p>
+              <p>Wt:</p>
+              <p>Śr:</p>
+              <p>Czw:</p>
+              <p>Pt:</p>
+              <p>Sb:</p>
+              <p>Nd:</p>
+            </div>
+            <div className="hours-right">
+              <p>{hours.pn ? hours.pn : "Nieczynne"}</p>
+              <p>{hours.wt ? hours.wt : "Nieczynne"}</p>
+              <p>{hours.sr ? hours.sr : "Nieczynne"}</p>
+              <p>{hours.cz ? hours.cz : "Nieczynne"}</p>
+              <p>{hours.pt ? hours.pt : "Nieczynne"}</p>
+              <p>{hours.sb ? hours.sb : "Nieczynne"}</p>
+              <p>{hours.nd ? hours.nd : "Nieczynne"}</p>
+            </div>
+          </div>
        </div>
      )}
    </div>
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -95,7 +95,7 @@ export default function TopBar() {
          onClick={() => history.push("/")}
        />
        <div className="vertical-divider"></div>
-        <h5>Food guide</h5>
+        <h5>Food guide (wersja testowa)</h5>
      </div>
      <div className="topBar-hamburger">
        {loggedIn && (
@@ -167,7 +167,11 @@ export default function TopBar() {
              />
            )}
          </div>
-          <Social />
+          <Social
+            facebook="https://www.facebook.com"
+            instagram="https://www.instagram.com"
+            twitter="https://twitter.com/menuifood"
+          />
        </div>
      </Drawer>
    </div>
--- a/src/styles/DishList.scss
+++ b/src/styles/DishList.scss
@@ -54,10 +54,14 @@ h4 {
 }

 .carddish-right {
+  display: flex;
+  flex-direction: column;
+  margin-right: 1rem;
+  align-items: flex-end;
+  justify-content: space-between;
  h5 {
    font-weight: 500;
    font-size: 1rem;
-    margin-top: 1rem;
-    margin-right: 1rem;
+    margin-top: 4px;
  }
 }
--- a/src/styles/Restaurant.scss
+++ b/src/styles/Restaurant.scss
@@ -52,7 +52,7 @@
 .restaurant-dishes {
  min-width: 80%;
  h3 {
-    font-size: 1.2rem;
+    font-size: 1rem;
    font-weight: 400;
  }
 }
@@ -88,3 +88,22 @@
  font-weight: 400;
  color: $gray;
 }
+
+.hours {
+  display: flex;
+}
+
+.hours-left {
+  margin-left: auto;
+  text-align: right;
+}
+
+.hours-right {
+  text-align: left;
+
+  margin-right: auto;
+  p {
+    font-weight: 400;
+    color: $gray;
+  }
+}