159 lines
4.7 KiB
JavaScript
159 lines
4.7 KiB
JavaScript
|
export class UIManager {
|
||
|
ui;
|
||
|
map;
|
||
|
floormanager;
|
||
|
eventmanager;
|
||
|
|
||
|
uiElements = {};
|
||
|
floorsEmpty = true;
|
||
|
eventsEmpty = true;
|
||
|
|
||
|
constructor(ui, map) {
|
||
|
this.ui = ui;
|
||
|
this.map = map;
|
||
|
|
||
|
// 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");
|
||
|
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");
|
||
|
this.uiElements.eventList =
|
||
|
this.uiElements.events.querySelector("#event-list");
|
||
|
this.uiElements.eventsMinimized =
|
||
|
this.uiElements.eventsContainer.querySelector("#events-minimized");
|
||
|
|
||
|
// Loading
|
||
|
this.uiElements.loading = this.ui.querySelector("#loading");
|
||
|
|
||
|
// Zoom buttons
|
||
|
this.__initZoom();
|
||
|
|
||
|
this.__initEvents();
|
||
|
}
|
||
|
|
||
|
__initZoom() {
|
||
|
this.uiElements.zoomIn.addEventListener("click", () => {
|
||
|
this.map.zoomLevel += 1;
|
||
|
});
|
||
|
this.uiElements.zoomOut.addEventListener("click", () => {
|
||
|
this.map.zoomLevel -= 1;
|
||
|
});
|
||
|
this.map.kp.onUpdate(() => {
|
||
|
if (this.map.zoomLevelLimit > 0) {
|
||
|
this.uiElements.zoomIn.disabled = true;
|
||
|
this.uiElements.zoomOut.disabled = false;
|
||
|
} else if (this.map.zoomLevelLimit < 0) {
|
||
|
this.uiElements.zoomIn.disabled = false;
|
||
|
this.uiElements.zoomOut.disabled = true;
|
||
|
} else {
|
||
|
this.uiElements.zoomIn.disabled = false;
|
||
|
this.uiElements.zoomOut.disabled = false;
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
__initEvents() {
|
||
|
const minimizeButton = this.uiElements.events.querySelector(
|
||
|
"#footer #footer-buttons #minimize"
|
||
|
);
|
||
|
minimizeButton.addEventListener("click", () => {
|
||
|
this.uiElements.eventsContainer.classList.add("minimized");
|
||
|
});
|
||
|
const maximizeButton =
|
||
|
this.uiElements.eventsMinimized.querySelector("#maximize");
|
||
|
maximizeButton.addEventListener("click", () => {
|
||
|
this.uiElements.eventsContainer.classList.remove("minimized");
|
||
|
});
|
||
|
}
|
||
|
|
||
|
__updateEvents() {
|
||
|
// Remove all children
|
||
|
this.uiElements.eventList.replaceChildren();
|
||
|
|
||
|
console.log(this.eventmanager.events);
|
||
|
// Put them back
|
||
|
this.eventmanager.events.forEach((event, id) => {
|
||
|
const eventListContainer = document.createElement("details");
|
||
|
eventListContainer.classList.add("event-list-container");
|
||
|
eventListContainer.id = "event-" + id;
|
||
|
|
||
|
const eventListContainerSummary = document.createElement("summary");
|
||
|
eventListContainerSummary.textContent = event.name;
|
||
|
|
||
|
eventListContainer.appendChild(eventListContainerSummary);
|
||
|
|
||
|
const eventListContainerDescription = document.createElement("p");
|
||
|
eventListContainerDescription.textContent = event.description;
|
||
|
|
||
|
eventListContainer.appendChild(eventListContainerDescription);
|
||
|
|
||
|
this.uiElements.eventList.appendChild(eventListContainer);
|
||
|
});
|
||
|
|
||
|
if (this.eventmanager.events.size < 1) {
|
||
|
this.uiElements.eventList.classList.add("empty");
|
||
|
this.eventsEmpty = true;
|
||
|
} else {
|
||
|
this.uiElements.eventList.classList.remove("empty");
|
||
|
this.eventsEmpty = false;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
setLoading(state) {
|
||
|
if (state) {
|
||
|
this.ui.classList.add("loading");
|
||
|
} else {
|
||
|
this.ui.classList.remove("loading");
|
||
|
}
|
||
|
}
|
||
|
|
||
|
__updateFloorsHard() {
|
||
|
// Remove all children
|
||
|
this.uiElements.floorButtons.replaceChildren();
|
||
|
|
||
|
// Put them back
|
||
|
this.floormanager.floors.forEach(({ name }, id) => {
|
||
|
const floorButton = document.createElement("button");
|
||
|
floorButton.textContent = name;
|
||
|
floorButton.classList.add("floor-button");
|
||
|
floorButton.id = "floor-" + id;
|
||
|
if (id === this.floormanager.currentFloor)
|
||
|
floorButton.classList.add("selected");
|
||
|
floorButton.addEventListener("click", () =>
|
||
|
this.floormanager.changeFloor(id)
|
||
|
);
|
||
|
|
||
|
this.uiElements.floorButtons.appendChild(floorButton);
|
||
|
});
|
||
|
|
||
|
if (this.floormanager.floors.size < 1) {
|
||
|
this.uiElements.floors.classList.add("empty");
|
||
|
this.floorsEmpty = true;
|
||
|
} else {
|
||
|
this.uiElements.floors.classList.remove("empty");
|
||
|
this.floorsEmpty = false;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
__updateFloorsSoft() {
|
||
|
this.floormanager.floors.forEach(({ name }, id) => {
|
||
|
const child = this.uiElements.floorButtons.querySelector("#floor-" + id);
|
||
|
if (id === this.floormanager.currentFloor)
|
||
|
child.classList.add("selected");
|
||
|
else child.classList.remove("selected");
|
||
|
});
|
||
|
}
|
||
|
}
|