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-body'>
    {# {% for k in o.komentare %} {% include "korektury/korekturovatko/__komentar.html" %} <hr> {% 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>

        <button type='button' class='notcomment' 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='comment' 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) opravy[id].update(oprava_data);
      else new Oprava(oprava_data);
    }

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

    constructor(oprava_data) {
      this.htmlElement = preoprava.cloneNode(true);
      this.pointer = prepointer.cloneNode(true);
      this.#komentare = this.htmlElement.getElementsByClassName('corr-body')[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('comment')[0].addEventListener('click', _ => this.#comment())
      this.htmlElement.getElementsByClassName('del')[0].addEventListener('click', _ => this.#delete());

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

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

    add_komentar_htmlElement(htmlElement) {
      this.#komentare.appendChild(htmlElement);
      this.#komentare.appendChild(document.createElement('hr'));
    }




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

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

    #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']));
        })
        .catch(error => {alert('Něco se nepovedlo:' + error);});
    }

    #delete() {
      if (confirm('Opravdu smazat korekturu?')) {
        throw {name : 'NotImplementedError', message: '(Webaři jsou) too lazy to implement'};
      }
    }
  }
</script>