web client v0.10 (restaurant view)

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