Abspieler

ulrich

2021-04-07 3d4bca22eef45eb1f4f8454ac8fecb35b5301e95

 www/ui/js/app.js

@@ -4,7 +4,15 @@
  this.url = u;
}

function Einstellung(k, v) {
  this.key = k;
  this.value = v;
}

function Abspieler(n, u) {
  this.name = n;
  this.url = u;
}

function Mediazentrale() {
  var self = this;
@@ -25,7 +33,6 @@
            var t = event.target;
            self.http_get('../api/store/Ablageort/' + t.textContent, function(responseText) {
              var ablageort = JSON.parse(responseText);
              console.log(ablageort.url);
              self.ortPfad = ablageort.url;
              self.media_liste();
            });
@@ -46,6 +53,8 @@
              self.media_liste();
            } else {
              console.log("Media-Inhalt auswaehlen oder abspielen");
              self.removeClassMulti('selected');
              t.classList.add('selected');
            }
          });
          self.addEvtListener('#zurueck-btn', 'click', function (event) {
@@ -63,6 +72,8 @@
      });
    }
  };
  
  /* Die folgenden '_liste' Funktionen koennen noch vereinheitlicht werden */

  this.ablageort_liste = function() {
    self.http_get('../api/store/Ablageort/', function (responseText) {
@@ -78,6 +89,138 @@
        self.addEvtListener('#neu-btn', 'click', function (event) {
          eval("self.ablageort_form" + "(this)");
        });        
      });
    });
  };

  this.prefs_liste = function() {
    self.http_get('../api/store/Einstellung/', function (responseText) {
      self.vorlage_laden_und_fuellen("data/tpl/einstellung_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/Einstellung/' + t.textContent, function(responseText){
            var einstellung = JSON.parse(responseText);
            self.prefs_form(einstellung);
          });
        });
        self.addEvtListener('#neu-btn', 'click', function (event) {
          eval("self.prefs_form" + "(this)");
        });        
      });
    });
  };

  this.abspieler_liste = function() {
    self.http_get('../api/store/Abspieler/', function (responseText) {
      self.vorlage_laden_und_fuellen("data/tpl/abspieler_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/Abspieler/' + t.textContent, function(responseText){
            var abspieler = JSON.parse(responseText);
            self.abspieler_form(abspieler);
          });
        });
        self.addEvtListener('#neu-btn', 'click', function (event) {
          eval("self.abspieler_form" + "(this)");
        });        
      });
    });
  };

  /* Die folgenden '_form' Funktionen koennen noch vereinheitlicht werden */

  this.abspieler_form = function(pl) {
    self.vorlage_laden_und_fuellen("data/tpl/form_abspieler.tpl", pl, function (html) {
      document.querySelector(".zentraler-inhalt").innerHTML = html;
      self.addEvtListener('#ok-btn', 'click', function () {
        var plname = document.querySelector('#abspieler-name').value;
        plname = plname.replace(' ', '').replace(/[\W]+/g, '');
        var abspieler = new Abspieler(
          plname,
          document.querySelector('#abspieler-url').value
        );
        var daten = JSON.stringify(abspieler);        
        if(typeof pl === "undefined" || pl.key !== plname) {
          // neu
          self.http_post('../api/store/Abspieler', daten, function (responseText) {
            // hier die Antwort verarbeiten
          });
        } else {
          // aendern
          self.http_put('../api/store/Abspieler', daten, function (responseText) {
            // hier die Antwort verarbeiten
          });
        }
        //document.querySelector(".zentraler-inhalt").innerHTML = '';
        self.abspieler_liste();
      });
      self.addEvtListener('#cancel-btn', 'click', function () {
        //document.querySelector(".zentraler-inhalt").innerHTML = '';
        self.abspieler_liste();
      });
      self.addEvtListener('#loeschen-btn', 'click', function() {
        var plname = document.querySelector('#abspieler-name').value;
        var dlgdata = {"del-elem": plname};
        self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.tpl', dlgdata, function() {
          self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen);
          self.addEvtListener('#ja-btn', 'click', function() {
            self.http_delete('../api/store/Abspieler/' + plname, '', function (responseText) {
              // hier die Antwort verarbeiten
              self.dialog_schliessen();
              //document.querySelector(".zentraler-inhalt").innerHTML = '';
              self.abspieler_liste();
            });
          });
        });
      });
    });
  };

  this.prefs_form = function(k) {
    self.vorlage_laden_und_fuellen("data/tpl/form_einstellung.tpl", k, function (html) {
      document.querySelector(".zentraler-inhalt").innerHTML = html;
      self.addEvtListener('#ok-btn', 'click', function () {
        var pkey = document.querySelector('#einstellung-key').value;
        pkey = pkey.replace(' ', '').replace(/[\W]+/g, '');
        var pref = new Einstellung(
          pkey,
          document.querySelector('#einstellung-value').value
        );
        var daten = JSON.stringify(pref);        
        if(typeof k === "undefined" || k.key !== pkey) {
          // neu
          self.http_post('../api/store/Einstellung', daten, function (responseText) {
            // hier die Antwort verarbeiten
          });
        } else {
          // aendern
          self.http_put('../api/store/Einstellung', daten, function (responseText) {
            // hier die Antwort verarbeiten
          });
        }
        //document.querySelector(".zentraler-inhalt").innerHTML = '';
        self.prefs_liste();
      });
      self.addEvtListener('#cancel-btn', 'click', function () {
        //document.querySelector(".zentraler-inhalt").innerHTML = '';
        self.prefs_liste();
      });
      self.addEvtListener('#loeschen-btn', 'click', function() {
        var pkey = document.querySelector('#einstellung-key').value;
        var dlgdata = {"del-elem": pkey};
        self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.tpl', dlgdata, function() {
          self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen);
          self.addEvtListener('#ja-btn', 'click', function() {
            self.http_delete('../api/store/Einstellung/' + pkey, '', function (responseText) {
              // hier die Antwort verarbeiten
              self.dialog_schliessen();
              //document.querySelector(".zentraler-inhalt").innerHTML = '';
              self.prefs_liste();
            });
          });
        });
      });
    });
  };
@@ -138,6 +281,15 @@
    });
  };

  this.addEvtListener = function(selector, eventName, func) {
    document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
  };
  
  this.removeClassMulti = function(selector) {
    document.querySelectorAll('.' + selector).forEach(elem => { elem.classList.remove(selector); });
  };

  /*
  this.addEvtListener = function (selector, eventName, func) {
    var elems = document.querySelectorAll(selector);
    var index;
@@ -145,6 +297,9 @@
      elems[index].addEventListener(eventName, func);
    }
  };
  */
  
  // document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });

  /* asynchroner HTTP Client */
  
@@ -181,6 +336,16 @@
      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 */

@@ -201,9 +366,15 @@
      self.menue_umschalten();
    });
    
    self.addEvtListener('#mi-katalog', 'click', self.media_liste);
    self.addEvtListener('#mi-orte', 'click', self.ablageort_liste);
    self.addEvtListener('#mi-prefs', 'click', self.prefs_liste);
    self.addEvtListener('#mi-player', 'click', self.abspieler_liste);
    //self.addEvtListener('#mi-list', 'click', self.media_liste);    
    
    self.fusszeile_umschalten();
    self.seitenleiste_umschalten();

    self.dialog_unten_zeigen();
  };

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

  
  /* Dialog-Funktionen */

  /*