kediritechnopark/groovee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
zadit frontend
2024-10-04 04:09:17 +00:00
parent a86aaef4f6
commit aec707c714
13 changed files with 215 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/pages/CafePage.js
View File

@@ -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 (
<div className="Loader">
@@ -132,80 +143,94 @@ function CafePage({
else
return (
<>
{!isStarted && <WelcomePage></WelcomePage>}
<div className="App">
<body className="App-header">
<Header
HeaderText={"Menu"}
showProfile={true}
setModal={setModal}
isLogout={handleLogout}
shopId={shopId}
shopName={shopName}
shopOwnerId={shopOwnerId}
shopClerks={shopClerks}
tableCode={table.tableCode}
user={user}
guestSides={guestSides}
guestSideOfClerk={guestSideOfClerk}
removeConnectedGuestSides={removeConnectedGuestSides}
setIsEditMode={(e) => setIsEditMode(e)}
isEditMode={isEditMode}
/>
<div style={{ marginTop: "5px" }}></div>
<SearchInput shopId={shopId} tableCode={table.tableCode} />
<div style={{ marginTop: "15px" }}></div>
<ItemTypeLister
user={user}
shopOwnerId={shopOwnerId}
shopId={shopId}
itemTypes={shopItems}
isEditMode={isEditMode}
onFilterChange={(e) => setFilterId(e)}
filterId={filterId}
/>
<div style={{ marginTop: "-13px" }}></div>
{filterId === 0 ? (
<>
<h2 className="title">Music Req.</h2>
<MusicPlayer
socket={socket}
shopId={shopId}
user={user}
isSpotifyNeedLogin={isSpotifyNeedLogin}
/>
</>
) : (
<div style={{ marginTop: "35px" }}></div>
)}
<div style={{ marginTop: "-15px" }}></div>
{shopItems
.filter(
(itemType) => filterId == 0 || itemType.itemTypeId === filterId
)
.map((itemType) => (
<ItemLister
{welcomePageConfig && isStarted ? (
<WelcomePage
image={config.image}
welcomingText={config.welcomingText}
backgroundColor={config.backgroundColor}
textColor={config.textColor}
isActive={config.isActive}
onGetStarted={handleGetStarted}
isFullscreen={true}
/>
) : (
welcomePageConfig != null && (
<div className="Cafe">
<body className="App-header">
<Header
HeaderText={"Menu"}
showProfile={true}
setModal={setModal}
isLogout={handleLogout}
shopId={shopId}
shopName={shopName}
shopOwnerId={shopOwnerId}
shopClerks={shopClerks}
tableCode={table.tableCode}
user={user}
key={itemType.itemTypeId}
itemTypeId={itemType.itemTypeId}
typeName={itemType.name}
itemList={itemType.itemList}
guestSides={guestSides}
guestSideOfClerk={guestSideOfClerk}
removeConnectedGuestSides={removeConnectedGuestSides}
setIsEditMode={(e) => setIsEditMode(e)}
isEditMode={isEditMode}
raw={isEditMode || filterId == 0 ? false : true}
/>
))}
</body>
{user.username && (
<AccountUpdateModal
user={user}
isOpen={isModalOpen}
onClose={handleModalClose}
/>
)}
</div>
<div style={{ marginTop: "5px" }}></div>
<SearchInput shopId={shopId} tableCode={table.tableCode} />
<div style={{ marginTop: "15px" }}></div>
<ItemTypeLister
user={user}
shopOwnerId={shopOwnerId}
shopId={shopId}
itemTypes={shopItems}
isEditMode={isEditMode}
onFilterChange={(e) => setFilterId(e)}
filterId={filterId}
/>
<div style={{ marginTop: "-13px" }}></div>
{filterId === 0 ? (
<>
<h2 className="title">Music Req.</h2>
<MusicPlayer
socket={socket}
shopId={shopId}
user={user}
isSpotifyNeedLogin={isSpotifyNeedLogin}
/>
</>
) : (
<div style={{ marginTop: "35px" }}></div>
)}
<div style={{ marginTop: "-15px" }}></div>
{shopItems
.filter(
(itemType) =>
filterId == 0 || itemType.itemTypeId === filterId
)
.map((itemType) => (
<ItemLister
shopId={shopId}
shopOwnerId={shopOwnerId}
user={user}
key={itemType.itemTypeId}
itemTypeId={itemType.itemTypeId}
typeName={itemType.name}
itemList={itemType.itemList}
isEditMode={isEditMode}
raw={isEditMode || filterId == 0 ? false : true}
/>
))}
</body>
{user.username && (
<AccountUpdateModal
user={user}
isOpen={isModalOpen}
onClose={handleModalClose}
/>
)}
</div>
)
)}
</>
);
}

3
src/pages/WelcomePage.css
View File

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

184
src/pages/WelcomePage.js
View File

@@ -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 (
<WelcomePage
image={image}
welcomingText={welcomingText}
backgroundColor={backgroundColor}
textColor={textColor}
isFullscreen={true}
onGetStarted={() => setIsFullscreen(false)}
/>
);
// WelcomePage.js
import React from "react";
import "./WelcomePage.css";
const WelcomePage = ({
onGetStarted,
isFullscreen,
image,
welcomingText,
backgroundColor,
textColor,
}) => {
return (
<div
className="welcome-page-editor"
style={{ width: "80vw", height: "80vh" }}
className={`welcome-page ${isFullscreen ? "fullscreen" : ""}`} // Corrected the className syntax
style={{
backgroundColor,
}}
>
<h2>Edit Welcome Page</h2>
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
<input type="file" accept="image/*" onChange={handleImageChange} />
<textarea
value={welcomingText}
onChange={handleTextChange}
placeholder="Enter welcoming text..."
style={{ height: "40px", resize: "none" }}
/>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<label>
Background Color:
<input
type="color"
value={backgroundColor}
onChange={handleColorChange}
/>
</label>
<label>
Text Color:
<input
type="color"
value={textColor}
onChange={handleTextColorChange}
/>
</label>
<div style={{ display: "flex", alignItems: "center" }}>
<span>Enable Welcoming Page:</span>
<Switch
onChange={() =>
setIsWelcomingPageEnabled(!isWelcomingPageEnabled)
}
checked={isWelcomingPageEnabled}
offColor="#888"
onColor="#0a74da"
uncheckedIcon={false}
checkedIcon={false}
height={20}
width={48}
/>
</div>
</div>
<button onClick={handleSave} disabled={loading}>
{loading ? "Saving..." : "Save Configuration"}
</button>
</div>
<div
style={{ width: "100%", height: "100%", position: "relative", flex: 1 }}
style={{
backgroundColor: image ? "transparent" : "black",
}}
className="image-container"
>
{isWelcomingPageEnabled && (
<WelcomePage
image={image}
welcomingText={welcomingText}
backgroundColor={backgroundColor}
textColor={textColor}
/>
)}
<div style={{ position: "absolute", bottom: 0, right: 0 }}>
<svg
width="100"
height="100"
style={{ position: "absolute", bottom: 0, right: 0 }}
onClick={() => setIsFullscreen(true)}
>
<g transform="rotate(45 50 50)">
<circle cx="50" cy="50" r="40" fill="rgba(0, 0, 0, 0.5)" />
<text
x="50"
y="50"
textAnchor="middle"
dominantBaseline="middle"
fontSize="24"
fill="white"
>
&lt;&gt;
</text>
</g>
</svg>
</div>
{image && <img src={image} alt="Welcome" className="circular-image" />} {/* Added conditional rendering */}
</div>
<h1 className="welcoming-text" style={{ color: textColor }}>
{welcomingText}
</h1>
<button className="get-started-button" onClick={onGetStarted}>
Get Started
</button>
</div>
);
};
export default WelcomePageEditor;
export default WelcomePage;

48
src/pages/WelcomePageEditor.js
View File

@@ -1,17 +1,33 @@
// WelcomePageEditor.js
import React, { useState } from "react";
import React, { useEffect, 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";
import { getImageUrl } from "../helpers/itemHelper.js";
const WelcomePageEditor = () => {
const WelcomePageEditor = ({ cafeId, welcomePageConfig }) => {
const [image, setImage] = useState("");
const [welcomingText, setWelcomingText] = useState("Enjoy your coffee!");
const [backgroundColor, setBackgroundColor] = useState("#ffffff");
const [textColor, setTextColor] = useState("#000000");
const [isWelcomePageActive, setIsWelcomePageActive] = useState(false); // State for the switch
const [loading, setLoading] = useState(false); // Loading state
const [isFullscreen, setIsFullscreen] = useState(false);
// Load existing welcome page configuration when component mounts
useEffect(() => {
if (welcomePageConfig) {
const config = JSON.parse(welcomePageConfig);
setImage(getImageUrl(config.image) || ""); // Load image path
setWelcomingText(config.welcomingText || "Enjoy your coffee!");
setBackgroundColor(config.backgroundColor || "#ffffff");
setTextColor(config.textColor || "#000000");
setIsWelcomePageActive(config.isWelcomePageActive === "true"); // Convert string to boolean
}
console.log(welcomePageConfig);
}, [welcomePageConfig]);
const handleImageChange = (e) => {
const file = e.target.files[0];
if (file) {
@@ -43,10 +59,11 @@ const WelcomePageEditor = () => {
welcomingText,
backgroundColor,
textColor,
isWelcomePageActive, // Include the isWelcomePageActive state
};
try {
const result = await saveWelcomePageConfig(details);
const result = await saveWelcomePageConfig(cafeId, details);
console.log("Configuration saved:", result);
} catch (error) {
console.error("Error saving configuration:", error);
@@ -55,18 +72,6 @@ const WelcomePageEditor = () => {
}
};
if (isFullscreen)
return (
<WelcomePage
image={image}
welcomingText={welcomingText}
backgroundColor={backgroundColor}
textColor={textColor}
isFullscreen={true}
onGetStarted={() => setIsFullscreen(false)}
/>
);
return (
<div
className="welcome-page-editor"
@@ -99,6 +104,17 @@ const WelcomePageEditor = () => {
/>
</label>
</div>
<div style={{ display: "flex", alignItems: "center" }}>
<label style={{ marginRight: "10px" }}>Is Welcome Page Active:</label>
<Switch
onChange={() => setIsWelcomePageActive(!isWelcomePageActive)}
checked={isWelcomePageActive}
offColor="#888"
onColor="#0a0"
uncheckedIcon={false}
checkedIcon={false}
/>
</div>
<button onClick={handleSave} disabled={loading}>
{loading ? "Saving..." : "Save Configuration"}
</button>
@@ -111,6 +127,8 @@ const WelcomePageEditor = () => {
welcomingText={welcomingText}
backgroundColor={backgroundColor}
textColor={textColor}
onGetStarted={() => setIsFullscreen(false)}
isFullscreen={isFullscreen}
/>
<div style={{ position: "absolute", bottom: 0, right: 0 }}>
<svg