feat : Commits, adds and updates api in schedule. adjust ui in detail page content
This commit is contained in:
parent
8fec8e735f
commit
349128c335
|
|
@ -5,6 +5,17 @@ import { Checkbox } from "@/components/ui/checkbox";
|
|||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { getListContent } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
|
||||
import LandingPagination from "@/components/landing-page/pagination";
|
||||
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
accessorKey: "no",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
const categories = [
|
||||
{ id: 1, title: "HUT HUMAS KE - 73" },
|
||||
|
|
@ -26,15 +37,65 @@ const formatAudio = [
|
|||
];
|
||||
|
||||
const FilterPage = () => {
|
||||
const [audioData, setAudioData] = useState<any>();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
const locale = params?.locale;
|
||||
const [imageData, setImageData] = useState<any>();
|
||||
const [totalData, setTotalData] = React.useState<number>(1);
|
||||
const [totalPage, setTotalPage] = React.useState<number>(1);
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
|
||||
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
|
||||
const [rowSelection, setRowSelection] = React.useState({});
|
||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 6,
|
||||
});
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
React.useEffect(() => {
|
||||
const pageFromUrl = searchParams?.get("page");
|
||||
if (pageFromUrl) {
|
||||
setPage(Number(pageFromUrl));
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
const table = useReactTable({
|
||||
data: imageData,
|
||||
columns: columns,
|
||||
onSortingChange: setSorting,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
onRowSelectionChange: setRowSelection,
|
||||
onPaginationChange: setPagination,
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters,
|
||||
columnVisibility,
|
||||
rowSelection,
|
||||
pagination,
|
||||
},
|
||||
});
|
||||
|
||||
const [audioData, setAudioData] = useState<any>();
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, []);
|
||||
const initFetch = async () => {
|
||||
const response = await getListContent({ page: page - 1, size: 12, sortBy: "createdAt", contentTypeId: "4" });
|
||||
const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "4" });
|
||||
console.log(response);
|
||||
setAudioData(response?.data?.data?.content);
|
||||
const data = response.data?.data;
|
||||
const contentData = data?.content;
|
||||
setAudioData(contentData);
|
||||
setTotalData(data?.totalElements);
|
||||
setTotalPage(data?.totalPages);
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
|
|
@ -153,32 +214,9 @@ const FilterPage = () => {
|
|||
</a>
|
||||
))}
|
||||
</div>
|
||||
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
|
||||
</div>
|
||||
</div>
|
||||
<Pagination className="p-3">
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious href="#" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">1</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" isActive>
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">3</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext href="#" />
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const ContactForm = () => {
|
|||
{/* Header */}
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<img src="/assets/icons-contact.png" alt="contact" />
|
||||
<h2 className="ml-4 text-xl font-bold">Hubungi Kami</h2>
|
||||
<h2 className="ml-4 text-2xl font-bold">Hubungi Kami</h2>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-1">Tulis Pesan</h3>
|
||||
<p className="text-sm text-gray-600 mb-6">Silahkan tinggalkan pesan Anda pada kolom yang tersedia</p>
|
||||
|
|
|
|||
|
|
@ -5,22 +5,16 @@ import { Checkbox } from "@/components/ui/checkbox";
|
|||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { getListContent } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
|
||||
import LandingPagination from "@/components/landing-page/pagination";
|
||||
|
||||
const dummyDescription = [
|
||||
{ id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 7, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 8, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 9, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 10, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 11, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 12, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 13, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
{ id: 14, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
accessorKey: "no",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
const categories = [
|
||||
|
|
@ -46,15 +40,65 @@ const formatAudio = [
|
|||
];
|
||||
|
||||
const DocumentPage = () => {
|
||||
const [documentData, setDocumentData] = useState<any>();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
const locale = params?.locale;
|
||||
const [imageData, setImageData] = useState<any>();
|
||||
const [totalData, setTotalData] = React.useState<number>(1);
|
||||
const [totalPage, setTotalPage] = React.useState<number>(1);
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
|
||||
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
|
||||
const [rowSelection, setRowSelection] = React.useState({});
|
||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 6,
|
||||
});
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
React.useEffect(() => {
|
||||
const pageFromUrl = searchParams?.get("page");
|
||||
if (pageFromUrl) {
|
||||
setPage(Number(pageFromUrl));
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
const table = useReactTable({
|
||||
data: imageData,
|
||||
columns: columns,
|
||||
onSortingChange: setSorting,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
onRowSelectionChange: setRowSelection,
|
||||
onPaginationChange: setPagination,
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters,
|
||||
columnVisibility,
|
||||
rowSelection,
|
||||
pagination,
|
||||
},
|
||||
});
|
||||
|
||||
const [documentData, setDocumentData] = useState<any>();
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, []);
|
||||
const initFetch = async () => {
|
||||
const response = await getListContent({ page: page - 1, size: 12, sortBy: "createdAt", contentTypeId: "3" });
|
||||
const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "3" });
|
||||
console.log(response);
|
||||
setDocumentData(response?.data?.data?.content);
|
||||
const data = response.data?.data;
|
||||
const contentData = data?.content;
|
||||
setDocumentData(contentData);
|
||||
setTotalData(data?.totalElements);
|
||||
setTotalPage(data?.totalPages);
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
|
|
@ -155,7 +199,7 @@ const DocumentPage = () => {
|
|||
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
|
||||
{formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> 518
|
||||
{formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> 518
|
||||
</div>
|
||||
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.title}</div>
|
||||
<div className="flex gap-2 items-center text-sm text-red-500 dark:text-red-500">
|
||||
|
|
@ -168,32 +212,9 @@ const DocumentPage = () => {
|
|||
</a>
|
||||
))}
|
||||
</div>
|
||||
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
|
||||
</div>
|
||||
</div>
|
||||
<Pagination className="p-3">
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious href="#" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">1</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" isActive>
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">3</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext href="#" />
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -33,11 +33,11 @@ const FAQS: React.FC = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-6">
|
||||
<div className="max-w-3xl mx-auto h-screen p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<img src="/assets/icons-faqs.png" alt="Faqs" />
|
||||
<h2 className="ml-4 text-xl font-bold text-gray-800">Frequently Asked Questions</h2>
|
||||
<h2 className="ml-4 text-lg lg:text-2xl font-bold text-gray-800">Frequently Asked Questions</h2>
|
||||
</div>
|
||||
|
||||
{/* FAQS Items */}
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ const DetailInfo = () => {
|
|||
<label key={size.label} className="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
|
||||
<div className="text-sm">
|
||||
{size.label} --------------------------------------{size.value}
|
||||
{size.label} {size.value}
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
|
|
@ -160,11 +160,12 @@ const DetailInfo = () => {
|
|||
|
||||
{/* Footer Informasi */}
|
||||
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
|
||||
<p className="items-end">
|
||||
oleh <span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span> | Diupdate pada {detailDataImage?.updatedAt} WIB | <Icon icon="formkit:eye" width="15" height="15" />{" "}
|
||||
{detailDataImage?.clickCount}
|
||||
</p>
|
||||
<p>Kreator: {detailDataImage?.creatorName}</p>
|
||||
<div className="flex flex-row items-center">
|
||||
oleh <span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span> | Diupdate pada {detailDataImage?.updatedAt} WIB |
|
||||
<Icon icon="formkit:eye" width="15" height="15" />
|
||||
{detailDataImage?.clickCount}
|
||||
<p className="flex text-end">Kreator: {detailDataImage?.creatorName}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keterangan */}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { formatDateToIndonesian, generateLocalizedPath } from "@/utils/globals";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { getListContent } from "@/service/landing/landing";
|
||||
import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
|
||||
import TablePagination from "@/components/table/table-pagination";
|
||||
import { Response } from "@dnd-kit/core/dist/sensors/types";
|
||||
import LandingPagination from "@/components/landing-page/pagination";
|
||||
|
||||
const columns: ColumnDef<any>[] = [
|
||||
|
|
|
|||
|
|
@ -9,64 +9,148 @@ import { format } from "date-fns";
|
|||
import { cn } from "@/lib/utils";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/service/schedule/schedule";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
||||
|
||||
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 Schedule = () => {
|
||||
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 days = ["S", "S", "R", "K", "J", "S", "M"];
|
||||
|
||||
const months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
|
||||
|
||||
const router = useRouter();
|
||||
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);
|
||||
|
||||
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;
|
||||
|
|
@ -80,14 +164,6 @@ const Schedule = () => {
|
|||
}
|
||||
const [dateList, setDateList] = useState<string[]>(dateListInit);
|
||||
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
setDateAWeek(dateList);
|
||||
}
|
||||
|
||||
initState();
|
||||
}, []);
|
||||
|
||||
const handleChangeDate = (date: Date | undefined) => {
|
||||
setStartDate(date);
|
||||
const dateListTemp = [];
|
||||
|
|
@ -179,17 +255,64 @@ const Schedule = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const categories = [
|
||||
{ id: 1, title: "POLDA METRO JAYA" },
|
||||
{ id: 2, title: "POLDA JAWA BARAT" },
|
||||
{ id: 3, title: "POLDA BANTEN" },
|
||||
{ id: 4, title: "POLDA JAWA TENGAH" },
|
||||
{ id: 5, title: "POLDA D.I YOGYAKARTA" },
|
||||
{ id: 6, title: "POLDA JAWA TIMUR" },
|
||||
{ id: 7, title: "POLDA ACEH" },
|
||||
{ id: 8, title: "POLDA SUMATERA UTARA" },
|
||||
{ id: 9, title: "POLDA SUMATERA BARAT" },
|
||||
];
|
||||
const getItem = (itemFound: any) => {
|
||||
setOpenDialog(true);
|
||||
};
|
||||
|
||||
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 ${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 ? <p className="live">LIVE</p> : ""}
|
||||
{/* <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 ? <p className="live">LIVE</p> : ""}
|
||||
{/* <p className="address">{list.address}</p> */}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<div className="border-0 dropdown-menu schedule-list" aria-labelledby="view-schedule"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -286,12 +409,15 @@ const Schedule = () => {
|
|||
<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={`flex flex-row border 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" onClick={() => changePrevWeek()}>
|
||||
<th
|
||||
onClick={() => changePrevWeek()}
|
||||
className={`text-center cursor-pointer border 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>{" "}
|
||||
</a>{" "} */}
|
||||
<div className="flex flex-col ">
|
||||
<p className="text-2xl">{dateAWeek[0]?.split("-")[2]}</p>
|
||||
<p>Monday</p>
|
||||
|
|
@ -312,283 +438,35 @@ const Schedule = () => {
|
|||
<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>
|
||||
<th className={`text-center border 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" : ""}`}>
|
||||
<th
|
||||
onClick={() => changeNextWeek()}
|
||||
className={`text-center border cursor-pointer 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>Sunday</p>
|
||||
</div>
|
||||
<a onClick={() => changeNextWeek()} className="cursor-pointer h-fit p-0 m-0 self-center">
|
||||
{/* <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>
|
||||
</a> */}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">06:00</th>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">07:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">08:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">09:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">10:00</th>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">11:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">12:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">13:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">14:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">15:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">16:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">17:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">18:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">19:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">20:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">21:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">22:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">23:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">24:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">01:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">02:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">03:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">04:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">05:00</th>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
<td className="border border-gray-100 dark:border-gray-700"></td>
|
||||
</tr>
|
||||
{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 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 className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[6])}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -619,18 +497,60 @@ const Schedule = () => {
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card border border-slate-400 p-2 rounded-lg">
|
||||
<div className="card-header">
|
||||
<a className="accordion-icon">
|
||||
<h5 className="py-2 theme-text text-left">
|
||||
Jadwal Sebelumnya
|
||||
<span className="float-right">
|
||||
<Icon icon="fa:angle-down" className="ml-1" />
|
||||
</span>
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* 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="float-right">
|
||||
<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>
|
||||
))}
|
||||
|
||||
<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">6</div>
|
||||
<div className="flex flex-col">
|
||||
<h3 className="font-bold">Test Event</h3>
|
||||
<p className="flex flex-row items-center gap-2">
|
||||
<Icon icon="iconamoon:clock-thin" />
|
||||
08.00 - 12.00 WIB
|
||||
</p>
|
||||
<p className="flex flex-row items-start gap-2 ">
|
||||
<Icon icon="bxs:map" width={40} />
|
||||
Jl. Trunojoyo No.3 2, RT.2/RW.1, Selong, Kec. Kby. Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia.
|
||||
</p>
|
||||
<p>Pembicara :</p>
|
||||
<p className="flex flex-row items-center gap-2">
|
||||
<Icon icon="ic:round-person" />
|
||||
Hanif Salafi
|
||||
</p>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
<div className="card border border-slate-400 p-2 rounded-lg">
|
||||
<div className="card-header">
|
||||
<a className="accordion-icon">
|
||||
|
|
@ -646,6 +566,18 @@ const Schedule = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>This action cannot be undone. This will permanently delete your account and remove your data from our servers.</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction>Continue</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -131,8 +131,10 @@ const DetailVideo = () => {
|
|||
|
||||
{/* Footer Informasi */}
|
||||
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
|
||||
<p className="items-end">
|
||||
oleh <span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span> | Diupdate pada {detailDataVideo?.updatedAt} WIB | <Icon icon="formkit:eye" width="15" height="15" />{" "}
|
||||
<p className="flex flex-row items-center">
|
||||
oleh <span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span> | Diupdate pada {detailDataVideo?.updatedAt} WIB |
|
||||
<Icon icon="formkit:eye" width="15" height="15" />
|
||||
|
||||
{detailDataVideo?.clickCount}
|
||||
</p>
|
||||
<p>Kreator: {detailDataVideo?.creatorName}</p>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,20 @@
|
|||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { getListContent } from "@/service/landing/landing";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
|
||||
import LandingPagination from "@/components/landing-page/pagination";
|
||||
|
||||
const dummyImage = [
|
||||
{ id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 2, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 3, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 4, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 5, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 6, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 7, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 8, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
{ id: 9, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
accessorKey: "no",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
const categories = [
|
||||
|
|
@ -41,15 +39,65 @@ const formatPicture = [
|
|||
];
|
||||
|
||||
const FilterPage = () => {
|
||||
const [videoData, setVideoData] = useState<any>();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
const locale = params?.locale;
|
||||
const [imageData, setImageData] = useState<any>();
|
||||
const [totalData, setTotalData] = React.useState<number>(1);
|
||||
const [totalPage, setTotalPage] = React.useState<number>(1);
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
|
||||
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
|
||||
const [rowSelection, setRowSelection] = React.useState({});
|
||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 6,
|
||||
});
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
React.useEffect(() => {
|
||||
const pageFromUrl = searchParams?.get("page");
|
||||
if (pageFromUrl) {
|
||||
setPage(Number(pageFromUrl));
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
const table = useReactTable({
|
||||
data: imageData,
|
||||
columns: columns,
|
||||
onSortingChange: setSorting,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
onRowSelectionChange: setRowSelection,
|
||||
onPaginationChange: setPagination,
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters,
|
||||
columnVisibility,
|
||||
rowSelection,
|
||||
pagination,
|
||||
},
|
||||
});
|
||||
|
||||
const [videoData, setVideoData] = useState<any>();
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, []);
|
||||
}, [page]);
|
||||
const initFetch = async () => {
|
||||
const response = await getListContent({page: page-1, size: 12, sortBy: "createdAt", contentTypeId: "2", });
|
||||
const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "2" });
|
||||
console.log(response);
|
||||
setVideoData(response?.data?.data?.content);
|
||||
const data = response.data?.data;
|
||||
const contentData = data?.content;
|
||||
setVideoData(contentData);
|
||||
setTotalData(data?.totalElements);
|
||||
setTotalPage(data?.totalPages);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -148,32 +196,9 @@ const FilterPage = () => {
|
|||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
|
||||
</div>
|
||||
</div>
|
||||
<Pagination className="p-3">
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious href="#" />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">1</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" isActive>
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">3</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext href="#" />
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import "swiper/css/bundle";
|
||||
import "swiper/css/navigation";
|
||||
import { getHeroData } from "@/service/landing/landing";
|
||||
|
|
@ -24,37 +23,37 @@ const Hero: React.FC = () => {
|
|||
setHeroData(response?.data?.data?.content);
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-20 py-4 mx-auto">
|
||||
<div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-20 py-4 mx-auto w-auto">
|
||||
{/* Section Gambar Utama */}
|
||||
<Carousel className="lg:w-2/3 w-full lg:h-full">
|
||||
<CarouselContent>
|
||||
{heroData?.map((list: any) => (
|
||||
<CarouselItem key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<img src={list?.thumbnailLink} alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{list?.categoryName}</span>
|
||||
<Link href={`${locale}/image/detail/${list?.slug}`}>
|
||||
<h2 className="text-lg font-bold mt-2">{list?.title}</h2>
|
||||
</Link>
|
||||
<p className="text-xs flex flex-row items-center gap-1 mt-1">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{list?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<Carousel className="lg:w-2/3 w-full lg:h-full ">
|
||||
<CarouselContent>
|
||||
{heroData?.map((list: any) => (
|
||||
<CarouselItem key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<img src={list?.thumbnailLink} alt="Gambar Utama" className="w-auto h-[310px] lg:h-[420px] rounded-lg" />
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{list?.categoryName}</span>
|
||||
<Link href={`${locale}/image/detail/${list?.slug}`}>
|
||||
<h2 className="text-lg font-bold mt-2">{list?.title}</h2>
|
||||
</Link>
|
||||
<p className="text-xs flex flex-row items-center gap-1 mt-1">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{list?.clickCount}{" "}
|
||||
</p>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
|
||||
{/* Section Kanan */}
|
||||
<div className="lg:w-1/3 w-full">
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ const Navbar = () => {
|
|||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<Link href="/contributor/schedule" legacyBehavior passHref>
|
||||
<Link href="/schedule" legacyBehavior passHref>
|
||||
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
||||
<span>
|
||||
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -17,4 +17,23 @@ export async function detailSchedule(id: any) {
|
|||
return getAPIInterceptor({ url });
|
||||
}
|
||||
|
||||
export async function listScheduleTodayPublic(group = null) {
|
||||
const url = `public/schedule/today?group=${group}`;
|
||||
return getAPI( url, null );
|
||||
}
|
||||
|
||||
export async function listScheduleNextPublic(group = null) {
|
||||
const url = `public/schedule/next-activity?group=${group}`;
|
||||
return getAPI( url, null );
|
||||
}
|
||||
|
||||
export async function listSchedulePrevPublic(group = null) {
|
||||
const url = `public/schedule/prev-activity?group=${group}`;
|
||||
return getAPI( url, null );
|
||||
}
|
||||
|
||||
export async function listSchedule(group = null) {
|
||||
const url = `public/schedule/list?group=${group}`;
|
||||
return getAPI( url, null );
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue