section.js

// Imports
import * as Auth from "/services/auth/auth.js";
import * as Common from "/services/common/common.js";
import * as Messages from "/services/messages/messages.js";
import * as SectionModel from "/services/model/section-model.js";
import { Delete } from "/services/common/delete.js";

// DOM elements

export async function mount(where, parent) {
  const sectionComponent = new Section(parent);
  await sectionComponent.mount(where);
  return sectionComponent;
}

class Section {
  constructor(parent) {
    this.parent = parent;
    this.SectionModel = SectionModel.getSectionModel();
  }

  async mount(where) {
    this.SectionModel.current_user = await Auth.GetUser();
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <header class="card-header">
        <p class="card-header-title" id="section-title">
          Sections
        </p>
      </header>
      <div class="card-content">
        <div id="section-list" class="content">
          Sélectionner une circonscription.
        </div>
      </div>
    `;
    this.mountModal("section-modal");
    this.handleDom();
  }

  handleDom() {
    let sectionHandler = this;

    document
      .getElementById(`section-modal-close`)
      .addEventListener("click", function () {
        Common.toggleModal("section-modal", "section-modal-card");
      });
    document
      .getElementById(`section-modal-cancel`)
      .addEventListener("click", function () {
        Common.toggleModal("section-modal", "section-modal-card");
      });
    document
      .getElementById(`section-modal-save`)
      .addEventListener("click", async function () {
        await sectionHandler.saveSection();
      });
    document
      .getElementById(`section-modal-save-section`)
      .addEventListener("click", async function () {
        await sectionHandler.saveSection();
        await new Promise((r) => setTimeout(r, 800));
        sectionHandler.newSection(sectionHandler.area);
      });
    document
      .getElementById(`section-modal-save-desk`)
      .addEventListener("click", async function () {
        let section = await sectionHandler.saveSection();
        await new Promise((r) => setTimeout(r, 800));
        sectionHandler.parent.deskHandler.section = section;
        sectionHandler.parent.deskHandler.newDesk(section);
      });
  }

  mountModal(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="modal-background"></div>
      <div class="modal-card" id="section-modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">
            Ajout/modification d'une section
          </p>
          <button
            class="delete"
            aria-label="close"
            id="section-modal-close"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="field">
            <label>Id</label>
            <div class="control">
              <input
                class="input"
                type="number"
                id="section-modal-id"
                disabled
              />
            </div>
          </div>
          <div class="field">
            <label>Nom</label>
            <div class="control">
              <input class="input" type="text" id="section-modal-name" />
            </div>
          </div>
          <div class="field">
            <label>Identifiant de carte</label>
            <div class="control">
              <input class="input" type="number" id="section-modal-mapID" />
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <button id="section-modal-save" class="button is-success">
            Sauvegarder
          </button>
          <button id="section-modal-save-section" class="button is-success">
            Sauvegarder <br />
            (ajouter section)
          </button>
          <button id="section-modal-save-desk" class="button is-success">
            Sauvegarder <br />
            (ajouter bureau)
          </button>
          <button id="section-modal-cancel" class="button">Annuler</button>
        </footer>
      </div>
    `;
  }

  async displaySections() {
    document.getElementById("sections").style.display = "block";
    document.getElementById("section-list").innerHTML = /* HTML */ `<button
      id="section-new"
      class="button large-button is-success"
    >
      <span class="icon is-small">
        <i class="fas fa-plus"></i>
      </span>
    </button>`;
    let sectionHandler = this;
    let sections = await this.updateSections();
    const markup = sections
      .map((section) => this.sectionTemplate(section))
      .join("");
    document.getElementById("section-list").innerHTML += markup;
    document.getElementById("section-title").innerHTML =
      "Sections de&nbsp;<em> " + this.area.Name + "</em>";

    sections.map((section) => {
      document
        .getElementById(`sections-section-edit-${section.ID}`)
        .addEventListener("click", function () {
          sectionHandler.editSection(section);
        });
      document
        .getElementById(`sections-section-delete-${section.ID}`)
        .addEventListener("click", function () {
          new Delete(() => {
            sectionHandler.deleteSection(section);
          });
        });
      document
        .getElementById(`sections-section-${section.ID}`)
        .addEventListener("click", function () {
          sectionHandler.activateSection(section);
          sectionHandler.parent.deskHandler.section = section;
          sectionHandler.parent.deskHandler.displayDesks();
          document.getElementById("desk-new").setAttribute("disabled", "true");
        });
    });

    document.getElementById(`section-new`).addEventListener("click", () => {
      this.newSection(this.area);
    });
  }

