klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-01-07 23:51:14 +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

54
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();
} }
const makePopupTitle = (event: EventImpl) => {
const row = document.createElement("div");
const icon = document.createElement("i");
const infoRow = document.createElement("div");
const title = document.createElement("h4");
const time = document.createElement("span");
row.setAttribute("class", "event-details-row");
icon.setAttribute(
"class",
"fa-solid fa-calendar-days fa-xl event-detail-row-icon",
);
title.setAttribute("class", "event-details-row-content");
title.textContent = event.title;
time.setAttribute("class", "event-details-row-content");
time.textContent = `${this.formatDate(event.start)} - ${this.formatDate(event.end)}`;
infoRow.appendChild(title);
infoRow.appendChild(time);
row.appendChild(icon);
row.appendChild(infoRow);
return row;
};
// Create new popup // Create new popup
const popup = document.createElement("div"); const popup = document.createElement("div");
const popupContainer = document.createElement("div"); const popupContainer = document.createElement("div");
const popupFirstRow = document.createElement("div");
const popupTitleTimeIcon = document.createElement("i");
const popupTitleTime = document.createElement("div");
const popupTitle = document.createElement("h4");
const popupTime = document.createElement("span");
popup.setAttribute("id", "event-details"); popup.setAttribute("id", "event-details");
popupContainer.setAttribute("class", "event-details-container"); popupContainer.setAttribute("class", "event-details-container");
popupFirstRow.setAttribute("class", "event-details-row");
popupTitleTimeIcon.setAttribute( popupContainer.appendChild(makePopupTitle(event.event));
"class",
"fa-solid fa-calendar-days fa-xl event-detail-row-icon",
);
popupTitle.setAttribute("class", "event-details-row-content");
popupTitle.textContent = event.event.title;
popupTime.setAttribute("class", "event-details-row-content");
popupTime.textContent = `${this.formatDate(event.event.start)} - ${this.formatDate(event.event.end)}`;
popupTitleTime.appendChild(popupTitle);
popupTitleTime.appendChild(popupTime);
popupFirstRow.appendChild(popupTitleTimeIcon);
popupFirstRow.appendChild(popupTitleTime);
popupContainer.appendChild(popupFirstRow);
popup.appendChild(popupContainer); popup.appendChild(popupContainer);