2024-06-03 03:54:02 +00:00
|
|
|
import {
|
2024-06-04 22:54:40 +00:00
|
|
|
DatetoLocaleDynamicString,
|
2024-06-03 03:54:02 +00:00
|
|
|
getMinutesDifference,
|
|
|
|
getRelativeTime,
|
|
|
|
} from "../modules/relative_time.js";
|
|
|
|
|
2024-06-02 05:39:23 +00:00
|
|
|
export class UIManager {
|
|
|
|
ui;
|
2024-06-05 07:30:05 +00:00
|
|
|
mainmanager;
|
2024-06-02 05:39:23 +00:00
|
|
|
|
|
|
|
uiElements = {};
|
|
|
|
floorsEmpty = true;
|
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
constructor(ui) {
|
2024-06-02 05:39:23 +00:00
|
|
|
this.ui = ui;
|
2024-06-05 07:30:05 +00:00
|
|
|
}
|
2024-06-02 05:39:23 +00:00
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
mainmanagerInit() {
|
2024-06-04 22:54:40 +00:00
|
|
|
this.__initUIElements();
|
|
|
|
|
|
|
|
this.__initZoom();
|
|
|
|
|
|
|
|
this.__initEvents();
|
|
|
|
|
|
|
|
this.__initInspector();
|
|
|
|
}
|
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
// State
|
|
|
|
|
2024-06-04 22:54:40 +00:00
|
|
|
setLoading(state) {
|
|
|
|
if (state) {
|
|
|
|
this.ui.classList.add("loading");
|
|
|
|
} else {
|
|
|
|
this.ui.classList.remove("loading");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
setZoomDisabled(state = 0) {
|
|
|
|
if (state > 0) {
|
|
|
|
this.uiElements.zoomIn.disabled = true;
|
|
|
|
this.uiElements.zoomOut.disabled = false;
|
|
|
|
} else if (state < 0) {
|
|
|
|
this.uiElements.zoomIn.disabled = false;
|
|
|
|
this.uiElements.zoomOut.disabled = true;
|
|
|
|
} else {
|
|
|
|
this.uiElements.zoomIn.disabled = false;
|
|
|
|
this.uiElements.zoomOut.disabled = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
setEventsMinimized(state) {
|
|
|
|
if (state) {
|
|
|
|
this.uiElements.eventsContainer.classList.add("minimized");
|
|
|
|
} else {
|
|
|
|
this.uiElements.eventsContainer.classList.remove("minimized");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
setEventsInspector(state) {
|
|
|
|
this.setEventsMinimized(false);
|
|
|
|
if (state) {
|
|
|
|
this.uiElements.eventsContainer.classList.add("inspector");
|
|
|
|
} else {
|
|
|
|
this.uiElements.eventsContainer.classList.remove("inspector");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
getEventsEmpty() {
|
|
|
|
return this.uiElements.events.classList.contains("empty");
|
|
|
|
}
|
|
|
|
|
|
|
|
// Init
|
|
|
|
|
2024-06-04 22:54:40 +00:00
|
|
|
__initUIElements() {
|
2024-06-02 05:39:23 +00:00
|
|
|
// Zoom
|
|
|
|
this.uiElements.zoomButtons = this.ui.querySelector("#zoom");
|
|
|
|
this.uiElements.zoomIn =
|
|
|
|
this.uiElements.zoomButtons.querySelector("#zoom-in");
|
|
|
|
this.uiElements.zoomOut =
|
|
|
|
this.uiElements.zoomButtons.querySelector("#zoom-out");
|
|
|
|
|
|
|
|
// Floors
|
|
|
|
this.uiElements.floors = this.ui.querySelector("#floors");
|
2024-06-03 03:54:02 +00:00
|
|
|
this.uiElements.floorsHeading = this.ui.querySelector(
|
|
|
|
"#floors .widget-heading"
|
|
|
|
);
|
2024-06-02 05:39:23 +00:00
|
|
|
this.uiElements.floorButtons =
|
|
|
|
this.uiElements.floors.querySelector("#floor-buttons");
|
|
|
|
|
|
|
|
// Events
|
|
|
|
this.uiElements.eventsContainer =
|
|
|
|
this.ui.querySelector("#events-container");
|
|
|
|
this.uiElements.events =
|
|
|
|
this.uiElements.eventsContainer.querySelector("#events");
|
2024-06-03 03:54:02 +00:00
|
|
|
this.uiElements.eventsBackButton = this.uiElements.events.querySelector(
|
|
|
|
"#events-header #back"
|
|
|
|
);
|
|
|
|
this.uiElements.eventsRoomName = this.uiElements.events.querySelector(
|
|
|
|
"#events-header #room-name"
|
|
|
|
);
|
|
|
|
this.uiElements.eventsRoomDescription =
|
|
|
|
this.uiElements.events.querySelector("#events-header #room-description");
|
2024-06-02 05:39:23 +00:00
|
|
|
this.uiElements.eventList =
|
|
|
|
this.uiElements.events.querySelector("#event-list");
|
|
|
|
this.uiElements.eventsMinimized =
|
|
|
|
this.uiElements.eventsContainer.querySelector("#events-minimized");
|
2024-06-03 03:54:02 +00:00
|
|
|
this.uiElements.eventsMinimizedBackButton =
|
|
|
|
this.uiElements.eventsMinimized.querySelector("#back");
|
|
|
|
|
2024-06-04 22:54:40 +00:00
|
|
|
this.uiElements.eventsInspector =
|
|
|
|
this.uiElements.eventsContainer.querySelector("#events-inspector");
|
|
|
|
this.uiElements.eventsInspectorHeader =
|
|
|
|
this.uiElements.eventsInspector.querySelector("#events-header");
|
|
|
|
this.uiElements.eventsInspectorRoomName =
|
|
|
|
this.uiElements.eventsInspectorHeader.querySelector("#room-name");
|
|
|
|
this.uiElements.eventsInspectorEventLength =
|
|
|
|
this.uiElements.eventsInspectorHeader.querySelector("#event-length");
|
|
|
|
this.uiElements.eventsInspectorRoomTime =
|
|
|
|
this.uiElements.eventsInspector.querySelector("#room-time");
|
|
|
|
this.uiElements.eventsInspectorMinimized =
|
|
|
|
this.uiElements.eventsContainer.querySelector(
|
|
|
|
"#events-inspector-minimized"
|
|
|
|
);
|
|
|
|
this.uiElements.eventsInspectorBackButton =
|
|
|
|
this.uiElements.eventsInspector.querySelector("#back");
|
|
|
|
this.uiElements.eventsInspectorBody =
|
|
|
|
this.uiElements.eventsInspector.querySelector("#event-body");
|
|
|
|
this.uiElements.eventsInspectorMinimizedBackButton =
|
|
|
|
this.uiElements.eventsInspectorMinimized.querySelector("#back");
|
|
|
|
|
2024-06-03 03:54:02 +00:00
|
|
|
this.uiElements.minimizeButton = this.uiElements.events.querySelector(
|
|
|
|
"#footer #footer-buttons #minimize"
|
|
|
|
);
|
|
|
|
this.uiElements.maximizeButton =
|
|
|
|
this.uiElements.eventsMinimized.querySelector("#maximize");
|
2024-06-02 05:39:23 +00:00
|
|
|
|
2024-06-04 22:54:40 +00:00
|
|
|
this.uiElements.eventsInspectorMinimizeButton =
|
|
|
|
this.uiElements.eventsInspector.querySelector(
|
|
|
|
"#footer #footer-buttons #minimize"
|
|
|
|
);
|
|
|
|
this.uiElements.eventsInspectorMaximizeButton =
|
|
|
|
this.uiElements.eventsInspectorMinimized.querySelector("#maximize");
|
|
|
|
|
2024-06-02 05:39:23 +00:00
|
|
|
// Loading
|
|
|
|
this.uiElements.loading = this.ui.querySelector("#loading");
|
|
|
|
}
|
|
|
|
|
|
|
|
__initZoom() {
|
2024-06-05 07:30:05 +00:00
|
|
|
this.uiElements.zoomIn.addEventListener("click", () =>
|
|
|
|
this.mainmanager.callManagerFunction("map", "zoomIn")
|
|
|
|
);
|
|
|
|
this.uiElements.zoomOut.addEventListener("click", () =>
|
|
|
|
this.mainmanager.callManagerFunction("map", "zoomOut")
|
|
|
|
);
|
|
|
|
this.mainmanager.addManagerEventListener("map", "zoomMin", () => {
|
|
|
|
this.setZoomDisabled(-1);
|
2024-06-02 05:39:23 +00:00
|
|
|
});
|
2024-06-05 07:30:05 +00:00
|
|
|
this.mainmanager.addManagerEventListener("map", "zoomMax", () => {
|
|
|
|
this.setZoomDisabled(1);
|
2024-06-02 05:39:23 +00:00
|
|
|
});
|
2024-06-05 07:30:05 +00:00
|
|
|
this.mainmanager.addManagerEventListener("map", "zoom", () => {
|
|
|
|
this.setZoomDisabled(0);
|
2024-06-02 05:39:23 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2024-06-04 22:54:40 +00:00
|
|
|
__initInspector() {
|
|
|
|
this.uiElements.eventsInspectorMinimizeButton.addEventListener(
|
|
|
|
"click",
|
2024-06-05 07:30:05 +00:00
|
|
|
() => this.setEventsMinimized(true)
|
2024-06-04 22:54:40 +00:00
|
|
|
);
|
|
|
|
this.uiElements.eventsInspectorMaximizeButton.addEventListener(
|
|
|
|
"click",
|
2024-06-05 07:30:05 +00:00
|
|
|
() => this.setEventsMinimized(false)
|
2024-06-04 22:54:40 +00:00
|
|
|
);
|
|
|
|
this.uiElements.eventsInspectorBackButton.addEventListener("click", () => {
|
2024-06-05 07:30:05 +00:00
|
|
|
window.location.hash = this.mainmanager.getCurrentFocus("room");
|
2024-06-04 22:54:40 +00:00
|
|
|
});
|
|
|
|
this.uiElements.eventsInspectorMinimizedBackButton.addEventListener(
|
|
|
|
"click",
|
|
|
|
() => {
|
2024-06-05 07:30:05 +00:00
|
|
|
window.location.hash = this.mainmanager.getCurrentFocus("room");
|
2024-06-04 22:54:40 +00:00
|
|
|
}
|
|
|
|
);
|
2024-06-03 03:54:02 +00:00
|
|
|
}
|
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
updateInspector() {
|
|
|
|
const currentLocalization = this.mainmanager.getCurrentLocalization();
|
|
|
|
|
|
|
|
const currentEvent = this.mainmanager.getCurrentFocusObject("event");
|
|
|
|
const eventRoom = this.mainmanager.getCurrentFocusObject("room");
|
|
|
|
|
2024-06-04 22:54:40 +00:00
|
|
|
this.uiElements.eventsInspectorBackButton.title =
|
|
|
|
currentLocalization.event_inspector_back;
|
|
|
|
this.uiElements.eventsInspectorMinimizedBackButton.title =
|
|
|
|
currentLocalization.event_inspector_back;
|
|
|
|
this.uiElements.eventsInspectorMinimizeButton.title =
|
|
|
|
currentLocalization.event_inspector_minimize;
|
|
|
|
this.uiElements.eventsInspectorMaximizeButton.title =
|
|
|
|
currentLocalization.event_inspector_maximize;
|
|
|
|
|
|
|
|
const currentDate = new Date();
|
|
|
|
const eventDateStart = new Date(currentEvent.when.start);
|
|
|
|
const eventDateEnd = new Date(currentEvent.when.end);
|
|
|
|
|
|
|
|
const eventStarted = currentDate > eventDateStart;
|
|
|
|
const eventEnded = currentDate > eventDateEnd;
|
|
|
|
|
|
|
|
let datePrefix;
|
|
|
|
|
|
|
|
if (eventEnded) {
|
|
|
|
return; // Don't display this event
|
|
|
|
} else if (eventStarted) {
|
|
|
|
datePrefix = currentLocalization.date_started;
|
|
|
|
} else {
|
|
|
|
datePrefix = currentLocalization.date_starting;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.uiElements.eventsInspectorRoomName.textContent =
|
|
|
|
currentLocalization.event_inspector_header(currentEvent.name);
|
|
|
|
this.uiElements.eventsInspectorRoomTime.textContent =
|
|
|
|
currentLocalization.date_summary(
|
|
|
|
datePrefix,
|
|
|
|
getRelativeTime(
|
|
|
|
eventDateStart,
|
2024-06-05 07:30:05 +00:00
|
|
|
currentDate,
|
|
|
|
this.mainmanager.getCurrentLangCode()
|
2024-06-04 22:54:40 +00:00
|
|
|
)
|
|
|
|
) +
|
|
|
|
" " +
|
|
|
|
currentLocalization.parenthesis(
|
|
|
|
DatetoLocaleDynamicString(
|
|
|
|
eventDateStart,
|
2024-06-05 07:30:05 +00:00
|
|
|
currentDate,
|
|
|
|
this.mainmanager.getCurrentLangCode()
|
2024-06-04 22:54:40 +00:00
|
|
|
)
|
|
|
|
);
|
|
|
|
this.uiElements.eventsInspectorEventLength.textContent =
|
|
|
|
currentLocalization.separator(
|
|
|
|
currentLocalization.minutes_long(
|
|
|
|
getMinutesDifference(eventDateStart, eventDateEnd)
|
|
|
|
),
|
|
|
|
""
|
|
|
|
);
|
2024-06-03 03:54:02 +00:00
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
const eventWhere = document.createElement("a");
|
|
|
|
eventWhere.href = "#" + eventRoom.id;
|
|
|
|
eventWhere.textContent = eventRoom.name;
|
2024-06-04 22:54:40 +00:00
|
|
|
|
|
|
|
this.uiElements.eventsInspectorEventLength.appendChild(eventWhere);
|
|
|
|
|
|
|
|
// Remove all children
|
|
|
|
|
|
|
|
this.uiElements.eventsInspectorBody.replaceChildren();
|
|
|
|
|
|
|
|
if (currentEvent.url) {
|
|
|
|
const eventLink = document.createElement("p");
|
|
|
|
eventLink.classList.add("widget-description");
|
|
|
|
const eventAnchor = document.createElement("a");
|
|
|
|
const eventURL = new URL(currentEvent.url);
|
|
|
|
|
|
|
|
eventAnchor.href = eventURL;
|
2024-06-05 07:30:05 +00:00
|
|
|
eventAnchor.target = "_blank";
|
2024-06-04 22:54:40 +00:00
|
|
|
eventAnchor.textContent = eventURL.toString();
|
|
|
|
|
|
|
|
eventLink.appendChild(eventAnchor);
|
|
|
|
|
|
|
|
this.uiElements.eventsInspectorBody.appendChild(eventLink);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.uiElements.eventsInspectorBody.appendChild(
|
|
|
|
document.createElement("hr")
|
|
|
|
);
|
|
|
|
|
|
|
|
const eventDescription = document.createElement("p");
|
|
|
|
eventDescription.classList.add("widget-description");
|
|
|
|
|
|
|
|
eventDescription.textContent = currentEvent.description;
|
|
|
|
|
|
|
|
this.uiElements.eventsInspectorBody.appendChild(eventDescription);
|
2024-06-03 03:54:02 +00:00
|
|
|
}
|
|
|
|
|
2024-06-02 05:39:23 +00:00
|
|
|
__initEvents() {
|
2024-06-03 03:54:02 +00:00
|
|
|
this.uiElements.eventsBackButton.addEventListener("click", () => {
|
2024-06-05 07:30:05 +00:00
|
|
|
window.location.hash = this.mainmanager.getCurrentFocus("floor");
|
2024-06-03 03:54:02 +00:00
|
|
|
});
|
|
|
|
this.uiElements.eventsMinimizedBackButton.addEventListener("click", () => {
|
2024-06-05 07:30:05 +00:00
|
|
|
window.location.hash = this.mainmanager.getCurrentFocus("floor");
|
2024-06-03 03:54:02 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
this.uiElements.minimizeButton.addEventListener("click", () => {
|
2024-06-02 05:39:23 +00:00
|
|
|
this.uiElements.eventsContainer.classList.add("minimized");
|
|
|
|
});
|
2024-06-03 03:54:02 +00:00
|
|
|
this.uiElements.maximizeButton.addEventListener("click", () => {
|
2024-06-02 05:39:23 +00:00
|
|
|
this.uiElements.eventsContainer.classList.remove("minimized");
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
__updateEventsSoft() {
|
|
|
|
const focusedFloor = this.mainmanager.getCurrentFocusObject("floor");
|
|
|
|
|
|
|
|
if (focusedFloor == null) {
|
|
|
|
this.uiElements.eventsContainer.classList.add("empty");
|
|
|
|
} else {
|
|
|
|
this.uiElements.eventsContainer.classList.remove("empty");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
updateEvents() {
|
|
|
|
const currentLocalization = this.mainmanager.getCurrentLocalization();
|
|
|
|
|
|
|
|
const currentEvents = this.mainmanager.getAllFocusObject("event");
|
|
|
|
|
|
|
|
const focusedFloor = this.mainmanager.getCurrentFocusObject("floor");
|
|
|
|
const focusedRoom = this.mainmanager.getCurrentFocusObject("room");
|
2024-06-03 19:35:45 +00:00
|
|
|
|
2024-06-03 03:54:02 +00:00
|
|
|
this.uiElements.minimizeButton.title = currentLocalization.minimize;
|
|
|
|
this.uiElements.maximizeButton.title = currentLocalization.maximize;
|
|
|
|
// Figure out header
|
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
if (this.mainmanager.getIsFocused("room")) {
|
|
|
|
if (currentEvents.size < 1) {
|
|
|
|
this.uiElements.eventsRoomName.textContent = focusedRoom.name;
|
|
|
|
} else {
|
|
|
|
this.uiElements.eventsRoomName.textContent =
|
|
|
|
currentLocalization.events_in(focusedRoom.name);
|
|
|
|
}
|
|
|
|
this.uiElements.eventsRoomDescription.textContent =
|
|
|
|
focusedRoom.description;
|
|
|
|
this.uiElements.eventsBackButton.disabled = false;
|
|
|
|
this.uiElements.eventsBackButton.title =
|
|
|
|
currentLocalization.view_events_in(focusedFloor.name);
|
|
|
|
this.uiElements.eventsMinimizedBackButton.disabled = false;
|
|
|
|
this.uiElements.eventsMinimizedBackButton.title =
|
|
|
|
currentLocalization.view_events_in(focusedFloor.name);
|
|
|
|
} else {
|
|
|
|
if (currentEvents.size < 1) {
|
|
|
|
this.uiElements.eventsRoomName.textContent = focusedFloor.name;
|
|
|
|
} else {
|
|
|
|
this.uiElements.eventsRoomName.textContent =
|
|
|
|
currentLocalization.events_in(focusedFloor.name);
|
|
|
|
}
|
|
|
|
this.uiElements.eventsRoomDescription.textContent =
|
|
|
|
focusedFloor.description;
|
|
|
|
this.uiElements.eventsBackButton.disabled = true;
|
|
|
|
this.uiElements.eventsBackButton.title = "";
|
|
|
|
this.uiElements.eventsMinimizedBackButton.disabled = true;
|
|
|
|
this.uiElements.eventsMinimizedBackButton.title = "";
|
|
|
|
}
|
2024-06-03 03:54:02 +00:00
|
|
|
|
2024-06-02 05:39:23 +00:00
|
|
|
// Remove all children
|
|
|
|
this.uiElements.eventList.replaceChildren();
|
|
|
|
|
|
|
|
// Put them back
|
2024-06-03 03:54:02 +00:00
|
|
|
|
|
|
|
const currentDate = new Date();
|
2024-06-03 19:35:45 +00:00
|
|
|
currentEvents.forEach((event, id) => {
|
2024-06-05 07:30:05 +00:00
|
|
|
const eventRoom = this.mainmanager
|
|
|
|
.getAllFocusObject("room")
|
|
|
|
.get(this.mainmanager.convertIdFocus(event.id, "room"));
|
2024-06-03 03:54:02 +00:00
|
|
|
const eventDateStart = new Date(event.when.start);
|
|
|
|
const eventDateEnd = new Date(event.when.end);
|
|
|
|
|
|
|
|
const eventStarted = currentDate > eventDateStart;
|
|
|
|
const eventEnded = currentDate > eventDateEnd;
|
|
|
|
|
|
|
|
let datePrefix;
|
|
|
|
|
|
|
|
if (eventEnded) {
|
|
|
|
return; // Don't display this event
|
|
|
|
} else if (eventStarted) {
|
|
|
|
datePrefix = currentLocalization.date_started;
|
|
|
|
} else {
|
|
|
|
datePrefix = currentLocalization.date_starting;
|
|
|
|
}
|
|
|
|
|
2024-06-03 19:35:45 +00:00
|
|
|
const eventListContainer = document.createElement("div");
|
2024-06-02 05:39:23 +00:00
|
|
|
eventListContainer.classList.add("event-list-container");
|
|
|
|
eventListContainer.id = "event-" + id;
|
|
|
|
|
2024-06-03 19:35:45 +00:00
|
|
|
const eventListContainerSummary = document.createElement("p");
|
2024-06-03 03:54:02 +00:00
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
const eventListContainerSummaryName = document.createElement("a");
|
|
|
|
eventListContainerSummaryName.href = "#" + id;
|
2024-06-03 03:54:02 +00:00
|
|
|
eventListContainerSummaryName.textContent = event.name;
|
|
|
|
|
|
|
|
eventListContainerSummary.appendChild(eventListContainerSummaryName);
|
|
|
|
|
|
|
|
eventListContainerSummary.appendChild(document.createTextNode(" "));
|
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
if (!this.mainmanager.getIsFocused("room")) {
|
|
|
|
const eventListContainerSummaryRoom = document.createElement("a");
|
|
|
|
eventListContainerSummaryRoom.href = "#" + eventRoom.id;
|
|
|
|
eventListContainerSummaryRoom.textContent =
|
|
|
|
currentLocalization.parenthesis(eventRoom.name);
|
2024-06-03 03:54:02 +00:00
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
eventListContainerSummary.appendChild(eventListContainerSummaryRoom);
|
|
|
|
}
|
2024-06-03 03:54:02 +00:00
|
|
|
|
|
|
|
eventListContainerSummary.appendChild(document.createElement("br"));
|
|
|
|
|
|
|
|
const eventListContainerSummarySmall = document.createElement("small");
|
|
|
|
|
|
|
|
const eventListContainerSummaryTime = document.createElement("span");
|
|
|
|
eventListContainerSummaryTime.classList.add("clarification");
|
|
|
|
eventListContainerSummaryTime.title = eventDateStart.toLocaleString(
|
2024-06-05 07:30:05 +00:00
|
|
|
this.mainmanager.getCurrentLangCode(),
|
2024-06-04 22:54:40 +00:00
|
|
|
{
|
|
|
|
dateStyle: "short",
|
|
|
|
timeStyle: "short",
|
|
|
|
}
|
2024-06-03 03:54:02 +00:00
|
|
|
);
|
|
|
|
eventListContainerSummaryTime.textContent =
|
|
|
|
currentLocalization.date_summary(
|
|
|
|
datePrefix,
|
|
|
|
getRelativeTime(
|
|
|
|
eventDateStart,
|
2024-06-05 07:30:05 +00:00
|
|
|
currentDate,
|
|
|
|
this.mainmanager.getCurrentLangCode()
|
2024-06-03 03:54:02 +00:00
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
eventListContainerSummarySmall.appendChild(eventListContainerSummaryTime);
|
|
|
|
|
|
|
|
eventListContainerSummarySmall.appendChild(document.createTextNode(" "));
|
|
|
|
|
|
|
|
const eventListContainerSummaryLength = document.createElement("span");
|
|
|
|
eventListContainerSummaryLength.textContent =
|
|
|
|
currentLocalization.parenthesis(
|
|
|
|
currentLocalization.minutes_long(
|
|
|
|
getMinutesDifference(eventDateStart, eventDateEnd)
|
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
eventListContainerSummarySmall.appendChild(
|
|
|
|
eventListContainerSummaryLength
|
|
|
|
);
|
|
|
|
|
|
|
|
eventListContainerSummary.appendChild(eventListContainerSummarySmall);
|
2024-06-02 05:39:23 +00:00
|
|
|
|
|
|
|
eventListContainer.appendChild(eventListContainerSummary);
|
|
|
|
|
|
|
|
this.uiElements.eventList.appendChild(eventListContainer);
|
|
|
|
});
|
|
|
|
|
2024-06-03 19:35:45 +00:00
|
|
|
if (currentEvents.size < 1) {
|
2024-06-05 07:30:05 +00:00
|
|
|
this.uiElements.events.classList.add("empty");
|
2024-06-02 05:39:23 +00:00
|
|
|
} else {
|
2024-06-05 07:30:05 +00:00
|
|
|
this.uiElements.events.classList.remove("empty");
|
2024-06-02 05:39:23 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
__updateFloorsHard() {
|
2024-06-05 07:30:05 +00:00
|
|
|
const currentLocalization = this.mainmanager.getCurrentLocalization();
|
|
|
|
const currentFloors = this.mainmanager.getAllFocusObject("floor");
|
|
|
|
const mainFocus = this.mainmanager.getCurrentFocus("floor");
|
2024-06-02 05:39:23 +00:00
|
|
|
// Remove all children
|
|
|
|
this.uiElements.floorButtons.replaceChildren();
|
2024-06-03 03:54:02 +00:00
|
|
|
this.uiElements.floorsHeading.textContent =
|
|
|
|
currentLocalization.floors_header;
|
2024-06-02 05:39:23 +00:00
|
|
|
|
|
|
|
// Put them back
|
2024-06-05 07:30:05 +00:00
|
|
|
currentFloors.forEach(({ name }, id) => {
|
|
|
|
const floorButton = document.createElement("button");
|
|
|
|
floorButton.textContent = name;
|
|
|
|
floorButton.classList.add("floor-button");
|
|
|
|
floorButton.id = "floor-" + id;
|
|
|
|
if (id === mainFocus) floorButton.classList.add("selected");
|
|
|
|
floorButton.addEventListener("click", () => {
|
|
|
|
window.location.hash = id;
|
|
|
|
});
|
|
|
|
|
|
|
|
this.uiElements.floorButtons.appendChild(floorButton);
|
|
|
|
});
|
|
|
|
|
|
|
|
if (currentFloors.size < 1) {
|
|
|
|
this.uiElements.floors.classList.add("empty");
|
|
|
|
this.floorsEmpty = true;
|
|
|
|
} else {
|
|
|
|
this.uiElements.floors.classList.remove("empty");
|
|
|
|
this.floorsEmpty = false;
|
|
|
|
}
|
2024-06-02 05:39:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
__updateFloorsSoft() {
|
2024-06-05 07:30:05 +00:00
|
|
|
const currentLocalization = this.mainmanager.getCurrentLocalization();
|
|
|
|
const currentFloors = this.mainmanager.getAllFocusObject("floor");
|
|
|
|
const mainFocus = this.mainmanager.getCurrentFocus("floor");
|
|
|
|
|
2024-06-03 03:54:02 +00:00
|
|
|
this.uiElements.floorsHeading.textContent =
|
|
|
|
currentLocalization.floors_header;
|
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
currentFloors.forEach((_, id) => {
|
|
|
|
const child = this.uiElements.floorButtons.querySelector("#floor-" + id);
|
|
|
|
if (id === mainFocus) child.classList.add("selected");
|
|
|
|
else child.classList.remove("selected");
|
|
|
|
});
|
2024-06-02 05:39:23 +00:00
|
|
|
}
|
|
|
|
}
|