Personaler.user.js

// ==UserScript==
// @name        * Personaler
// @namespace   bos-ernie.leitstellenspiel.de
// @version     1.1.0
// @license     BSD-3-Clause
// @author      BOS-Ernie
// @description Überprüft das Personalsoll und die Werbephasen in allen Gebäuden
// @match       https://www.leitstellenspiel.de/
// @icon        https://www.google.com/s2/favicons?sz=64&domain=leitstellenspiel.de
// @run-at      document-idle
// @grant       none
// ==/UserScript==
 
/* global $ */
 
(function () {
  "use strict";
 
  const defaultSettings = {
    "building-type-0": 250,
    "building-type-2": 80,
    "building-type-6": 300,
    "building-type-9": 140,
    "building-type-11": 215,
    "building-type-12": 34,
    "building-type-13": 400,
    "building-type-18": 250,
    "building-type-19": 300,
    "building-type-20": 80,
  };
 
  const buildingsWithPersonal = [0, 2, 6, 9, 11, 12, 13, 18, 19, 20];
 
  function addStyle() {
    const style =
      ".loader{width:100px;height:100px;border-radius:100%;position:relative;margin:0 auto;top:40px;left:-2.5px}.loader span{display:inline-block;width:5px;height:20px;background-color:#c9302c}.loader span:first-child{animation:1s ease-in-out infinite grow}.loader span:nth-child(2){animation:1s ease-in-out .15s infinite grow}.loader span:nth-child(3){animation:1s ease-in-out .3s infinite grow}.loader span:nth-child(4){animation:1s ease-in-out .45s infinite grow}@keyframes grow{0%,100%{-webkit-transform:scaleY(1);-ms-transform:scaleY(1);-o-transform:scaleY(1);transform:scaleY(1)}50%{-webkit-transform:scaleY(1.8);-ms-transform:scaleY(1.8);-o-transform:scaleY(1.8);transform:scaleY(1.8)}}";
 
    const styleElement = document.createElement("style");
    styleElement.innerHTML = style;
    document.head.appendChild(styleElement);
  }
 
  function addMenuEntry() {
    const profileMenu = document.getElementById("logout_button").parentElement.parentElement;
    const divider = document.createElement("li");
    divider.setAttribute("class", "divider");
    divider.setAttribute("role", "presentation");
 
    profileMenu.append(divider);
 
    const bedIcon = document.createElement("span");
    bedIcon.setAttribute("class", "glyphicon glyphicon-user");
 
    const button = document.createElement("a");
    button.setAttribute("href", "javascript: void(0)");
    button.setAttribute("id", "personaler-button");
    button.append(bedIcon);
    button.append(" Personaler");
    button.addEventListener("click", menuEntryClick);
 
    const li = document.createElement("li");
    li.appendChild(button);
 
    profileMenu.append(li);
  }
 
  function addModal() {
    const modal = document.createElement("div");
    modal.className = "modal fade";
    modal.id = "personaler-modal";
    modal.setAttribute("tabindex", "-1");
    modal.setAttribute("role", "dialog");
    modal.setAttribute("aria-labelledby", "personaler-modal-label");
    modal.setAttribute("aria-hidden", "true");
    modal.style.zIndex = "5000";
    modal.innerHTML = `<div class="modal-dialog modal-lg" role="document" style="width: 1280px;">
  <div class="modal-content">
    <div class="modal-header">
      <h1 class="modal-title" id="personaler-modal-label">
        <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Personaler
      </h1>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body" style="max-height: calc(100vh - 212px);overflow-y: auto;">
      <ul class="nav nav-tabs" role="tablist" style="margin-bottom: 10px">
        <li role="presentation" class="active">
          <a
            href="#tab-buildings-with-incorrect-personal-count-target"
            aria-controls="tab-buildings-with-incorrect-personal-count-target"
            role="tab"
            data-toggle="tab"
          >
            Gebäude mit falschem Personal (Soll)
          </a>
        </li>
        <li role="presentation">
          <a
            href="#tab-buildings-without-automatic-hiring"
            aria-controls="tab-buildings-without-automatic-hiring"
            role="tab"
            data-toggle="tab"
          >
            Gebäude ohne automatische Werbung
          </a>
        </li>
        <li role="presentation">
          <a href="#tab-settings" aria-controls="tab-settings" role="tab" data-toggle="tab">
            Einstellungen
          </a>
        </li>
      </ul>
      <div>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="tab-buildings-with-incorrect-personal-count-target">
            <div id="buildings-with-incorrect-personal-count-target">
              <div class="row">
                <div class="col-md-12 bg">
                  <div class="loader">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div role="tabpanel" class="tab-pane" id="tab-buildings-without-automatic-hiring">
            <div id="buildings-without-automatic-hiring">
              <div class="row">
                <div class="col-md-12 bg">
                  <div class="loader">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div role="tabpanel" class="tab-pane" id="tab-settings">
            <div id="settings">
              <h2>Personal (Soll)</h2>
              <form id="settings" class="form-horizontal">
                <div class="form-group">
                  <label for="building-type-0" class="col-sm-4 control-label">
                    Feuerwache
                  </label>
                  <div class="col-sm-1">
                    <input type="number" class="form-control" id="building-type-0" min="0" max="400" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="building-type-18" class="col-sm-4 control-label">
                    Feuerwache (Kleinwache)
                  </label>
                  <div class="col-sm-1">
                    <input type="number" class="form-control" id="building-type-18" min="0" max="400" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="building-type-2" class="col-sm-4 control-label">
                    Rettungswache
                  </label>
                  <div class="col-sm-1">
                    <input type="number" class="form-control" id="building-type-2" min="0" max="400" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="building-type-20" class="col-sm-4 control-label">
                    Rettungswache (Kleinwache)
                  </label>
                  <div class="col-sm-1">
                    <input type="number" class="form-control" id="building-type-20" min="0" max="400" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="building-type-6" class="col-sm-4 control-label">
                    Polizeiwache
                  </label>
                  <div class="col-sm-1">
                    <input type="number" class="form-control" id="building-type-6" min="0" max="400" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="building-type-19" class="col-sm-4 control-label">
                    Polizeiwache (Kleinwache)
                  </label>
                  <div class="col-sm-1">
                    <input type="number" class="form-control" id="building-type-19" min="0" max="400" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="building-type-11" class="col-sm-4 control-label">
                    Bereitschaftspolizei
                  </label>
                  <div class="col-sm-1">
                    <input type="number" class="form-control" id="building-type-11" min="0" max="400" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="building-type-13" class="col-sm-4 control-label">
                    Polizeihubschrauberstation
                  </label>
                  <div class="col-sm-1">
                    <input type="number" class="form-control" id="building-type-13" min="0" max="400" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="building-type-12" class="col-sm-4 control-label">
                    Schnelleinsatzgruppe (SEG)
                  </label>
                  <div class="col-sm-1">
                    <input type="number" class="form-control" id="building-type-12" min="0" max="400" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="building-type-9" class="col-sm-4 control-label">
                    THW
                  </label>
                  <div class="col-sm-1">
                    <input type="number" class="form-control" id="building-type-9" min="0" max="400" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-2">
                    <button id="save-settings" type="submit" class="btn btn-success">
                      Speichern
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
    document.body.appendChild(modal);
  }
 
  function menuEntryClick(event) {
    event.preventDefault();
    render();
 
    $("#personaler-modal").modal("show");
  }
 
  function getSettings() {
    return JSON.parse(localStorage.getItem("personalerSettings"));
  }
 
  function fillForm() {
    if (localStorage.getItem("personalerSettings") === null) {
      localStorage.setItem("personalerSettings", JSON.stringify(defaultSettings));
    }
 
    let settings = getSettings();
 
    for (let key in settings) {
      document.getElementById(key).value = settings[key];
    }
  }
 
  function saveSettings(event) {
    event.preventDefault();
 
    const saveButton = document.getElementById("save-settings");
 
    saveButton.disabled = true;
 
    saveButton.innerHTML = `
    <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
    Speichern...`;
 
    const settings = {};
    const inputs = document.querySelectorAll("#settings input");
    for (let i = 0; i < inputs.length; i++) {
      settings[inputs[i].id] = inputs[i].value;
    }
    localStorage.setItem("personalerSettings", JSON.stringify(settings));
 
    setTimeout(() => {
      saveButton.disabled = false;
      saveButton.innerHTML = '<span class="glyphicon glyphicon-ok"></span> Speichern';
    }, 250);
  }
 
  function getPersonalCountTarget(building_type) {
    const settings = getSettings();
    return settings["building-type-" + building_type];
  }
 
  async function getBuildings() {
    if (
      !sessionStorage.aBuildings ||
      JSON.parse(sessionStorage.aBuildings).lastUpdate < new Date().getTime() - 5 * 1000 * 60
    ) {
      const buildings = await fetch("/api/buildings.json").then(response => response.json());
 
      try {
        sessionStorage.setItem("aBuildings", JSON.stringify({ lastUpdate: new Date().getTime(), value: buildings }));
      } catch (e) {
        return buildings;
      }
    }
    return JSON.parse(sessionStorage.aBuildings).value;
  }
 
  async function getBuildingsWithIncorrectPersonalCountTarget() {
    const buildings = await getBuildings();
 
    return buildings.filter(
      building =>
        buildingsWithPersonal.includes(building.building_type) &&
        building.personal_count_target !== getPersonalCountTarget(building.building_type),
    );
  }
 
  async function getBuildingsWithoutAutomaticHiring() {
    const buildings = await getBuildings();
 
    return buildings.filter(
      building => buildingsWithPersonal.includes(building.building_type) && building.hiring_automatic !== true,
    );
  }
 
  async function render() {
    const saveButton = document.getElementById("save-settings");
    saveButton.addEventListener("click", saveSettings);
 
    fillForm();
 
    const buildingsWithIncorrectPersonalCountTarget = await getBuildingsWithIncorrectPersonalCountTarget();
    if (buildingsWithIncorrectPersonalCountTarget.length > 0) {
      const tabPersonalCountTarget = document.getElementById("buildings-with-incorrect-personal-count-target");
      tabPersonalCountTarget.innerHTML = `
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Gebäude</th>
      <th>Ist: Personal (Soll)</th>
      <th>Soll: Personal (Soll)</th>
      </tr>
  </thead>
  <tbody>
    ${buildingsWithIncorrectPersonalCountTarget
      .sort((a, b) => {
        if (a.caption < b.caption) {
          return -1;
        }
        if (a.caption > b.caption) {
          return 1;
        }
        return 0;
      })
      .map(
        building => `
    <tr>
      <td><a href="/buildings/${building.id}">${building.caption}</a></td>
      <td>${building.personal_count_target}</td>
      <td>${getPersonalCountTarget(building.building_type)}</td>
    </tr>
    `,
      )
      .join("")}
  </tbody>
</table>
`;
    } else {
      const tabPersonalCountTarget = document.getElementById("buildings-with-incorrect-personal-count-target");
      tabPersonalCountTarget.innerHTML = `
<div class="row">
  <div class="col-md-12 bg">
    <div class="alert alert-success" role="alert">
      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Alle Gebäude haben das richtige Soll-Personal
    </div>
  </div>
</div>
`;
    }
 
    const tabHiring = document.getElementById("buildings-without-automatic-hiring");
    const buildingsWithoutAutomaticHiring = await getBuildingsWithoutAutomaticHiring();
    if (buildingsWithoutAutomaticHiring.length > 0) {
      tabHiring.innerHTML = `
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Gebäude</th>
      </tr>
  </thead>
  <tbody>
    ${buildingsWithoutAutomaticHiring
      .sort((a, b) => {
        if (a.caption < b.caption) {
          return -1;
        }
        if (a.caption > b.caption) {
          return 1;
        }
        return 0;
      })
      .map(
        building => `
    <tr>
      <td><a href="/buildings/${building.id}">${building.caption}</a></td>
    </tr>
    `,
      )
      .join("")}
  </tbody>
</table>
`;
    } else {
      tabHiring.innerHTML = `
<div class="row">
  <div class="col-md-12 bg">
    <div class="alert alert-success" role="alert">
      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Alle Gebäude haben automatische Werbung aktiviert
    </div>
  </div>
</div>
`;
    }
  }
 
  async function main() {
    addStyle();
    addMenuEntry();
    addModal();
  }
 
  main();
})();