kediritechnopark/kedaimaster
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

13
src/App.css
View File

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

1
src/App.js
View File

@@ -423,6 +423,7 @@ function App() {
<CafePage
table={table}
sendParam={handleSetParam}
welcomePageConfig={shop.welcomePageConfig}
shopName={shop.name}
shopOwnerId={shop.ownerId}
shopItems={shopItems}

4
src/components/Header.js
View File

@@ -353,6 +353,10 @@ const Header = ({
onChange={() => setIsEditMode(!isEditMode)}
/>
</div>
<Child onClick={() => setModal("welcome_config")}>
welcoming page
</Child>
<Child onClick={() => setModal("add_material")}>
stock
</Child>

2
src/components/ItemLister.module.css
View File

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

8
src/components/ItemType.js
View File

@@ -101,6 +101,14 @@ export default function ItemType({
create
</button>
)}
<div
style={{
backgroundColor: "black",
width: "200%",
height: "200%",
position: "absolute",
}}
></div>
</div>
);
}

2
src/components/Modal.js
View File

@@ -63,7 +63,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
{modalContent === "update_stock" && (
<MaterialMutationsPage cafeId={shop.cafeId} />
)}
{modalContent === "welcome_config" && <WelcomePageEditor />}
{modalContent === "welcome_config" && <WelcomePageEditor cafeId={shop.cafeId} welcomePageConfig={shop.welcomePageConfig} />}
{modalContent === "reports" && <Reports cafeId={shop.cafeId} />}
</div>
</div>

8
src/components/MusicPlayer.css
View File

@@ -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"] {

10
src/components/SearchInput.css
View File

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

10
src/helpers/cafeHelpers.js
View File

@@ -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(

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