Dateiverwaltung für die WebBox
ulrich
2021-01-17 b655126533976a98c2852dfb4016afab741982cc
web/ui2/js/app.js
@@ -108,6 +108,8 @@
  this.meldung_mit_timeout = function (meldung, timeout) {
    var s = document.querySelector('.sued');
    s.textContent = meldung;
    s.classList.add('sued-open');
    s.style.height = '1.5em';
    setTimeout(function () {
      s.textContent = 'Bereit.';
      setTimeout(function () {
@@ -235,35 +237,93 @@
    self.removeAllListeners('#cancel-btn');
    self.removeAllListeners('#speichern-btn');
  };
  this.fm_auswahl_marke_entfernen = function() {
    var gew = document.querySelector('.datei-gewaehlt');
    if(gew !== null) {
      gew.classList.remove('datei-gewaehlt');
    }
  };
  this.datei_ansehen_oder_bearbeiten = function() {
    console.log('datei_ansehen_oder_bearbeiten');
    self.meldung_mit_timeout('datei_ansehen_oder_bearbeiten noch nicht implementiert.', 1500);
  };
  /**
   * Hier werden die folgenden Faelle einer Datei-
   * bzw. Ordnerauswahl ausgefuehrt:
   *
   * geklickt, nicht gewaehlt:
   *    auswaehlen, evtl. bestehende andere Auswahl entfernen
   *
   * geklickt, ausgewaehlt:
   *    Datei ansehen oder oeffnen bzw. Ordner oeffnen
   *
   * geklickt mit [Strg], nicht gewahlt:
   *    auswaehlen, bestehende Auswahl beibehalten (Mehrfachauswahl)
   *
   * geklickt mit [Strg], gewaehlt:
   *    Auswahl bei diesem Element entfernen
   *
   * Diese Fälle sind unterteilt in
   *    1. Kachel-Modus
   *    2. Listenmodus
   *
   * @param {type} ev Klick-Event
   * @returns {undefined} nichts
   */
  this.fm_dateiwahl = function(ev) {
    var elem = ev.target;
    if(self.modus == 'kacheln') {
      // Kacheln
      if(elem.classList.contains("icon-folder")) {
        if(/*ev.shiftKey || */ ev.ctrlKey) {
          var par = elem.parentElement;
          par.querySelector('.dateiname').classList.add('datei-gewaehlt');
        } else {
          var ordner = elem.parentElement.querySelector('.dateiname').textContent.trim();
          if(self.pfad.length > 0) {
            self.pfad = self.pfad + '/' + ordner;
        // Ordner
        var par = elem.parentElement;
        var istGewaehlt = par.querySelector('.dateiname').classList.contains('datei-gewaehlt');
        if(istGewaehlt) {
          if(/*ev.shiftKey || */ ev.ctrlKey) {
            // mehrere Ordner sind gewaehlt, diese eine wieder entfernen
            par.querySelector('.dateiname').classList.remove('datei-gewaehlt');
          } else {
            self.pfad = ordner;
            // Ordner oeffnen
            var ordner = elem.parentElement.querySelector('.dateiname').textContent.trim();
            if(self.pfad.length > 0) {
              self.pfad = self.pfad + '/' + ordner;
            } else {
              self.pfad = ordner;
            }
            self.fm_get_list(self.pfad);
          }
          self.fm_get_list(self.pfad);
        } else {
          // Ordner auswaehlen
          if(/*ev.shiftKey || */ ev.ctrlKey) {
            // Mehrfachauswahl
          } else {
            self.fm_auswahl_marke_entfernen();
          }
          par.querySelector('.dateiname').classList.add('datei-gewaehlt');
        }
      } else if(elem.classList.contains('datei')) {
        if(/*ev.shiftKey || */ ev.ctrlKey) {
          // mehrere Dateien sollen gewaehlt werden
        } else {
          var gew = document.querySelector('.datei-gewaehlt');
          if(gew != undefined) {
            gew.classList.remove('datei-gewaehlt');
          }
        }
        // Datei
        var par = elem.parentElement;
        par.querySelector('.dateiname').classList.add('datei-gewaehlt');
        var istGewaehlt = par.querySelector('.dateiname').classList.contains('datei-gewaehlt');
        if(istGewaehlt) {
          if(/*ev.shiftKey || */ ev.ctrlKey) {
            // mehrere Dateien sind gewaehlt, diese eine wieder entfernen
            par.querySelector('.dateiname').classList.remove('datei-gewaehlt');
          } else {
            // Datei zum Bearbeiten oeffnen
            self.datei_ansehen_oder_bearbeiten();
          }
        } else {
          if(/*ev.shiftKey || */ ev.ctrlKey) {
            // mehrere Dateien sollen gewaehlt werden
          } else {
            self.fm_auswahl_marke_entfernen();
          }
          par.querySelector('.dateiname').classList.add('datei-gewaehlt');
        }
      } else {
        //console.log('kein folder oder file...');
      }
@@ -271,35 +331,54 @@
      // Liste
      var pElem = elem.closest('.datei-zeile');
      var dElem = pElem.querySelector('.datei-elem');
      var istGewaehlt = pElem.querySelector('.dateiname').classList.contains('datei-gewaehlt');
      if(dElem.getElementsByTagName("i")[0].classList.contains('icon-doc-text-inv')) {
        // Datei
        if(/*ev.shiftKey || */ ev.ctrlKey) {
          // mehrere Dateien sollen gewaehlt werden
        if(istGewaehlt) {
          if(/*ev.shiftKey || */ ev.ctrlKey) {
            // mehrere Dateien sind gewaehlt, diese eine wieder entfernen
            pElem.querySelector('.dateiname').classList.remove('datei-gewaehlt');
          } else {
            // gewaehlte Datei ohne [Strg] geklickt: ansehen oder oeffnen
            self.datei_ansehen_oder_bearbeiten();
          }
        } else {
          var ti = document.querySelector('.table-info');
          if(ti !== null) {
            ti.classList.remove('table-info');
          if(/*ev.shiftKey || */ ev.ctrlKey) {
            // mehrere Dateien sollen gewaehlt werden, Auswahl ist weiter unten
          } else {
            var ti = document.querySelector('.table-info');
            if(ti !== null) {
              ti.classList.remove('table-info');
            }
            self.fm_auswahl_marke_entfernen();
          }
          var dg = document.querySelector('.datei-gewaehlt');
          if(dg !== null) {
            dg.classList.remove('datei-gewaehlt');
          }
          pElem.classList.add('table-info');
          pElem.querySelector('.dateiname').classList.add('datei-gewaehlt');
        }
        pElem.classList.add('table-info');
        pElem.querySelector('.dateiname').classList.add('datei-gewaehlt');
      } else {
        // Ordner
        if(/*ev.shiftKey || */ ev.ctrlKey) {
          //elem.children[0].classList.add('datei-gewaehlt');
          pElem.querySelector('.dateiname').classList.add('datei-gewaehlt');
        } else {
          var ordner = pElem.querySelector('.dateiname').textContent;
          if(self.pfad.length > 0) {
            self.pfad = self.pfad + '/' + ordner;
        if(istGewaehlt) {
          if(/*ev.shiftKey || */ ev.ctrlKey) {
            // ein gewaehlter Ordner ist mit [Strg] geklickt, Auswahl entfernen
            pElem.querySelector('.dateiname').classList.remove('datei-gewaehlt');
          } else {
            self.pfad = ordner;
            // Ordner oeffnen
            var ordner = pElem.querySelector('.dateiname').textContent;
            if(self.pfad.length > 0) {
              self.pfad = self.pfad + '/' + ordner;
            } else {
              self.pfad = ordner;
            }
            self.fm_get_list(self.pfad);
          }
          self.fm_get_list(self.pfad);
        } else {
          if(/*ev.shiftKey || */ ev.ctrlKey) {
            // nicht gewaehlter Ordner und [Strg]: zu Mehrfachauswahl hinzufuegen
          } else {
            // nicht gewaehlter Ordner ohne [Strg]: andere Auswhalen entfernen und weiter unten Ordner auswaehlen
            self.fm_auswahl_marke_entfernen();
          }
          pElem.querySelector('.dateiname').classList.add('datei-gewaehlt');
        }
      }   
    }
@@ -496,7 +575,7 @@
    console.log('fm_menu_cut');
    self.fm_cut_files();
  };
  this.fm_menu_kopie = function() {
  this.fm_menu_copy = function() {
    console.log('fm_menu_kopie');
    self.fm_copy_files();
  };
@@ -512,10 +591,10 @@
        self.dialog_schliessen();
      });
      document.querySelector('#speichern-btn').addEventListener('click', function() {
        self.fm_menu_datei_speichern(function() {
        //self.fm_menu_datei_speichern(function() {
          self.fm_del_files();
          self.dialog_schliessen();
        });
        //});
      });
    });
    /*