web client v0.10 (restaurant view)

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

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) =>

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) =>

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>

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>

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>

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">

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

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

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

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;

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;