fixing
This commit is contained in:
parent
377c22e083
commit
9f32d3dde5
|
|
@ -1,19 +1,52 @@
|
|||
"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, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
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 } from "@/lib/utils";
|
||||
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 } from "@/service/schedule/schedule";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
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";
|
||||
import { getUserLevelForAssignments } from "@/service/task";
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
const timeList = [
|
||||
{
|
||||
|
|
@ -116,18 +149,44 @@ const timeList = [
|
|||
|
||||
const Schedule = (props: any) => {
|
||||
const router = useRouter();
|
||||
const asPath = usePathname();
|
||||
const [startDate, setStartDate] = useState<Date | undefined>(new Date());
|
||||
const [dateAWeek, setDateAWeek] = useState<string[]>([]);
|
||||
const [scheduleSearch, setScheduleSearch] = useState();
|
||||
const [todayList, setTodayList] = useState([]);
|
||||
const [prevdayList, setPrevdayList] = useState([]);
|
||||
const [nextdayList, setNextdayList] = useState([]);
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
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() {
|
||||
|
|
@ -141,26 +200,32 @@ const Schedule = (props: any) => {
|
|||
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
getDataByDate();
|
||||
// const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(",");
|
||||
const resSchedule = await listSchedule();
|
||||
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();
|
||||
// }
|
||||
console.log("GROUP", group);
|
||||
}
|
||||
|
||||
initState();
|
||||
}, []);
|
||||
|
||||
async function getDataByDate() {
|
||||
const resToday = await listScheduleTodayPublic();
|
||||
const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(",");
|
||||
const resToday = await listScheduleTodayPublic(group as string);
|
||||
const today = resToday.data?.data;
|
||||
|
||||
setTodayList(today);
|
||||
const resNext = await listScheduleNextPublic();
|
||||
const resNext = await listScheduleNextPublic(group as string);
|
||||
const next = resNext.data?.data;
|
||||
|
||||
setNextdayList(next);
|
||||
const resPrev = await listSchedulePrevPublic();
|
||||
const resPrev = await listSchedulePrevPublic(group as string);
|
||||
const prev = resPrev.data?.data;
|
||||
|
||||
setPrevdayList(prev);
|
||||
|
|
@ -200,13 +265,21 @@ const Schedule = (props: any) => {
|
|||
|
||||
function getLastWeek(today: Date | undefined) {
|
||||
if (today) {
|
||||
return new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
|
||||
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);
|
||||
return new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth(),
|
||||
today.getDate() + 7
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -279,14 +352,49 @@ const Schedule = (props: any) => {
|
|||
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 goLogin = () => {
|
||||
router.push("/auth");
|
||||
};
|
||||
|
||||
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));
|
||||
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"}`}
|
||||
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]);
|
||||
}}
|
||||
|
|
@ -294,7 +402,14 @@ const Schedule = (props: any) => {
|
|||
<p>
|
||||
<b>{itemFound[0]?.title}</b>
|
||||
</p>
|
||||
{itemFound[0].isYoutube == true ? <p className="live">LIVE</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>
|
||||
);
|
||||
|
|
@ -306,10 +421,12 @@ const Schedule = (props: any) => {
|
|||
return (
|
||||
<div className="text-left">
|
||||
<p>
|
||||
<b>{`${itemFound?.length} Jadwal Bersamaan`}</b>
|
||||
<b>{t(`${itemFound?.length}simultaneousSchedule`)}</b>
|
||||
</p>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="font-bold text-blue-300">Lihat Jadwal</DropdownMenuTrigger>
|
||||
<DropdownMenuTrigger className="font-bold text-blue-300">
|
||||
{t("viewSchedule")}
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{itemFound?.map((list: any) => (
|
||||
<DropdownMenuItem
|
||||
|
|
@ -322,13 +439,23 @@ const Schedule = (props: any) => {
|
|||
<p>
|
||||
<b>{list.title}</b>
|
||||
</p>
|
||||
{list.isYoutube == true ? <p className="live">LIVE</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
|
||||
className="border-0 dropdown-menu schedule-list"
|
||||
aria-labelledby="view-schedule"
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -337,140 +464,165 @@ const Schedule = (props: any) => {
|
|||
return (
|
||||
<>
|
||||
{/* Awal Komponen Kiri */}
|
||||
<div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant={"outline"} className={cn("w-[240px] py-4 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">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<a className="text-black flex flex-row w-fit gap-2 py-4 items-center cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="#000" 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>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="flex p-0 rounded-md">
|
||||
<DropdownMenuItem 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">
|
||||
<div> Filter</div>
|
||||
<button className="text-blue-400">Simpan</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>Region Filter</p>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<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>
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
<div className="h-[500px] overflow-y-auto w-3/4 ">
|
||||
<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 dark:bg-slate-900">
|
||||
<table className="w-full text-sm text-start">
|
||||
<div className="relative block bg-white w-full dark:bg-slate-900 mx-auto">
|
||||
<table className="w-full text-sm text-start table-fixed">
|
||||
<thead className="text-md">
|
||||
<tr className="h-full">
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
|
||||
<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" />
|
||||
<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" : ""}`}>
|
||||
<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>Monday</p>
|
||||
<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>Tuesday
|
||||
<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>Wednesday
|
||||
<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>Thursday
|
||||
<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>Friday
|
||||
<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>Saturday
|
||||
<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" : ""
|
||||
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>Sunday</p>
|
||||
<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">
|
||||
|
|
@ -478,10 +630,21 @@ const Schedule = (props: any) => {
|
|||
</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" />
|
||||
<th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 pr-12 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>
|
||||
|
|
@ -490,16 +653,34 @@ const Schedule = (props: any) => {
|
|||
<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 ">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -511,15 +692,32 @@ const Schedule = (props: any) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Component Kanan */}
|
||||
<div className="w-1/4 flex flex-col gap-6">
|
||||
{/* 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 type="text" placeholder="Masukkan Judul Jadwal" className="pl-8 pr-4 py-1 w-full border rounded-full text-sm focus:outline-none" />
|
||||
<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">
|
||||
<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" />
|
||||
<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>
|
||||
|
|
@ -557,12 +755,20 @@ const Schedule = (props: any) => {
|
|||
</CollapsibleContent>
|
||||
))}
|
||||
</Collapsible> */}
|
||||
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>Jadwal Hari ini</AccordionTrigger>
|
||||
<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>
|
||||
<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">
|
||||
|
|
@ -570,10 +776,10 @@ const Schedule = (props: any) => {
|
|||
{list?.startTime} - {list?.endTime} WIB
|
||||
</p>
|
||||
<p className="flex flex-row items-start gap-2 ">
|
||||
<Icon icon="bxs:map" width={40} />
|
||||
<Icon icon="bxs:map" />
|
||||
{list?.address}
|
||||
</p>
|
||||
<p>Pembicara :</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}
|
||||
|
|
@ -584,10 +790,17 @@ const Schedule = (props: any) => {
|
|||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-2">
|
||||
<AccordionTrigger>Jadwal Sebelumnya</AccordionTrigger>
|
||||
<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>
|
||||
<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">
|
||||
|
|
@ -595,10 +808,10 @@ const Schedule = (props: any) => {
|
|||
{list?.startTime} - {list?.endTime} WIB
|
||||
</p>
|
||||
<p className="flex flex-row items-start gap-2 ">
|
||||
<Icon icon="bxs:map" width={40} />
|
||||
<Icon icon="bxs:map" />
|
||||
{list?.address}
|
||||
</p>
|
||||
<p>Pembicara :</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}
|
||||
|
|
@ -609,10 +822,17 @@ const Schedule = (props: any) => {
|
|||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-3">
|
||||
<AccordionTrigger>Jadwal Selanjutnya</AccordionTrigger>
|
||||
<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>
|
||||
<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">
|
||||
|
|
@ -620,10 +840,10 @@ const Schedule = (props: any) => {
|
|||
{list?.startTime} - {list?.endTime} WIB
|
||||
</p>
|
||||
<p className="flex flex-row items-start gap-2 ">
|
||||
<Icon icon="bxs:map" width={40} />
|
||||
<Icon icon="bxs:map" />
|
||||
{list?.address}
|
||||
</p>
|
||||
<p>Pembicara :</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}
|
||||
|
|
@ -703,37 +923,71 @@ const Schedule = (props: any) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
<h1 className="my-4 font-light">JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}</h1>
|
||||
<Dialog open={openDialog} onOpenChange={setOpenDialog}>
|
||||
<DialogContent size="md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
<h1 className="my-4 font-light">
|
||||
{t("timeTable1")}
|
||||
{detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}
|
||||
</h1>
|
||||
<p className="font-bold">{detail?.title}</p>
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
<p className="flex flex-row items-center gap-2">
|
||||
<Icon icon="iconamoon:clock-thin" />
|
||||
{detail?.date} {detail?.startTime} - {detail?.endTime} {detail?.timezone ? detail.timezone : "WIB"}
|
||||
{detail?.startDate} {detail?.startTime} - {detail?.endTime}{" "}
|
||||
{detail?.timezone ? detail.timezone : "WIB"}
|
||||
</p>
|
||||
</AlertDialogDescription>
|
||||
<AlertDialogDescription>
|
||||
<p className="flex flex-row items-start gap-2 ">
|
||||
<Icon icon="bxs:map" width={30} />
|
||||
</DialogDescription>
|
||||
<DialogDescription>
|
||||
<p className="flex flex-row items-center gap-2 ">
|
||||
<Icon icon="bxs:map" fontSize={20} />
|
||||
{detail?.address}
|
||||
</p>
|
||||
</AlertDialogDescription>
|
||||
<AlertDialogDescription>
|
||||
</DialogDescription>
|
||||
<DialogDescription>
|
||||
<p className="flex flex-row items-center gap-2">
|
||||
<Icon icon="ic:round-person" />
|
||||
{detail?.speakerTitle || ""} {detail?.speakerName || ""}{" "}
|
||||
</p>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogAction>Close</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,19 +1,52 @@
|
|||
"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, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
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 } from "@/lib/utils";
|
||||
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 } from "@/service/schedule/schedule";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
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";
|
||||
import { getUserLevelForAssignments } from "@/service/task";
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
const timeList = [
|
||||
{
|
||||
|
|
@ -116,18 +149,44 @@ const timeList = [
|
|||
|
||||
const Schedule = (props: any) => {
|
||||
const router = useRouter();
|
||||
const asPath = usePathname();
|
||||
const [startDate, setStartDate] = useState<Date | undefined>(new Date());
|
||||
const [dateAWeek, setDateAWeek] = useState<string[]>([]);
|
||||
const [scheduleSearch, setScheduleSearch] = useState();
|
||||
const [todayList, setTodayList] = useState([]);
|
||||
const [prevdayList, setPrevdayList] = useState([]);
|
||||
const [nextdayList, setNextdayList] = useState([]);
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
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 isSatker = asPath.includes("/satker");
|
||||
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() {
|
||||
|
|
@ -141,26 +200,32 @@ const Schedule = (props: any) => {
|
|||
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
getDataByDate();
|
||||
// const group = isPolda ? asPath.split("/")[2] : regionFilter?.join(",");
|
||||
const resSchedule = await listSchedule();
|
||||
const group = isSatker ? 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();
|
||||
// }
|
||||
console.log("GROUP", group);
|
||||
}
|
||||
|
||||
initState();
|
||||
}, []);
|
||||
|
||||
async function getDataByDate() {
|
||||
const resToday = await listScheduleTodayPublic();
|
||||
const group = isSatker ? asPath.split("/")[2] : regionFilter?.join(",");
|
||||
const resToday = await listScheduleTodayPublic(group as string);
|
||||
const today = resToday.data?.data;
|
||||
|
||||
setTodayList(today);
|
||||
const resNext = await listScheduleNextPublic();
|
||||
const resNext = await listScheduleNextPublic(group as string);
|
||||
const next = resNext.data?.data;
|
||||
|
||||
setNextdayList(next);
|
||||
const resPrev = await listSchedulePrevPublic();
|
||||
const resPrev = await listSchedulePrevPublic(group as string);
|
||||
const prev = resPrev.data?.data;
|
||||
|
||||
setPrevdayList(prev);
|
||||
|
|
@ -200,13 +265,21 @@ const Schedule = (props: any) => {
|
|||
|
||||
function getLastWeek(today: Date | undefined) {
|
||||
if (today) {
|
||||
return new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
|
||||
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);
|
||||
return new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth(),
|
||||
today.getDate() + 7
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -279,14 +352,49 @@ const Schedule = (props: any) => {
|
|||
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 goLogin = () => {
|
||||
router.push("/auth");
|
||||
};
|
||||
|
||||
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));
|
||||
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"}`}
|
||||
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]);
|
||||
}}
|
||||
|
|
@ -294,7 +402,14 @@ const Schedule = (props: any) => {
|
|||
<p>
|
||||
<b>{itemFound[0]?.title}</b>
|
||||
</p>
|
||||
{itemFound[0].isYoutube == true ? <p className="live">LIVE</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>
|
||||
);
|
||||
|
|
@ -306,10 +421,12 @@ const Schedule = (props: any) => {
|
|||
return (
|
||||
<div className="text-left">
|
||||
<p>
|
||||
<b>{`${itemFound?.length} Jadwal Bersamaan`}</b>
|
||||
<b>{t(`${itemFound?.length}simultaneousSchedule`)}</b>
|
||||
</p>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="font-bold text-blue-300">Lihat Jadwal</DropdownMenuTrigger>
|
||||
<DropdownMenuTrigger className="font-bold text-blue-300">
|
||||
{t("viewSchedule")}
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{itemFound?.map((list: any) => (
|
||||
<DropdownMenuItem
|
||||
|
|
@ -322,13 +439,23 @@ const Schedule = (props: any) => {
|
|||
<p>
|
||||
<b>{list.title}</b>
|
||||
</p>
|
||||
{list.isYoutube == true ? <p className="live">LIVE</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
|
||||
className="border-0 dropdown-menu schedule-list"
|
||||
aria-labelledby="view-schedule"
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -337,140 +464,165 @@ const Schedule = (props: any) => {
|
|||
return (
|
||||
<>
|
||||
{/* Awal Komponen Kiri */}
|
||||
<div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant={"outline"} className={cn("w-[240px] py-4 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">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<a className="text-black flex flex-row w-fit gap-2 py-4 items-center cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="#000" 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>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="flex p-0 rounded-md">
|
||||
<DropdownMenuItem 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">
|
||||
<div> Filter</div>
|
||||
<button className="text-blue-400">Simpan</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>Region Filter</p>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
<div className="mt-2 gap-2 flex flex-row">
|
||||
<Checkbox id="terms" />
|
||||
<p>POLDA METRO JAYA</p>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<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>
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
<div className="h-[500px] overflow-y-auto w-3/4 ">
|
||||
<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 dark:bg-slate-900">
|
||||
<table className="w-full text-sm text-start">
|
||||
<div className="relative block bg-white w-full dark:bg-slate-900 mx-auto">
|
||||
<table className="w-full text-sm text-start table-fixed">
|
||||
<thead className="text-md">
|
||||
<tr className="h-full">
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
|
||||
<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" />
|
||||
<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" : ""}`}>
|
||||
<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>Monday</p>
|
||||
<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>Tuesday
|
||||
<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>Wednesday
|
||||
<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>Thursday
|
||||
<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>Friday
|
||||
<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>Saturday
|
||||
<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" : ""
|
||||
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>Sunday</p>
|
||||
<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">
|
||||
|
|
@ -478,10 +630,21 @@ const Schedule = (props: any) => {
|
|||
</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" />
|
||||
<th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 pr-12 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>
|
||||
|
|
@ -490,16 +653,34 @@ const Schedule = (props: any) => {
|
|||
<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 ">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -511,15 +692,32 @@ const Schedule = (props: any) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Component Kanan */}
|
||||
<div className="w-1/4 flex flex-col gap-6">
|
||||
{/* 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 type="text" placeholder="Masukkan Judul Jadwal" className="pl-8 pr-4 py-1 w-full border rounded-full text-sm focus:outline-none" />
|
||||
<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">
|
||||
<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" />
|
||||
<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>
|
||||
|
|
@ -557,12 +755,20 @@ const Schedule = (props: any) => {
|
|||
</CollapsibleContent>
|
||||
))}
|
||||
</Collapsible> */}
|
||||
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>Jadwal Hari ini</AccordionTrigger>
|
||||
<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>
|
||||
<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">
|
||||
|
|
@ -570,10 +776,10 @@ const Schedule = (props: any) => {
|
|||
{list?.startTime} - {list?.endTime} WIB
|
||||
</p>
|
||||
<p className="flex flex-row items-start gap-2 ">
|
||||
<Icon icon="bxs:map" width={40} />
|
||||
<Icon icon="bxs:map" />
|
||||
{list?.address}
|
||||
</p>
|
||||
<p>Pembicara :</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}
|
||||
|
|
@ -584,10 +790,17 @@ const Schedule = (props: any) => {
|
|||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-2">
|
||||
<AccordionTrigger>Jadwal Sebelumnya</AccordionTrigger>
|
||||
<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>
|
||||
<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">
|
||||
|
|
@ -595,10 +808,10 @@ const Schedule = (props: any) => {
|
|||
{list?.startTime} - {list?.endTime} WIB
|
||||
</p>
|
||||
<p className="flex flex-row items-start gap-2 ">
|
||||
<Icon icon="bxs:map" width={40} />
|
||||
<Icon icon="bxs:map" />
|
||||
{list?.address}
|
||||
</p>
|
||||
<p>Pembicara :</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}
|
||||
|
|
@ -609,10 +822,17 @@ const Schedule = (props: any) => {
|
|||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-3">
|
||||
<AccordionTrigger>Jadwal Selanjutnya</AccordionTrigger>
|
||||
<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>
|
||||
<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">
|
||||
|
|
@ -620,10 +840,10 @@ const Schedule = (props: any) => {
|
|||
{list?.startTime} - {list?.endTime} WIB
|
||||
</p>
|
||||
<p className="flex flex-row items-start gap-2 ">
|
||||
<Icon icon="bxs:map" width={40} />
|
||||
<Icon icon="bxs:map" />
|
||||
{list?.address}
|
||||
</p>
|
||||
<p>Pembicara :</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}
|
||||
|
|
@ -703,37 +923,71 @@ const Schedule = (props: any) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
<h1 className="my-4 font-light">JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}</h1>
|
||||
<Dialog open={openDialog} onOpenChange={setOpenDialog}>
|
||||
<DialogContent size="md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
<h1 className="my-4 font-light">
|
||||
{t("timeTable1")}
|
||||
{detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}
|
||||
</h1>
|
||||
<p className="font-bold">{detail?.title}</p>
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
<p className="flex flex-row items-center gap-2">
|
||||
<Icon icon="iconamoon:clock-thin" />
|
||||
{detail?.date} {detail?.startTime} - {detail?.endTime} {detail?.timezone ? detail.timezone : "WIB"}
|
||||
{detail?.startDate} {detail?.startTime} - {detail?.endTime}{" "}
|
||||
{detail?.timezone ? detail.timezone : "WIB"}
|
||||
</p>
|
||||
</AlertDialogDescription>
|
||||
<AlertDialogDescription>
|
||||
<p className="flex flex-row items-start gap-2 ">
|
||||
<Icon icon="bxs:map" width={30} />
|
||||
</DialogDescription>
|
||||
<DialogDescription>
|
||||
<p className="flex flex-row items-center gap-2 ">
|
||||
<Icon icon="bxs:map" fontSize={20} />
|
||||
{detail?.address}
|
||||
</p>
|
||||
</AlertDialogDescription>
|
||||
<AlertDialogDescription>
|
||||
</DialogDescription>
|
||||
<DialogDescription>
|
||||
<p className="flex flex-row items-center gap-2">
|
||||
<Icon icon="ic:round-person" />
|
||||
{detail?.speakerTitle || ""} {detail?.speakerName || ""}{" "}
|
||||
</p>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogAction>Close</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ import {
|
|||
import { close, loading } from "@/config/swal";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { getUserLevelForAssignments } from "@/service/task";
|
||||
|
||||
const timeList = [
|
||||
{
|
||||
|
|
@ -145,53 +146,53 @@ const timeList = [
|
|||
},
|
||||
];
|
||||
|
||||
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 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();
|
||||
|
|
@ -215,6 +216,9 @@ const Schedule = (props: any) => {
|
|||
const [regionName, setRegionName] = useState<any>([]);
|
||||
const isPolda = asPath.includes("/polda");
|
||||
const userId = getCookiesDecrypt("uie");
|
||||
const [city, setCity] = useState<{ key: number; id: string; name: string }[]>(
|
||||
[]
|
||||
);
|
||||
|
||||
async function doneTyping() {
|
||||
if (search?.length > 2) {
|
||||
|
|
@ -274,6 +278,29 @@ const Schedule = (props: any) => {
|
|||
initState();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchPoldaPolres() {
|
||||
const response = await getUserLevelForAssignments();
|
||||
// setListDest(response?.data?.data.list);
|
||||
console.log("polda", response?.data?.data?.list);
|
||||
const data = response?.data?.data.list;
|
||||
const temp = [];
|
||||
for (const element of data) {
|
||||
if (element.name.includes("SATKER")) continue;
|
||||
const splitedPoldaName = element.name.toLowerCase().split(" ").slice(1);
|
||||
const now = {
|
||||
key: element.id,
|
||||
id: splitedPoldaName.join("-"),
|
||||
name: element.name,
|
||||
};
|
||||
temp.push(now);
|
||||
}
|
||||
console.log("QQQQQ", temp);
|
||||
setCity(temp);
|
||||
}
|
||||
fetchPoldaPolres();
|
||||
}, []);
|
||||
|
||||
async function getDataByDate() {
|
||||
const resToday = await listScheduleTodayPublic();
|
||||
const today = resToday.data?.data;
|
||||
|
|
@ -452,7 +479,7 @@ const Schedule = (props: any) => {
|
|||
};
|
||||
|
||||
const goLogin = () => {
|
||||
router.push("/auth/login");
|
||||
router.push("/auth");
|
||||
};
|
||||
|
||||
const deleteFilterhandler = (filterId: any) => {
|
||||
|
|
@ -493,7 +520,9 @@ const Schedule = (props: any) => {
|
|||
<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>
|
||||
);
|
||||
|
|
@ -528,7 +557,9 @@ const Schedule = (props: any) => {
|
|||
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
||||
<span>LIVE</span>
|
||||
</div>
|
||||
) : ""}
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{/* <p className="address">{list.address}</p> */}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
|
|
@ -865,7 +896,9 @@ const Schedule = (props: any) => {
|
|||
onKeyUp={handleKeyUp}
|
||||
onKeyDown={handleKeyDown}
|
||||
type="text"
|
||||
placeholder={t("titleSchedule", { defaultValue: "Title Schedule" })}
|
||||
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">
|
||||
|
|
@ -921,7 +954,9 @@ const Schedule = (props: any) => {
|
|||
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>{t("todaySchedule", { defaultValue: "Today Schedule" })}</AccordionTrigger>
|
||||
<AccordionTrigger>
|
||||
{t("todaySchedule", { defaultValue: "Today Schedule" })}
|
||||
</AccordionTrigger>
|
||||
{todayList?.map((list: any) => (
|
||||
<AccordionContent
|
||||
key={list?.id}
|
||||
|
|
@ -951,7 +986,9 @@ const Schedule = (props: any) => {
|
|||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-2">
|
||||
<AccordionTrigger>{t("previousSchedule", { defaultValue: "Previous Schedule" })}</AccordionTrigger>
|
||||
<AccordionTrigger>
|
||||
{t("previousSchedule", { defaultValue: "Previous Schedule" })}
|
||||
</AccordionTrigger>
|
||||
{prevdayList?.map((list: any) => (
|
||||
<AccordionContent
|
||||
key={list?.id}
|
||||
|
|
@ -981,7 +1018,9 @@ const Schedule = (props: any) => {
|
|||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-3">
|
||||
<AccordionTrigger>{t("nextSchedule", { defaultValue: "Next Schedule" })}</AccordionTrigger>
|
||||
<AccordionTrigger>
|
||||
{t("nextSchedule", { defaultValue: "Next Schedule" })}
|
||||
</AccordionTrigger>
|
||||
{nextdayList?.map((list: any) => (
|
||||
<AccordionContent
|
||||
key={list?.id}
|
||||
|
|
@ -997,7 +1036,7 @@ const Schedule = (props: any) => {
|
|||
{list?.startTime} - {list?.endTime} WIB
|
||||
</p>
|
||||
<p className="flex flex-row items-start gap-2 ">
|
||||
<Icon icon="bxs:map" />
|
||||
<Icon icon="bxs:map" />
|
||||
{list?.address}
|
||||
</p>
|
||||
<p>{t("speaker", { defaultValue: "Speaker" })}</p>
|
||||
|
|
@ -1108,7 +1147,7 @@ const Schedule = (props: any) => {
|
|||
<Icon icon="ic:round-person" />
|
||||
{detail?.speakerTitle || ""} {detail?.speakerName || ""}{" "}
|
||||
</p>
|
||||
</DialogDescription>
|
||||
</DialogDescription>
|
||||
<DialogDescription>
|
||||
{detail?.isYoutube == true ? (
|
||||
userId == null ? (
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
|
|||
{/* Tombol See More / See Less */}
|
||||
{categories?.length > 4 && (
|
||||
<div className="flex items-center flex-row justify-center mt-6">
|
||||
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
|
||||
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white dark:bg-black hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
|
||||
{seeAllValue ? t("seeLess", { defaultValue: "See Less" }) : t("seeMore", { defaultValue: "See More" })}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
value={tab.value}
|
||||
className={`
|
||||
rounded-md px-6 py-2 text-sm transition-all
|
||||
bg-[#f5f5f5] text-[#666] hover:bg-[#e0e0e0]
|
||||
bg-[#f5f5f5] text-[#666] dark:border dark:border-gray-500 hover:bg-[#e0e0e0] dark:bg-black
|
||||
data-[state=active]:bg-[#bb0000]
|
||||
data-[state=active]:text-white
|
||||
data-[state=active]:font-bold
|
||||
|
|
@ -201,7 +201,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
prefixPath + `/image/detail/${image?.slug}`
|
||||
)
|
||||
}
|
||||
className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
|
||||
className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
|
||||
>
|
||||
{/* Image with motion effect */}
|
||||
<motion.div
|
||||
|
|
@ -252,7 +252,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
</p>
|
||||
<p
|
||||
className="
|
||||
text-sm lg:text-base font-semibold text-black
|
||||
text-sm lg:text-base font-semibold text-black dark:text-white
|
||||
line-clamp-4 /* LIMIT to 2 lines if plugin available */
|
||||
/* or use min-h-[3rem] as fallback */
|
||||
"
|
||||
|
|
@ -316,7 +316,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
prefixPath + `/audio/detail/${audio?.slug}`
|
||||
)
|
||||
}
|
||||
className="cursor-pointer bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden"
|
||||
className="cursor-pointer bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden"
|
||||
>
|
||||
{/* Icon Background */}
|
||||
<div className="flex items-center justify-center bg-[#bb3523] w-full h-[170px] text-white">
|
||||
|
|
@ -340,7 +340,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
"GIAT PIMPINAN"}
|
||||
</p>
|
||||
|
||||
<p className="text-xl font-semibold text-black line-clamp-4">
|
||||
<p className="text-xl font-semibold text-black dark:text-white line-clamp-4">
|
||||
{audio?.title}
|
||||
</p>
|
||||
|
||||
|
|
@ -397,7 +397,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
prefixPath + `/video/detail/${video?.slug}`
|
||||
)
|
||||
}
|
||||
className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
|
||||
className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
|
||||
>
|
||||
{/* Image with motion effect */}
|
||||
<motion.div
|
||||
|
|
@ -447,7 +447,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
"Giat Pimpinan"}
|
||||
</p>
|
||||
<p
|
||||
className="text-sm lg:text-base font-semibold text-black line-clamp-5">
|
||||
className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-5">
|
||||
{video?.title}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -507,7 +507,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
prefixPath + `/document/detail/${text?.slug}`
|
||||
)
|
||||
}
|
||||
className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white"
|
||||
className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
|
||||
>
|
||||
{/* Ikon di tengah dengan latar kuning */}
|
||||
<div className="bg-[#e0c350] flex items-center justify-center h-[170px] text-white">
|
||||
|
|
@ -532,7 +532,7 @@ const NewContent = (props: { group: string; type: string }) => {
|
|||
</div>
|
||||
|
||||
{/* Judul */}
|
||||
<div className="font-semibold text-gray-900 text-xl leading-snug line-clamp-4">
|
||||
<div className="font-semibold text-gray-900 dark:text-white text-xl leading-snug line-clamp-4">
|
||||
{text?.title}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ const ScrollableContent = () => {
|
|||
<div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
||||
<Select value={contentType} onValueChange={setContentType}>
|
||||
<SelectTrigger className="w-[180px] h-[55px]">
|
||||
<span className="text-black">
|
||||
<span className="text-black dark:text-white">
|
||||
<svg
|
||||
className="mx-2 dark:"
|
||||
width="25"
|
||||
|
|
@ -119,7 +119,7 @@ const ScrollableContent = () => {
|
|||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="all">
|
||||
<SelectItem value="all" className="dark:text-white">
|
||||
{t("allContent", { defaultValue: "All Content" })}
|
||||
</SelectItem>
|
||||
<SelectItem value="image">
|
||||
|
|
@ -188,7 +188,7 @@ const ScrollableContent = () => {
|
|||
)?.map((item: any, index: number) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`bg-white rounded-lg shadow-md overflow-hidden ${
|
||||
className={`bg-white dark:bg-black dark:border dark:border-gray-500 rounded-lg shadow-md overflow-hidden ${
|
||||
index === 0 ? "" : "flex"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -250,10 +250,10 @@ const ScrollableContent = () => {
|
|||
<p className="text-sm text-[#bb3523] font-bold mb-1 px-2">
|
||||
{item.categoryName}
|
||||
</p>
|
||||
<h3 className="text-sm font-semibold text-gray-800 px-2">
|
||||
<h3 className="text-sm font-semibold text-gray-800 dark:text-white px-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 mt-1 truncate px-2">
|
||||
<p className="text-xs text-gray-500 dark:text-white mt-1 truncate px-2">
|
||||
{htmlToString(item.description)}
|
||||
</p>
|
||||
</Link>
|
||||
|
|
@ -307,7 +307,7 @@ const ScrollableContent = () => {
|
|||
)?.map((item: any, index: number) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`bg-white rounded-lg shadow-md overflow-hidden ${
|
||||
className={`bg-white dark:bg-black dark:border dark:border-gray-500 rounded-lg shadow-md overflow-hidden ${
|
||||
index === 0 ? "" : "flex"
|
||||
}`}
|
||||
>
|
||||
|
|
@ -367,10 +367,10 @@ const ScrollableContent = () => {
|
|||
<p className="text-sm text-[#bb3523] font-bold mb-1 px-2">
|
||||
{item.categoryName}
|
||||
</p>
|
||||
<h3 className="text-sm font-semibold text-gray-800 px-2">
|
||||
<h3 className="text-sm font-semibold text-gray-800 dark:text-white px-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 mt-1 truncate px-2">
|
||||
<p className="text-xs text-gray-500 dark:text-white mt-1 truncate px-2">
|
||||
{htmlToString(item.description)}
|
||||
</p>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const SearchSectionPolda = () => {
|
|||
<AdvertisementPlacements placement="left"/>
|
||||
</div>
|
||||
|
||||
<div className="w-full xl:w-[70%] px-4 py-8 bg-white">
|
||||
<div className="w-full xl:w-[70%] px-4 py-8 bg-white dark:bg-black">
|
||||
<ScrollableContentPolda />
|
||||
<NewContent group="polda" type="latest" />
|
||||
<NewContent group="polda" type="popular" />
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ const SearchSectionSatker = () => {
|
|||
<AdvertisementPlacements placement="left"/>
|
||||
</div>
|
||||
|
||||
<div className="w-full xl:w-[70%] px-4 py-8 bg-white">
|
||||
<div className="w-full xl:w-[70%] px-4 py-8 bg-white dark:bg-black">
|
||||
<ScrollableContentSatker />
|
||||
<NewContent group="satker" type="latest" />
|
||||
<NewContent group="satker" type="popular" />
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const SearchSection = () => {
|
|||
<AdvertisementPlacements placement="left"/>
|
||||
</div>
|
||||
|
||||
<div className="w-full xl:w-[70%] px-4 py-8 bg-white">
|
||||
<div className="w-full xl:w-[70%] px-4 py-8 bg-white dark:bg-black">
|
||||
<ScrollableContent />
|
||||
<NewContent group="mabes" type="latest" />
|
||||
<NewContent group="mabes" type="popular" />
|
||||
|
|
|
|||
|
|
@ -48,22 +48,22 @@ export async function detailSchedule(id: any) {
|
|||
return httpGetInterceptor(url);
|
||||
}
|
||||
|
||||
export async function listScheduleTodayPublic(group = null) {
|
||||
export async function listScheduleTodayPublic(group: string | null = null) {
|
||||
const url = `public/schedule/today?group=${group}`;
|
||||
return httpGet(url, null);
|
||||
}
|
||||
|
||||
export async function listScheduleNextPublic(group = null) {
|
||||
export async function listScheduleNextPublic(group: string | null = null) {
|
||||
const url = `public/schedule/next-activity?group=${group}`;
|
||||
return httpGet(url, null);
|
||||
}
|
||||
|
||||
export async function listSchedulePrevPublic(group = null) {
|
||||
export async function listSchedulePrevPublic(group: string | null = null) {
|
||||
const url = `public/schedule/prev-activity?group=${group}`;
|
||||
return httpGet(url, null);
|
||||
}
|
||||
|
||||
export async function listSchedule(group = null) {
|
||||
export async function listSchedule(group: string | null = null) {
|
||||
const url = `public/schedule/list?group=${group}`;
|
||||
return httpGet(url, null);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue