Analytics added / NewRestaurant.js added

src/components/Output/CardDish.js

@@ -0,0 +1,35 @@
+import React from "react";
+import Pictograms from "./Pictograms";
+import { extractTags } from "../../Services";
+
+export default function CardDish(props) {
+  const {
+    name,
+    price,
+    imgUrl,
+    //notes,
+    weight,
+    //vegan,
+    //vegetarian,
+    allergens,
+  } = props.dish;
+
+  return (
+    <div className="carddish-container">
+      <div className="carddish-left">
+        <div
+          className="carddish-img"
+          style={{ backgroundImage: "url(" + imgUrl + ")" }}
+        />
+        <div className="carddish-left-info">
+          <h2>{name}</h2>
+          <p>{weight}</p>
+          <Pictograms pictograms={extractTags(allergens)} />
+        </div>
+      </div>
+      <div className="carddish-right">
+        <h5>{price} zł</h5>
+      </div>
+    </div>
+  );
+}

src/components/Output/CardRestaurant.js

@@ -0,0 +1,45 @@
+import React from "react";
+import Pictograms from "./Pictograms";
+import { fetchRestaurant } from "../../actions";
+import { useDispatch } from "react-redux";
+
+function extractTags(tags) {
+  var results = [];
+  for (let [key, value] of Object.entries(tags)) {
+    if (value === true) {
+      results.push(key);
+    }
+  }
+  return results;
+}
+
+export default function CardRestaurant(props) {
+  const dispatch = useDispatch();
+  const img = props.imgUrl;
+
+  return (
+    <div
+      onClick={() => dispatch(fetchRestaurant(props.id))}
+      className="card-restaurant"
+    >
+      <div
+        className="card-img"
+        style={{ backgroundImage: "url(" + img + ")" }}
+      ></div>
+      <div className="card-info">
+        <div className="title-info">
+          <h1>{props.name}</h1>
+          <hr />
+          <h3>Miasto: {props.city}</h3>
+          <h3>Otwarte: {props.hours}</h3>
+        </div>
+        <div className="card-description">
+          <p>{props.description}</p>
+        </div>
+        <div className="card-pictograms">
+          <Pictograms pictograms={extractTags(props.tags)} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Output/DishList.js

@@ -0,0 +1,40 @@
+import React from "react";
+import DishesCategory from "./DishesCategory";
+import { useSelector } from "react-redux";
+
+function extractCategories(dishes) {
+  var categories = new Set();
+
+  if (typeof dishes !== "undefined" && dishes.length > 0) {
+    dishes.map((dish) => categories.add(dish.category));
+    return Array.from(categories);
+  }
+}
+
+function filterDishes(dishes, category) {
+  var result = [];
+
+  dishes.map((dish) => {
+    if (dish.category === category) {
+      result.push(dish);
+    }
+    return true;
+  });
+  return result;
+}
+
+export default function DishList(props) {
+  const dishlist = useSelector((state) => state.dishes);
+  const categoriesArray = extractCategories(dishlist);
+  const categories = categoriesArray.map((category) => {
+    return (
+      <DishesCategory
+        key={category}
+        name={category}
+        dishes={filterDishes(dishlist, category)}
+      />
+    );
+  });
+
+  return <div className="dishlist-container">{categories}</div>;
+}

src/components/Output/DishesCategory.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import CardDish from "./CardDish";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: "#262626",
+    color: "#bbbbbb",
+  },
+  expandIcon: {
+    color: "#bbbbbb",
+  },
+}));
+
+export default function DishesCategory(props) {
+  const classes = useStyles();
+  const dishes = props.dishes;
+  const dishCards = dishes.map((dish) => {
+    return (
+      <ListItem key={dish._id}>
+        <CardDish dish={dish}></CardDish>
+      </ListItem>
+    );
+  });
+
+  return (
+    <Accordion className={classes.root}>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+      >
+        <h4>{props.name}</h4>
+      </AccordionSummary>
+      <List>{dishCards}</List>
+    </Accordion>
+  );
+}

