latest update 27 jul 24
This commit is contained in:
zadit
78
src/components/AccountUpdateModal.js
Normal file
78
src/components/AccountUpdateModal.js
Normal file
@@ -0,0 +1,78 @@
|
||||
// src/components/AccountUpdateModal.js
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import styles from './AccountUpdateModal.module.css';
|
||||
import { updateUser } from '../helpers/userHelpers';
|
||||
|
||||
const AccountUpdateModal = ({ user, showEmail, isOpen, onClose, onSubmit }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
username: user.username.startsWith('guest') ? '' : user.username || '',
|
||||
email: user.email || '',
|
||||
password: user.password === 'unsetunsetunset' ? '' : user.password || '',
|
||||
// Add other fields as needed
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await updateUser(formData);
|
||||
console.log('User updated successfully:', response);
|
||||
onSubmit(formData);
|
||||
} catch (error) {
|
||||
console.error('Failed to update user:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.modalOverlay}>
|
||||
<div className={styles.modalContent}>
|
||||
<h2>Complete Your Account</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label className={styles.formLabel}>
|
||||
Username:
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
className={styles.formInput}
|
||||
/>
|
||||
</label>
|
||||
{showEmail &&
|
||||
<label className={styles.formLabel}>
|
||||
Email:
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className={styles.formInput}
|
||||
/>
|
||||
</label>
|
||||
}
|
||||
<label className={styles.formLabel}>
|
||||
Password:
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
className={styles.formInput}
|
||||
/>
|
||||
</label>
|
||||
{/* Add other fields as needed */}
|
||||
<button type="submit" className={styles.submitButton}>Submit</button>
|
||||
</form>
|
||||
<button onClick={onClose} className={styles.closeButton}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountUpdateModal;
|
||||
27
src/components/AccountUpdateModal.module.css
Normal file
27
src/components/AccountUpdateModal.module.css
Normal file
@@ -0,0 +1,27 @@
|
||||
/* src/components/AccountUpdateModal.module.css */
|
||||
|
||||
.modalOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.modalContent {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
color: black;
|
||||
}
|
||||
|
||||
43
src/components/Footer.js
Normal file
43
src/components/Footer.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import styles from './Footer.module.css'; // assuming you have a CSS module for Footer
|
||||
import { useNavigationHelpers } from '../helpers/navigationHelpers';
|
||||
|
||||
export default function Footer({ shopId, cartItemsLength}) {
|
||||
const { goToShop, goToCart } = useNavigationHelpers(shopId);
|
||||
|
||||
return (
|
||||
<div className={styles.item}>
|
||||
<div className={styles['footer-rect']}>
|
||||
{/* SVG elements */}
|
||||
<div onClick={goToShop} className={styles['footer-icon']}>
|
||||
<svg viewBox="0 0 34 34">
|
||||
<path d="M14.0834 29.1667V18.9167H20.9167V29.1667H29.4584V15.5H34.5834L17.5001 0.125L0.416748 15.5H5.54175V29.1667H14.0834Z" fill="#8F8787" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className={styles['footer-icon']}>
|
||||
<svg viewBox="0 0 34 34">
|
||||
<path d="M20.8333 18.3333H19.5167L19.05 17.8833C20.6833 15.9833 21.6667 13.5167 21.6667 10.8333C21.6667 4.85 16.8167 0 10.8333 0C4.85 0 0 4.85 0 10.8333C0 16.8167 4.85 21.6667 10.8333 21.6667C13.5167 21.6667 15.9833 20.6833 17.8833 19.05L18.3333 19.5167V20.8333L26.6667 29.15L29.15 26.6667L20.8333 18.3333ZM10.8333 18.3333C6.68333 18.3333 3.33333 14.9833 3.33333 10.8333C3.33333 6.68333 6.68333 3.33333 10.8333 3.33333C14.9833 3.33333 18.3333 6.68333 18.3333 10.8333C18.3333 14.9833 14.9833 18.3333 10.8333 18.3333Z" fill="#8F8787" />
|
||||
</svg>
|
||||
</div>
|
||||
<div onClick={goToCart} className={styles['footer-icon']}>
|
||||
{cartItemsLength != '0' &&
|
||||
<div class={styles["circle"]}>
|
||||
{cartItemsLength}
|
||||
</div>
|
||||
}
|
||||
|
||||
<svg viewBox="0 0 34 34">
|
||||
<path d="M9.79175 24.75C8.09591 24.75 6.72383 26.1375 6.72383 27.8333C6.72383 29.5292 8.09591 30.9167 9.79175 30.9167C11.4876 30.9167 12.8751 29.5292 12.8751 27.8333C12.8751 26.1375 11.4876 24.75 9.79175 24.75ZM0.541748 0.0833435V3.16668H3.62508L9.17508 14.8679L7.09383 18.645C6.84717 19.0767 6.70842 19.5854 6.70842 20.125C6.70842 21.8208 8.09591 23.2083 9.79175 23.2083H28.2917V20.125H10.4392C10.2234 20.125 10.0538 19.9554 10.0538 19.7396L10.1001 19.5546L11.4876 17.0417H22.973C24.1292 17.0417 25.1467 16.4096 25.6709 15.4538L31.1901 5.44834C31.3134 5.23251 31.3751 4.97043 31.3751 4.70834C31.3751 3.86043 30.6813 3.16668 29.8334 3.16668H7.03217L5.583 0.0833435H0.541748ZM25.2084 24.75C23.5126 24.75 22.1405 26.1375 22.1405 27.8333C22.1405 29.5292 23.5126 30.9167 25.2084 30.9167C26.9042 30.9167 28.2917 29.5292 28.2917 27.8333C28.2917 26.1375 26.9042 24.75 25.2084 24.75Z" fill="#8F8787" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className={styles['footer-icon']}>
|
||||
<svg viewBox="0 0 34 34">
|
||||
<path d="M15.9842 0.166656C7.24421 0.166656 0.150879 7.25999 0.150879 16C0.150879 24.74 7.24421 31.8333 15.9842 31.8333C24.7242 31.8333 31.8175 24.74 31.8175 16C31.8175 7.25999 24.7242 0.166656 15.9842 0.166656ZM21.7 10.205C23.3942 10.205 24.7559 11.5667 24.7559 13.2608C24.7559 14.955 23.3942 16.3167 21.7 16.3167C20.0059 16.3167 18.6442 14.955 18.6442 13.2608C18.6284 11.5667 20.0059 10.205 21.7 10.205ZM12.2 7.70332C14.2584 7.70332 15.9367 9.38166 15.9367 11.44C15.9367 13.4983 14.2584 15.1767 12.2 15.1767C10.1417 15.1767 8.46338 13.4983 8.46338 11.44C8.46338 9.36582 10.1259 7.70332 12.2 7.70332ZM12.2 22.1592V28.0967C8.40005 26.9092 5.39171 23.98 4.06171 20.2433C5.72421 18.47 9.87255 17.5675 12.2 17.5675C13.0392 17.5675 14.1 17.6942 15.2084 17.9158C12.6117 19.2933 12.2 21.1142 12.2 22.1592ZM15.9842 28.6667C15.5567 28.6667 15.145 28.6508 14.7334 28.6033V22.1592C14.7334 19.9108 19.3884 18.7867 21.7 18.7867C23.3942 18.7867 26.3234 19.4042 27.78 20.6075C25.9275 25.31 21.3517 28.6667 15.9842 28.6667Z" fill="#8F8787" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Add more SVG elements as needed */}
|
||||
</div>
|
||||
<div className={styles['footer-bottom']}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
54
src/components/Footer.module.css
Normal file
54
src/components/Footer.module.css
Normal file
@@ -0,0 +1,54 @@
|
||||
.footer-rect {
|
||||
height: 75px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
/* Adjust spacing between SVG icons */
|
||||
align-items: center;
|
||||
padding: 0 10vw;
|
||||
/* Adjust horizontal padding inside the footer */
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
width: calc(100vw);
|
||||
/* Adjust size as needed, subtracting margin */
|
||||
height: 75px;
|
||||
/* Adjust size as needed */
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.footer-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
fill: black;
|
||||
/* Add any additional styles for SVG icons */
|
||||
margin: 0 10px;
|
||||
/* Adjust spacing between SVG icons */
|
||||
}
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
margin-top: -15px;
|
||||
margin-left: 20px;
|
||||
|
||||
/* Just making it pretty */
|
||||
background: #38a9e4;
|
||||
color: white;
|
||||
font-family:
|
||||
Helvetica,
|
||||
Arial Black,
|
||||
sans;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
330
src/components/Header.js
Normal file
330
src/components/Header.js
Normal file
@@ -0,0 +1,330 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import styled, { keyframes } from "styled-components";
|
||||
import { useNavigationHelpers } from "../helpers/navigationHelpers";
|
||||
|
||||
const HeaderBar = styled.div`
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 15px;
|
||||
color: black;
|
||||
background-color: white;
|
||||
`;
|
||||
|
||||
const Title = styled.h2`
|
||||
margin: 0;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-size: 32px;
|
||||
color: rgba(88, 55, 50, 1);
|
||||
`;
|
||||
|
||||
const ProfileName = styled.h2`
|
||||
position: absolute;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-size: 30px;
|
||||
z-index: 11;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
animation: ${(props) => {
|
||||
if (props.animate === "grow") return gg;
|
||||
if (props.animate === "shrink") return ss;
|
||||
return nn;
|
||||
}}
|
||||
0.5s forwards;
|
||||
`;
|
||||
|
||||
const nn = keyframes`
|
||||
0% {
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
width: 0ch;
|
||||
height: 60px;
|
||||
}
|
||||
100% {
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
width: 0ch;
|
||||
height: 60px;
|
||||
}
|
||||
`;
|
||||
|
||||
const gg = keyframes`
|
||||
0% {
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
width: 0ch;
|
||||
height: 60px;
|
||||
}
|
||||
100% {
|
||||
top: 34px;
|
||||
right: 30px;
|
||||
width: 200px; /* Adjust this value based on the length of the text */
|
||||
height: 60px;
|
||||
}
|
||||
`;
|
||||
|
||||
const ss = keyframes`
|
||||
0% {
|
||||
top: 34px;
|
||||
right: 30px;
|
||||
width: 200px; /* Adjust this value based on the length of the text */
|
||||
height: 60px;
|
||||
}
|
||||
100% {
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
width: 0ch;
|
||||
height: 60px;
|
||||
}
|
||||
`;
|
||||
|
||||
const ProfileImage = styled.img`
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
z-index: 12;
|
||||
animation: ${(props) => {
|
||||
if (props.animate === "grow") return g;
|
||||
if (props.animate === "shrink") return s;
|
||||
return "none";
|
||||
}}
|
||||
0.5s forwards;
|
||||
`;
|
||||
|
||||
const g = keyframes`
|
||||
0% {
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
100% {
|
||||
top: 10px;
|
||||
right: 220px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
`;
|
||||
|
||||
const s = keyframes`
|
||||
0% {
|
||||
top: 10px;
|
||||
right: 220px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
`;
|
||||
|
||||
const grow = keyframes`
|
||||
0% {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
}
|
||||
100% {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
const shrink = keyframes`
|
||||
0% {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
border-radius: 20px;
|
||||
}
|
||||
100% {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
`;
|
||||
|
||||
const Rectangle = styled.div`
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
right: 15px;
|
||||
width: 200px;
|
||||
height: auto;
|
||||
background-color: white;
|
||||
z-index: 10;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
animation: ${(props) => (props.animate === "grow" ? grow : shrink)} 0.5s
|
||||
forwards;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
`;
|
||||
|
||||
const ChildContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 70px;
|
||||
`;
|
||||
|
||||
const ChildWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Child = styled.div`
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin: 5px;
|
||||
background-color: rgba(88, 55, 50, 0.2);
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
padding-top: 10px;
|
||||
padding-left: 5px;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
|
||||
${(props) =>
|
||||
props.hasChildren &&
|
||||
`
|
||||
height: auto;
|
||||
padding-bottom: 10px;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Header = ({
|
||||
HeaderText,
|
||||
shopId,
|
||||
user,
|
||||
isEdit,
|
||||
isLogout,
|
||||
guestSides,
|
||||
guestSideOfClerk,
|
||||
removeConnectedGuestSides,
|
||||
}) => {
|
||||
const { goToLogin, goToGuestSideLogin, goToAdminCafes } =
|
||||
useNavigationHelpers(shopId);
|
||||
const [showRectangle, setShowRectangle] = useState(false);
|
||||
const [animate, setAnimate] = useState("");
|
||||
const rectangleRef = useRef(null);
|
||||
const [guestSideOf, setGuestSideOf] = useState(null);
|
||||
|
||||
const handleImageClick = () => {
|
||||
if (showRectangle) {
|
||||
setAnimate("shrink");
|
||||
setTimeout(() => setShowRectangle(false), 500);
|
||||
} else {
|
||||
setAnimate("grow");
|
||||
setShowRectangle(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClickOutside = (event) => {
|
||||
if (rectangleRef.current && !rectangleRef.current.contains(event.target)) {
|
||||
setAnimate("shrink");
|
||||
setTimeout(() => setShowRectangle(false), 500);
|
||||
}
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
if (showRectangle) {
|
||||
setAnimate("shrink");
|
||||
setTimeout(() => setShowRectangle(false), 500);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (showRectangle) {
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
} else {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}, [showRectangle]);
|
||||
|
||||
useEffect(() => {
|
||||
setGuestSideOf(guestSideOfClerk);
|
||||
console.log(guestSideOfClerk);
|
||||
}, [guestSideOfClerk]);
|
||||
|
||||
return (
|
||||
<HeaderBar>
|
||||
<Title>{HeaderText}</Title>
|
||||
<ProfileImage
|
||||
src="https://static-00.iconduck.com/assets.00/profile-major-icon-1024x1024-9rtgyx30.png"
|
||||
alt="Profile"
|
||||
onClick={handleImageClick}
|
||||
animate={showRectangle && animate}
|
||||
/>
|
||||
<ProfileName animate={showRectangle && animate}>
|
||||
{user.username !== undefined ? user.username : "guest"}
|
||||
</ProfileName>
|
||||
{showRectangle && (
|
||||
<Rectangle ref={rectangleRef} animate={animate}>
|
||||
<ChildContainer>
|
||||
{guestSideOfClerk && guestSideOfClerk.clerkUsername && (
|
||||
<Child hasChildren>
|
||||
this is the guest side of {guestSideOfClerk.clerkUsername}
|
||||
</Child>
|
||||
)}
|
||||
{user.username === undefined && !guestSideOfClerk && (
|
||||
<Child onClick={goToLogin}>Click to login</Child>
|
||||
)}
|
||||
{user.username !== undefined && (
|
||||
<Child onClick={isEdit}>Edit</Child>
|
||||
)}
|
||||
{shopId && user.username !== undefined && user.roleId === 1 && (
|
||||
<Child onClick={goToAdminCafes}>Your Cafes</Child>
|
||||
)}
|
||||
{user.username !== undefined && user.roleId === 2 && (
|
||||
<Child hasChildren>
|
||||
connected guest sides
|
||||
<Child onClick={goToGuestSideLogin}>+ Add guest side</Child>
|
||||
{guestSides &&
|
||||
guestSides.map((key, index) => (
|
||||
<Child key={index}>
|
||||
guest side {index + 1}
|
||||
<button
|
||||
onClick={() =>
|
||||
removeConnectedGuestSides(guestSides[index][3])
|
||||
}
|
||||
>
|
||||
remove
|
||||
</button>
|
||||
</Child>
|
||||
))}
|
||||
</Child>
|
||||
)}
|
||||
{user.username !== undefined && (
|
||||
<Child onClick={isLogout}>Logout</Child>
|
||||
)}
|
||||
</ChildContainer>
|
||||
</Rectangle>
|
||||
)}
|
||||
</HeaderBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
197
src/components/Item.js
Normal file
197
src/components/Item.js
Normal file
@@ -0,0 +1,197 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import styles from "./Item.module.css";
|
||||
|
||||
const Item = ({
|
||||
blank,
|
||||
forCart,
|
||||
forInvoice,
|
||||
name: initialName,
|
||||
price: initialPrice,
|
||||
qty: initialQty,
|
||||
imageUrl,
|
||||
id,
|
||||
onPlusClick,
|
||||
onNegativeClick,
|
||||
handleCreateItem,
|
||||
onRemoveClick,
|
||||
}) => {
|
||||
const [selectedImage, setSelectedImage] = useState(null);
|
||||
const [previewUrl, setPreviewUrl] = useState(imageUrl);
|
||||
const [itemQty, setItemQty] = useState(blank ? 0 : initialQty);
|
||||
const [itemName, setItemName] = useState(initialName);
|
||||
const [itemPrice, setItemPrice] = useState(initialPrice);
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedImage) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setPreviewUrl(reader.result);
|
||||
};
|
||||
reader.readAsDataURL(selectedImage);
|
||||
} else {
|
||||
setPreviewUrl(imageUrl);
|
||||
}
|
||||
}, [selectedImage, imageUrl]);
|
||||
|
||||
const handlePlusClick = () => {
|
||||
if (!blank) onPlusClick(id);
|
||||
setItemQty(itemQty + 1);
|
||||
};
|
||||
|
||||
const handleNegativeClick = () => {
|
||||
if (itemQty > 0) {
|
||||
if (!blank) onNegativeClick(id);
|
||||
setItemQty(itemQty - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
handleCreateItem(itemName, itemPrice, itemQty, selectedImage);
|
||||
};
|
||||
|
||||
const handleRemoveClick = () => {
|
||||
onRemoveClick(id);
|
||||
};
|
||||
|
||||
const handleImageClick = () => {
|
||||
fileInputRef.current.click();
|
||||
};
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
setSelectedImage(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePriceChange = (event) => {
|
||||
setItemPrice(event.target.value);
|
||||
};
|
||||
|
||||
const handleQtyChange = (event) => {
|
||||
const newQty = parseInt(event.target.value, 10);
|
||||
if (!isNaN(newQty)) {
|
||||
setItemQty(newQty);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNameChange = (event) => {
|
||||
setItemName(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""}`}>
|
||||
{!forInvoice && (
|
||||
<div className={styles.imageContainer}>
|
||||
<img
|
||||
src={previewUrl}
|
||||
onError={({ currentTarget }) => {
|
||||
currentTarget.onerror = null; // prevents looping
|
||||
currentTarget.src =
|
||||
"https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg";
|
||||
}}
|
||||
alt={itemName}
|
||||
className={styles.itemImage}
|
||||
/>
|
||||
{blank && (
|
||||
<div className={styles.overlay} onClick={handleImageClick}>
|
||||
<span>Click To Add Image</span>
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className={styles.fileInput}
|
||||
onChange={handleFileChange}
|
||||
accept="image/*"
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.itemDetails}>
|
||||
<input
|
||||
className={`${forInvoice ? styles.itemInvoiceName : styles.itemName} ${blank ? styles.blank : styles.notblank}`}
|
||||
value={itemName}
|
||||
onChange={handleNameChange}
|
||||
disabled={!blank}
|
||||
/>
|
||||
|
||||
{forInvoice && (
|
||||
<>
|
||||
<p className={styles.multiplySymbol}>x</p>
|
||||
<p className={styles.qtyInvoice}>{itemQty}</p>
|
||||
</>
|
||||
)}
|
||||
{!forInvoice && (
|
||||
<input
|
||||
className={`${styles.itemPrice} ${blank ? styles.blank : styles.notblank}`}
|
||||
value={itemPrice}
|
||||
onChange={handlePriceChange}
|
||||
disabled={!blank}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!forInvoice && (
|
||||
<div className={styles.itemQty}>
|
||||
<svg
|
||||
className={styles.plusNegative}
|
||||
onClick={handleNegativeClick}
|
||||
clipRule="evenodd"
|
||||
fillRule="evenodd"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit="2"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm4.253 7.75h-8.5c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
{!blank && <p className={styles.itemQtyValue}>{itemQty}</p>}
|
||||
{blank && (
|
||||
<input
|
||||
className={styles.itemQtyInput}
|
||||
value={itemQty}
|
||||
onChange={handleQtyChange}
|
||||
disabled={!blank}
|
||||
/>
|
||||
)}
|
||||
<svg
|
||||
className={styles.plusNegative}
|
||||
onClick={handlePlusClick}
|
||||
clipRule="evenodd"
|
||||
fillRule="evenodd"
|
||||
strokeLinejoin="round"
|
||||
strokeMiterlimit="2"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{forInvoice && (
|
||||
<p className={styles.itemPriceInvoice}>Rp {itemQty * itemPrice}</p>
|
||||
)}
|
||||
</div>
|
||||
{forCart && (
|
||||
<div className={styles.remove} onClick={handleRemoveClick}>
|
||||
ⓧ
|
||||
</div>
|
||||
)}
|
||||
{blank && (
|
||||
<button className={styles.createItem} onClick={handleCreate}>
|
||||
Create Item
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Item;
|
||||
205
src/components/Item.module.css
Normal file
205
src/components/Item.module.css
Normal file
@@ -0,0 +1,205 @@
|
||||
.itemContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 10px;
|
||||
color: rgba(88, 55, 50, 1);
|
||||
font-size: 32px;
|
||||
box-sizing: border-box; /* Include padding and border in the element's total width */
|
||||
width: 100%; /* Ensure the item does not exceed the parent's width */
|
||||
overflow: hidden; /* Prevent internal overflow */
|
||||
}
|
||||
|
||||
|
||||
.itemInvoice {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: 18px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.itemInvoice:last-child {
|
||||
margin-bottom: 0; /* Remove margin-bottom for the last child */
|
||||
}
|
||||
|
||||
.itemImage {
|
||||
width: 139px;
|
||||
height: 149px;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
position: relative;
|
||||
width: 139px;
|
||||
height: 149px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.overlay:hover {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.fileInput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.itemDetails {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-left: 10px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.itemInvoiceDetails {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-left: 10px;
|
||||
margin-top: -15px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.itemName {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
width: calc(100% - 15px); /* Adjust the width to prevent overflow */
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
margin-top: 0;
|
||||
margin: 0 5px;
|
||||
color: rgba(88, 55, 50, 1);
|
||||
background-color: transparent;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.itemInvoiceName {
|
||||
width: calc(260% - 15px);
|
||||
background-color: transparent;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.multiplySymbol {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.qtyInvoice {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.itemPrice {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
width: calc(100% - 15px); /* Adjust the width to prevent overflow */
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 35px;
|
||||
margin-left: 5px;
|
||||
color: #D9C61C;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.itemPriceInvoice {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
width: calc(100% - 15px); /* Adjust the width to prevent overflow */
|
||||
font-size: 0.9rem;
|
||||
margin-left: 5px;
|
||||
color: #D9C61C;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.itemQty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.itemQtyValue {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.itemQtyInput {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
width: 30px; /* Adjust the width to prevent overflow */
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.plusNegative {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.remove {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: -10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.itemInvoice .itemDetails {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.itemInvoice .itemName, .itemInvoice .itemPrice, .itemInvoice .itemQty .qtyInvoice .multiplySymbol {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.blank {
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.notblank {
|
||||
border: 1px solid #ffffff00;
|
||||
}
|
||||
|
||||
.createItem {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
203
src/components/ItemLister.js
Normal file
203
src/components/ItemLister.js
Normal file
@@ -0,0 +1,203 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import styles from "./ItemLister.module.css";
|
||||
import Item from "./Item";
|
||||
import {
|
||||
getItemQtyFromCart,
|
||||
updateItemQtyInCart,
|
||||
removeItemFromCart,
|
||||
} from "../helpers/cartHelpers.js";
|
||||
import {
|
||||
getImageUrl,
|
||||
createItem,
|
||||
updateItemType,
|
||||
deleteItemType,
|
||||
} from "../helpers/itemHelper.js";
|
||||
|
||||
const ItemLister = ({
|
||||
itemTypeId,
|
||||
refreshTotal,
|
||||
shopId,
|
||||
user,
|
||||
typeName,
|
||||
itemList,
|
||||
forCart,
|
||||
forInvoice,
|
||||
}) => {
|
||||
const [items, setItems] = useState(
|
||||
itemList.map((item) => ({
|
||||
...item,
|
||||
qty: getItemQtyFromCart(shopId, item.itemId),
|
||||
})),
|
||||
);
|
||||
const [isEdit, setIsEditing] = useState(false);
|
||||
const [isAddingNewItem, setIsAddingNewItem] = useState(false);
|
||||
const [editedTypeName, setEditedTypeName] = useState(typeName);
|
||||
const typeNameInputRef = useRef(null);
|
||||
|
||||
const handlePlusClick = (itemId) => {
|
||||
const updatedItems = items.map((item) => {
|
||||
if (item.itemId === itemId) {
|
||||
const newQty = item.qty + 1;
|
||||
updateItemQtyInCart(shopId, itemId, newQty);
|
||||
|
||||
if (forCart) refreshTotal();
|
||||
|
||||
return { ...item, qty: newQty };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
setItems(updatedItems);
|
||||
};
|
||||
|
||||
const handleNegativeClick = (itemId) => {
|
||||
const updatedItems = items
|
||||
.map((item) => {
|
||||
if (item.itemId === itemId && item.qty > 0) {
|
||||
const newQty = item.qty - 1;
|
||||
updateItemQtyInCart(shopId, itemId, newQty);
|
||||
|
||||
if (forCart) {
|
||||
refreshTotal();
|
||||
return newQty > 0 ? { ...item, qty: newQty } : null;
|
||||
} else return { ...item, qty: newQty };
|
||||
}
|
||||
return item;
|
||||
})
|
||||
.filter((item) => item !== null);
|
||||
|
||||
setItems(updatedItems);
|
||||
};
|
||||
|
||||
const handleRemoveClick = (itemId) => {
|
||||
removeItemFromCart(shopId, itemId);
|
||||
const updatedItems = items.filter((item) => item.itemId !== itemId);
|
||||
setItems(updatedItems);
|
||||
|
||||
if (!forCart) return;
|
||||
refreshTotal();
|
||||
};
|
||||
|
||||
const toggleEditTypeItem = () => {
|
||||
setIsEditing((prev) => !prev);
|
||||
if (!isEdit) {
|
||||
setTimeout(() => {
|
||||
typeNameInputRef.current.focus();
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveType = async () => {
|
||||
try {
|
||||
await updateItemType(shopId, itemTypeId, typeNameInputRef.current.value);
|
||||
setIsEditing(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to save item type:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveType = async () => {
|
||||
try {
|
||||
await deleteItemType(shopId, itemTypeId);
|
||||
setIsEditing(false);
|
||||
// Optionally, you might want to refresh or update the parent component state here
|
||||
} catch (error) {
|
||||
console.error("Failed to delete item type:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleAddNewItem = () => {
|
||||
setIsAddingNewItem((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{(items.length > 0 || (user && user.roleId == 1)) && (
|
||||
<div className={styles["item-lister"]}>
|
||||
<div className={styles["title-container"]}>
|
||||
<input
|
||||
ref={typeNameInputRef}
|
||||
className={`${styles.title} ${user && user.roleId == 1 && isEdit ? styles.border : styles.noborder}`}
|
||||
value={editedTypeName}
|
||||
onChange={(e) => setEditedTypeName(e.target.value)}
|
||||
disabled={!isEdit}
|
||||
/>
|
||||
{user && user.roleId == 1 && (
|
||||
<>
|
||||
<button
|
||||
className={styles["edit-typeItem-button"]}
|
||||
onClick={toggleEditTypeItem}
|
||||
>
|
||||
{isEdit ? "Cancel" : "Edit"}
|
||||
</button>
|
||||
{isEdit && (
|
||||
<button
|
||||
className={styles["edit-typeItem-button"]}
|
||||
onClick={handleSaveType}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles["item-list"]}>
|
||||
{user && user.roleId == 1 && isEdit && (
|
||||
<>
|
||||
<button
|
||||
className={styles["add-item-button"]}
|
||||
onClick={toggleAddNewItem}
|
||||
>
|
||||
{isAddingNewItem ? "Cancel" : "Add new Item"}
|
||||
</button>
|
||||
{isAddingNewItem && (
|
||||
<Item
|
||||
blank={true}
|
||||
handleCreateItem={(name, price, qty, selectedImage) =>
|
||||
createItem(
|
||||
shopId,
|
||||
name,
|
||||
price,
|
||||
qty,
|
||||
selectedImage,
|
||||
itemTypeId,
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{items.map((item) => {
|
||||
return !forCart || (forCart && item.qty > 0) ? (
|
||||
<Item
|
||||
key={item.itemId}
|
||||
forCart={forCart}
|
||||
forInvoice={forInvoice}
|
||||
name={item.name}
|
||||
price={item.price}
|
||||
qty={item.qty}
|
||||
imageUrl={getImageUrl(item.image)}
|
||||
onPlusClick={() => handlePlusClick(item.itemId)}
|
||||
onNegativeClick={() => handleNegativeClick(item.itemId)}
|
||||
onRemoveClick={() => handleRemoveClick(item.itemId)}
|
||||
/>
|
||||
) : null;
|
||||
})}
|
||||
|
||||
{user && user.roleId == 1 && isEdit && (
|
||||
<>
|
||||
<button
|
||||
className={styles["add-item-button"]}
|
||||
onClick={handleRemoveType}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ItemLister;
|
||||
61
src/components/ItemLister.module.css
Normal file
61
src/components/ItemLister.module.css
Normal file
@@ -0,0 +1,61 @@
|
||||
/* ItemLister.module.css */
|
||||
|
||||
.item-lister {
|
||||
width: 100%;
|
||||
padding: 10px; /* Adjust padding as needed */
|
||||
box-sizing: border-box; /* Ensure padding doesn't affect width */
|
||||
}
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
background-color: transparent;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-size: 32px;
|
||||
color: rgba(88, 55, 50, 1);
|
||||
text-align: left;
|
||||
width: calc(70% - 10px);
|
||||
padding-left: 10px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.edit-typeItem-button {
|
||||
margin-left: auto; /* Push the button to the right */
|
||||
padding: 8px 16px; /* Adjust padding as needed */
|
||||
font-size: 14px;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-item-button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 16px; /* Adjust padding as needed */
|
||||
font-size: 14px;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
display: flex;
|
||||
flex-direction: column; /* Display items in a column */
|
||||
gap: 10px; /* Space between each item */
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.noborder {
|
||||
border: 1px solid #ffffff00;
|
||||
}
|
||||
73
src/components/ItemType.js
Normal file
73
src/components/ItemType.js
Normal file
@@ -0,0 +1,73 @@
|
||||
import React, { useRef, useEffect, useState } from 'react';
|
||||
import styles from './ItemType.module.css';
|
||||
import { getImageUrl } from '../helpers/itemHelper';
|
||||
|
||||
export default function ItemType({ onClick, onCreate, blank, name: initialName = '', imageUrl }) {
|
||||
const inputRef = useRef(null);
|
||||
const [name, setName] = useState(initialName);
|
||||
const [selectedImage, setSelectedImage] = useState(null);
|
||||
const [previewUrl, setPreviewUrl] = useState(imageUrl);
|
||||
|
||||
useEffect(() => {
|
||||
if (blank && inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, [blank]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedImage) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setPreviewUrl(reader.result);
|
||||
};
|
||||
reader.readAsDataURL(selectedImage);
|
||||
} else {
|
||||
setPreviewUrl(getImageUrl(imageUrl));
|
||||
}
|
||||
}, [selectedImage, imageUrl]);
|
||||
|
||||
const handleImageChange = (e) => {
|
||||
setSelectedImage(e.target.files[0]);
|
||||
};
|
||||
|
||||
const handleNameChange = (e) => {
|
||||
setName(e.target.value);
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!selectedImage) {
|
||||
console.error('No image selected');
|
||||
return;
|
||||
}
|
||||
|
||||
onCreate(name, selectedImage);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles["item-type"]}>
|
||||
<div onClick={onClick} className={styles["item-type-rect"]}>
|
||||
<img src={previewUrl} alt={name} className={styles["item-type-image"]} />
|
||||
{blank && (
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className={styles["item-type-image-input"]}
|
||||
onChange={handleImageChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
ref={inputRef}
|
||||
className={`${styles["item-type-name"]} ${blank ? styles.border : styles.noborder}`}
|
||||
value={name}
|
||||
onChange={handleNameChange}
|
||||
disabled={!blank}
|
||||
/>
|
||||
{blank && (
|
||||
<button className={styles["item-type-create"]} onClick={handleCreate}>
|
||||
create
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
72
src/components/ItemType.module.css
Normal file
72
src/components/ItemType.module.css
Normal file
@@ -0,0 +1,72 @@
|
||||
.item-type {
|
||||
width: calc(25vw - 20px);
|
||||
/* Adjust size as needed, subtracting margin */
|
||||
height: calc(39vw - 20px);
|
||||
/* Adjust size as needed */
|
||||
margin: 1px 10px -5px;
|
||||
/* Left and right margin */
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item-type-rect {
|
||||
position: relative;
|
||||
height: 20vw;
|
||||
width: 20vw;
|
||||
object-fit: cover;
|
||||
border-radius: 15px;
|
||||
/* Rounded corners */
|
||||
background-color: #fff;
|
||||
/* Background color of the item */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
/* Optional: Shadow for better visual */
|
||||
}
|
||||
|
||||
.item-type-name {
|
||||
position: relative;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
top: 13px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 14px;
|
||||
/* Adjust font size as needed */
|
||||
color: #333;
|
||||
width: calc(25vw - 30px);
|
||||
/* Adjust size as needed, subtracting margin */
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.item-type-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 15px;
|
||||
/* Rounded corners */
|
||||
}
|
||||
|
||||
.item-type-image-input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-type-create {
|
||||
position: absolute;
|
||||
margin-top: 130px;
|
||||
width: 20vw;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.noborder {
|
||||
border: 1px solid #ffffff00;
|
||||
}
|
||||
19
src/components/ItemTypeLister.css
Normal file
19
src/components/ItemTypeLister.css
Normal file
@@ -0,0 +1,19 @@
|
||||
.item-type-lister {
|
||||
width: 100vw;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
padding: 3px 0px;
|
||||
}
|
||||
|
||||
.item-type-list {
|
||||
display: inline-flex;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.item-type {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
/* Space between items */
|
||||
}
|
||||
44
src/components/ItemTypeLister.js
Normal file
44
src/components/ItemTypeLister.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import React, { useState } from 'react';
|
||||
import './ItemTypeLister.css';
|
||||
import ItemType from './ItemType';
|
||||
import { createItemType } from '../helpers/itemHelper.js';
|
||||
|
||||
const ItemTypeLister = ({ shopId, user, itemTypes }) => {
|
||||
const [isAddingNewItem, setIsAddingNewItem] = useState(false);
|
||||
|
||||
const toggleAddNewItem = () => {
|
||||
console.log("aaa")
|
||||
setIsAddingNewItem(prev => !prev);
|
||||
};
|
||||
|
||||
async function handleCreate(name, selectedImage) {
|
||||
createItemType(shopId, name, selectedImage);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="item-type-lister">
|
||||
<div className="item-type-list">
|
||||
{itemTypes && itemTypes.length > 1 &&
|
||||
<ItemType name={"All"} imageUrl={"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAY1BMVEX///8BAQEEBAT09PT8/PzFxcWGhobu7u7R0dHLy8uoqKhTU1N7e3tXV1fIyMguLi7d3d08PDyenp41NTWBgYF1dXVHR0dMTEwTExPj4+O6urrp6emWlpasrKy2trZeXl4aGhrSJRZxAAADF0lEQVR4nO3Zi3aiMBCAYQIR71VbtXft+z/lJoFigAkNbYHdPf/X3VPqGeMkwdxIEgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAT0dGBVaSOe5vuV/4giqR1mXOPXL6M1X4r9Cn5l+kqCx3R2Nq7igjWPYoeWjbPkpg09LdiJ/dyPK3P22O+iIid5ZvtebvJZxGxi/y4Pa9Px5efJvh99i56fVM3q+4RJFv5seHeseVqP/btdYDsY5hE7nZVGqn5/7jvqOHiUASVDsE+NyXsH5UfvLub4qtoP/Hd5lEkYn+Zf+Fb9d7lXAa73/fB2KUryytZvQ9Qgy9pm3TqNbW7WAai72udojqruKwq5sdOMJ4ub51SXNnrp2cxdqH8YHcd7PHnp7J+foebphu9inMl+pAyyQ5i7KE13Nj3ftQ6sDIfvkoNef22U59fmoswKqzaCTurRqz942ILaZZs/j6OVrPS805o6dS8dG3Uz65fAhVUqrG6MROFvkpdaF7ZjT1nvAj5Fm2/b1VxpsSszc+s2d96r+rf2Fv02FP/SeoSl9ildZfmUtLulbxV7kW6+Z3TOBWrVBVqWbdiN3LKxqYVuxbj3CeNUS2PON45D80+zLbBGm6z5lDzEIg0Hzdm9ZIkPHioXTN0/hiMPbfmgF0wlj78be5TxVz+l+/hSZ7vVXMstXuh7rFU14IvwaYbeyztmg/rd6mdD8UZLm3Nhzo8H6rR50N5TWN+rllz2dZjTZPYNU0qr2nkNf2AOtalPleBjnVpy0Uaw8TFwdCkvUVq9xaC6L2F9SG3xuh7C11uVG91c20fuT9UX+wPG7vlNLy1HtDnHr/KojORnnv81LtVXbmT7PHdOU119FL8Crd0/3Mav+RJzmnks7bwAbx/1pb+C2dthZ+cl4aO9l0prfPSCQ/2izPvzQBn3pupz7wL3vOFqEczsc8tkuSveW5RinqcJF/Lwf7TxsmfPcWmoIWrUGjt+eF3Uvolfdq3Pg71ehsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACASfwBIesXINu4PFgAAAAASUVORK5CYII="} />
|
||||
}
|
||||
{itemTypes && itemTypes.map(itemType => (
|
||||
(user && user.roleId == 1 || itemType.itemList.length > 0) && (
|
||||
<ItemType
|
||||
key={itemType.itemTypeId}
|
||||
name={itemType.name}
|
||||
imageUrl={itemType.image}
|
||||
/>
|
||||
)
|
||||
))}
|
||||
{user && user.roleId == 1 && isAddingNewItem &&
|
||||
<ItemType blank={true} name={"blank"} onCreate = {handleCreate} />
|
||||
}
|
||||
{user && user.roleId == 1 &&
|
||||
<ItemType onClick = {toggleAddNewItem} name={"create"} imageUrl={"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnd07OYAm1f7T6JzziFU7U8X1_IL3bADiVrg&usqp=CAU"} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ItemTypeLister;
|
||||
19
src/components/Loading.css
Normal file
19
src/components/Loading.css
Normal file
@@ -0,0 +1,19 @@
|
||||
/* Loader.module.css */
|
||||
.Loader {
|
||||
display: flex; /* Enable Flexbox */
|
||||
justify-content: center; /* Center horizontally */
|
||||
align-items: center; /* Center vertically */
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.LoaderChild {
|
||||
width: 80px; /* Set the width to 80px */
|
||||
height: 400px;
|
||||
color: black;
|
||||
}
|
||||
18
src/components/Modal.js
Normal file
18
src/components/Modal.js
Normal file
@@ -0,0 +1,18 @@
|
||||
// src/components/Modal.js
|
||||
import React from 'react';
|
||||
import styles from './Modal.module.css';
|
||||
|
||||
const Modal = ({ isOpen, onClose, children }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.modalOverlay}>
|
||||
<div className={styles.modalContent}>
|
||||
{children}
|
||||
<button onClick={onClose} className={styles.closeButton}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
34
src/components/Modal.module.css
Normal file
34
src/components/Modal.module.css
Normal file
@@ -0,0 +1,34 @@
|
||||
/* src/components/Modal.module.css */
|
||||
.modalOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modalContent {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
width: 500px;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
margin-top: 20px;
|
||||
background: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
62
src/components/MusicComponent.css
Normal file
62
src/components/MusicComponent.css
Normal file
@@ -0,0 +1,62 @@
|
||||
.song-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.decisionbgrnd {
|
||||
position: absolute;
|
||||
height: 90%;
|
||||
width: 200vw;
|
||||
transform: scale(1.01,1.194);
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.bgrnd {
|
||||
position: absolute;
|
||||
height: 90%;
|
||||
width: 200vw;
|
||||
transform: scale(2,1.2);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.decision {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.song-image {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
max-width: 70px; /* Optional: Set a maximum width to prevent the image from being too large */
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.song-details {
|
||||
flex-grow: 1;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.song-name {
|
||||
text-align: start;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
text-align: start;
|
||||
font-size: 0.9rem;
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.song-duration {
|
||||
font-size: 0.9rem;
|
||||
color: white;
|
||||
}
|
||||
142
src/components/MusicComponent.js
Normal file
142
src/components/MusicComponent.js
Normal file
@@ -0,0 +1,142 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import './MusicComponent.css'; // Import CSS file
|
||||
// import VinylComponent from './VinylComponent';
|
||||
|
||||
const MusicComponent = ({ song, min, max, onDecision }) => {
|
||||
const [backgroundColor, setBackgroundColor] = useState('rgba(0, 0, 0, 0)');
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const [positionX, setPositionX] = useState(0);
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const [startX, setStartX] = useState(0);
|
||||
const containerRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentTime(prevTime => prevTime + 1);
|
||||
}, 1000);
|
||||
|
||||
// Cleanup function to clear the interval when the component unmounts
|
||||
return () => clearInterval(interval);
|
||||
}, []); // Empty dependency array to run the effect only once when the component mounts
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setPositionX(0);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleMouseDown = (event) => {
|
||||
setDragging(true);
|
||||
setStartX(event.clientX);
|
||||
};
|
||||
|
||||
const handleMouseMove = (event) => {
|
||||
if (dragging && !song.set) {
|
||||
const delta = event.clientX - startX;
|
||||
const newPositionX = positionX + delta;
|
||||
const minPos = 0;
|
||||
const maxPos = containerRef.current.offsetWidth - event.target.offsetWidth;
|
||||
const xpos = Math.min(Math.max(newPositionX, minPos), maxPos);
|
||||
|
||||
setPositionX(xpos);
|
||||
handleDrag(xpos);
|
||||
setStartX(event.clientX);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setDragging(false);
|
||||
|
||||
setPositionX(0);
|
||||
setBackgroundColor('transparent');
|
||||
|
||||
if (positionX > 99) {
|
||||
onDecision(true);
|
||||
}
|
||||
else if (positionX < -99) {
|
||||
onDecision(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchStart = (event) => {
|
||||
setDragging(true);
|
||||
setStartX(event.touches[0].clientX);
|
||||
};
|
||||
|
||||
const handleTouchMove = (event) => {
|
||||
if (dragging && !song.set) {
|
||||
const delta = event.touches[0].clientX - startX;
|
||||
const newPositionX = positionX + delta;
|
||||
const minPos = min;
|
||||
const maxPos = max;
|
||||
const xpos = Math.min(Math.max(newPositionX, minPos), maxPos);
|
||||
|
||||
setPositionX(xpos);
|
||||
handleDrag(xpos);
|
||||
setStartX(event.touches[0].clientX);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
setDragging(false);
|
||||
|
||||
setPositionX(0);
|
||||
setBackgroundColor('transparent');
|
||||
|
||||
if (positionX > 99) {
|
||||
onDecision(true);
|
||||
}
|
||||
else if (positionX < -99) {
|
||||
onDecision(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function to convert milliseconds to mm:ss format
|
||||
const formatDuration = (durationMs) => {
|
||||
const minutes = Math.floor(durationMs / 60000);
|
||||
const seconds = ((durationMs % 60000) / 1000).toFixed(0);
|
||||
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
|
||||
};
|
||||
|
||||
const handleDrag = (x) => {
|
||||
const alpha = Math.min(Math.abs(x) / 90, 1);
|
||||
if (x > 0)
|
||||
setBackgroundColor(`rgba(172, 255, 189, ${alpha})`);
|
||||
else if (x < 0)
|
||||
setBackgroundColor(`rgba(255, 99, 99, ${alpha})`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="song-item"
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
style={{ transform: `translateX(${positionX}px)` }}
|
||||
ref={containerRef}>
|
||||
{/* {min === 0 && max === 0 &&
|
||||
<VinylComponent
|
||||
album={songg.image || songg.album.images[0].url}
|
||||
/>} */}
|
||||
{song.set && <div className="decisionbgrnd" style={{ backgroundColor: song.bePlayed ? "green": "red" }}>
|
||||
<h1 className="decision">{song.bePlayed ? "next up" : "skipped"}</h1></div>}
|
||||
<div className="bgrnd" style={{ backgroundColor: backgroundColor }}></div>
|
||||
<img src={song.image} alt={song.name} className="song-image" />
|
||||
<div className="song-details">
|
||||
<p className="song-name">{song.name}</p>
|
||||
<p className="artist-name">{song.artist}</p>
|
||||
{min < 0 && <p className="artist-name"><--- {song.disagree} no - {song.agree} yes ---></p>}
|
||||
</div>
|
||||
<p className="song-duration">{formatDuration(song.duration_ms)}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MusicComponent;
|
||||
217
src/components/MusicPlayer.css
Normal file
217
src/components/MusicPlayer.css
Normal file
@@ -0,0 +1,217 @@
|
||||
.music-player {
|
||||
position: relative;
|
||||
width: 95%;
|
||||
margin: -10px auto 20px;
|
||||
/* Added padding for top and bottom */
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
/* Add border-radius to the music player container */
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.current-bgr {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 142px;
|
||||
/* Adjust height as needed */
|
||||
background-size: cover;
|
||||
/* Adjust background image size */
|
||||
background-position: center;
|
||||
/* Center the background image */
|
||||
filter: blur(1.5px);
|
||||
-webkit-filter: blur(1.5px);
|
||||
border-radius: 15px 15px 0 0;
|
||||
background-color: rgb(95 121 89);
|
||||
/* Rounded corners at the top */
|
||||
text-align: right;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.current-name {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
margin: 35px 30px;
|
||||
font-size: 16px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
/* Text shadow for readability */
|
||||
}
|
||||
|
||||
.current-artist {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
margin: -32px 30px;
|
||||
font-size: 18px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
/* Text shadow for readability */
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
margin: 12px 30px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 27px;
|
||||
/* Adjusted padding for spacing */
|
||||
}
|
||||
|
||||
.current-time,
|
||||
.track-length {
|
||||
font-size: 14px;
|
||||
width: 40px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
/* Text shadow for readability */
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex-grow: 1;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.expandable-container {
|
||||
position: relative;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.5s ease, padding 0.5s ease;
|
||||
/* Smooth transition for max-height and padding */
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
/* Example background color */
|
||||
}
|
||||
|
||||
.expandable-container.expanded {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
position: relative;
|
||||
max-height: 400px;
|
||||
/* Adjust the max-height as needed */
|
||||
overflow-y: auto;
|
||||
/* Allow vertical scrolling */
|
||||
}
|
||||
|
||||
.expand-button {
|
||||
font-size: 20px;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 25px;
|
||||
background-color: rgb(108, 255, 128);
|
||||
border-radius: 0 0 15px 15px;
|
||||
/* Rounded corners at the bottom */
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
/* Center text vertically */
|
||||
}
|
||||
|
||||
.expand-button h5 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.expand-button:hover {
|
||||
background-color: rgb(108, 255, 128);
|
||||
}
|
||||
|
||||
/* Adjust height of the music player container when expanded */
|
||||
.music-player.expanded {
|
||||
height: auto;
|
||||
/* Automatically adjust height based on content */
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: rgb(108, 255, 128);
|
||||
}
|
||||
|
||||
.search-box input[type="text"] {
|
||||
flex-grow: 1;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
/* Round the corners */
|
||||
padding: 10px 15px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
/* Remove default outline */
|
||||
}
|
||||
|
||||
.search-box .search-icon {
|
||||
margin-right: 5px;
|
||||
color: #888;
|
||||
font-size: 20px;
|
||||
/* Adjust icon size */
|
||||
cursor: pointer;
|
||||
/* Change cursor to pointer on hover */
|
||||
width: 24px;
|
||||
/* Set width for icon */
|
||||
height: 24px;
|
||||
/* Set height for icon */
|
||||
fill: #888;
|
||||
/* Adjust fill color */
|
||||
}
|
||||
|
||||
.auth-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: rgb(108, 255, 128);
|
||||
}
|
||||
|
||||
.auth-box input[type="text"] {
|
||||
flex-grow: 1;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
/* Round the corners */
|
||||
padding: 10px 15px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
/* Remove default outline */
|
||||
}
|
||||
|
||||
.auth-box .auth-icon {
|
||||
margin-right: 5px;
|
||||
color: #888;
|
||||
font-size: 20px;
|
||||
/* Adjust icon size */
|
||||
cursor: pointer;
|
||||
/* Change cursor to pointer on hover */
|
||||
width: 24px;
|
||||
/* Set width for icon */
|
||||
height: 24px;
|
||||
/* Set height for icon */
|
||||
fill: #888;
|
||||
/* Adjust fill color */
|
||||
}
|
||||
|
||||
/* Add hover effect for the search icon */
|
||||
.search-box .search-icon:hover {
|
||||
color: #555;
|
||||
}
|
||||
.rectangle {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.diagonal-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-24deg);
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #676767;
|
||||
white-space: nowrap;
|
||||
}
|
||||
404
src/components/MusicPlayer.js
Normal file
404
src/components/MusicPlayer.js
Normal file
@@ -0,0 +1,404 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import API_BASE_URL from "../config.js";
|
||||
import "./MusicPlayer.css";
|
||||
import MusicComponent from "./MusicComponent";
|
||||
|
||||
export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const [trackLength, setTrackLength] = useState(0);
|
||||
const [expanded, setExpanded] = useState(false); // State for expansion
|
||||
|
||||
const [songName, setSongName] = useState("");
|
||||
const [debouncedSongName, setDebouncedSongName] = useState(songName);
|
||||
const [currentSong, setCurrentSong] = useState([]);
|
||||
const [songs, setSongs] = useState([]);
|
||||
const [queue, setQueue] = useState([]);
|
||||
const [paused, setPaused] = useState([]);
|
||||
|
||||
const [lyrics, setLyrics] = useState([]);
|
||||
const [currentLines, setCurrentLines] = useState({
|
||||
past: [],
|
||||
present: [],
|
||||
future: [],
|
||||
});
|
||||
const [lyric_progress_ms, setLyricProgressMs] = useState(0);
|
||||
|
||||
const [subtitleColor, setSubtitleColor] = useState("black");
|
||||
const [backgroundImage, setBackgroundImage] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const getDominantColor = async (imageSrc) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = "Anonymous";
|
||||
img.src = imageSrc;
|
||||
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
const imageData = ctx.getImageData(
|
||||
0,
|
||||
0,
|
||||
canvas.width,
|
||||
canvas.height,
|
||||
).data;
|
||||
const length = imageData.length;
|
||||
let totalR = 0,
|
||||
totalG = 0,
|
||||
totalB = 0;
|
||||
|
||||
for (let i = 0; i < length; i += 4) {
|
||||
totalR += imageData[i];
|
||||
totalG += imageData[i + 1];
|
||||
totalB += imageData[i + 2];
|
||||
}
|
||||
|
||||
const averageR = Math.round(totalR / (length / 4));
|
||||
const averageG = Math.round(totalG / (length / 4));
|
||||
const averageB = Math.round(totalB / (length / 4));
|
||||
|
||||
resolve({ r: averageR, g: averageG, b: averageB });
|
||||
};
|
||||
|
||||
img.onerror = (error) => {
|
||||
reject(error);
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const fetchColor = async () => {
|
||||
if (
|
||||
currentSong.item &&
|
||||
currentSong.item.album &&
|
||||
currentSong.item.album.images[0]
|
||||
) {
|
||||
const imageUrl = currentSong.item.album.images[0].url;
|
||||
try {
|
||||
const dominantColor = await getDominantColor(imageUrl);
|
||||
// Calculate luminance (YIQ color space) to determine if subtitle should be black or white
|
||||
const luminance =
|
||||
(0.299 * dominantColor.r +
|
||||
0.587 * dominantColor.g +
|
||||
0.114 * dominantColor.b) /
|
||||
255;
|
||||
if (luminance > 0.5) {
|
||||
setSubtitleColor("black");
|
||||
} else {
|
||||
setSubtitleColor("white");
|
||||
}
|
||||
setBackgroundImage(imageUrl);
|
||||
} catch (error) {
|
||||
console.error("Error fetching or processing image:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchColor();
|
||||
}, [currentSong]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!socket) return;
|
||||
|
||||
socket.on("searchResponse", (response) => {
|
||||
console.log(response);
|
||||
setSongs(response);
|
||||
});
|
||||
|
||||
socket.on("updateCurrentSong", (response) => {
|
||||
setCurrentSong(response);
|
||||
setCurrentTime(response.progress_ms / 1000); // Convert milliseconds to seconds
|
||||
setLyricProgressMs(response.progress_ms);
|
||||
setTrackLength(response.item.duration_ms / 1000);
|
||||
});
|
||||
|
||||
socket.on("updateQueue", (response) => {
|
||||
setQueue(response);
|
||||
console.log(response);
|
||||
});
|
||||
|
||||
socket.on("updatePlayer", (response) => {
|
||||
setPaused(response.decision);
|
||||
});
|
||||
|
||||
socket.on("updateLyrics", (response) => {
|
||||
setLyrics(response);
|
||||
console.log(response);
|
||||
setCurrentLines({
|
||||
past: [],
|
||||
present: [],
|
||||
future: [],
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.off("searchResponse");
|
||||
};
|
||||
}, [socket]);
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate progress every 100ms
|
||||
const interval = setInterval(() => {
|
||||
setLyricProgressMs((prevProgress) => prevProgress + 100);
|
||||
}, 100);
|
||||
|
||||
return () => clearInterval(interval); // Clean up interval on component unmount
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (lyrics == null) return;
|
||||
const pastLines = lyrics.filter(
|
||||
(line) => line.startTimeMs < lyric_progress_ms,
|
||||
);
|
||||
const presentLines = lyrics.filter(
|
||||
(line) => line.startTimeMs > lyric_progress_ms,
|
||||
);
|
||||
const futureLines = lyrics.filter(
|
||||
(line) => line.startTimeMs > lyric_progress_ms,
|
||||
);
|
||||
|
||||
setCurrentLines({
|
||||
past: pastLines.slice(-2, 1), // Get the last past line
|
||||
present: pastLines.slice(-1),
|
||||
future: futureLines.slice(0, 1), // Get the first future line
|
||||
});
|
||||
}, [lyrics, lyric_progress_ms]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedSongName(songName);
|
||||
}, 300);
|
||||
|
||||
// Cleanup function to clear the timeout if songName changes
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
}, [songName]);
|
||||
|
||||
useEffect(() => {
|
||||
if (socket != null && debouncedSongName) {
|
||||
socket.emit("searchRequest", { shopId, songName: debouncedSongName });
|
||||
}
|
||||
}, [debouncedSongName, shopId, socket]);
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
setSongName(event.target.value);
|
||||
};
|
||||
|
||||
const onRequest = (trackId) => {
|
||||
const token = localStorage.getItem("auth");
|
||||
if (socket != null && token) {
|
||||
socket.emit("songRequest", { token, shopId, trackId });
|
||||
setSongName("");
|
||||
}
|
||||
};
|
||||
|
||||
const onDecision = (trackId, vote) => {
|
||||
const token = localStorage.getItem("auth");
|
||||
if (socket != null && token)
|
||||
socket.emit("songVote", { token, shopId, trackId, vote });
|
||||
};
|
||||
|
||||
const handlePauseOrResume = (trackId, vote) => {
|
||||
const token = localStorage.getItem("auth");
|
||||
if (socket != null && token) {
|
||||
socket.emit("playOrPause", {
|
||||
token,
|
||||
shopId,
|
||||
action: paused ? "pause" : "resume",
|
||||
});
|
||||
console.log(paused);
|
||||
setPaused(!paused);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSpotifyAuth = () => {
|
||||
const token = localStorage.getItem("auth");
|
||||
let nextUrl = ""; // Use 'let' since the value will change
|
||||
if (isSpotifyNeedLogin) {
|
||||
nextUrl = API_BASE_URL + `/login?token=${token}&cafeId=${shopId}`;
|
||||
} else {
|
||||
nextUrl = API_BASE_URL + `/logout?token=${token}&cafeId=${shopId}`;
|
||||
}
|
||||
window.location.href = nextUrl;
|
||||
};
|
||||
|
||||
const handleLogin = () => {
|
||||
// navigate(`/login/${shopId}`);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentTime((prevTime) =>
|
||||
prevTime < trackLength ? prevTime + 1 : prevTime,
|
||||
);
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [trackLength]);
|
||||
|
||||
const formatTime = (timeInSeconds) => {
|
||||
const minutes = Math.floor(timeInSeconds / 60);
|
||||
const seconds = Math.floor(timeInSeconds % 60);
|
||||
|
||||
// Ensure seconds and milliseconds are always displayed with two and three digits respectively
|
||||
const formattedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
|
||||
|
||||
return `${minutes}:${formattedSeconds}`;
|
||||
};
|
||||
|
||||
const toggleExpand = () => {
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
const expandableContainerRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (expanded && expandableContainerRef.current) {
|
||||
expandableContainerRef.current.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
}, [expanded]);
|
||||
|
||||
return (
|
||||
<div className={`music-player ${expanded ? "expanded" : ""}`}>
|
||||
<div
|
||||
className="current-bgr"
|
||||
style={{ backgroundImage: `url(${backgroundImage})` }}
|
||||
>
|
||||
{currentLines.past.map((line, index) => (
|
||||
<div className="past" style={{ color: subtitleColor }} key={index}>
|
||||
<p>{line.words}</p>
|
||||
</div>
|
||||
))}
|
||||
{currentLines.present.map((line, index) => (
|
||||
<div className="present" style={{ color: subtitleColor }} key={index}>
|
||||
<p>{line.words}</p>
|
||||
</div>
|
||||
))}
|
||||
{currentLines.future.map((line, index) => (
|
||||
<div className="future" style={{ color: subtitleColor }} key={index}>
|
||||
<p>{line.words}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="current-info">
|
||||
<div className="current-name">
|
||||
{currentSong.item && currentSong.item.name
|
||||
? currentSong.item.name
|
||||
: "Awaiting the next hit"}
|
||||
</div>
|
||||
<div className="current-artist">
|
||||
{currentSong.item &&
|
||||
currentSong.item.album &&
|
||||
currentSong.item.album.images[0] &&
|
||||
currentSong.item.artists[0].name
|
||||
? currentSong.item.artists[0].name
|
||||
: "Drop your hits below"}
|
||||
</div>
|
||||
<div className="progress-container">
|
||||
<div
|
||||
className="current-time"
|
||||
style={{ visibility: currentSong.item ? "visible" : "hidden" }}
|
||||
>
|
||||
{formatTime(currentTime)}
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={trackLength}
|
||||
value={currentTime}
|
||||
className="progress-bar"
|
||||
style={{ visibility: currentSong.item ? "visible" : "hidden" }}
|
||||
disabled
|
||||
/>
|
||||
<div
|
||||
className="track-length"
|
||||
style={{ visibility: currentSong.item ? "visible" : "hidden" }}
|
||||
>
|
||||
{formatTime(trackLength)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`expandable-container ${expanded ? "expanded" : ""}`}
|
||||
ref={expandableContainerRef}
|
||||
>
|
||||
{user.cafeId != null && user.cafeId == shopId && (
|
||||
<div className="auth-box">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={
|
||||
isSpotifyNeedLogin ? "Login Spotify" : "Logout Spotify"
|
||||
}
|
||||
onClick={handleSpotifyAuth}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="search-box">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
className="search-icon"
|
||||
>
|
||||
<path d="M10.533 1.27893C5.35215 1.27893 1.12598 5.41887 1.12598 10.5579C1.12598 15.697 5.35215 19.8369 10.533 19.8369C12.767 19.8369 14.8235 19.0671 16.4402 17.7794L20.7929 22.132C21.1834 22.5226 21.8166 22.5226 22.2071 22.132C22.5976 21.7415 22.5976 21.1083 22.2071 20.7178L17.8634 16.3741C19.1616 14.7849 19.94 12.7634 19.94 10.5579C19.94 5.41887 15.7138 1.27893 10.533 1.27893ZM3.12598 10.5579C3.12598 6.55226 6.42768 3.27893 10.533 3.27893C14.6383 3.27893 17.94 6.55226 17.94 10.5579C17.94 14.5636 14.6383 17.8369 10.533 17.8369C6.42768 17.8369 3.12598 14.5636 3.12598 10.5579Z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={songName}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{songName != "" &&
|
||||
songs.map((song, index) => (
|
||||
<MusicComponent
|
||||
key={index}
|
||||
song={song}
|
||||
min={0}
|
||||
max={100}
|
||||
onDecision={(e) => onRequest(song.trackId)}
|
||||
/>
|
||||
))}
|
||||
{songName == "" &&
|
||||
queue.length > 0 &&
|
||||
queue.map((song, index) => (
|
||||
<MusicComponent
|
||||
key={index}
|
||||
song={song}
|
||||
min={-100}
|
||||
max={100}
|
||||
onDecision={(vote) => onDecision(song.trackId, vote)}
|
||||
/>
|
||||
))}
|
||||
{songName == "" && queue.length < 1 && (
|
||||
<div className="rectangle">
|
||||
<div className="diagonal-text">No Beats Ahead - Drop Your Hits</div>
|
||||
</div>
|
||||
)}
|
||||
{songName == "" && queue.length > 0 && queue.length < 3 && (
|
||||
<div className="rectangle">
|
||||
<div className="diagonal-text">Drop Your Hits</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="expand-button" onClick={toggleExpand}>
|
||||
<h5>
|
||||
{expanded
|
||||
? "collapse"
|
||||
: currentSong.item &&
|
||||
currentSong.item.album &&
|
||||
currentSong.item.album.images[0] &&
|
||||
currentSong.item.artists[0]
|
||||
? "expand"
|
||||
: "request your song"}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
88
src/components/RouletteWheel.css
Normal file
88
src/components/RouletteWheel.css
Normal file
@@ -0,0 +1,88 @@
|
||||
/* src/RouletteWheel.css */
|
||||
/* html,
|
||||
body,
|
||||
img {
|
||||
overflow: hidden;
|
||||
} */
|
||||
|
||||
.roulette-wheel-container {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
/* Center the container horizontally */
|
||||
top: 30%;
|
||||
transform: translate(-40%, 20%);
|
||||
scale: 3;
|
||||
max-width: 100vw;
|
||||
/* Limit container width to viewport width */
|
||||
max-height: 100vh;
|
||||
/* Limit container height to viewport height */
|
||||
overflow: hidden;
|
||||
/* Hide overflowing content */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
-webkit-user-select: none;
|
||||
/* Safari */
|
||||
-ms-user-select: none;
|
||||
/* IE 10 and IE 11 */
|
||||
user-select: none;
|
||||
/* Standard syntax */
|
||||
}
|
||||
|
||||
.roulette-wheel {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: auto;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.roulette-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
user-select: none;
|
||||
/* Prevents the image from being selected */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.roulette-input {
|
||||
position: absolute;
|
||||
width: 30%;
|
||||
/* Increase size for better visibility */
|
||||
height: auto;
|
||||
/* Increase size for better visibility */
|
||||
border: none;
|
||||
/* Remove border for simplicity */
|
||||
border-radius: 5px;
|
||||
/* Add border radius for rounded corners */
|
||||
color: rgb(2, 2, 2);
|
||||
/* Text color */
|
||||
font-size: 16px;
|
||||
/* Font size */
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
|
||||
.roulette-button {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
width: 30%;
|
||||
/* Increase size for better visibility */
|
||||
height: auto;
|
||||
/* Increase size for better visibility */
|
||||
border: none;
|
||||
/* Remove border for simplicity */
|
||||
border-radius: 5px;
|
||||
/* Add border radius for rounded corners */
|
||||
color: rgb(2, 2, 2);
|
||||
/* Text color */
|
||||
font-size: 16px;
|
||||
/* Font size */
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
223
src/components/RouletteWheel.js
Normal file
223
src/components/RouletteWheel.js
Normal file
@@ -0,0 +1,223 @@
|
||||
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 [email, setEmail] = useState('');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
const emailInputRef = useRef(null);
|
||||
const usernameInputRef = useRef(null);
|
||||
const passwordInputRef = useRef(null);
|
||||
|
||||
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 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)` }}
|
||||
>
|
||||
{!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>
|
||||
);
|
||||
};
|
||||
|
||||
export default RouletteWheel;
|
||||
165
src/components/SearchInput.css
Normal file
165
src/components/SearchInput.css
Normal file
@@ -0,0 +1,165 @@
|
||||
.music-player {
|
||||
position: relative;
|
||||
width: 95%;
|
||||
margin: 0px auto;
|
||||
/* Added padding for top and bottom */
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
/* Add border-radius to the music player container */
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.current-bgr {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
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-size: cover;
|
||||
/* Adjust background image size */
|
||||
background-position: center;
|
||||
/* Center the background image */
|
||||
filter: blur(2px);
|
||||
-webkit-filter: blur(2px);
|
||||
border-radius: 15px 15px 0 0;
|
||||
/* Rounded corners at the top */
|
||||
}
|
||||
|
||||
.current-name {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
margin: 35px 30px;
|
||||
font-size: 16px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
/* Text shadow for readability */
|
||||
}
|
||||
|
||||
.current-artist {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
margin: -32px 30px;
|
||||
font-size: 18px;
|
||||
color: #ddd;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
/* Text shadow for readability */
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
margin: 12px 30px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 27px;
|
||||
/* Adjusted padding for spacing */
|
||||
}
|
||||
|
||||
.current-time,
|
||||
.track-length {
|
||||
font-size: 14px;
|
||||
width: 40px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
/* Text shadow for readability */
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex-grow: 1;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.expandable-container {
|
||||
position: relative;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.5s ease, padding 0.5s ease;
|
||||
/* Smooth transition for max-height and padding */
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
/* Example background color */
|
||||
}
|
||||
|
||||
.expandable-container.expanded {
|
||||
position: relative;
|
||||
max-height: 400px;
|
||||
/* Adjust the max-height as needed */
|
||||
overflow-y: auto;
|
||||
/* Allow vertical scrolling */
|
||||
}
|
||||
|
||||
.expand-button {
|
||||
font-size: 20px;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 25px;
|
||||
background-color: rgb(108, 255, 128);
|
||||
border-radius: 0 0 15px 15px;
|
||||
/* Rounded corners at the bottom */
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
/* Center text vertically */
|
||||
}
|
||||
|
||||
.expand-button h5 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.expand-button:hover {
|
||||
background-color: rgb(108, 255, 128);
|
||||
}
|
||||
|
||||
/* Adjust height of the music player container when expanded */
|
||||
.music-player.expanded {
|
||||
height: auto;
|
||||
/* Automatically adjust height based on content */
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: rgb(108, 255, 128);
|
||||
}
|
||||
|
||||
.search-box input[type="text"] {
|
||||
flex-grow: 1;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
/* Round the corners */
|
||||
padding: 10px 15px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
/* Remove default outline */
|
||||
}
|
||||
|
||||
.search-box .search-icon {
|
||||
margin-right: 5px;
|
||||
color: #888;
|
||||
font-size: 20px;
|
||||
/* Adjust icon size */
|
||||
cursor: pointer;
|
||||
/* Change cursor to pointer on hover */
|
||||
width: 24px;
|
||||
/* Set width for icon */
|
||||
height: 24px;
|
||||
/* Set height for icon */
|
||||
fill: #888;
|
||||
/* Adjust fill color */
|
||||
}
|
||||
|
||||
/* Add hover effect for the search icon */
|
||||
.search-box .search-icon:hover {
|
||||
color: #555;
|
||||
}
|
||||
72
src/components/SearchInput.js
Normal file
72
src/components/SearchInput.js
Normal file
@@ -0,0 +1,72 @@
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
// Styled component for the search box container
|
||||
const SearchBox = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
`;
|
||||
|
||||
// Styled component for the container of input and icon
|
||||
const SearchContainer = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
margin: 0px 10px;
|
||||
`;
|
||||
|
||||
// Styled component for the input field
|
||||
const Searchinput = styled.input`
|
||||
flex-grow: 1;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 12px 40px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
background-color: white;
|
||||
border: 1px solid #ccc; /* Add border to the input field */
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease; /* Add transition effect */
|
||||
|
||||
&:focus {
|
||||
background-color: lightgray; /* Change background color when focused */
|
||||
}
|
||||
`;
|
||||
|
||||
// Styled component for the search icon
|
||||
const SearchIcon = styled.svg`
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
fill: #888;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
// Adjust icon hover state
|
||||
SearchContainer.hover = styled(SearchContainer)`
|
||||
${SearchIcon} {
|
||||
fill: #555;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function SearchInput() {
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
|
||||
return (
|
||||
<SearchBox>
|
||||
<SearchContainer>
|
||||
<Searchinput type="text" placeholder="Search..." />
|
||||
<SearchIcon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20.8333 18.3333H19.5167L19.05 17.8833C20.6833 15.9833 21.6667 13.5167 21.6667 10.8333C21.6667 4.85 16.8167 0 10.8333 0C4.85 0 0 4.85 0 10.8333C0 16.8167 4.85 21.6667 10.8333 21.6667C13.5167 21.6667 15.9833 20.6833 17.8833 19.05L18.3333 19.5167V20.8333L26.6667 29.15L29.15 26.6667L20.8333 18.3333ZM10.8333 18.3333C6.68333 18.3333 3.33333 14.9833 3.33333 10.8333C3.33333 6.68333 6.68333 3.33333 10.8333 3.33333C14.9833 3.33333 18.3333 6.68333 18.3333 10.8333C18.3333 14.9833 14.9833 18.3333 10.8333 18.3333Z"
|
||||
/>
|
||||
</SearchIcon>
|
||||
</SearchContainer>
|
||||
</SearchBox>
|
||||
);
|
||||
}
|
||||
BIN
src/components/coffee.png
Normal file
BIN
src/components/coffee.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 570 KiB |
Reference in New Issue
Block a user