diff --git a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx index 73cf2e5a..1f21a324 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx +++ b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx @@ -18,6 +18,7 @@ import EventModal from "./event-modal"; import { useTranslations } from "next-intl"; import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting"; import dayjs from "dayjs"; +import { getCookiesDecrypt } from "@/lib/utils"; const wait = () => new Promise((resolve) => setTimeout(resolve, 1000)); interface CalendarViewProps { events: CalendarEvent[]; @@ -66,7 +67,7 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { // const [selectedEvent, setSelectedEvent] = useState( // null // ); - + const roleId = Number(getCookiesDecrypt("urie")) || 0; const [apiEvents, setApiEvents] = useState([]); const [loading, setLoading] = useState(false); const [draggableInitialized, setDraggableInitialized] = @@ -246,15 +247,17 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => {
- - - + {roleId === 11 && ( + + + + )}
( categories[0].value ); - // delete modal state + const [listDest, setListDest] = useState([]); const [deleteModalOpen, setDeleteModalOpen] = useState(false); const [eventIdToDelete, setEventIdToDelete] = useState(null); const MySwal = withReactContent(Swal); const router = useRouter(); + const [isLoading, setIsLoading] = useState(false); + const [checkedLevels, setCheckedLevels] = useState(new Set()); + const [expandedPolda, setExpandedPolda] = useState([{}]); + const [audioFile, setAudioFile] = useState(null); + const [isRecording, setIsRecording] = useState(false); + const [timer, setTimer] = useState(120); const { register, @@ -81,8 +91,47 @@ const EventModal = ({ mode: "all", }); + useEffect(() => { + async function fetchPoldaPolres() { + setIsLoading(true); + try { + const response = await getUserLevelForAssignments(); + setListDest(response.data.data.list); + const initialExpandedState = response.data.data.list.reduce( + (acc: any, polda: any) => { + acc[polda.id] = false; + return acc; + }, + {} + ); + setExpandedPolda(initialExpandedState); + console.log("polres", initialExpandedState); + } catch (error) { + console.error("Error fetching Polda/Polres data:", error); + } finally { + setIsLoading(false); + } + } + fetchPoldaPolres(); + }, []); + + const handleCheckboxChange = (levelId: number) => { + setCheckedLevels((prev) => { + const updatedLevels = new Set(prev); + if (updatedLevels.has(levelId)) { + updatedLevels.delete(levelId); + } else { + updatedLevels.add(levelId); + } + return updatedLevels; + }); + }; + const save = async (data: any) => { - // loading(); + if (!audioFile) return; + + const formData = new FormData(); + formData.append("voiceNote", audioFile); const reqData = { title: data.title, @@ -90,6 +139,7 @@ const EventModal = ({ agendaType: calendarProps, startDate: format(startDate, "yyyy-MM-dd"), endDate: format(endDate, "yyyy-MM-dd"), + voiceNote: formData, }; console.log("Submitted Data:", reqData); @@ -146,6 +196,58 @@ const EventModal = ({ onClose(); }; + const toggleExpand = (poldaId: any) => { + setExpandedPolda((prev: any) => ({ + ...prev, + [poldaId]: !prev[poldaId], + })); + }; + + const onRecordingStart = () => { + setIsRecording(true); + + // Start a timer that stops the recording after 2 minutes (120 seconds) + const countdown = setInterval(() => { + setTimer((prevTimer) => { + if (prevTimer <= 1) { + clearInterval(countdown); // Stop the timer when it reaches 0 + return 0; + } + return prevTimer - 1; + }); + }, 1000); // Update every second + + // Automatically stop recording after 2 minutes + setTimeout(() => { + if (isRecording) { + handleStopRecording(); + } + }, 120000); // Stop after 2 minutes (120,000 ms) + }; + + const handleStopRecording = () => { + setIsRecording(false); + setTimer(120); // Reset the timer to 2 minutes for the next recording + }; + + const addAudioElement = (blob: Blob) => { + const url = URL.createObjectURL(blob); + const audio = document.createElement("audio"); + audio.src = url; + audio.controls = true; + document.body.appendChild(audio); + + // Convert Blob to File + const file = new File([blob], "voiceNote.webm", { type: "audio/webm" }); + setAudioFile(file); + }; + const handleDeleteAudio = () => { + // Remove the audio file by setting state to null + setAudioFile(null); + const audioElements = document.querySelectorAll("audio"); + audioElements.forEach((audio) => audio.remove()); + }; + return ( <> - + {event ? "Edit Agenda Setting" : "Create Agenda Setting"}{" "} {event?.title} -
+
@@ -181,7 +286,6 @@ const EventModal = ({
)}
-
@@ -254,7 +358,6 @@ const EventModal = ({
-
+ {calendarProps === "polda" && ( +
+ + + + + + + + Daftar Wilayah Polda dan Polres + + +
+ {listDest.map((polda: any) => ( +
+ + {expandedPolda[polda.id] && ( +
+ + {polda?.subDestination?.map((polres: any) => ( + + ))} +
+ )} +
+ ))} +
+ + +
+ )}