src/components/Output/Footer.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default class Footer extends React.Component {
+  render() {
+    return (
+      <div className="footer">
+        <p>Bankai Software 2020</p>
+      </div>
+    );
+  }
+}

src/components/Output/Pictograms.js

@@ -0,0 +1,67 @@
+import React from "react";
+// ICONS
+import alcohol from "../../public/i_alcohol.svg";
+import card from "../../public/i_card.svg";
+import delivery from "../../public/i_delivery.svg";
+import eggs from "../../public/i_eggs.svg";
+import gluten from "../../public/i_gluten.svg";
+import glutenFree from "../../public/i_glutenFree.svg";
+import lactose from "../../public/i_lactose.svg";
+import lactoseFree from "../../public/i_lactoseFree.svg";
+import peanuts from "../../public/i_peanuts.svg";
+import pets from "../../public/i_pets.svg";
+import seaFood from "../../public/i_seaFood.svg";
+import sesame from "../../public/i_sesame.svg";
+import soy from "../../public/i_soy.svg";
+import vegan from "../../public/i_vegan.svg";
+import vegetarian from "../../public/i_vegetarian.svg";
+
+export default function (props) {
+  const pictograms = props.pictograms.map((pictogram, index) => (
+    <img
+      key={index}
+      className="pictogram"
+      src={getImage(pictogram)}
+      alt={pictogram}
+    />
+  ));
+
+  return <div className="pictograms-container">{pictograms}</div>;
+}
+
+function getImage(name) {
+  switch (name) {
+    case "alcohol":
+      return alcohol;
+    case "cardPayments":
+      return card;
+    case "delivery":
+      return delivery;
+    case "eggs":
+      return eggs;
+    case "gluten":
+      return gluten;
+    case "glutenFree":
+      return glutenFree;
+    case "lactose":
+      return lactose;
+    case "lactoseFree":
+      return lactoseFree;
+    case "peanuts":
+      return peanuts;
+    case "petFriendly":
+      return pets;
+    case "seaFood":
+      return seaFood;
+    case "sesame":
+      return sesame;
+    case "soy":
+      return soy;
+    case "vegan":
+      return vegan;
+    case "vegetarian":
+      return vegetarian;
+    default:
+      return card;
+  }
+}

src/components/Output/PictogramsSeparate.js

@@ -0,0 +1,104 @@
+import React from "react";
+// ICONS
+import alcohol from "../../public/i_alcohol.svg";
+import card from "../../public/i_card.svg";
+import delivery from "../../public/i_delivery.svg";
+import eggs from "../../public/i_eggs.svg";
+import gluten from "../../public/i_gluten.svg";
+import glutenFree from "../../public/i_glutenFree.svg";
+import lactose from "../../public/i_lactose.svg";
+import lactoseFree from "../../public/i_lactoseFree.svg";
+import peanuts from "../../public/i_peanuts.svg";
+import pets from "../../public/i_pets.svg";
+import seaFood from "../../public/i_seaFood.svg";
+import sesame from "../../public/i_sesame.svg";
+import soy from "../../public/i_soy.svg";
+import vegan from "../../public/i_vegan.svg";
+import vegetarian from "../../public/i_vegetarian.svg";
+
+export default function (props) {
+  const pictogramsSeparated = props.pictograms.map((pictogram, index) => (
+    <div key={index} className="separate-pictogram">
+      <h4>{getName(pictogram)}</h4>
+      <img className="pictogram" src={getImage(pictogram)} alt={pictogram} />
+    </div>
+  ));
+
+  return (
+    <div className="pictograms-container-separated">{pictogramsSeparated}</div>
+  );
+}
+
+function getImage(name) {
+  switch (name) {
+    case "alcohol":
+      return alcohol;
+    case "cardPayments":
+      return card;
+    case "delivery":
+      return delivery;
+    case "eggs":
+      return eggs;
+    case "gluten":
+      return gluten;
+    case "glutenFree":
+      return glutenFree;
+    case "lactose":
+      return lactose;
+    case "lactoseFree":
+      return lactoseFree;
+    case "peanuts":
+      return peanuts;
+    case "petFriendly":
+      return pets;
+    case "seaFood":
+      return seaFood;
+    case "sesame":
+      return sesame;
+    case "soy":
+      return soy;
+    case "vegan":
+      return vegan;
+    case "vegetarian":
+      return vegetarian;
+    default:
+      return card;
+  }
+}
+
+function getName(name) {
+  switch (name) {
+    case "alcohol":
+      return "Alkohol";
+    case "cardPayments":
+      return "Płatność kartą";
+    case "delivery":
+      return "Dostawa";
+    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 zwierzaki";
+    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 "Płatność kartą";
+  }
+}

