117 lines
3.7 KiB
JavaScript
117 lines
3.7 KiB
JavaScript
"use client";
|
|
|
|
import AppContext from "@ctx/AppContext";
|
|
import Buttonbriz from "plugins/Buttonbriz/page";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import { useState, useEffect, useRef, useContext } from "react";
|
|
|
|
const TimePicker = () => {
|
|
const CTX = useContext(AppContext);
|
|
|
|
const [hureSelect, setHureSelect] = useState(0);
|
|
const [secondSelect, setSecondSelect] = useState(0);
|
|
const [time, setTime] = useState(["00", "00"]);
|
|
const hoursArray = Array.from({ length: 24 }, (_, index) => {
|
|
const formattedHour = index < 10 ? `0${index}` : `${index}`;
|
|
return formattedHour;
|
|
});
|
|
const secondsArray = Array.from({ length: 60 }, (_, index) => {
|
|
const formattedSecond = index < 10 ? `0${index}` : `${index}`;
|
|
return formattedSecond;
|
|
});
|
|
|
|
const handleButtonTimePicker = () => {
|
|
if (CTX.state.TimePickerOrder === "CREATE-SHIFT-START") {
|
|
CTX.setBottomSheetCreateShiftsOpen(true);
|
|
CTX.setStartAtTimeShift(time);
|
|
CTX.setOpenTimePicker(false);
|
|
}
|
|
if (CTX.state.TimePickerOrder === "CREATE-SHIFT-END") {
|
|
CTX.setBottomSheetCreateShiftsOpen(true);
|
|
CTX.setEndAtTimeShift(time);
|
|
CTX.setOpenTimePicker(false);
|
|
}
|
|
};
|
|
|
|
const handleHureSelect = (e) => {
|
|
setHureSelect(e);
|
|
setTime([e, secondSelect]);
|
|
};
|
|
|
|
const handleSecondSelect = (e) => {
|
|
setSecondSelect(e);
|
|
setTime([hureSelect, e]);
|
|
};
|
|
return (
|
|
<div className="fixed w-full top-0 z-[120]">
|
|
<div className="bg-BigPlus h-screen content-center ">
|
|
<div className="flex justify-center">
|
|
<div className="mx-5 ">
|
|
<h2 className="mb-0 text-white text-lg font-bold py-2 text-center ">
|
|
ساعت
|
|
</h2>
|
|
<div className="bg-gray-800 h-[400px] w-[100px] rounded-full overflow-auto">
|
|
{hoursArray.map((e) => (
|
|
<div
|
|
className={` p-2 text-center tr03 ${
|
|
hureSelect == e ? "bg-primary-300 " : "bg-transparent"
|
|
}`}
|
|
onClick={() => handleHureSelect(e)}
|
|
>
|
|
<p className="mb-0 font-bold text-white text">
|
|
<PersianNumber number={e} size={60} />
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-5 ">
|
|
<h2 className="mb-0 text-white text-lg font-bold py-2 text-center ">
|
|
دقیقه{" "}
|
|
</h2>
|
|
<div className="bg-gray-800 h-[400px] w-[100px] rounded-full overflow-auto">
|
|
{secondsArray.map((e) => (
|
|
<div
|
|
className={` p-2 text-center tr03 ${
|
|
secondSelect == e ? "bg-primary-300 " : "bg-transparent"
|
|
}`}
|
|
onClick={() => handleSecondSelect(e)}
|
|
>
|
|
<p className="mb-0 font-bold text-white text">
|
|
<PersianNumber number={e} size={60} />
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-center mt-10">
|
|
<p className="mb-0 flex text-[50px] text-white ">
|
|
<PersianNumber
|
|
number={time[0]}
|
|
style="!text-[70px] font-bold mt-[26px] mx-3"
|
|
/>
|
|
:
|
|
<PersianNumber
|
|
number={time[1]}
|
|
style="!text-[70px] font-bold mt-[26px] mx-3"
|
|
/>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-3 fixed bottom-0 w-full">
|
|
<Buttonbriz
|
|
title="ثبت زمان"
|
|
color="INFO"
|
|
icon="CHECK"
|
|
buttonEvent={() => handleButtonTimePicker()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TimePicker;
|