klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-01-08 16:11:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor popup creation

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-12-31 15:54:50 +01:00
parent fd2295119d
commit 9bd14f1b4e
1 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
com/static/bundled/com/components/ics-calendar-index.ts
View File

@ -1,6 +1,7 @@
import { makeUrl } from "#core:utils/api"; import { makeUrl } from "#core:utils/api";
import { inheritHtmlElement, registerComponent } from "#core:utils/web-components"; import { inheritHtmlElement, registerComponent } from "#core:utils/web-components";
import { Calendar, type EventClickArg } from "@fullcalendar/core"; import { Calendar, type EventClickArg } from "@fullcalendar/core";
import type { EventImpl } from "@fullcalendar/core/internal";
import enLocale from "@fullcalendar/core/locales/en-gb"; import enLocale from "@fullcalendar/core/locales/en-gb";
import frLocale from "@fullcalendar/core/locales/fr"; import frLocale from "@fullcalendar/core/locales/fr";
import dayGridPlugin from "@fullcalendar/daygrid"; import dayGridPlugin from "@fullcalendar/daygrid";
@ -60,37 +61,42 @@ export class IcsCalendar extends inheritHtmlElement("div") {
oldPopup.remove(); oldPopup.remove();
} }
// Create new popup const makePopupTitle = (event: EventImpl) => {
const popup = document.createElement("div"); const row = document.createElement("div");
const popupContainer = document.createElement("div"); const icon = document.createElement("i");
const popupFirstRow = document.createElement("div"); const infoRow = document.createElement("div");
const popupTitleTimeIcon = document.createElement("i"); const title = document.createElement("h4");
const popupTitleTime = document.createElement("div"); const time = document.createElement("span");
const popupTitle = document.createElement("h4"); row.setAttribute("class", "event-details-row");
const popupTime = document.createElement("span");
popup.setAttribute("id", "event-details"); icon.setAttribute(
popupContainer.setAttribute("class", "event-details-container");
popupFirstRow.setAttribute("class", "event-details-row");
popupTitleTimeIcon.setAttribute(
"class", "class",
"fa-solid fa-calendar-days fa-xl event-detail-row-icon", "fa-solid fa-calendar-days fa-xl event-detail-row-icon",
); );
popupTitle.setAttribute("class", "event-details-row-content"); title.setAttribute("class", "event-details-row-content");
popupTitle.textContent = event.event.title; title.textContent = event.title;
popupTime.setAttribute("class", "event-details-row-content"); time.setAttribute("class", "event-details-row-content");
popupTime.textContent = `${this.formatDate(event.event.start)} - ${this.formatDate(event.event.end)}`; time.textContent = `${this.formatDate(event.start)} - ${this.formatDate(event.end)}`;
popupTitleTime.appendChild(popupTitle); infoRow.appendChild(title);
popupTitleTime.appendChild(popupTime); infoRow.appendChild(time);
popupFirstRow.appendChild(popupTitleTimeIcon); row.appendChild(icon);
popupFirstRow.appendChild(popupTitleTime); row.appendChild(infoRow);
popupContainer.appendChild(popupFirstRow); return row;
};
// Create new popup
const popup = document.createElement("div");
const popupContainer = document.createElement("div");
popup.setAttribute("id", "event-details");
popupContainer.setAttribute("class", "event-details-container");
popupContainer.appendChild(makePopupTitle(event.event));
popup.appendChild(popupContainer); popup.appendChild(popupContainer);