src/components/Output/Restaurant.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PictogramsSeparate from "./PictogramsSeparate";
+import DishList from "./DishList";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { extractTags } from "../../Services";
+import { useSelector } from "react-redux";
+
+export default function Restaurant(props) {
+  const restaurant = useSelector((state) => state.restaurant);
+  const showDishList = useSelector((state) => state.data.showDishList);
+
+  return (
+    <div className="restaurant-container">
+      <div className="restaurant-content">
+        <div className="restaurant-info">
+          <div
+            className="restaurant-hero"
+            style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
+          ></div>
+          <h1>{restaurant.name}</h1>
+          <p>{restaurant.description}</p>
+          <hr />
+          <p>
+            Miejscowość:{" "}
+            <span className="restaurant-span">{restaurant.city}</span>
+          </p>
+          <p>
+            Godziny pracy:{" "}
+            <span className="restaurant-span">{restaurant.workingHours}</span>
+          </p>
+          {restaurant.phone && (
+            <p>
+              Kontakt:{" "}
+              <span className="restaurant-span">{restaurant.phone}</span>
+            </p>
+          )}
+          <hr />
+          <div className="restaurant-pictograms">
+            <PictogramsSeparate pictograms={extractTags(restaurant.tags)} />
+          </div>
+        </div>
+        <div className="restaurant-dishes">
+          <h3>Menu</h3>
+          {showDishList === false && <CircularProgress />}
+          {showDishList === true && <DishList />}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Output/SearchResults.js

@@ -0,0 +1,31 @@
+import React from "react";
+import CardRestaurant from "./CardRestaurant";
+import { useSelector } from "react-redux";
+
+export default function SearchResults() {
+  var results = useSelector((store) => store.searchResults);
+  const array = Array.from(results);
+  var count = results.length;
+  const restaurants = array.map((restaurant) => (
+    <CardRestaurant
+      key={restaurant._id}
+      id={restaurant._id}
+      name={restaurant.name}
+      city={restaurant.city}
+      description={restaurant.description}
+      imgUrl={restaurant.imgUrl}
+      hours={restaurant.workingHours}
+      tags={restaurant.tags}
+    />
+  ));
+
+  return (
+    <div className="search-results">
+      <div className="results-count">
+        <p>Znaleziono: {count}</p>
+        <hr />
+      </div>
+      {restaurants}
+    </div>
+  );
+}

src/components/Output/Social.js

@@ -0,0 +1,21 @@
+import React from "react";
+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";
+
+export default function Social(props) {
+  return (
+    <div className="social-container">
+      <IconButton color="secondary">
+        <FacebookIcon />
+      </IconButton>
+      <IconButton color="secondary">
+        <TwitterIcon />
+      </IconButton>
+      <IconButton color="secondary">
+        <InstagramIcon />
+      </IconButton>
+    </div>
+  );
+}

src/components/Output/logoMain.js

@@ -0,0 +1,13 @@
+import logo from "../../public/logo_mint.svg";
+import React from "react";
+import { useSelector } from "react-redux";
+
+export default function LogoMain() {
+  let appMode = useSelector((store) => store.appMode);
+
+  if (appMode === "init") {
+    return <img src={logo} alt="Menui logo" className="logo" />;
+  } else {
+    return "";
+  }
+}