Piktogramme und Dropdown

ulrich

2021-04-07 b90d6705d78a7ad60a1e0419eb27ab20927d3fdd

 www/ui/js/app.js

@@ -10,6 +10,58 @@
  var self = this;
  var appMenu;
  var cache; // mustache templates
  var ortPfad;
  var mediaPfad;
  
  // auf der obersten Ebene werden die Kataloge angezeigt,
  // darunter der Inhalt des aktuellen Pfades
  this.media_liste = function() {
    if(self.ortPfad === '/') {
      // Kataloge listen
      self.http_get('../api/store/Ablageort/', function (responseText) {
        self.vorlage_laden_und_fuellen("data/tpl/katalog_root_liste.tpl", JSON.parse(responseText), function (html) {
          document.querySelector(".zentraler-inhalt").innerHTML = html;
          self.addEvtListener('.entity-eintrag', 'click', function (event) {
            var t = event.target;
            self.http_get('../api/store/Ablageort/' + t.textContent, function(responseText) {
              var ablageort = JSON.parse(responseText);
              self.ortPfad = ablageort.url;
              self.media_liste();
            });
          });
        });
      });
    } else {
      // Pfad listen
      self.http_get('..' + self.ortPfad + '/' + self.mediaPfad + '/', function(responseText) {
        //console.log(responseText);
        self.vorlage_laden_und_fuellen("data/tpl/katalog_inhalt_liste.tpl", JSON.parse(responseText), function (html) {
          document.querySelector(".zentraler-inhalt").innerHTML = html;
          self.addEvtListener('.entity-eintrag', 'click', function (event) {
            var t = event.target;
            //console.log(t.textContent);
            if(t.classList.contains("entity-typ-folder")) {
              self.mediaPfad = self.mediaPfad + '/' + t.textContent;
              self.media_liste();
            } else {
              console.log("Media-Inhalt auswaehlen oder abspielen");
            }
          });
          self.addEvtListener('#zurueck-btn', 'click', function (event) {
            if(self.mediaPfad === '/') {
              self.ortPfad = '/';              
            } else {
              var pos = self.mediaPfad.lastIndexOf('/');
              var parent = self.mediaPfad.substring(0, pos);
              //console.log("Parent: " + parent);
              self.mediaPfad = parent;
            }
            self.media_liste();
          });        
        });
      });
    }
  };

  this.ablageort_liste = function() {
    self.http_get('../api/store/Ablageort/', function (responseText) {
@@ -18,7 +70,7 @@
        self.addEvtListener('.entity-eintrag', 'click', function (event) {
          var t = event.target;
          self.http_get('../api/store/Ablageort/' + t.textContent, function(responseText){
            ablageort = JSON.parse(responseText);
            var ablageort = JSON.parse(responseText);
            self.ablageort_form(ablageort);
          });
        });
@@ -128,11 +180,23 @@
      xhr.send(data);
    }
  };
  
  /* Unterer Einblendbereich */
  
  self.dialog_unten_zeigen = function() {
    self.vorlage_laden_und_fuellen("data/tpl/ctrl.tpl", "", function (html) {
      var dlg = document.querySelector(".dialog-unten");
      dlg.style.height = '4.5em';
      dlg.innerHTML = html;
    });
  };

  /* ab hier aus App-Vorlage */

  this.init = function () {
    //self.vorlagen = new Vorlagen();
    self.mediaPfad = '/';
    self.ortPfad = '/';
    self.cache = new Array();
    self.appMenu = new AppMenu();
    self.appMenu.init(
@@ -146,9 +210,13 @@
      self.menue_umschalten();
    });
    
    self.addEvtListener('#mi-katalog', 'click', self.media_liste);
    self.addEvtListener('#mi-orte', 'click', self.ablageort_liste);
    //self.addEvtListener('#mi-list', 'click', self.media_liste);    
    
    self.fusszeile_umschalten();
    self.seitenleiste_umschalten();

    self.dialog_unten_zeigen();
  };

  this.menue_umschalten = function () {
@@ -225,7 +293,7 @@
      }, 500);
    }, timeout);
  };

  
  /* Dialog-Funktionen */

  /*