EventMapper/assets/scripts/KaplayMap/ui.js

import {
  DatetoLocaleDynamicString,
  getMinutesDifference,
  getRelativeTime,
} from "../modules/relative_time.js";

export class UIManager {
  ui;
  map;
  floormanager;
  eventmanager;

  uiElements = {};
  floorsEmpty = true;
  eventsEmpty = true;

  constructor(ui, map) {
    this.ui = ui;
    this.map = map;

    this.__initUIElements();

    this.__initZoom();

    this.__initEvents();

    this.__initInspector();
  }

  setLoading(state) {
    if (state) {
      this.ui.classList.add("loading");
    } else {
      this.ui.classList.remove("loading");
    }
  }

  __initUIElements() {
    // 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.floorsHeading = this.ui.querySelector(
      "#floors .widget-heading"
    );
    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.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");
    this.uiElements.eventList =
      this.uiElements.events.querySelector("#event-list");
    this.uiElements.eventsMinimized =
      this.uiElements.eventsContainer.querySelector("#events-minimized");
    this.uiElements.eventsMinimizedBackButton =
      this.uiElements.eventsMinimized.querySelector("#back");

    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");

    this.uiElements.minimizeButton = this.uiElements.events.querySelector(
      "#footer #footer-buttons #minimize"
    );
    this.uiElements.maximizeButton =
      this.uiElements.eventsMinimized.querySelector("#maximize");

    this.uiElements.eventsInspectorMinimizeButton =
      this.uiElements.eventsInspector.querySelector(
        "#footer #footer-buttons #minimize"
      );
    this.uiElements.eventsInspectorMaximizeButton =
      this.uiElements.eventsInspectorMinimized.querySelector("#maximize");

