diff --git a/src/Services.js b/src/Services.js index 5eb1594..f3c25ed 100644 --- 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; + } +}; diff --git a/src/components/Dialogs/EditDish.js b/src/components/Dialogs/EditDish.js index 4203749..4f0a6ad 100644 --- 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() { diff --git a/src/components/Dialogs/NewDish.js b/src/components/Dialogs/NewDish.js index 8aaf699..c848d21 100644 --- 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() { diff --git a/src/components/Output/CardDish.js b/src/components/Output/CardDish.js index 2f829f6..6223349 100644 --- 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 + ")" }} />
-

{name}

-

{weight}

+
+

{name}

+

Porcja: {weight}

+
diff --git a/src/components/Output/CardRestaurant.js b/src/components/Output/CardRestaurant.js index 8b5ad99..dc589b4 100644 --- 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 (
dispatch(fetchRestaurant(props.id))} + onClick={() => history.push(`/restaurant/${props.id}`)} className="card-restaurant" >
{props.name}

Miasto: {props.city}

-

Otwarte: {props.hours}

+

Dziś otwarte: {getTodayHours(props.hours)}

{props.description}

diff --git a/src/components/Output/GoogleMapStatic.js b/src/components/Output/GoogleMapStatic.js index 907a757..7bc28b5 100644 --- 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 ( - + diff --git a/src/components/Output/Restaurant.js b/src/components/Output/Restaurant.js index 9eea5c4..e4b27d1 100644 --- 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) {

{restaurant.name}

{restaurant.description}


+
+ +
+
+
Informacje

Adres:{" "} {restaurant.city}, {restaurant.adress}

-

Godziny pracy:

{restaurant.phone && (

Kontakt:{" "} {restaurant.phone}

)} +
-
- -
+
Lokalizacja
+ {restaurant.location && ( + + )}
diff --git a/src/components/Output/WorkingHours.js b/src/components/Output/WorkingHours.js new file mode 100644 index 0000000..3a5b3d6 --- /dev/null +++ b/src/components/Output/WorkingHours.js @@ -0,0 +1,56 @@ +import React from "react"; + +export default function WorkingHours(props) { + const { hours } = props; + return ( +
+ {hours && ( +
+
Godziny otwarcia
+

+ Pn:{" "} + + {hours.pn ? hours.pn : "Nieczynne"} + +

+

+ Wt:{" "} + + {hours.wt ? hours.wt : "Nieczynne"} + +

+

+ Śr:{" "} + + {hours.sr ? hours.sr : "Nieczynne"} + +

+

+ Czw:{" "} + + {hours.cz ? hours.cz : "Nieczynne"} + +

+

+ Pt:{" "} + + {hours.pt ? hours.pt : "Nieczynne"} + +

+

+ So:{" "} + + {hours.sb ? hours.sb : "Nieczynne"} + +

+

+ Nie:{" "} + + {hours.nd ? hours.nd : "Nieczynne"} + +

+
+ )} +
+ ); +} diff --git a/src/styles/DishList.scss b/src/styles/DishList.scss index 9d83606..6e19778 100644 --- 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; } } diff --git a/src/styles/Pictograms.scss b/src/styles/Pictograms.scss index bae6d45..e8367b7 100644 --- 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; } } diff --git a/src/styles/Restaurant.scss b/src/styles/Restaurant.scss index 4800b9a..37b5b99 100644 --- 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; diff --git a/src/styles/SearchResults.scss b/src/styles/SearchResults.scss index b1c7f3b..49844ce 100644 --- 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;