1153 lines
42 KiB
TypeScript
1153 lines
42 KiB
TypeScript
"use client";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Calendar } from "@/components/ui/calendar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Popover,
|
|
PopoverArrow,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import { CalendarIcon } from "lucide-react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { format } from "date-fns";
|
|
import { cn, getCookiesDecrypt } from "@/lib/utils";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
import {
|
|
detailSchedule,
|
|
listSchedule,
|
|
listScheduleNextPublic,
|
|
listSchedulePrevPublic,
|
|
listScheduleTodayPublic,
|
|
searchSchedules,
|
|
} from "@/service/schedule/schedule";
|
|
import { usePathname, useRouter } from "@/i18n/routing";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { close, loading } from "@/config/swal";
|
|
import { useTranslations } from "next-intl";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
const timeList = [
|
|
{
|
|
id: "6",
|
|
time: "06:00",
|
|
},
|
|
{
|
|
id: "7",
|
|
time: "07:00",
|
|
},
|
|
{
|
|
id: "8",
|
|
time: "08:00",
|
|
},
|
|
{
|
|
id: "9",
|
|
time: "09:00",
|
|
},
|
|
{
|
|
id: "10",
|
|
time: "10:00",
|
|
},
|
|
{
|
|
id: "11",
|
|
time: "11:00",
|
|
},
|
|
{
|
|
id: "12",
|
|
time: "12:00",
|
|
},
|
|
{
|
|
id: "13",
|
|
time: "13:00",
|
|
},
|
|
{
|
|
id: "14",
|
|
time: "14:00",
|
|
},
|
|
{
|
|
id: "15",
|
|
time: "15:00",
|
|
},
|
|
{
|
|
id: "16",
|
|
time: "16:00",
|
|
},
|
|
{
|
|
id: "17",
|
|
time: "17:00",
|
|
},
|
|
{
|
|
id: "18",
|
|
time: "18:00",
|
|
},
|
|
{
|
|
id: "19",
|
|
time: "19:00",
|
|
},
|
|
{
|
|
id: "20",
|
|
time: "20:00",
|
|
},
|
|
{
|
|
id: "21",
|
|
time: "21:00",
|
|
},
|
|
{
|
|
id: "22",
|
|
time: "22:00",
|
|
},
|
|
{
|
|
id: "23",
|
|
time: "23:00",
|
|
},
|
|
{
|
|
id: "24",
|
|
time: "24:00",
|
|
},
|
|
{
|
|
id: "1",
|
|
time: "01:00",
|
|
},
|
|
{
|
|
id: "2",
|
|
time: "02:00",
|
|
},
|
|
{
|
|
id: "3",
|
|
time: "03:00",
|
|
},
|
|
{
|
|
id: "4",
|
|
time: "04:00",
|
|
},
|
|
{
|
|
id: "5",
|
|
time: "05:00",
|
|
},
|
|
];
|
|
|
|
const city = [
|
|
{
|
|
key: 1,
|
|
id: "metro-jaya",
|
|
name: "Polda Metro Jaya",
|
|
},
|
|
{
|
|
key: 2,
|
|
id: "jawa-barat",
|
|
name: "Polda Jawa Barat",
|
|
},
|
|
{
|
|
key: 3,
|
|
id: "banten",
|
|
name: "Polda Banten",
|
|
},
|
|
{
|
|
key: 4,
|
|
id: "jawa-tengah",
|
|
name: "Polda Jawa Tengah",
|
|
},
|
|
{
|
|
key: 5,
|
|
id: "daerah-istimewa-yogyakarta",
|
|
name: "Polda D.I Yogyakarta",
|
|
},
|
|
{
|
|
key: 6,
|
|
id: "jawa-timur",
|
|
name: "Polda Jawa Timur",
|
|
},
|
|
{
|
|
key: 7,
|
|
id: "aceh",
|
|
name: "Polda Aceh",
|
|
},
|
|
{
|
|
key: 8,
|
|
id: "sumatera-utara",
|
|
name: "Polda Sumatera Utara",
|
|
},
|
|
{
|
|
key: 9,
|
|
id: "sumatera-barat",
|
|
name: "Polda Sumatera Barat",
|
|
},
|
|
];
|
|
|
|
const Schedule = (props: any) => {
|
|
const router = useRouter();
|
|
const asPath = usePathname();
|
|
const [startDate, setStartDate] = useState<Date | undefined>(new Date());
|
|
const [dateAWeek, setDateAWeek] = useState<string[]>([]);
|
|
const [todayList, setTodayList] = useState([]);
|
|
const [prevdayList, setPrevdayList] = useState([]);
|
|
const [nextdayList, setNextdayList] = useState([]);
|
|
const [schedules, setSchedules] = useState([]);
|
|
const [openDialog, setOpenDialog] = useState(false);
|
|
const [detail, setDetail] = useState<any>();
|
|
const [content, setContent] = useState();
|
|
const { id } = props;
|
|
const t = useTranslations("LandingPage");
|
|
const [search, setSearch] = useState<any>();
|
|
const [scheduleSearch, setScheduleSearch] = useState<any>();
|
|
let typingTimer: any;
|
|
const doneTypingInterval = 1500;
|
|
const [regionFilter, setRegionFilter] = useState<any>([]);
|
|
const [regionName, setRegionName] = useState<any>([]);
|
|
const isPolda = asPath.includes("/polda");
|
|
const userId = getCookiesDecrypt("uie");
|
|
|
|
async function doneTyping() {
|
|
if (search?.length > 2) {
|
|
const resSchedule = await searchSchedules(search);
|
|
setScheduleSearch(resSchedule.data?.data);
|
|
} else {
|
|
setScheduleSearch([]);
|
|
}
|
|
}
|
|
|
|
const handleKeyUp = () => {
|
|
clearTimeout(typingTimer);
|
|
typingTimer = setTimeout(doneTyping, doneTypingInterval);
|
|
};
|
|
|
|
const handleKeyDown = () => {
|
|
clearTimeout(typingTimer);
|
|
};
|
|
|
|
useEffect(() => {
|
|
async function getDataSchedule() {
|
|
const response = await detailSchedule(id);
|
|
setDetail(response?.data?.data);
|
|
setContent(response?.data?.data?.files);
|
|
}
|
|
|
|
getDataSchedule();
|
|
}, [id]);
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(",");
|
|
const resSchedule = await listSchedule(group);
|
|
setSchedules(resSchedule.data?.data);
|
|
console.log(resSchedule);
|
|
setDateAWeek(dateList);
|
|
getDataByDate(); // let today = new Date();
|
|
// if (!dateList.includes(today.getDate())){
|
|
// changeNextWeek();
|
|
// }
|
|
}
|
|
|
|
initState();
|
|
console.log("Filter ::", regionFilter);
|
|
}, [regionName]);
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
getDataByDate();
|
|
// const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(",");
|
|
const resSchedule = await listSchedule();
|
|
setSchedules(resSchedule.data?.data);
|
|
console.log(resSchedule);
|
|
setDateAWeek(dateList);
|
|
}
|
|
|
|
initState();
|
|
}, []);
|
|
|
|
async function getDataByDate() {
|
|
const resToday = await listScheduleTodayPublic();
|
|
const today = resToday.data?.data;
|
|
setTodayList(today);
|
|
const resNext = await listScheduleNextPublic();
|
|
const next = resNext.data?.data;
|
|
|
|
setNextdayList(next);
|
|
const resPrev = await listSchedulePrevPublic();
|
|
const prev = resPrev.data?.data;
|
|
|
|
setPrevdayList(prev);
|
|
}
|
|
|
|
const curr = new Date();
|
|
const startDays = (curr.getDay() + 7 - 1) % 7;
|
|
|
|
curr.setDate(curr.getDate() - startDays);
|
|
const dateListInit = [];
|
|
curr.setDate(curr.getDate() - curr.getDay() + 1);
|
|
for (let i = 0; i < 7; i++) {
|
|
dateListInit.push(new Date(curr).toISOString().slice(0, 10));
|
|
curr.setDate(curr.getDate() + 1);
|
|
}
|
|
const [dateList, setDateList] = useState<string[]>(dateListInit);
|
|
|
|
const handleChangeDate = (date: Date | undefined) => {
|
|
setStartDate(date);
|
|
const dateListTemp = [];
|
|
const curr = date;
|
|
if (curr) {
|
|
const startDays = (curr.getDay() + 7 - 1) % 7;
|
|
|
|
curr.setDate(curr.getDate() - startDays);
|
|
curr.setDate(curr.getDate() - curr.getDay() + 1);
|
|
for (let i = 0; i < 7; i++) {
|
|
dateListTemp.push(new Date(curr).toISOString().slice(0, 10));
|
|
curr.setDate(curr.getDate() + 1);
|
|
}
|
|
|
|
console.log("Change Date :", dateListTemp);
|
|
setDateList(dateListTemp);
|
|
setDateAWeek(dateListTemp);
|
|
}
|
|
};
|
|
|
|
function getLastWeek(today: Date | undefined) {
|
|
if (today) {
|
|
return new Date(
|
|
today.getFullYear(),
|
|
today.getMonth(),
|
|
today.getDate() - 7
|
|
);
|
|
}
|
|
}
|
|
|
|
function getNextWeek(today: Date | undefined) {
|
|
if (today) {
|
|
return new Date(
|
|
today.getFullYear(),
|
|
today.getMonth(),
|
|
today.getDate() + 7
|
|
);
|
|
}
|
|
}
|
|
|
|
const changeNextWeek = () => {
|
|
console.log("Today :", startDate);
|
|
const dayInNextWeek = getNextWeek(startDate);
|
|
console.log("Next week :", dayInNextWeek);
|
|
const dateListTemp = [];
|
|
const curr = dayInNextWeek;
|
|
if (curr) {
|
|
const startDays = (curr.getDay() + 7 - 1) % 7;
|
|
|
|
curr.setDate(curr.getDate() - startDays);
|
|
curr.setDate(curr.getDate() - curr.getDay() + 1);
|
|
for (let i = 0; i < 7; i++) {
|
|
const newDate = new Date(curr);
|
|
|
|
if (i == 0) {
|
|
setStartDate(newDate);
|
|
}
|
|
|
|
const dateFormatter = Intl.DateTimeFormat("sv-SE");
|
|
dateListTemp.push(dateFormatter.format(newDate));
|
|
curr.setDate(curr.getDate() + 1);
|
|
}
|
|
|
|
console.log(dateListTemp);
|
|
setDateList(dateListTemp);
|
|
setDateAWeek(dateListTemp);
|
|
}
|
|
};
|
|
|
|
const changePrevWeek = () => {
|
|
console.log(startDate);
|
|
const dayInPrevWeek = getLastWeek(startDate);
|
|
console.log("Prev week :", dayInPrevWeek);
|
|
console.log(startDate);
|
|
const dateListTemp = [];
|
|
const curr = dayInPrevWeek;
|
|
if (curr) {
|
|
const startDays = (curr.getDay() + 7 - 1) % 7;
|
|
|
|
curr.setDate(curr.getDate() - startDays);
|
|
curr.setDate(curr.getDate() - curr.getDay() + 1);
|
|
for (let i = 0; i < 7; i++) {
|
|
const newDate = new Date(curr);
|
|
|
|
if (i == 0) {
|
|
setStartDate(newDate);
|
|
}
|
|
|
|
const dateFormatter = Intl.DateTimeFormat("sv-SE");
|
|
dateListTemp.push(dateFormatter.format(newDate));
|
|
curr.setDate(curr.getDate() + 1);
|
|
}
|
|
|
|
console.log(dateListTemp);
|
|
setDateList(dateListTemp);
|
|
setDateAWeek(dateListTemp);
|
|
}
|
|
};
|
|
|
|
const getItem = async (itemFound: any) => {
|
|
loading();
|
|
const response = await detailSchedule(itemFound?.id);
|
|
setDetail(response?.data?.data);
|
|
setContent(response?.data?.data?.files);
|
|
console.log("item Found", itemFound);
|
|
close();
|
|
setOpenDialog(true);
|
|
};
|
|
|
|
const handleRegionFilter = (e: any) => {
|
|
let regions = [...regionFilter];
|
|
|
|
if (e.target.checked) {
|
|
regions = [...regionFilter, e.target.value];
|
|
} else {
|
|
regions.splice(regionFilter.indexOf(e.target.value), 1);
|
|
}
|
|
|
|
console.log(regions);
|
|
setRegionFilter(regions);
|
|
};
|
|
|
|
const getListDataCity = () => {
|
|
let filteredReg: any = [];
|
|
let regName = "";
|
|
|
|
for (const element of regionFilter) {
|
|
for (const element_ of city) {
|
|
if (element == element_.id) {
|
|
regName = element_.name;
|
|
filteredReg = [
|
|
...filteredReg,
|
|
{
|
|
id: element_.id,
|
|
key: element_.key,
|
|
name: regName,
|
|
},
|
|
];
|
|
}
|
|
}
|
|
}
|
|
|
|
console.log(filteredReg);
|
|
setRegionName(filteredReg);
|
|
filteredReg = [];
|
|
};
|
|
|
|
const doFilter = () => {
|
|
getListDataCity();
|
|
};
|
|
|
|
const goLogin = () => {
|
|
router.push("/auth/login");
|
|
};
|
|
|
|
const deleteFilterhandler = (filterId: any) => {
|
|
console.log("hapus", filterId);
|
|
const deletedReg = regionName.filter((list: any) => list.id !== filterId);
|
|
const filtered = regionFilter.filter((list: any) => list !== filterId);
|
|
|
|
setRegionName(deletedReg);
|
|
setRegionFilter(filtered);
|
|
};
|
|
|
|
function setItemSchedule(id: string, date: string) {
|
|
const itemFound: any = schedules?.filter(
|
|
(s: any) =>
|
|
s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id)
|
|
);
|
|
|
|
if (itemFound?.length > 0) {
|
|
if (itemFound?.length == 1) {
|
|
return (
|
|
<a
|
|
className={`cursor-pointer text-center ${
|
|
Number(itemFound[0]?.uploaderLevelNumber) == 1
|
|
? "bg-yellow-300"
|
|
: Number(itemFound[0]?.uploaderLevelNumber) == 2
|
|
? "bg-blue-400"
|
|
: "bg-gray-500"
|
|
}`}
|
|
onClick={() => {
|
|
getItem(itemFound[0]);
|
|
}}
|
|
>
|
|
<p>
|
|
<b>{itemFound[0]?.title}</b>
|
|
</p>
|
|
{itemFound[0].isYoutube == true ? (
|
|
<div className="flex items-center w-fit gap-1 bg-red-600 text-white px-2 py-1 rounded text-xs font-semibold mx-auto mt-2">
|
|
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
|
<span>LIVE</span>
|
|
</div>
|
|
) : ""}
|
|
{/* <p className="address">{itemFound[0].address}</p> */}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
// for (let i = 0; i < itemFound.length; i++) {
|
|
// const item = itemFound[i];
|
|
// }
|
|
return (
|
|
<div className="text-left">
|
|
<p>
|
|
<b>{`${itemFound?.length} Jadwal Bersamaan`}</b>
|
|
</p>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="font-bold text-blue-300">
|
|
Lihat Jadwal
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
{itemFound?.map((list: any) => (
|
|
<DropdownMenuItem
|
|
key={list.id}
|
|
className="cursor-pointer"
|
|
onClick={() => {
|
|
getItem(itemFound[0]);
|
|
}}
|
|
>
|
|
<p>
|
|
<b>{list.title}</b>
|
|
</p>
|
|
{list.isYoutube == true ? (
|
|
<div className="flex items-center w-fit gap-1 bg-red-600 text-white px-2 py-1 rounded text-xs font-semibold mx-auto pt-4">
|
|
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
|
<span>LIVE</span>
|
|
</div>
|
|
) : ""}
|
|
{/* <p className="address">{list.address}</p> */}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<div
|
|
className="border-0 dropdown-menu schedule-list"
|
|
aria-labelledby="view-schedule"
|
|
></div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Awal Komponen Kiri */}
|
|
<div className="relative pl-4 lg:px-8 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800 min-h-[80vh]">
|
|
<div className="flex flex-row items-center">
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant={"outline"}
|
|
className={cn(
|
|
"w-[240px] py-3 justify-start text-left font-normal",
|
|
!startDate && "text-muted-foreground"
|
|
)}
|
|
>
|
|
<CalendarIcon />
|
|
{startDate ? (
|
|
format(startDate, "MMM yyyy")
|
|
) : (
|
|
<span>Pick a date</span>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="start">
|
|
<Calendar
|
|
mode="single"
|
|
selected={startDate}
|
|
onSelect={(e) => {
|
|
handleChangeDate(e);
|
|
}}
|
|
initialFocus
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<div className="container relative py-4 flex flex-row items-center gap-4">
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<a className="text-black dark:text-white flex flex-row w-fit gap-3 py-2 px-3 items-center cursor-pointer border border-black rounded-md ">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1"
|
|
/>
|
|
</svg>
|
|
Filter
|
|
<svg
|
|
className="flex items-center justify-center"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
fill-rule="evenodd"
|
|
d="m6 7l6 6l6-6l2 2l-8 8l-8-8z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
align="start"
|
|
className="flex p-0 rounded-md w-fit"
|
|
>
|
|
<div className="flex flex-col items-center justify-between gap-1.5 p-2 border-b text-default-600 rounded-none">
|
|
<div className="gap-6 flex flex-row justify-end">
|
|
<p className="font-semibold">Filter</p>
|
|
<button className="text-blue-400" onClick={doFilter}>
|
|
{t("save", { defaultValue: "Save" })}
|
|
</button>
|
|
</div>
|
|
<div className="border w-full border-t border-slate-500"></div>
|
|
<div className="overflow-y-auto flex flex-col gap-2 h-[200px] ">
|
|
<p className="text-center font-semibold">Region Filter</p>
|
|
{city?.map((list) => (
|
|
<div className="mt-2 gap-2 flex flex-row">
|
|
{" "}
|
|
<input
|
|
type="checkbox"
|
|
className=""
|
|
id={`filterCategory-${list.key}`}
|
|
value={list.id}
|
|
checked={regionFilter?.includes(list.id)}
|
|
onChange={handleRegionFilter}
|
|
/>
|
|
<p>{list?.name}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<div className="flex flex-col lg:flex-row gap-3">
|
|
{regionName?.map((list: any) => (
|
|
<div className="text-left">
|
|
<button
|
|
onClick={() => deleteFilterhandler(list.id)}
|
|
key={list.key}
|
|
id={list.id}
|
|
className="text-black bg-yellow-300 w-fit p-3 flex justify-center items-center rounded-lg"
|
|
>
|
|
{list.name}
|
|
<Icon
|
|
icon="icon-park-outline:delete-two"
|
|
className="items-center"
|
|
/>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col lg:flex-row gap-1">
|
|
<div className="h-[500px] overflow-y-auto md:overflow-y-auto w-full lg:w-3/4 ">
|
|
<div className="container-fluid relative">
|
|
<div className="grid grid-cols-1 mt-8">
|
|
<div className="relative block bg-white w-full dark:bg-slate-900 mx-auto">
|
|
<table className="w-full text-sm text-start">
|
|
<thead className="text-md">
|
|
<tr className="h-full">
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[210px]">
|
|
{t("timeTable", { defaultValue: "Time Table" })}
|
|
</th>
|
|
<th className="text-center border border-r-0 border-gray-100 dark:border-gray-700 py-6 w-[20px]">
|
|
<a
|
|
onClick={() => changePrevWeek()}
|
|
className="cursor-pointer h-fit self-center bottom-0"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="40px"
|
|
height="40px"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</th>
|
|
<th
|
|
className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
|
|
new Date().toISOString().slice(0, 10) ==
|
|
dateAWeek[0]
|
|
? "bg-red-600 text-white"
|
|
: ""
|
|
}`}
|
|
>
|
|
{/* <a className="cursor-pointer h-fit self-center bottom-0" >
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
|
|
</svg>
|
|
</a>{" "} */}
|
|
<div className="flex flex-col ">
|
|
<p className="text-2xl">
|
|
{dateAWeek[0]?.split("-")[2]}
|
|
</p>
|
|
<p>{t("monday", { defaultValue: "Monday" })}</p>
|
|
</div>
|
|
</th>
|
|
<th
|
|
className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
|
|
new Date().toISOString().slice(0, 10) ==
|
|
dateAWeek[1]
|
|
? "bg-[#BE0106] text-white rounded-lg"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="text-2xl">
|
|
{dateAWeek[1]?.split("-")[2]}
|
|
</div>
|
|
{t("tuesday", { defaultValue: "Tuesday" })}
|
|
</th>
|
|
<th
|
|
className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
|
|
new Date().toISOString().slice(0, 10) ==
|
|
dateAWeek[2]
|
|
? "bg-[#BE0106] text-white rounded-lg"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="text-2xl">
|
|
{dateAWeek[2]?.split("-")[2]}
|
|
</div>
|
|
{t("wednesday", { defaultValue: "Wednesday" })}
|
|
</th>
|
|
<th
|
|
className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
|
|
new Date().toISOString().slice(0, 10) ==
|
|
dateAWeek[3]
|
|
? "bg-[#BE0106] text-white rounded-lg"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="text-2xl">
|
|
{dateAWeek[3]?.split("-")[2]}
|
|
</div>
|
|
{t("thursday", { defaultValue: "Thursday" })}
|
|
</th>
|
|
<th
|
|
className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
|
|
new Date().toISOString().slice(0, 10) ==
|
|
dateAWeek[4]
|
|
? "bg-[#BE0106] text-white rounded-lg"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="text-2xl">
|
|
{dateAWeek[4]?.split("-")[2]}
|
|
</div>
|
|
{t("friday", { defaultValue: "Friday" })}
|
|
</th>
|
|
<th
|
|
className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
|
|
new Date().toISOString().slice(0, 10) ==
|
|
dateAWeek[5]
|
|
? "bg-[#BE0106] text-white rounded-lg"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="text-2xl">
|
|
{dateAWeek[5]?.split("-")[2]}
|
|
</div>
|
|
{t("saturday", { defaultValue: "Saturday" })}
|
|
</th>
|
|
<th
|
|
onClick={() => changeNextWeek()}
|
|
className={`text-center border cursor-pointer border-r-0 border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
|
|
new Date().toISOString().slice(0, 10) ==
|
|
dateAWeek[6]
|
|
? "bg-[#BE0106] text-white rounded-lg"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="flex flex-col ">
|
|
<p className="text-2xl">
|
|
{dateAWeek[6]?.split("-")[2]}
|
|
</p>
|
|
<p>{t("sunday", { defaultValue: "Sunday" })}</p>
|
|
</div>
|
|
{/* <a className="cursor-pointer h-fit p-0 m-0 self-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
|
|
<path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
|
|
</svg>
|
|
</a> */}
|
|
</th>
|
|
<th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 py-6 w-[20px]">
|
|
<a
|
|
onClick={() => changeNextWeek()}
|
|
className="cursor-pointer"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="40px"
|
|
height="40px"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{timeList.map((times) => (
|
|
<tr key={times.id}>
|
|
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">
|
|
{times.time}
|
|
</th>
|
|
<td
|
|
colSpan={2}
|
|
className="p-3 border border-gray-100 dark:border-gray-700 "
|
|
>
|
|
{setItemSchedule(times.id, dateList[0])}
|
|
</td>
|
|
<td className="border border-gray-100 dark:border-gray-700">
|
|
{setItemSchedule(times.id, dateList[1])}
|
|
</td>
|
|
<td className="border border-gray-100 dark:border-gray-700">
|
|
{setItemSchedule(times.id, dateList[2])}
|
|
</td>
|
|
<td className="border border-gray-100 dark:border-gray-700">
|
|
{setItemSchedule(times.id, dateList[3])}
|
|
</td>
|
|
<td className="p-3 border border-gray-100 dark:border-gray-700">
|
|
{setItemSchedule(times.id, dateList[4])}
|
|
</td>
|
|
<td className="border border-gray-100 dark:border-gray-700">
|
|
{setItemSchedule(times.id, dateList[5])}
|
|
</td>
|
|
<td
|
|
colSpan={2}
|
|
className="border border-gray-100 dark:border-gray-700"
|
|
>
|
|
{setItemSchedule(times.id, dateList[6])}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* komponen Kanan */}
|
|
<div className="w-full lg:w-1/4 flex flex-col gap-6 ml-4">
|
|
<div className="relative text-gray-600 dark:text-white">
|
|
<input
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
onKeyUp={handleKeyUp}
|
|
onKeyDown={handleKeyDown}
|
|
type="text"
|
|
placeholder={t("titleSchedule", { defaultValue: "Title Schedule" })}
|
|
className="pl-8 pr-4 py-1 w-full border rounded-full text-sm focus:outline-none"
|
|
/>
|
|
<span className="absolute left-2 top-1/2 transform -translate-y-1/2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g fill="none" fill-rule="evenodd">
|
|
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
|
<path
|
|
fill="currentColor"
|
|
d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
|
|
{/* jadwal hari ini */}
|
|
{/* <Collapsible className="border border-slate-400 p-2 rounded-lg" open={isOpen} onOpenChange={setIsOpen}>
|
|
<CollapsibleTrigger>
|
|
<h5 className="py-2 flex justify-between items-center">
|
|
Jadwal Hari Ini
|
|
<span className="flex items-end">
|
|
<Icon icon="fa:angle-down" className="ml-1" />
|
|
</span>
|
|
</h5>
|
|
</CollapsibleTrigger>
|
|
{todayList?.map((list: any) => (
|
|
<CollapsibleContent className={`flex flex-row gap-3 ${isOpen ? "border-b-2 border-black my-3" : ""}`}>
|
|
<div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
|
|
<div className="flex flex-col">
|
|
<h3 className="font-bold">{list?.title}</h3>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="iconamoon:clock-thin" />
|
|
{list?.startTime} - {list?.endTime} WIB
|
|
</p>
|
|
<p className="flex flex-row items-start gap-2 ">
|
|
<Icon icon="bxs:map" width={40} />
|
|
{list?.address}
|
|
</p>
|
|
<p>Pembicara :</p>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="ic:round-person" />
|
|
{list?.speakerTitle} {list?.speakerName}
|
|
</p>
|
|
</div>
|
|
</CollapsibleContent>
|
|
))}
|
|
</Collapsible> */}
|
|
|
|
<Accordion type="single" collapsible className="w-full">
|
|
<AccordionItem value="item-1">
|
|
<AccordionTrigger>{t("todaySchedule", { defaultValue: "Today Schedule" })}</AccordionTrigger>
|
|
{todayList?.map((list: any) => (
|
|
<AccordionContent
|
|
key={list?.id}
|
|
className="flex flex-row gap-3"
|
|
>
|
|
<div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
|
|
{new Date(list.startDate).getDate()}
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<h3 className="font-bold">{list?.title}</h3>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="iconamoon:clock-thin" />
|
|
{list?.startTime} - {list?.endTime} WIB
|
|
</p>
|
|
<p className="flex flex-row items-start gap-2 ">
|
|
<Icon icon="bxs:map" width={40} />
|
|
{list?.address}
|
|
</p>
|
|
<p>{t("speaker", { defaultValue: "Speaker" })}</p>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="ic:round-person" />
|
|
{list?.speakerTitle} {list?.speakerName}
|
|
</p>
|
|
</div>
|
|
</AccordionContent>
|
|
))}
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="item-2">
|
|
<AccordionTrigger>{t("previousSchedule", { defaultValue: "Previous Schedule" })}</AccordionTrigger>
|
|
{prevdayList?.map((list: any) => (
|
|
<AccordionContent
|
|
key={list?.id}
|
|
className="flex flex-row gap-3"
|
|
>
|
|
<div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
|
|
{new Date(list.startDate).getDate()}
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<h3 className="font-bold">{list?.title}</h3>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="iconamoon:clock-thin" />
|
|
{list?.startTime} - {list?.endTime} WIB
|
|
</p>
|
|
<p className="flex flex-row items-start gap-2 ">
|
|
<Icon icon="bxs:map" width={40} />
|
|
{list?.address}
|
|
</p>
|
|
<p>{t("speaker", { defaultValue: "Speaker" })}</p>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="ic:round-person" />
|
|
{list?.speakerTitle} {list?.speakerName}
|
|
</p>
|
|
</div>
|
|
</AccordionContent>
|
|
))}
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="item-3">
|
|
<AccordionTrigger>{t("nextSchedule", { defaultValue: "Next Schedule" })}</AccordionTrigger>
|
|
{nextdayList?.map((list: any) => (
|
|
<AccordionContent
|
|
key={list?.id}
|
|
className="flex flex-row gap-3"
|
|
>
|
|
<div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
|
|
{new Date(list.startDate).getDate()}
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<h3 className="font-bold">{list?.title}</h3>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="iconamoon:clock-thin" />
|
|
{list?.startTime} - {list?.endTime} WIB
|
|
</p>
|
|
<p className="flex flex-row items-start gap-2 ">
|
|
<Icon icon="bxs:map" width={40} />
|
|
{list?.address}
|
|
</p>
|
|
<p>{t("speaker", { defaultValue: "Speaker" })}</p>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="ic:round-person" />
|
|
{list?.speakerTitle} {list?.speakerName}
|
|
</p>
|
|
</div>
|
|
</AccordionContent>
|
|
))}
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
{/* jadwal sebelumnya */}
|
|
{/* <Collapsible className="border border-slate-400 p-2 rounded-lg" open={isOpen} onOpenChange={setIsOpen}>
|
|
<CollapsibleTrigger>
|
|
<h5 className="py-2 flex justify-between items-center">
|
|
Jadwal Sebelumnya
|
|
<span className="flex items-end">
|
|
<Icon icon="fa:angle-down" className="ml-1" />
|
|
</span>
|
|
</h5>
|
|
</CollapsibleTrigger>
|
|
{prevdayList?.map((list: any) => (
|
|
<CollapsibleContent className={`flex flex-row gap-3 ${isOpen ? "border-b-2 border-black my-3" : ""}`}>
|
|
<div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
|
|
<div className="flex flex-col">
|
|
<h3 className="font-bold">{list?.title}</h3>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="iconamoon:clock-thin" />
|
|
{list?.startTime} - {list?.endTime} WIB
|
|
</p>
|
|
<p className="flex flex-row items-start gap-2 ">
|
|
<Icon icon="bxs:map" width={40} />
|
|
{list?.address}
|
|
</p>
|
|
<p>Pembicara :</p>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="ic:round-person" />
|
|
{list?.speakerTitle} {list?.speakerName}
|
|
</p>
|
|
</div>
|
|
</CollapsibleContent>
|
|
))}
|
|
</Collapsible> */}
|
|
|
|
{/* jadwal selanjutnya */}
|
|
{/* <Collapsible className="border border-slate-400 p-2 rounded-lg" open={isOpen} onOpenChange={setIsOpen}>
|
|
<CollapsibleTrigger>
|
|
<h5 className="py-2 flex justify-end items-center">
|
|
Jadwal Selanjutnya
|
|
<span className="flex items-end">
|
|
<Icon icon="fa:angle-down" className="ml-1 flex" />
|
|
</span>
|
|
</h5>
|
|
</CollapsibleTrigger>
|
|
{nextdayList?.map((list: any) => (
|
|
<CollapsibleContent className={`flex flex-row gap-3 ${isOpen ? "border-b-2 border-black my-3" : ""}`}>
|
|
<div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
|
|
<div className="flex flex-col">
|
|
<h3 className="font-bold">{list?.title}</h3>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="iconamoon:clock-thin" />
|
|
{list?.startTime} - {list?.endTime} WIB
|
|
</p>
|
|
<p className="flex flex-row items-start gap-2 ">
|
|
<Icon icon="bxs:map" width={40} />
|
|
{list?.address}
|
|
</p>
|
|
<p>Pembicara :</p>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="ic:round-person" />
|
|
{list?.speakerTitle} {list?.speakerName}
|
|
</p>
|
|
</div>
|
|
</CollapsibleContent>
|
|
))}
|
|
</Collapsible> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog open={openDialog} onOpenChange={setOpenDialog}>
|
|
<DialogContent size="md">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
<h1 className="my-4 font-light">
|
|
JADWAL /{" "}
|
|
{detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}
|
|
</h1>
|
|
<p className="font-bold">{detail?.title}</p>
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="iconamoon:clock-thin" />
|
|
{detail?.startDate} {detail?.startTime} - {detail?.endTime}{" "}
|
|
{detail?.timezone ? detail.timezone : "WIB"}
|
|
</p>
|
|
</DialogDescription>
|
|
<DialogDescription>
|
|
<p className="flex flex-row items-center gap-2 ">
|
|
<Icon icon="bxs:map" fontSize={20} />
|
|
{detail?.address}
|
|
</p>
|
|
</DialogDescription>
|
|
<DialogDescription>
|
|
<p className="flex flex-row items-center gap-2">
|
|
<Icon icon="ic:round-person" />
|
|
{detail?.speakerTitle || ""} {detail?.speakerName || ""}{" "}
|
|
</p>
|
|
</DialogDescription>
|
|
<DialogDescription>
|
|
{detail?.isYoutube == true ? (
|
|
userId == null ? (
|
|
<div className="login-live-streaming mt-5 text-dark">
|
|
<p className="mb-0">
|
|
Untuk menonton Live Streaming silahkan
|
|
<a className="login" onClick={() => goLogin()}>
|
|
{" "}
|
|
Login{" "}
|
|
</a>
|
|
terlebih dahulu
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="video-player mt-4">
|
|
<iframe
|
|
width="100%"
|
|
height="480"
|
|
src={`${detail?.youtubeEmbedUrl}?autoplay=1&mute=1&enablejsapi=1&origin=${window.location.origin}`}
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowFullScreen
|
|
title={detail?.title}
|
|
/>
|
|
</div>
|
|
)
|
|
) : (
|
|
""
|
|
)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button onClick={() => setOpenDialog(false)}>Close</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Schedule;
|