mamweb/korektury/templates/korektury/korekturovatko/__oprava.html

{% load static %}

<div id='prepointer' {# id='op{{o.id}}-pointer' #}
     class='pointer'
     data-highlight='false'
     {# data-opravastatus='{{o.status}}' #}
></div>

<div id='preoprava' {# name='op{{o.id}}' id='op{{o.id}}' #}
     class='oprava'
     {# data-opravastatus='{{o.status}}' #}
     data-opravazobrazit='true'
>
  <div class='corr-tagy'>
    {# {% for tag in o.tagy %} <span style="background:{{ tag.barva }}>{{ tag.text }}<span/> #}
  </div>

  <div class='corr-body'>
    {# {% for k in o.komentare %} {% include "korektury/korekturovatko/__komentar.html" %} {% endfor %} #}
  </div>

  <div class='corr-header'>
    <span class='float-right'>
      <span class='corr-buttons'>
        <button type='button' style='display: none' class='del' title='Smaž opravu'>
          <img src='{% static "korektury/imgs/delete.png"%}' alt='🗑️'/>
        </button>
        <button type='button' class='action' value='k_oprave' title='Označ jako neopravené'>
          <img src='{% static "korektury/imgs/undo.png"%}' alt='↪'/>
        </button>
        <button type='button' class='action' value='opraveno' title='Označ jako opravené'>
          <img src='{% static "korektury/imgs/check.png"%}' alt='✔️'/>
        </button>
        <button type='button' class='action' value='neni_chyba' title='Označ, že se nebude měnit'>
          <img src='{% static "korektury/imgs/cross.png" %}' alt='❌'/>
        </button>
        <button type='button' class='action' value='k_zaneseni' title='Označ jako připraveno k zanesení'>
          <img src='{% static "korektury/imgs/tex.png" %}' alt='TeX'/>
        </button>

        <a href='{% url "admin:korektury_oprava_change" -1 %}' class='edit' title='Uprav korekturu jako takovou.' style="text-decoration: none;"> {# FIXME Udělat z toho tlačítko? #}
          <img src='{% static "korektury/imgs/edit.png"%}' alt='✏️' style="opacity: 0.5;"/> {# FIXME Odlišit jinak než pomocí opacity? #}
        </a>
        <button type='button' class='komentovat_disabled' title='Korekturu nelze komentovat, protože už je uzavřená' disabled=''>
          <img src='{% static "korektury/imgs/comment-gr.png" %}' alt='💭'/>
				</button>
        <button type='button' class='komentovat' title='Komentovat'>
          <img src='{% static "korektury/imgs/comment.png" %}' alt='💭'/>
				</button>
      </span>

      <button type='button' class='toggle-vis' title='Skrýt/Zobrazit'>
        <img class='toggle-button' src='{% static "korektury/imgs/hide.png" %}' alt='⬆'/>
      </button>

			</span>
  </div>
</div>

<script>
  const preoprava = document.getElementById('preoprava');
  const prepointer = document.getElementById('prepointer');
  const opravy = {};

  class Oprava {
    static update_or_create(oprava_data) {
      const id = oprava_data['id'];
      if (id in opravy) return opravy[id].update(oprava_data);
      else return new Oprava(oprava_data);
    }

    #komentare; #tagy;
    htmlElement; pointer;
    id; x; y; img_id; status; zobrazit = true; {# oprava_data; #}
    tagy;

    constructor(oprava_data) {
      this.htmlElement = preoprava.cloneNode(true);
      this.pointer = prepointer.cloneNode(true);
      this.#komentare = this.htmlElement.getElementsByClassName('corr-body')[0];
      this.#tagy = this.htmlElement.getElementsByClassName('corr-tagy')[0];

      this.id = oprava_data['id'];
      this.htmlElement.id = 'op' + this.id;
      this.pointer.id = 'op' + this.id + '-pointer';

      this.x = oprava_data['x'];
      this.y = oprava_data['y'];
      this.img_id = oprava_data['strana'];

      this.update(oprava_data);

      this.htmlElement.getElementsByClassName('toggle-vis')[0].addEventListener('click', _ => this.#toggle_visibility());
      for (const button of this.htmlElement.getElementsByClassName('action'))
        button.addEventListener('click', async event => this.#zmenStavKorektury(event));
      this.htmlElement.getElementsByClassName('komentovat')[0].addEventListener('click', _ => this.#comment())
      this.htmlElement.getElementsByClassName('del')[0].addEventListener('click', _ => this.#delete());
      const odkaz_editace = this.htmlElement.getElementsByClassName('edit')[0];
      odkaz_editace.href = odkaz_editace.href.replace("-1", this.id);
      odkaz_editace.onclick = ev => { if (!confirm("Editace korektury je velmi pokročilá featura umožňující přesouvat korekturu nebo přidávat informované orgy, opravdu chceš pokračovat do adminu?")) ev.preventDefault(); };

      this.htmlElement.addEventListener('mouseover', _ => this.pointer.dataset.highlight = 'true');
      this.htmlElement.addEventListener('mouseout', _ => this.pointer.dataset.highlight = 'false');

      opravy[this.id] = this;
      if (this.img_id in comments) comments[this.img_id].push(this); else alert("Někdo korekturoval stranu, která neexistuje. Dejte vědět webařům :)");
    }

    update(oprava_data) {
      {# this.oprava_data = oprava_data; #}
      this.set_status(oprava_data['status']);
      this.#tagy.innerHTML = "";
      this.tagy = new Set();
      for (const tag of oprava_data["tagy"]) {
        this.tagy.add(tag["id"]);
        const span = document.createElement("span");
        span.innerHTML = tag["nazev"];
        span.classList.add("korektury-tag");
        span.style.backgroundColor = tag["barva"];
        this.#tagy.appendChild(span);
      }
      return this;
    };

    set_status(status) {
      this.status = status;
      this.htmlElement.dataset.opravastatus=status;
      this.pointer.dataset.opravastatus=status;
    };

    add_komentar_htmlElement(htmlElement) { this.#komentare.appendChild(htmlElement); }




    // hide or show text of correction
    toggle_visibility() {
      this.zobrazit = !this.zobrazit;
      this.htmlElement.dataset.opravazobrazit = String(this.zobrazit);
    }
    #toggle_visibility(){
      this.toggle_visibility();
      place_comments()
    }

    // show comment form, when 'comment' button pressed
    #comment() { commform.show(this.img_id, this.x, this.y, "", this.id); }

    #zmenStavKorektury(event) {
      const data = new FormData(CSRF_FORM);
      data.append('id', this.id);
      data.append('action', event.target.value);

      fetch('{% url "korektury_api_oprava_stav" %}', {method: 'POST', body: data})
        .then(response => {
          if (!response.ok) {alert('Něco se nepovedlo:' + response.statusText);}
          else response.json().then(data => {
            this.set_status(data['status']);
            updatuj_pocty_stavu();
          });
        })
        .catch(error => {alert('Něco se nepovedlo:' + error);});
    }

    #delete() {
      if (confirm('Opravdu smazat korekturu?')) {
        const data = new FormData(CSRF_FORM);
        data.append('oprava_id', this.id);
        fetch('{% url "korektury_api_oprava_smaz" %}', {method: 'POST', body: data})
          .then(response => {
            if (!response.ok) {alert('Něco se nepovedlo:' + response.statusText);}
            this.#smaz_pouze_na_strance()
            updatuj_pocty_stavu();
            updatuj_pocty_zasluh();
            place_comments();
          })
          .catch(error => {alert('Něco se nepovedlo:' + error);});
      }
    }

    #smaz_pouze_na_strance() {
      comments[this.img_id].splice(comments[this.img_id].indexOf(this), 1);
      delete opravy[this.id];
      for (const komentar of Object.values(komentare)) if (komentar.oprava === this) komentar.smaz_pouze_na_strance();
      this.htmlElement.remove();
      this.pointer.remove();
    }
  }
</script>