From aec707c714ec254e782b3046f02877b3d897a7ed Mon Sep 17 00:00:00 2001 From: zadit frontend Date: Fri, 4 Oct 2024 04:09:17 +0000 Subject: [PATCH] ok --- src/App.css | 13 +- src/App.js | 1 + src/components/Header.js | 4 + src/components/ItemLister.module.css | 2 +- src/components/ItemType.js | 8 ++ src/components/Modal.js | 2 +- src/components/MusicPlayer.css | 8 +- src/components/SearchInput.css | 10 +- src/helpers/cafeHelpers.js | 10 +- src/pages/CafePage.js | 205 +++++++++++++++------------ src/pages/WelcomePage.css | 3 +- src/pages/WelcomePage.js | 184 ++++-------------------- src/pages/WelcomePageEditor.js | 48 +++++-- 13 files changed, 215 insertions(+), 283 deletions(-) diff --git a/src/App.css b/src/App.css index 1adcd33..801f01c 100644 --- a/src/App.css +++ b/src/App.css @@ -1,7 +1,8 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); -html, body{ - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); +html, +body { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ } .App { @@ -34,11 +35,11 @@ html, body{ color: #61dafb; } -.title{ +.title { font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; - font-size: 32px; + font-size: 28px; color: rgba(88, 55, 50, 1); text-align: left; margin-left: 20px; diff --git a/src/App.js b/src/App.js index 74846d3..342b59f 100644 --- a/src/App.js +++ b/src/App.js @@ -423,6 +423,7 @@ function App() { setIsEditMode(!isEditMode)} /> + + setModal("welcome_config")}> + welcoming page + setModal("add_material")}> stock diff --git a/src/components/ItemLister.module.css b/src/components/ItemLister.module.css index f455925..0e5038d 100644 --- a/src/components/ItemLister.module.css +++ b/src/components/ItemLister.module.css @@ -19,7 +19,7 @@ font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; - font-size: 32px; + font-size: 28px; color: rgba(88, 55, 50, 1); text-align: left; width: calc(70% - 10px); diff --git a/src/components/ItemType.js b/src/components/ItemType.js index be87c97..1485f3d 100644 --- a/src/components/ItemType.js +++ b/src/components/ItemType.js @@ -101,6 +101,14 @@ export default function ItemType({ create )} +
); } diff --git a/src/components/Modal.js b/src/components/Modal.js index dc091dc..6c46038 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -63,7 +63,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => { {modalContent === "update_stock" && ( )} - {modalContent === "welcome_config" && } + {modalContent === "welcome_config" && } {modalContent === "reports" && } diff --git a/src/components/MusicPlayer.css b/src/components/MusicPlayer.css index 1d1796e..d3d8211 100644 --- a/src/components/MusicPlayer.css +++ b/src/components/MusicPlayer.css @@ -104,7 +104,7 @@ position: relative; left: 0; right: 0; - background-color: rgb(108, 255, 128); + background-color: rgb(29, 185, 84); /* background-color: rgb(218 163 99); */ border-radius: 0 0 23px 23px; /* Rounded corners at the bottom */ @@ -121,7 +121,7 @@ } .expand-button:hover { - background-color: rgb(108, 255, 128); + background-color: rgb(29, 185, 84); } /* Adjust height of the music player container when expanded */ @@ -134,7 +134,7 @@ display: flex; align-items: center; padding: 10px; - background-color: rgb(108, 255, 128); + background-color: rgb(29, 185, 84); } .search-box input[type="text"] { @@ -167,7 +167,7 @@ display: flex; align-items: center; padding: 10px; - background-color: rgb(108, 255, 128); + background-color: rgb(29, 185, 84); } .auth-box input[type="text"] { diff --git a/src/components/SearchInput.css b/src/components/SearchInput.css index f54de8f..37bc3c5 100644 --- a/src/components/SearchInput.css +++ b/src/components/SearchInput.css @@ -18,7 +18,7 @@ right: 0; height: 122px; /* Adjust height as needed */ - background-image: url('https://s3-alpha-sig.figma.com/img/3678/baa2/4bf884c3841dee965b827acbd7555b98?Expires=1719792000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=bKQcSkMF~H8797MOcDHKeUzRWE1Ei9V2SWIyc4LsB-xzHOzMfd5WUNyFnDVr5pOMJdOWNI2xtsxaeVoH4h6g84vAyK6MUrCvWKhsxYrRK4O-3A0VTeIdGKICTMMj~EXZ7mjFoG5JwSGAGyj7Jx8iKS1OkoT0mTl7RDCRTvdChWZyv24BQaXsl~DfbNizjInhvwCvl3IcsdZBEnGYNSq2BbM4ZzU6w07-zMvNvC~EYPm33pAYXkDUsMh4XEQGc9gMAsNxJJZ4a5bo2vGwHREkkBDYgNGhwetefH6B0iZ7OnTqEFm3mcO3bAZtKdH0Evrcu2hNL-62pkK4JtdQ6~Anww__'); + background-image: url("https://s3-alpha-sig.figma.com/img/3678/baa2/4bf884c3841dee965b827acbd7555b98?Expires=1719792000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=bKQcSkMF~H8797MOcDHKeUzRWE1Ei9V2SWIyc4LsB-xzHOzMfd5WUNyFnDVr5pOMJdOWNI2xtsxaeVoH4h6g84vAyK6MUrCvWKhsxYrRK4O-3A0VTeIdGKICTMMj~EXZ7mjFoG5JwSGAGyj7Jx8iKS1OkoT0mTl7RDCRTvdChWZyv24BQaXsl~DfbNizjInhvwCvl3IcsdZBEnGYNSq2BbM4ZzU6w07-zMvNvC~EYPm33pAYXkDUsMh4XEQGc9gMAsNxJJZ4a5bo2vGwHREkkBDYgNGhwetefH6B0iZ7OnTqEFm3mcO3bAZtKdH0Evrcu2hNL-62pkK4JtdQ6~Anww__"); background-size: cover; /* Adjust background image size */ background-position: center; @@ -103,7 +103,7 @@ left: 0; right: 0; height: 25px; - background-color: rgb(108, 255, 128); + background-color: rgb(29, 185, 84); border-radius: 0 0 15px 15px; /* Rounded corners at the bottom */ cursor: pointer; @@ -117,7 +117,7 @@ } .expand-button:hover { - background-color: rgb(108, 255, 128); + background-color: rgb(29, 185, 84); } /* Adjust height of the music player container when expanded */ @@ -130,7 +130,7 @@ display: flex; align-items: center; padding: 10px; - background-color: rgb(108, 255, 128); + background-color: rgb(29, 185, 84); } .search-box input[type="text"] { @@ -162,4 +162,4 @@ /* Add hover effect for the search icon */ .search-box .search-icon:hover { color: #555; -} \ No newline at end of file +} diff --git a/src/helpers/cafeHelpers.js b/src/helpers/cafeHelpers.js index 04459bf..7d006c5 100644 --- a/src/helpers/cafeHelpers.js +++ b/src/helpers/cafeHelpers.js @@ -24,22 +24,25 @@ export async function getCafe(cafeId) { } } // api.js -export const saveWelcomePageConfig = async (details) => { +export const saveWelcomePageConfig = async (cafeId, details) => { const formData = new FormData(); // Append image file if it exists if (details.image) { const blob = await fetch(details.image).then((res) => res.blob()); - formData.append("image", blob, "welcome-image.png"); // Specify filename if needed + formData.append("cafeLogo", blob, "welcome-image.png"); // Specify filename if needed } // Append other form fields formData.append("welcomingText", details.welcomingText); formData.append("backgroundColor", details.backgroundColor); formData.append("textColor", details.textColor); + + // Append the isWelcomePageActive field + formData.append("isWelcomePageActive", details.isWelcomePageActive); try { - const response = await fetch(`${API_BASE_URL}/welcome-config`, { + const response = await fetch(`${API_BASE_URL}/cafe/welcome-config/${cafeId}`, { method: "POST", headers: { Authorization: `Bearer ${getAuthToken()}`, // Assuming you have an auth token @@ -58,6 +61,7 @@ export const saveWelcomePageConfig = async (details) => { } }; + export async function getOwnedCafes(userId) { try { const response = await fetch( diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js index a4bccca..d7c8ec2 100644 --- a/src/pages/CafePage.js +++ b/src/pages/CafePage.js @@ -9,6 +9,8 @@ import { } from "react-router-dom"; import "../App.css"; + +import { getImageUrl } from "../helpers/itemHelper.js"; import SearchInput from "../components/SearchInput"; import ItemTypeLister from "../components/ItemTypeLister"; import { MusicPlayer } from "../components/MusicPlayer"; @@ -29,6 +31,7 @@ import WelcomePage from "./WelcomePage.js"; function CafePage({ table, sendParam, + welcomePageConfig, shopName, shopOwnerId, shopItems, @@ -58,27 +61,34 @@ function CafePage({ const [filterId, setFilterId] = useState(0); const [isStarted, setIsStarted] = useState(false); - useEffect(() => { - // Check sessionStorage for 'getStartedClicked' on mount - const clicked = sessionStorage.getItem("getStartedClicked"); - if (clicked) setIsStarted(true); - else document.body.style.overflow = "hidden"; + const [config, setConfig] = useState({}); - // Define a custom event - const handleStorageChange = (event) => { - if (event.detail === "getStartedClicked") { + const checkWelcomePageConfig = () => { + const parsedConfig = JSON.parse(welcomePageConfig); + if (parsedConfig.isWelcomePageActive == "true") { + const clicked = sessionStorage.getItem("getStartedClicked"); + if (!clicked) { + sessionStorage.setItem("getStartedClicked", true); + document.body.style.overflow = "hidden"; setIsStarted(true); } - }; + } + setLoading(false); + }; - // Listen for custom events - window.addEventListener("storageChange", handleStorageChange); - - // Cleanup the event listener - return () => { - window.removeEventListener("storageChange", handleStorageChange); - }; - }, []); + useEffect(() => { + if (welcomePageConfig) { + const parsedConfig = JSON.parse(welcomePageConfig); + setConfig({ + image: getImageUrl(parsedConfig.image) || "", + welcomingText: parsedConfig.welcomingText || "Enjoy your coffee!", + backgroundColor: parsedConfig.backgroundColor || "#ffffff", + textColor: parsedConfig.textColor || "#000000", + isActive: parsedConfig.isWelcomePageActive === "true", + }); + checkWelcomePageConfig(); + } + }, [welcomePageConfig]); useEffect(() => { if (user.cafeId != null && user.cafeId !== shopId) { // Preserve existing query parameters @@ -105,10 +115,6 @@ function CafePage({ navigate(0); }; - useEffect(() => { - setLoading(false); - }, [shopItems]); - useEffect(() => { async function fetchData() { socket.on("joined-room", (response) => { @@ -120,6 +126,11 @@ function CafePage({ if (socket) fetchData(); }, [socket]); + const handleGetStarted = () => { + setIsStarted(false); + + document.body.style.overflow = "auto"; + }; if (loading) return (
@@ -132,80 +143,94 @@ function CafePage({ else return ( <> - {!isStarted && } -
- -
setIsEditMode(e)} - isEditMode={isEditMode} - /> -
- -
- setFilterId(e)} - filterId={filterId} - /> -
- {filterId === 0 ? ( - <> -

Music Req.

- - - ) : ( -
- )} - -
- {shopItems - .filter( - (itemType) => filterId == 0 || itemType.itemTypeId === filterId - ) - .map((itemType) => ( - + ) : ( + welcomePageConfig != null && ( +
+ +
setIsEditMode(e)} isEditMode={isEditMode} - raw={isEditMode || filterId == 0 ? false : true} /> - ))} - - {user.username && ( - - )} -
+
+ +
+ setFilterId(e)} + filterId={filterId} + /> +
+ {filterId === 0 ? ( + <> +

Music Req.

+ + + ) : ( +
+ )} + +
+ {shopItems + .filter( + (itemType) => + filterId == 0 || itemType.itemTypeId === filterId + ) + .map((itemType) => ( + + ))} + + {user.username && ( + + )} +
+ ) + )} ); } diff --git a/src/pages/WelcomePage.css b/src/pages/WelcomePage.css index b7fed8e..17f0f0c 100644 --- a/src/pages/WelcomePage.css +++ b/src/pages/WelcomePage.css @@ -47,10 +47,11 @@ /* Fullscreen styles */ .fullscreen { - position: absolute; + position: fixed; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); + z-index: 300; } diff --git a/src/pages/WelcomePage.js b/src/pages/WelcomePage.js index 3a1a45a..4def678 100644 --- a/src/pages/WelcomePage.js +++ b/src/pages/WelcomePage.js @@ -1,168 +1,38 @@ -// WelcomePageEditor.js -import React, { useState } from "react"; -import WelcomePage from "./WelcomePage"; -import { saveWelcomePageConfig } from "../helpers/cafeHelpers"; // Import the API function -import Switch from "react-switch"; // Import react-switch -import "./WelcomePageEditor.css"; - -const WelcomePageEditor = () => { - const [image, setImage] = useState(""); - const [welcomingText, setWelcomingText] = useState("Enjoy your coffee!"); - const [backgroundColor, setBackgroundColor] = useState("#ffffff"); - const [textColor, setTextColor] = useState("#000000"); - const [loading, setLoading] = useState(false); - const [isFullscreen, setIsFullscreen] = useState(false); - const [isWelcomingPageEnabled, setIsWelcomingPageEnabled] = useState(true); // State for toggle switch - - const handleImageChange = (e) => { - const file = e.target.files[0]; - if (file) { - const reader = new FileReader(); - reader.onloadend = () => { - setImage(reader.result); - }; - reader.readAsDataURL(file); - } - }; - - const handleTextChange = (e) => { - setWelcomingText(e.target.value); - }; - - const handleColorChange = (e) => { - setBackgroundColor(e.target.value); - }; - - const handleTextColorChange = (e) => { - setTextColor(e.target.value); - }; - - const handleSave = async () => { - setLoading(true); - - const details = { - image, - welcomingText, - backgroundColor, - textColor, - isWelcomingPageEnabled, // Include the toggle state - }; - - try { - const result = await saveWelcomePageConfig(details); - console.log("Configuration saved:", result); - } catch (error) { - console.error("Error saving configuration:", error); - } finally { - setLoading(false); - } - }; - - if (isFullscreen) - return ( - setIsFullscreen(false)} - /> - ); +// WelcomePage.js +import React from "react"; +import "./WelcomePage.css"; +const WelcomePage = ({ + onGetStarted, + isFullscreen, + image, + welcomingText, + backgroundColor, + textColor, +}) => { return (
-

Edit Welcome Page

-
- -