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

ok

Browse Source
This commit is contained in:
zadit
2024-10-22 16:05:30 +07:00
parent e2522bd91c
commit 1ecc6db645
17 changed files with 320 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/CafePage.js
View File

@@ -20,7 +20,7 @@ import Header from "../components/Header";
import { ThreeDots } from "react-loader-spinner";
import { updateLocalStorage, removeLocalStorage } from "../helpers/localStorageHelpers";
import { getLocalStorage, updateLocalStorage, removeLocalStorage } from "../helpers/localStorageHelpers";
import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
import WelcomePage from "./WelcomePage.js";
@@ -94,8 +94,29 @@ function CafePage({
// Navigate to the new cafeId while keeping existing params
navigate(`/${user.cafeId}?${currentParams}`, { replace: true });
}
}, [user, shopId]);
useEffect(() => {
function fetchData() {
console.log(user.userId == shopOwnerId)
setModal("create_item");
}
console.log(getLocalStorage('auth'))
if (getLocalStorage("auth") != null) {
const executeFetch = async () => {
while (user.length == 0) {
await new Promise((resolve) => setTimeout(resolve, 100)); // Wait until the user is not null
}
console.log(user)
console.log('open')
if (user.length != 0 && user.userId == shopOwnerId && shopItems.length == 0) fetchData();
};
executeFetch();
}
}, [user, shopItems]);
useEffect(() => {
if (token) {
updateLocalStorage("auth", token);
@@ -172,12 +193,12 @@ function CafePage({
setIsEditMode={(e) => setIsEditMode(e)}
isEditMode={isEditMode}
/>
<MusicPlayer
socket={socket}
shopId={shopId}
user={user}
isSpotifyNeedLogin={isSpotifyNeedLogin}
/>
<MusicPlayer
socket={socket}
shopId={shopId}
user={user}
isSpotifyNeedLogin={isSpotifyNeedLogin}
/>
<ItemTypeLister
user={user}
shopOwnerId={shopOwnerId}

44
src/pages/CreateClerk.js
View File

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
import { createClerks } from '../helpers/userHelpers'; // Adjust the import path as needed
const CreateClerk = ({ shopId }) => {
const [email, setEmail] = useState('');
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
@@ -14,17 +13,17 @@ const CreateClerk = ({ shopId }) => {
setMessage('');
// Basic validation
if (!email || !username || !password) {
setMessage('All fields are required');
if (!username || !password) {
setMessage('Username and password are required');
setLoading(false);
return;
}
try {
const create = await createClerks(shopId, email, username, password);
const create = await createClerks(shopId, username, password);
if(create) setMessage('Clerk created successfully');
else setMessage('failed')
if (create) setMessage('Clerk created successfully');
else setMessage('Failed to create clerk');
} catch (error) {
setMessage('Error creating clerk');
} finally {
@@ -36,13 +35,6 @@ const CreateClerk = ({ shopId }) => {
<div style={styles.container}>
<h2 style={styles.header}>Create Clerk</h2>
<form onSubmit={handleSubmit} style={styles.form}>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
style={styles.input}
/>
<input
type="text"
placeholder="Username"
@@ -60,24 +52,33 @@ const CreateClerk = ({ shopId }) => {
<button type="submit" style={styles.button} disabled={loading}>
{loading ? 'Creating...' : 'Create Clerk'}
</button>
{message && <p style={styles.message}>{message}</p>}
{message && (
<p style={{ ...styles.message, color: message.includes('success') ? 'green' : 'red' }}>
{message}
</p>
)}
</form>
</div>
);
};
// Basic styling to make it mobile-friendly
// Basic styling to make it mobile-friendly with a white background
const styles = {
container: {
backgroundColor: '#fff',
width: '100%',
maxWidth: '400px',
maxWidth: '350px',
margin: '0 auto',
padding: '20px',
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
borderRadius: '8px',
boxSizing: 'border-box',
},
header: {
textAlign: 'center',
marginBottom: '20px',
fontSize: '20px',
color: '#333',
},
form: {
display: 'flex',
@@ -85,25 +86,26 @@ const styles = {
gap: '15px',
},
input: {
padding: '10px',
padding: '12px',
fontSize: '16px',
borderRadius: '5px',
borderRadius: '8px',
border: '1px solid #ccc',
width: '100%',
boxSizing: 'border-box',
backgroundColor: '#f9f9f9',
},
button: {
padding: '10px',
padding: '12px',
fontSize: '16px',
borderRadius: '5px',
borderRadius: '8px',
border: 'none',
backgroundColor: '#28a745',
color: 'white',
cursor: 'pointer',
width: '100%',
},
message: {
textAlign: 'center',
color: 'red',
marginTop: '10px',
},
};

2
src/pages/Dashboard.js
View File

@@ -108,7 +108,7 @@ const Dashboard = ({ user, setModal }) => {
className={styles.rectangle}
onClick={() => setIsCreating(true)}
>
Create Admin
Create Client
</div>
) : (
<div

28
src/pages/GuidePage.css Normal file
View File

@@ -0,0 +1,28 @@
/* GuidePage.css */
.guide-page {
padding: 16px;
font-size: 16px;
line-height: 1.5;
background-color: #f9f9f9;
color: #333;
max-width: 600px;
margin: 0 auto;
}
h2 {
font-size: 24px;
margin-bottom: 12px;
}
p {
margin-bottom: 16px;
}
.guide-video {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 8px;
margin-top: 16px;
}

54
src/pages/GuidePage.js Normal file
View File

@@ -0,0 +1,54 @@
import React from 'react';
import './GuidePage.css';
const GuidePage = ({ guideType }) => {
const renderGuideContent = () => {
switch (guideType) {
case 'create_item':
return (
<div>
<h2>Setup Guide</h2>
<p>1. Turn on edit mode and create item type</p>
<video
src="https://api.kedaimaster.com/uploads/create_item_guide_1.mkv"
autoPlay
muted
loop
className="guide-video"
/>
</div>
);
case 'troubleshooting':
return (
<div>
<h2>Troubleshooting Guide</h2>
<p>Follow these steps to troubleshoot common issues...</p>
{/* Add more troubleshooting details here */}
</div>
);
case 'features':
return (
<div>
<h2>Features Guide</h2>
<p>Learn about the different features available...</p>
{/* Add more feature details here */}
</div>
);
default:
return (
<div>
<h2>Welcome to the Guide</h2>
<p>Please select a guide type to get started.</p>
</div>
);
}
};
return (
<div className="guide-page">
{renderGuideContent()}
</div>
);
};
export default GuidePage;

23
src/pages/Transaction_confirmed.js
View File

@@ -38,12 +38,24 @@ export default function Transactions({
try {
const fetchedTransaction = await getTransaction(transactionId);
setTransaction(fetchedTransaction);
console.log(transaction);
console.log(fetchedTransaction); // Log the fetched transaction
} catch (error) {
console.error("Error fetching transaction:", error);
}
};
fetchData();
const waitForLocalStorage = async () => {
while (localStorage.getItem("auth") === null) {
await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 1 second
}
};
const initialize = async () => {
await waitForLocalStorage();
await fetchData();
};
initialize();
}, [searchParams]);
useEffect(() => {
@@ -189,14 +201,17 @@ export default function Transactions({
price={
"Rp" + calculateTotalPrice(transaction.DetailedTransactions)
}
disabled={isPaymentLoading}
disabled={transaction.payment_type == 'cash' || isPaymentLoading}
isPaymentLoading={isPaymentLoading}
handleClick={() => handleConfirm(transaction.transactionId)}
Open={() => setIsPaymentOpen(true)}
isPaymentOpen={isPaymentOpen}
>
{isPaymentLoading ? (
{transaction.payment_type == 'cash' || isPaymentLoading ? (
<>
{transaction.payment_type == 'cash' && <p>tunggu konfirmasi</p>}
<ColorRing height="50" width="50" color="white" />
</>
) : isPaymentOpen ? (
"Claim has paid" // Display "Confirm has paid" if the transaction is confirmed (1)
) : (

54
src/pages/Transaction_success.js
View File

@@ -1,29 +1,57 @@
import React from "react";
import { ColorRing } from "react-loader-spinner";
import styles from "./Transactions.module.css";
import { requestNotificationPermission } from '../services/notificationService'; // Import the notification service
export default function Transaction_pending() {
const containerStyle = {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100%", // This makes the container stretch to the bottom of the viewport
backgroundColor: "#000", // Optional: Set a background color if you want to see the color ring clearly
export default function Transaction_pending({ setModal }) {
// const containerStyle = {
// display: "flex",
// justifyContent: "center",
// alignItems: "center",
// width: "100%",
// height: "100%",
// backgroundColor: "",
// };
const handleNotificationClick = async () => {
const permission = await requestNotificationPermission();
if (permission === "granted") {
console.log("Notification permission granted.");
// Set up notifications or show a success modal
} else if (permission === "denied") {
console.error("Notification permission denied.");
setModal('blocked_notification'); // Show modal for blocked notifications
}
};
return (
<div className={styles.Transactions}>
<div className={containerStyle}>
<div style={{ marginTop: "30px", textAlign: "center" }}>
<h2>transaction success</h2>
<h2>Transaction Success</h2>
<img
className={styles.expression}
src="https://i.imgur.com/sgvMI02.pngs"
src="https://i.imgur.com/sgvMI02.png"
alt="Success"
/>
<p style={{ marginTop: "20px", color: "white" }}>
Do you want to get notifications when your item is ready?
</p>
<button
onClick={handleNotificationClick}
style={{
marginTop: "10px",
padding: "10px 20px",
fontSize: "16px",
cursor: "pointer",
backgroundColor: "#4CAF50",
color: "#fff",
border: "none",
borderRadius: "5px",
}}
>
yes
</button>
</div>
</div>
</div>
);
}