ok
This commit is contained in:
zadit frontend
@@ -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"
|
||||
>
|
||||
<>
|
||||
</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;
|
||||
|
||||
Reference in New Issue
Block a user