web client v0.10 (restaurant view)

2020-10-05 19:33:52 +02:00
parent b3ade3de7d
commit 06728d32f1
12 changed files with 146 additions and 50 deletions
--- a/src/Services.js
+++ b/src/Services.js
@@ -51,3 +51,25 @@ export const formatDateBasic = (input) => {
  const date = new Date(input);
  return date.toLocaleString("pl-PL", { dateStyle: "long" });
 };
+
+export const getTodayHours = (workingHours) => {
+  const todayDate = new Date().getDay();
+  switch (todayDate) {
+    case 1:
+      return workingHours.pn;
+    case 2:
+      return workingHours.wt;
+    case 3:
+      return workingHours.sr;
+    case 4:
+      return workingHours.cz;
+    case 5:
+      return workingHours.pt;
+    case 6:
+      return workingHours.sb;
+    case 7:
+      return workingHours.nd;
+    default:
+      return workingHours.pn;
+  }
+};
--- a/src/components/Dialogs/EditDish.js
+++ b/src/components/Dialogs/EditDish.js
@@ -169,7 +169,7 @@ export default function EditDish() {
    const validation = {
      name: validator.isLength(state.name, { max: 50, min: 1 }),
      category: restaurant.categories.includes(state.category),
-      price: validator.isAlphanumeric(state.price),
+      price: validator.isLength(state.price, { max: 10, min: 1 }),
    };

    setState({
@@ -275,9 +275,8 @@ export default function EditDish() {
                <TextField
                  className={styles.textInput}
                  required
-                  label="Cena"
+                  label="Cena (zł)"
                  placeholder="np. 18,50"
-                  type="number"
                  error={state.priceError}
                  value={state.price}
                  variant="outlined"
@@ -294,9 +293,8 @@ export default function EditDish() {
                />
                <TextField
                  className={styles.textInput}
-                  label="Waga (g)"
-                  type="number"
-                  placeholder="np. 150"
+                  label="Porcja"
+                  placeholder="np. 150g"
                  value={state.weight}
                  variant="outlined"
                  onChange={(event) =>
--- a/src/components/Dialogs/NewDish.js
+++ b/src/components/Dialogs/NewDish.js
@@ -161,7 +161,7 @@ export default function NewRestaurant() {
    const validation = {
      name: validator.isLength(state.name, { max: 50, min: 1 }),
      category: restaurant.categories.includes(state.category),
-      price: validator.isAlphanumeric(state.price),
+      price: validator.isLength(state.price, { max: 10, min: 1 }),
    };

    setState({
@@ -288,9 +288,8 @@ export default function NewRestaurant() {
              <TextField
                className={styles.textInput}
                required
-                label="Cena"
+                label="Cena (zł)"
                placeholder="np. 18,50"
-                type="number"
                error={state.priceError}
                value={state.price}
                variant="outlined"
@@ -307,9 +306,9 @@ export default function NewRestaurant() {
              />
              <TextField
                className={styles.textInput}
-                label="Waga (g)"
+                label="Porcja"
                type="number"
-                placeholder="np. 150"
+                placeholder="np. 150g"
                value={state.weight}
                variant="outlined"
                onChange={(event) =>
--- a/src/components/Output/CardDish.js
+++ b/src/components/Output/CardDish.js
@@ -22,8 +22,10 @@ export default function CardDish(props) {
          style={{ backgroundImage: "url(" + imgUrl + ")" }}
        />
        <div className="carddish-left-info">
-          <h2>{name}</h2>
-          <p>{weight}</p>
+          <div className="carddish-left-upper">
+            <h2>{name}</h2>
+            <p>Porcja: {weight}</p>
+          </div>
          <Pictograms pictograms={extractTags(allergens)} />
        </div>
      </div>
--- a/src/components/Output/CardRestaurant.js
+++ b/src/components/Output/CardRestaurant.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Pictograms from "./Pictograms";
-import { fetchRestaurant } from "../../actions";
-import { useDispatch } from "react-redux";
+import { useHistory } from "react-router-dom";
+import { getTodayHours } from "../../Services.js";

 function extractTags(tags) {
  var results = [];
@@ -15,12 +15,12 @@ function extractTags(tags) {
 }

 export default function CardRestaurant(props) {
-  const dispatch = useDispatch();
+  const history = useHistory();
  const img = props.imgUrl;

  return (
    <div
-      onClick={() => dispatch(fetchRestaurant(props.id))}
+      onClick={() => history.push(`/restaurant/${props.id}`)}
      className="card-restaurant"
    >
      <div
@@ -32,7 +32,7 @@ export default function CardRestaurant(props) {
          <h1>{props.name}</h1>
          <hr />
          <h3>Miasto: {props.city}</h3>
-          <h3>Otwarte: {props.hours}</h3>
+          <h3>Dziś otwarte: {getTodayHours(props.hours)}</h3>
        </div>
        <div className="card-description">
          <p>{props.description}</p>
--- a/src/components/Output/GoogleMapStatic.js
+++ b/src/components/Output/GoogleMapStatic.js
@@ -3,8 +3,8 @@ import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";

 function GoogleMapStatic(props) {
  const containerStyle = {
-    width: "50%",
-    height: "500px",
+    width: "100%",
+    height: "360px",
  };

  const center = {
@@ -14,7 +14,7 @@ function GoogleMapStatic(props) {

  return (
    <LoadScript googleMapsApiKey="AIzaSyDAlZSiBanP52qpZ1kaH06XkuA2zndLUd8">
-      <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={7}>
+      <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={15}>
        <Marker position={center} visible={true} />
      </GoogleMap>
    </LoadScript>
--- a/src/components/Output/Restaurant.js
+++ b/src/components/Output/Restaurant.js
@@ -7,6 +7,7 @@ import { extractTags } from "../../Services";
 import { useSelector, useDispatch } from "react-redux";
 import { fetchRestaurant } from "../../actions";
 import GoogleMapStatic from "./GoogleMapStatic";
+import WorkingHours from "./WorkingHours";

 export default function Restaurant(props) {
  const restaurant = useSelector((state) => state.restaurant);
@@ -33,23 +34,29 @@ export default function Restaurant(props) {
          <h1>{restaurant.name}</h1>
          <p>{restaurant.description}</p>
          <hr />
+          <div className="restaurant-pictograms">
+            <PictogramsSeparate pictograms={extractTags(restaurant.tags)} />
+          </div>
+          <hr />
+          <h5>Informacje</h5>
          <p>
            Adres:{" "}
            <span className="restaurant-span">
              {restaurant.city}, {restaurant.adress}
            </span>
          </p>
-          <p>Godziny pracy: </p>
          {restaurant.phone && (
            <p>
              Kontakt:{" "}
              <span className="restaurant-span">{restaurant.phone}</span>
            </p>
          )}
+          <WorkingHours hours={restaurant.workingHours} />
          <hr />
-          <div className="restaurant-pictograms">
-            <PictogramsSeparate pictograms={extractTags(restaurant.tags)} />
-          </div>
+          <h5>Lokalizacja</h5>
+          {restaurant.location && (
+            <GoogleMapStatic coordinates={restaurant.location.coordinates} />
+          )}
        </div>
      </div>
      <div className="restaurant-content">
--- a/src/components/Output/WorkingHours.js
+++ b/src/components/Output/WorkingHours.js
@@ -0,0 +1,56 @@
+import React from "react";
+
+export default function WorkingHours(props) {
+  const { hours } = props;
+  return (
+    <div className="workingHours">
+      {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>
+      )}
+    </div>
+  );
+}
--- a/src/styles/DishList.scss
+++ b/src/styles/DishList.scss
@@ -8,12 +8,9 @@ h4 {

 .carddish-container {
  background-color: #303030;
-  border-radius: 10px;
-  margin-right: auto;
-  margin-left: auto;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  padding: 20px;
+  border-radius: 6px;
+  margin: 2px auto 2px auto;
+  padding: 8px;
  display: flex;
  justify-content: space-between;
  width: 95%;
@@ -33,20 +30,34 @@ h4 {
 .carddish-img {
  background-color: $secondary-color;
  background-size: cover;
-  width: 150px;
-  height: 150px;
-  border-radius: 10px;
-  margin: 0px 20px 0px 0px;
+  width: 120px;
+  height: 120px;
+  border-radius: 6px;
+  margin: 0px 14px 0px 0px;
 }

 .carddish-left {
  display: flex;
+  h2 {
+    font-size: 1.2rem;
+    margin: auto;
+  }
+  p {
+    margin-left: auto;
+  }
+}
+
+.carddish-left-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }

 .carddish-right {
  h5 {
    font-weight: 500;
-    font-size: 1.2rem;
+    font-size: 1rem;
    margin-top: 1rem;
+    margin-right: 1rem;
  }
 }
--- a/src/styles/Pictograms.scss
+++ b/src/styles/Pictograms.scss
@@ -1,6 +1,6 @@
 .pictograms-container {
  height: 30px;
-  margin: 8px 8px 8px 0px;
+  margin: 8px 8px 0px 0px;
 }

 .pictograms-container-separated {
@@ -21,12 +21,12 @@
  align-items: center;
  border-radius: 25px;
  font-size: 0.8rem;
-  padding: 4px;
-  margin: 8px;
+  padding: 2px;
+  margin: 4px;
  h4 {
-    margin: 8px;
+    margin: 8px 4px 8px 8px;
  }
  .pictogram {
-    margin: 8px;
+    margin: 8px 8px 8px 4px;
  }
 }
--- a/src/styles/Restaurant.scss
+++ b/src/styles/Restaurant.scss
@@ -43,7 +43,6 @@
  width: 100%;
  display: flex;
  padding: 4px;
-  margin-top: 20px;
  border-radius: 50px;
  .pictograms-container {
    margin: 8px;
@@ -51,7 +50,7 @@
 }

 .restaurant-dishes {
-  min-width: 60%;
+  min-width: 80%;
  h3 {
    font-size: 1.2rem;
    font-weight: 400;
@@ -59,8 +58,6 @@
 }

 .restaurant-content {
-  padding-top: 10rem;
-  padding-bottom: 10rem;
  width: 100%;
  display: flex;
  justify-content: center;
@@ -70,12 +67,11 @@
 .restaurant-info {
  text-align: center;
  background-color: #1d1d1d;
-  box-shadow: -2px 10px 20px rgba(0, 0, 0, 0.212);
  p {
    font-size: 0.9rem;
    font-weight: 300;
-    margin-top: 8px;
-    margin-bottom: 8px;
+    margin-top: 4px;
+    margin-bottom: 4px;
  }
  hr {
    border: 1px solid $dark-gray;
--- a/src/styles/SearchResults.scss
+++ b/src/styles/SearchResults.scss
@@ -1,9 +1,14 @@
@import "./Design.scss";

+.search-results {
+  min-width: 60%;
+  max-width: 90%;
+}
+
 .card-restaurant {
  border-radius: 15px;
-  padding: 10px;
-  margin: 20px 0px 20px 0px;
+  padding: 4px;
+  margin: 10px 0px 10px 0px;
  background-color: #202020;
  color: $secondary-color;
  max-width: 70vw;