ok
This commit is contained in:
client.perkafean.backup
@@ -114,7 +114,7 @@ export default function Footer({
|
||||
</span>
|
||||
{table.length == 0 && (
|
||||
<img
|
||||
src="https://i.ibb.co.com/y0FWnbh/qr-scan-icon-2048x2048-aeh36n7y.png"
|
||||
src="https://i.imgur.com/I44LpDO.png"
|
||||
alt="QR Code"
|
||||
className={styles.qrIcon}
|
||||
/>
|
||||
|
||||
@@ -314,15 +314,15 @@ const Header = ({
|
||||
user.roleId === 1 && (
|
||||
<>
|
||||
<Child onClick={goToAdminCafes}>see your other cafes</Child>
|
||||
|
||||
|
||||
{/* <Child onClick={() => setModal("update_stock")}>
|
||||
update stock
|
||||
</Child> */}
|
||||
<Child hasChildren>
|
||||
{shopName}
|
||||
<Child onClick={() => setModal("add_material")}>
|
||||
stock
|
||||
</Child>
|
||||
stock
|
||||
</Child>
|
||||
<Child onClick={() => setModal("edit_tables")}>
|
||||
table maps
|
||||
</Child>
|
||||
@@ -360,8 +360,8 @@ const Header = ({
|
||||
user.roleId === 2 && (
|
||||
<Child hasChildren>
|
||||
{shopName}
|
||||
<Child onClick={() => setModal("update_stock")}>
|
||||
update stock
|
||||
<Child onClick={() => setModal("add_material")}>
|
||||
stock
|
||||
</Child>
|
||||
{user.username !== undefined &&
|
||||
user.roleId == 2 &&
|
||||
|
||||
@@ -1,223 +1,243 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import './RouletteWheel.css';
|
||||
import coffeeImage from './coffee.png'; // Update the path to your image
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import "./RouletteWheel.css";
|
||||
import coffeeImage from "./coffee.png"; // Update the path to your image
|
||||
|
||||
const RouletteWheel = ({ isForRegister, onSign }) => {
|
||||
const [rotation, setRotation] = useState(0);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const startAngleRef = useRef(0);
|
||||
const startRotationRef = useRef(0);
|
||||
const wheelRef = useRef(null);
|
||||
const [rotation, setRotation] = useState(0);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const startAngleRef = useRef(0);
|
||||
const startRotationRef = useRef(0);
|
||||
const wheelRef = useRef(null);
|
||||
|
||||
const [email, setEmail] = useState('');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [email, setEmail] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
const emailInputRef = useRef(null);
|
||||
const usernameInputRef = useRef(null);
|
||||
const passwordInputRef = useRef(null);
|
||||
const emailInputRef = useRef(null);
|
||||
const usernameInputRef = useRef(null);
|
||||
const passwordInputRef = useRef(null);
|
||||
|
||||
const handleSign = () => {
|
||||
onSign(email, username, password);
|
||||
const handleSign = () => {
|
||||
onSign(email, username, password);
|
||||
};
|
||||
|
||||
const handleStart = (x, y) => {
|
||||
setIsDragging(true);
|
||||
startAngleRef.current = getAngle(x, y);
|
||||
startRotationRef.current = rotation;
|
||||
};
|
||||
|
||||
const handleMove = (x, y) => {
|
||||
if (isDragging) {
|
||||
const angle = getAngle(x, y);
|
||||
const deltaAngle = angle - startAngleRef.current;
|
||||
setRotation(startRotationRef.current + deltaAngle);
|
||||
if (isForRegister) {
|
||||
if (rotation + deltaAngle > 30 || rotation + deltaAngle < -210)
|
||||
handleEnd();
|
||||
} else {
|
||||
if (rotation + deltaAngle > 30 || rotation + deltaAngle < -120)
|
||||
handleEnd();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleEnd = () => {
|
||||
setIsDragging(false);
|
||||
setRotation((prevRotation) => {
|
||||
const snappedRotation = Math.round(prevRotation / 90) * 90;
|
||||
return snappedRotation;
|
||||
});
|
||||
};
|
||||
|
||||
const handleMouseDown = (e) => {
|
||||
handleStart(e.clientX, e.clientY);
|
||||
};
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
handleMove(e.clientX, e.clientY);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
handleEnd();
|
||||
};
|
||||
|
||||
const handleTouchStart = (e) => {
|
||||
const touch = e.touches[0];
|
||||
handleStart(touch.clientX, touch.clientY);
|
||||
};
|
||||
|
||||
const handleTouchMove = (e) => {
|
||||
if (!isDragging) return;
|
||||
e.preventDefault();
|
||||
const touch = e.touches[0];
|
||||
handleMove(touch.clientX, touch.clientY);
|
||||
};
|
||||
|
||||
const handleTouchEnd = (e) => {
|
||||
e.preventDefault();
|
||||
handleEnd();
|
||||
};
|
||||
|
||||
const handleChildMouseDown = (e) => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const handleChildTouchStart = (e) => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const getAngle = (x, y) => {
|
||||
const rect = wheelRef.current.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
const dx = x - centerX;
|
||||
const dy = y - centerY;
|
||||
return Math.atan2(dy, dx) * (180 / Math.PI);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isDragging) {
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
document.addEventListener("touchmove", handleTouchMove, {
|
||||
passive: false,
|
||||
});
|
||||
document.addEventListener("touchend", handleTouchEnd, { passive: false });
|
||||
} else {
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
document.removeEventListener("touchmove", handleTouchMove);
|
||||
document.removeEventListener("touchend", handleTouchEnd);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
document.removeEventListener("touchmove", handleTouchMove);
|
||||
document.removeEventListener("touchend", handleTouchEnd);
|
||||
};
|
||||
}, [isDragging]);
|
||||
|
||||
const handleStart = (x, y) => {
|
||||
setIsDragging(true);
|
||||
startAngleRef.current = getAngle(x, y);
|
||||
startRotationRef.current = rotation;
|
||||
};
|
||||
const inputPositions = [-90, 0, 90, 180]; // Positions for the inputs
|
||||
|
||||
const handleMove = (x, y) => {
|
||||
if (isDragging) {
|
||||
const angle = getAngle(x, y);
|
||||
const deltaAngle = angle - startAngleRef.current;
|
||||
setRotation(startRotationRef.current + deltaAngle);
|
||||
if(isForRegister) {if (rotation + deltaAngle > 30 || rotation + deltaAngle < - 210) handleEnd();}
|
||||
else {if (rotation + deltaAngle > 30 || rotation + deltaAngle < - 120) handleEnd();}
|
||||
}
|
||||
};
|
||||
const isVisible = (angle) => {
|
||||
const modAngle = ((angle % 360) + 360) % 360;
|
||||
return modAngle % 90 === 0;
|
||||
};
|
||||
|
||||
const handleEnd = () => {
|
||||
setIsDragging(false);
|
||||
setRotation((prevRotation) => {
|
||||
const snappedRotation = Math.round(prevRotation / 90) * 90;
|
||||
return snappedRotation;
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
if (isForRegister) {
|
||||
if (isVisible(rotation % 360 !== -0)) {
|
||||
emailInputRef.current.focus();
|
||||
} else if (isVisible(rotation % 360 !== -90)) {
|
||||
usernameInputRef.current.focus();
|
||||
} else if (isVisible(rotation % 360 !== -180)) {
|
||||
passwordInputRef.current.focus();
|
||||
}
|
||||
} else {
|
||||
if (isVisible(rotation % 360 !== -0)) {
|
||||
usernameInputRef.current.focus();
|
||||
} else if (isVisible(rotation % 360 !== -90)) {
|
||||
passwordInputRef.current.focus();
|
||||
}
|
||||
}
|
||||
}, [rotation]);
|
||||
|
||||
const handleMouseDown = (e) => {
|
||||
handleStart(e.clientX, e.clientY);
|
||||
};
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
handleMove(e.clientX, e.clientY);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
handleEnd();
|
||||
};
|
||||
|
||||
const handleTouchStart = (e) => {
|
||||
const touch = e.touches[0];
|
||||
handleStart(touch.clientX, touch.clientY);
|
||||
};
|
||||
|
||||
const handleTouchMove = (e) => {
|
||||
if (!isDragging) return;
|
||||
e.preventDefault();
|
||||
const touch = e.touches[0];
|
||||
handleMove(touch.clientX, touch.clientY);
|
||||
};
|
||||
|
||||
const handleTouchEnd = (e) => {
|
||||
e.preventDefault();
|
||||
handleEnd();
|
||||
};
|
||||
|
||||
const handleChildMouseDown = (e) => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const handleChildTouchStart = (e) => {
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const getAngle = (x, y) => {
|
||||
const rect = wheelRef.current.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
const dx = x - centerX;
|
||||
const dy = y - centerY;
|
||||
return Math.atan2(dy, dx) * (180 / Math.PI);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isDragging) {
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
document.addEventListener('touchmove', handleTouchMove, { passive: false });
|
||||
document.addEventListener('touchend', handleTouchEnd, { passive: false });
|
||||
} else {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
document.removeEventListener('touchmove', handleTouchMove);
|
||||
document.removeEventListener('touchend', handleTouchEnd);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
document.removeEventListener('touchmove', handleTouchMove);
|
||||
document.removeEventListener('touchend', handleTouchEnd);
|
||||
};
|
||||
}, [isDragging]);
|
||||
|
||||
const inputPositions = [-90, 0, 90, 180]; // Positions for the inputs
|
||||
|
||||
const isVisible = (angle) => {
|
||||
const modAngle = ((angle % 360) + 360) % 360;
|
||||
return modAngle % 90 === 0;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(isForRegister){
|
||||
if (isVisible(rotation % 360 !== -0)) {
|
||||
emailInputRef.current.focus();
|
||||
} else if (isVisible(rotation % 360 !== -90)) {
|
||||
usernameInputRef.current.focus();
|
||||
} else if (isVisible(rotation % 360 !== -180)) {
|
||||
passwordInputRef.current.focus();
|
||||
}
|
||||
}
|
||||
else{
|
||||
if (isVisible(rotation % 360 !== -0)) {
|
||||
usernameInputRef.current.focus();
|
||||
} else if (isVisible(rotation % 360 !== -90)) {
|
||||
passwordInputRef.current.focus();
|
||||
}
|
||||
}
|
||||
}, [rotation]);
|
||||
|
||||
return (
|
||||
<div className="roulette-wheel-container">
|
||||
<div
|
||||
className="roulette-wheel"
|
||||
ref={wheelRef}
|
||||
onMouseDown={handleMouseDown}
|
||||
onTouchStart={handleTouchStart}
|
||||
style={{ transform: `rotate(${rotation}deg)` }}
|
||||
return (
|
||||
<div className="roulette-wheel-container">
|
||||
<div
|
||||
className="roulette-wheel"
|
||||
ref={wheelRef}
|
||||
onMouseDown={handleMouseDown}
|
||||
onTouchStart={handleTouchStart}
|
||||
style={{ transform: `rotate(${rotation}deg)` }}
|
||||
>
|
||||
{!isForRegister ? (
|
||||
<>
|
||||
<input
|
||||
className={`roulette-input ${
|
||||
isVisible(rotation % 360 !== -0) ? "" : "hidden"
|
||||
}`}
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
ref={usernameInputRef}
|
||||
style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
|
||||
/>
|
||||
<input
|
||||
className={`roulette-input ${
|
||||
isVisible(rotation % 360 !== -90) ? "" : "hidden"
|
||||
}`}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
ref={passwordInputRef}
|
||||
style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
|
||||
/>
|
||||
<button
|
||||
className={`roulette-input ${
|
||||
isVisible(rotation % 360 !== -90) ? "" : "hidden"
|
||||
}`}
|
||||
onClick={handleSign}
|
||||
onMouseDown={handleChildMouseDown}
|
||||
onTouchStart={handleChildTouchStart}
|
||||
style={{ transform: "translate(10%, 320%) rotate(90deg)" }}
|
||||
>
|
||||
{!isForRegister ? (
|
||||
<>
|
||||
<input
|
||||
className={`roulette-input ${isVisible(rotation % 360 !== -0) ? '' : 'hidden'}`}
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
ref={usernameInputRef}
|
||||
style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
|
||||
/>
|
||||
<input
|
||||
className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
ref={passwordInputRef}
|
||||
style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
|
||||
/>
|
||||
<button
|
||||
className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`}
|
||||
onClick={handleSign}
|
||||
onMouseDown={handleChildMouseDown}
|
||||
onTouchStart={handleChildTouchStart}
|
||||
style={{ transform: "translate(10%, 320%) rotate(90deg)" }}
|
||||
>Sign in</button>
|
||||
</>)
|
||||
: (
|
||||
<>
|
||||
<input
|
||||
className={`roulette-input ${isVisible(rotation % 360 !== -0) ? '' : 'hidden'}`}
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
ref={emailInputRef}
|
||||
style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
|
||||
/>
|
||||
<input
|
||||
className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`}
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
ref={usernameInputRef}
|
||||
style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
|
||||
/>
|
||||
<input
|
||||
className={`roulette-input ${isVisible(rotation % 360 !== -180) ? '' : 'hidden'}`}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
ref={passwordInputRef}
|
||||
style={{ transform: "translate(-90%, 115%) rotate(180deg)" }}
|
||||
/>
|
||||
<button
|
||||
className={`roulette-button ${isVisible(rotation % 360 !== -180) ? '' : 'hidden'}`}
|
||||
onClick={handleSign}
|
||||
onMouseDown={handleChildMouseDown}
|
||||
onTouchStart={handleChildTouchStart}
|
||||
style={{ transform: "translate(-90%, 30%) rotate(180deg)" }}
|
||||
>Sign up</button>
|
||||
</>
|
||||
)}
|
||||
<img
|
||||
src={coffeeImage}
|
||||
className="roulette-image"
|
||||
alt="Coffee"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
Sign in
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<input
|
||||
className={`roulette-input ${
|
||||
isVisible(rotation % 360 !== -0) ? "" : "hidden"
|
||||
}`}
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
ref={emailInputRef}
|
||||
style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
|
||||
/>
|
||||
<input
|
||||
className={`roulette-input ${
|
||||
isVisible(rotation % 360 !== -90) ? "" : "hidden"
|
||||
}`}
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
ref={usernameInputRef}
|
||||
style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
|
||||
/>
|
||||
<input
|
||||
className={`roulette-input ${
|
||||
isVisible(rotation % 360 !== -180) ? "" : "hidden"
|
||||
}`}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
ref={passwordInputRef}
|
||||
style={{ transform: "translate(-90%, 115%) rotate(180deg)" }}
|
||||
/>
|
||||
<button
|
||||
className={`roulette-button ${
|
||||
isVisible(rotation % 360 !== -180) ? "" : "hidden"
|
||||
}`}
|
||||
onClick={handleSign}
|
||||
onMouseDown={handleChildMouseDown}
|
||||
onTouchStart={handleChildTouchStart}
|
||||
style={{ transform: "translate(-90%, 30%) rotate(180deg)" }}
|
||||
>
|
||||
Sign up
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<img src={coffeeImage} className="roulette-image" alt="Coffee" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RouletteWheel;
|
||||
|
||||
Reference in New Issue
Block a user