304 lines
10 KiB
TypeScript
304 lines
10 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
// import { ChangeEvent, useEffect, useState } from "react";
|
|
// import useAuthStore from "./stores/useAuthStore";
|
|
// import {
|
|
// addHours,
|
|
// eachMinuteOfInterval,
|
|
// format,
|
|
// isBefore,
|
|
// parse,
|
|
// } from "date-fns";
|
|
// import ky from "ky";
|
|
import SessionScheduleSettings from "./components/SessionScheduleSettings";
|
|
|
|
function PersonalAreaDashboardPage() {
|
|
// const [user, removeAuthStore, accessToken] = useAuthStore((state) => [
|
|
// state.user,
|
|
// state.removeAuthStore,
|
|
// state.accessToken,
|
|
// ]);
|
|
// const [startTime, setStartTime] = useState<string>("09:00");
|
|
// const [endTime, setEndTime] = useState<string>("20:00");
|
|
// const [duration, setDuration] = useState<number>(30);
|
|
// const [datesAndTimes, setDatesAndTimes] = useState<any[]>([]);
|
|
// const [isLoading, setIsLoading] = useState<boolean>(true);
|
|
|
|
// function handleDuration(e: ChangeEvent<HTMLInputElement>) {
|
|
// e.preventDefault();
|
|
|
|
// let value = parseInt(e.target.value);
|
|
// const min = parseInt(e.target.min);
|
|
// const max = parseInt(e.target.max);
|
|
|
|
// if (!value || value < min) value = min;
|
|
// if (value > max) value = max;
|
|
|
|
// setDuration(value);
|
|
// }
|
|
|
|
// function calculateTimes() {
|
|
// if (startTime && endTime) {
|
|
// const startDateTime = parse(startTime, "HH:mm", new Date());
|
|
// const endDateTime = parse(endTime, "HH:mm", new Date());
|
|
|
|
// if (!isBefore(startDateTime, endDateTime)) {
|
|
// setEndTime(format(addHours(startDateTime, 1), "HH:mm"));
|
|
|
|
// return false;
|
|
// }
|
|
|
|
// const newDateAndTimes: any[] = eachMinuteOfInterval(
|
|
// {
|
|
// start: startDateTime,
|
|
// end: endDateTime,
|
|
// },
|
|
// { step: duration }
|
|
// );
|
|
|
|
// newDateAndTimes.forEach((value: Date, index: number) => {
|
|
// newDateAndTimes[index] = { value, active: true };
|
|
// });
|
|
|
|
// setDatesAndTimes(newDateAndTimes);
|
|
// }
|
|
// }
|
|
|
|
// async function getSessionScheduleSettings() {
|
|
// setIsLoading(true);
|
|
|
|
// try {
|
|
// const result: any = await ky
|
|
// .get(
|
|
// `${import.meta.env.VITE_COORD_URL}/users/session_schedule_settings`,
|
|
// {
|
|
// headers: {
|
|
// Authorization: `Bearer ${accessToken}`,
|
|
// },
|
|
// }
|
|
// )
|
|
// .json();
|
|
|
|
// if (result.error) {
|
|
// console.log("Error: ", result.error);
|
|
// return;
|
|
// }
|
|
|
|
// const { datesAndTimes, startTime, endTime, duration } = result;
|
|
|
|
// console.log("datesAndTimes", datesAndTimes);
|
|
|
|
// setStartTime(startTime);
|
|
// setEndTime(endTime);
|
|
// setDuration(duration);
|
|
// setIsLoading(false);
|
|
// } catch (error) {
|
|
// if (error instanceof Error) {
|
|
// console.log(error.message);
|
|
// }
|
|
|
|
// setIsLoading(false);
|
|
// }
|
|
// }
|
|
|
|
// async function saveSessionScheduleSettings() {
|
|
// try {
|
|
// await ky
|
|
// .post(
|
|
// `${import.meta.env.VITE_COORD_URL}/users/session_schedule_settings`,
|
|
// {
|
|
// headers: {
|
|
// Authorization: `Bearer ${accessToken}`,
|
|
// },
|
|
// json: { startTime, endTime, duration, datesAndTimes },
|
|
// }
|
|
// )
|
|
// .json();
|
|
|
|
// alert("Изменения сохранены!");
|
|
// } catch (error) {
|
|
// if (error instanceof Error) {
|
|
// console.log(error.message);
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// function changeActive(dateAndTimeValue: Date) {
|
|
// const newDatesAndTimes = datesAndTimes.map((dateAndTime) => {
|
|
// if (dateAndTime.value === dateAndTimeValue) {
|
|
// dateAndTime.active = !dateAndTime.active;
|
|
// }
|
|
|
|
// return dateAndTime;
|
|
// });
|
|
|
|
// setDatesAndTimes(newDatesAndTimes);
|
|
// }
|
|
|
|
// function logout() {
|
|
// removeAuthStore();
|
|
// }
|
|
|
|
// useEffect(() => {
|
|
// calculateTimes();
|
|
// }, [startTime, endTime, duration]);
|
|
|
|
// useEffect(() => {
|
|
// getSessionScheduleSettings();
|
|
// }, []);
|
|
|
|
// return (
|
|
// <div className="p-8 min-h-screen flex flex-col justify-center items-center text-[#F2F2F2] space-y-8">
|
|
// <div className="space-y-4">
|
|
// <p>
|
|
// <span className="text-[#C5C7CE] text-sm">Вы вошли как</span>{" "}
|
|
// {user?.username}
|
|
// </p>
|
|
// <button onClick={logout} className="text-yellow-600">
|
|
// Выйти
|
|
// </button>
|
|
// </div>
|
|
|
|
// <div className="flex gap-4">
|
|
// <div className="relative space-y-8 w-80 bg-[#151619] p-8 rounded-lg shadow min-h-[378px]">
|
|
// <p className="text-2xl font-gilroy">Настройки расписания сеансов</p>
|
|
|
|
// {!isLoading ? (
|
|
// <form
|
|
// onSubmit={(e) => e.preventDefault()}
|
|
// className="flex flex-col space-y-8"
|
|
// >
|
|
// <div className="space-y-4">
|
|
// <div className="flex gap-4 items-center">
|
|
// <div className="space-y-1">
|
|
// <p className="text-[#C5C7CE] text-sm">Начало</p>
|
|
// <input
|
|
// // ref={startTimeRef}
|
|
// required
|
|
// type="time"
|
|
// value={startTime}
|
|
// onChange={(e) => setStartTime(e.target.value)}
|
|
// className="px-3 py-2 rounded bg-[#1C1D21] outline-none focus:outline-[#BC75FF] w-full transition-all"
|
|
// />
|
|
// </div>
|
|
// <span className="mt-6">—</span>
|
|
// <div className="space-y-1">
|
|
// <p className="text-[#C5C7CE] text-sm">Конец</p>
|
|
// <input
|
|
// // ref={startTimeRef}
|
|
// required
|
|
// type="time"
|
|
// value={endTime}
|
|
// onChange={(e) => setEndTime(e.target.value)}
|
|
// className="px-3 py-2 rounded bg-[#1C1D21] outline-none focus:outline-[#BC75FF] w-full transition-all"
|
|
// />
|
|
// </div>
|
|
// </div>
|
|
// <div className="space-y-1">
|
|
// <p className="text-[#C5C7CE] text-sm">Длительность сеанса</p>
|
|
// <input
|
|
// // ref={sessionDurationRef}
|
|
// required
|
|
// type="number"
|
|
// min={15}
|
|
// max={60}
|
|
// step={5}
|
|
// value={duration}
|
|
// onChange={handleDuration}
|
|
// className="px-3 py-2 rounded bg-[#1C1D21] outline-none focus:outline-[#BC75FF] w-full transition-all"
|
|
// />
|
|
// </div>
|
|
// </div>
|
|
|
|
// <button
|
|
// onClick={saveSessionScheduleSettings}
|
|
// type="submit"
|
|
// className="px-4 py-2 rounded bg-gradient outline-none opacity-95 hover:opacity-100 transition-all disabled:opacity-50 flex justify-center items-center h-10 self-end"
|
|
// >
|
|
// Сохранить
|
|
// </button>
|
|
// </form>
|
|
// ) : (
|
|
// <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
|
|
// <svg
|
|
// className="animate-spin h-5 w-5"
|
|
// xmlns="http://www.w3.org/2000/svg"
|
|
// fill="none"
|
|
// viewBox="0 0 24 24"
|
|
// >
|
|
// <circle
|
|
// className="opacity-25"
|
|
// cx="12"
|
|
// cy="12"
|
|
// r="10"
|
|
// stroke="currentColor"
|
|
// strokeWidth="4"
|
|
// ></circle>
|
|
// <path
|
|
// className="opacity-75"
|
|
// fill="currentColor"
|
|
// d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
// ></path>
|
|
// </svg>
|
|
// </div>
|
|
// )}
|
|
// </div>
|
|
|
|
// <div className="relative space-y-8 w-80 bg-[#151619] p-8 rounded-lg shadow min-h-[378px]">
|
|
// <p className="text-xl font-gilroy">Предпросмотр</p>
|
|
|
|
// {!isLoading ? (
|
|
// <div className="grid grid-cols-4">
|
|
// {datesAndTimes.map(
|
|
// (dateAndTime: { value: Date; active: true }, index: number) => (
|
|
// <button
|
|
// key={index}
|
|
// onClick={() => changeActive(dateAndTime.value)}
|
|
// className={[
|
|
// "px-3 py-2 text-center rounded hover:bg-[#23242A]",
|
|
// !dateAndTime.active ? "opacity-25" : "opacity-100",
|
|
// ].join(" ")}
|
|
// >
|
|
// {format(dateAndTime.value, "HH:mm")}
|
|
// </button>
|
|
// )
|
|
// )}
|
|
// </div>
|
|
// ) : (
|
|
// <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
|
|
// <svg
|
|
// className="animate-spin h-5 w-5"
|
|
// xmlns="http://www.w3.org/2000/svg"
|
|
// fill="none"
|
|
// viewBox="0 0 24 24"
|
|
// >
|
|
// <circle
|
|
// className="opacity-25"
|
|
// cx="12"
|
|
// cy="12"
|
|
// r="10"
|
|
// stroke="currentColor"
|
|
// strokeWidth="4"
|
|
// ></circle>
|
|
// <path
|
|
// className="opacity-75"
|
|
// fill="currentColor"
|
|
// d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
// ></path>
|
|
// </svg>
|
|
// </div>
|
|
// )}
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// );
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col justify-center items-center p-8">
|
|
<SessionScheduleSettings />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PersonalAreaDashboardPage;
|