    // Loading
    this.uiElements.loading = this.ui.querySelector("#loading");
  }

  __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;
      }
    });
  }

  __initInspector() {
    this.uiElements.eventsInspectorMinimizeButton.addEventListener(
      "click",
      () => {
        this.uiElements.eventsContainer.classList.add("minimized");
      }
    );
    this.uiElements.eventsInspectorMaximizeButton.addEventListener(
      "click",
      () => {
        this.uiElements.eventsContainer.classList.remove("minimized");
      }
    );
    this.uiElements.eventsInspectorBackButton.addEventListener("click", () => {
      // this.eventmanager.setCurrentEvent("");
    });
    this.uiElements.eventsInspectorMinimizedBackButton.addEventListener(
      "click",
      () => {
        // this.eventmanager.setCurrentEvent("");
        this.eventsMaximize(true);
      }
    );
  }

  __updateInspector() {
    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 currentEvent = this.eventmanager.currentEventItem;
    if (currentEvent != null) {
      this.uiElements.eventsContainer.classList.add("inspector");
    } else {
      this.uiElements.eventsContainer.classList.remove("inspector");
      return;
    }

    // const eventFloor = this.floormanager.currentFloorRooms.get(
    //   currentEvent.where
    // );

    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,
          currentDate
          // this.floormanager.lang.replace(/_/g, "-")
        )
      ) +
      " " +
      currentLocalization.parenthesis(
        DatetoLocaleDynamicString(
          eventDateStart,
          currentDate
          // this.floormanager.lang.replace(/_/g, "-")
        )
      );
    this.uiElements.eventsInspectorEventLength.textContent =
      currentLocalization.separator(
        currentLocalization.minutes_long(
          getMinutesDifference(eventDateStart, eventDateEnd)
        ),
        ""
      );

    const eventWhere = document.createElement("button");
    eventWhere.classList.add("link");
    eventWhere.addEventListener("click", () => {
      // this.floormanager.setCurrentRoom(eventFloor.id);
    });
    eventWhere.textContent = eventFloor.name;

    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;
      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);
  }

  __initEvents() {
    this.uiElements.eventsBackButton.addEventListener("click", () => {
      // this.floormanager.setCurrentRoom("");
    });
    this.uiElements.eventsMinimizedBackButton.addEventListener("click", () => {
      // this.floormanager.setCurrentRoom("", false);
    });

    this.uiElements.minimizeButton.addEventListener("click", () => {
      this.uiElements.eventsContainer.classList.add("minimized");
    });
    this.uiElements.maximizeButton.addEventListener("click", () => {
      this.uiElements.eventsContainer.classList.remove("minimized");
    });
  }

  __updateEvents() {
    let currentEvents;
    // if (this.floormanager.currentRoom != "") {
    //   const filterThing = Array.from(this.eventmanager.events.entries());
    //   currentEvents = new Map(
    //     filterThing.filter(
    //       ([key, value]) => value.where == this.floormanager.currentRoom
    //     )
    //   );
    // } else {
    //   currentEvents = this.eventmanager.events;
    // }

    this.uiElements.minimizeButton.title = currentLocalization.minimize;
    this.uiElements.maximizeButton.title = currentLocalization.maximize;
    // Figure out header

    // if (this.floormanager.currentRoomItem != null) {
    //   if (currentEvents.size < 1) {
    //     this.uiElements.eventsRoomName.textContent =
    //       this.floormanager.currentRoomItem.name;
    //   } else {
    //     this.uiElements.eventsRoomName.textContent =
    //       currentLocalization.events_in(this.floormanager.currentRoomItem.name);
    //   }
    //   this.uiElements.eventsRoomDescription.textContent =
    //     this.floormanager.currentRoomItem.description;
    //   this.uiElements.eventsBackButton.disabled = false;
    //   this.uiElements.eventsBackButton.title =
    //     currentLocalization.view_events_in(
    //       this.floormanager.currentFloorItem.name
    //     );
    //   this.uiElements.eventsMinimizedBackButton.disabled = false;
    //   this.uiElements.eventsMinimizedBackButton.title =
    //     currentLocalization.view_events_in(
    //       this.floormanager.currentFloorItem.name
    //     );
    // } else {
    //   if (currentEvents.size < 1) {
    //     this.uiElements.eventsRoomName.textContent =
    //       this.floormanager.currentFloorItem.name;
    //   } else {
    //     this.uiElements.eventsRoomName.textContent =
    //       currentLocalization.events_in(
    //         this.floormanager.currentFloorItem.name
    //       );
    //   }
    //   this.uiElements.eventsRoomDescription.textContent =
    //     this.floormanager.currentFloorItem.description;
    //   this.uiElements.eventsBackButton.disabled = true;
    //   this.uiElements.eventsBackButton.title = "";
    //   this.uiElements.eventsMinimizedBackButton.disabled = true;
    //   this.uiElements.eventsMinimizedBackButton.title = "";
    // }

    // Remove all children
    this.uiElements.eventList.replaceChildren();

    // Put them back

    const currentDate = new Date();
    currentEvents.forEach((event, id) => {
      // const eventFloor = this.floormanager.currentFloorRooms.get(event.where);
      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;
      }

      const eventListContainer = document.createElement("div");
      eventListContainer.classList.add("event-list-container");
      eventListContainer.id = "event-" + id;

      const eventListContainerSummary = document.createElement("p");

      const eventListContainerSummaryName = document.createElement("button");
      eventListContainerSummaryName.classList.add("link");
      eventListContainerSummaryName.addEventListener("click", () => {
        // this.floormanager.setCurrentRoom(eventFloor.id, true, true);
        // this.eventmanager.setCurrentEvent(id);
      });
      eventListContainerSummaryName.textContent = event.name;

      eventListContainerSummary.appendChild(eventListContainerSummaryName);

      eventListContainerSummary.appendChild(document.createTextNode(" "));

      // if (this.floormanager.currentRoomItem == null) {
      //   const eventListContainerSummaryRoom = document.createElement("button");
      //   eventListContainerSummaryRoom.classList.add("link");
      //   eventListContainerSummaryRoom.addEventListener("click", () => {
      //     this.floormanager.setCurrentRoom(eventFloor.id);
      //   });
      //   eventListContainerSummaryRoom.textContent =
      //     currentLocalization.parenthesis(eventFloor.name);

      //   eventListContainerSummary.appendChild(eventListContainerSummaryRoom);
      // }

      eventListContainerSummary.appendChild(document.createElement("br"));

      const eventListContainerSummarySmall = document.createElement("small");

      const eventListContainerSummaryTime = document.createElement("span");
      eventListContainerSummaryTime.classList.add("clarification");
      eventListContainerSummaryTime.title = eventDateStart.toLocaleString(
        // this.floormanager.lang.replace(/_/g, "-"),
        {
          dateStyle: "short",
          timeStyle: "short",
        }
      );
      eventListContainerSummaryTime.textContent =
        currentLocalization.date_summary(
          datePrefix,
          getRelativeTime(
            eventDateStart,
            currentDate
            // this.floormanager.lang.replace(/_/g, "-")
          )
        );

      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);

      eventListContainer.appendChild(eventListContainerSummary);

      this.uiElements.eventList.appendChild(eventListContainer);
    });

    if (currentEvents.size < 1) {
      this.uiElements.eventsContainer.classList.add("empty");
      this.eventsEmpty = true;
    } else {
      this.uiElements.eventsContainer.classList.remove("empty");
      this.eventsEmpty = false;
    }
  }

  __updateFloorsHard() {
    // Remove all children
    this.uiElements.floorButtons.replaceChildren();
    this.uiElements.floorsHeading.textContent =
      currentLocalization.floors_header;

    // 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.uiElements.floorsHeading.textContent =
      currentLocalization.floors_header;

    // 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");
    // });
  }
}