web client changfed

package-lock.json

@@ -9094,9 +9094,9 @@
       }
     },
     "node-forge": {
-      "version": "0.9.0",
+      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ=="
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
     },
     "node-gyp": {
       "version": "3.8.0",
@@ -12177,11 +12177,11 @@
       "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
     },
     "selfsigned": {
-      "version": "1.10.7",
+      "version": "1.10.8",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
       "requires": {
-        "node-forge": "0.9.0"
+        "node-forge": "^0.10.0"
       }
     },
     "semver": {

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,
+    vegan,
-    //vegetarian,
+    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>
   );

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>

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>
     );
   }

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>;
+}

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ź";
+  }
+}

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} />
-)} */

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>
   );
 }

src/components/Output/WorkingHours.js

@@ -7,48 +7,26 @@ export default function WorkingHours(props) {
       {hours && (
         <div>
           <h5>Godziny otwarcia</h5>
-          <p>
+          <div className="hours">
-            Pn:{" "}
+            <div className="hours-left">
-            <span className="restaurant-span">
+              <p>Pn:</p>
-              {hours.pn ? hours.pn : "Nieczynne"}
+              <p>Wt:</p>
-            </span>
+              <p>Śr:</p>
-          </p>
+              <p>Czw:</p>
-          <p>
+              <p>Pt:</p>
-            Wt:{" "}
+              <p>Sb:</p>
-            <span className="restaurant-span">
+              <p>Nd:</p>
-              {hours.wt ? hours.wt : "Nieczynne"}
+            </div>
-            </span>
+            <div className="hours-right">
-          </p>
+              <p>{hours.pn ? hours.pn : "Nieczynne"}</p>
-          <p>
+              <p>{hours.wt ? hours.wt : "Nieczynne"}</p>
-            Śr:{" "}
+              <p>{hours.sr ? hours.sr : "Nieczynne"}</p>
-            <span className="restaurant-span">
+              <p>{hours.cz ? hours.cz : "Nieczynne"}</p>
-              {hours.sr ? hours.sr : "Nieczynne"}
+              <p>{hours.pt ? hours.pt : "Nieczynne"}</p>
-            </span>
+              <p>{hours.sb ? hours.sb : "Nieczynne"}</p>
-          </p>
+              <p>{hours.nd ? hours.nd : "Nieczynne"}</p>
-          <p>
+            </div>
-            Czw:{" "}
+          </div>
-            <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>
       )}
     </div>

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>

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-top: 4px;
-    margin-right: 1rem;
   }
 }

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;
+  }
+}