  emptySections() {
    this.area = null;
    document.getElementById("desks").style.display = "none";
  }

  sectionTemplate(section) {
    return /* HTML */ `<div class="card card-list">
      <div id="sections-section-${section.ID}" class="card-content clickable">
        <div class="content">
          <nav class="level">
            <div class="level-left">
              ${section.Name}
            </div>
            <div class="level-right">
              <a
                id="sections-section-edit-${section.ID}"
                class="button is-link is-small"
                title="Modifier"
              >
                <span class="icon is-small">
                  <i class="fas fa-pen"></i>
                </span>
              </a>
              <a
                id="sections-section-delete-${section.ID}"
                class="button is-danger is-small"
                title="Supprimer"
              >
                <span class="icon is-small">
                  <i class="fas fa-times"></i>
                </span>
              </a>
            </div>
          </nav>
        </div>
      </div>
    </div>`;
  }

  async activateSection(sectionToActivate) {
    this.parent.deskHandler.emptyDesks();
    let sections = await this.updateSections();
    sections.forEach((section) => {
      document
        .getElementById(`sections-section-${section.ID}`)
        .classList.remove("active-card");
    });
    document
      .getElementById(`sections-section-${sectionToActivate.ID}`)
      .classList.add("active-card");
  }

  newSection(area) {
    this.method = "POST";
    this.area = area;
    document.getElementById("section-modal-id").value = null;
    document.getElementById("section-modal-name").value = area.Name;
    document.getElementById("section-modal-mapID").value = null;
    Common.toggleModal("section-modal", "section-modal-card");
  }

  editSection(section) {
    this.method = "PUT";
    document.getElementById("section-modal-id").value = section.ID;
    document.getElementById("section-modal-name").value = section.Name;
    document.getElementById("section-modal-mapID").value = section.MapID;
    Common.toggleModal("section-modal", "section-modal-card");
  }

  async saveSection() {
    let section;
    if (this.method == "POST")
      document.getElementById("section-modal-id").value = null;

    section = await this.SectionModel.saveSection(
      this.method,
      parseInt(document.getElementById("section-modal-id").value),
      this.area.ID,
      document.getElementById("section-modal-name").value,
      document.getElementById("section-modal-mapID").value
    );
    await this.displaySections();
    Common.toggleModal("section-modal", "section-modal-card");
    this.activateSection(section);
    this.parent.deskHandler.section = section;
    this.parent.deskHandler.displayDesks();
    return section;
  }

  async updateSections() {
    let sectionHandler = this;
    let sections = await this.SectionModel.getSections();
    return sections.filter(function (section) {
      return section.AreaID == sectionHandler.area.ID;
    });
  }

  async deleteSection(section) {
    await this.SectionModel.deleteSections(section.ID);
    this.displaySections();
    this.parent.deskHandler.emptyDesks();
  }

  async cloneSections(areaCloned, areaToClone) {
    let sectionHandler = this;
    await areaToClone.Sections.forEach(async (sectionToClone) => {
      try {
        sectionToClone = await sectionHandler.SectionModel.getSection(
          sectionToClone.ID
        );
        let sectionCloned = await sectionHandler.SectionModel.saveSection(
          "POST",
          null,
          areaCloned.ID,
          sectionToClone.Name,
          sectionToClone.MapID
        );
        await sectionHandler.parent.deskHandler.cloneDesks(
          sectionCloned,
          sectionToClone
        );
      } catch (e) {
        Messages.Show("is-warning", e.message);
        console.error(e);
      }
    });
  }
}