JavaScript Form-Behandlung vereinheitlicht

ulrich

2021-04-09 48f8f945d17d06be1777c4491539244f712250ee

JavaScript Form-Behandlung vereinheitlicht

 www/ui/data/tpl/form_ablageort.tpl

@@ -1,14 +1,15 @@
    <div class="entity-formular">
      Katalog
      
      <input class="entity-element" type="text" id="ablageort-name" placeholder="Name" value="{{name}}" />
      <input class="entity-element" type="text" id="ablageort-ort" placeholder="Pfad" value="{{ort}}" />
      <input class="entity-element" type="text" id="ablageort-url" placeholder="URL" value="{{url}}" />
      <div class="entity-buttons">
        <button class="button-primary" id="ok-btn">Speichern</button>
        <button class="button" id="cancel-btn">Abbrechen</button>
        <button class="button" id="loeschen-btn">L&ouml;schen</button>
      </div>
      
<form>
  <div class="entity-formular">
    Katalog

    <input name="name" class="entity-element" type="text" id="ablageort-name" placeholder="Name" value="{{name}}" />
    <input name="ort" class="entity-element" type="text" id="ablageort-ort" placeholder="Pfad" value="{{ort}}" />
    <input name="url" class="entity-element" type="text" id="ablageort-url" placeholder="URL" value="{{url}}" />
    <div class="entity-buttons">
      <button type="submit" class="button-primary" id="ok-btn">Speichern</button>
      <button class="button" id="cancel-btn">Abbrechen</button>
      <button class="button" id="loeschen-btn">L&ouml;schen</button>
    </div>

  </div>
</form>

 www/ui/data/tpl/form_abspieler.tpl

@@ -1,12 +1,14 @@
<div class="entity-formular">
  Abspieler
<form>
  <div class="entity-formular">
    Abspieler

  <input class="entity-element" type="text" id="abspieler-name" placeholder="Name" value="{{name}}" />
  <input class="entity-element" type="text" id="abspieler-url" placeholder="URL" value="{{url}}" />
  <div class="entity-buttons">
    <button class="button-primary" id="ok-btn">Speichern</button>
    <button class="button" id="cancel-btn">Abbrechen</button>
    <button class="button" id="loeschen-btn">L&ouml;schen</button>
    <input name="name" class="entity-element" type="text" id="abspieler-name" placeholder="Name" value="{{name}}" />
    <input name="url" class="entity-element" type="text" id="abspieler-url" placeholder="URL" value="{{url}}" />
    <div class="entity-buttons">
      <button type="submit" class="button-primary" id="ok-btn">Speichern</button>
      <button class="button" id="cancel-btn">Abbrechen</button>
      <button class="button" id="loeschen-btn">L&ouml;schen</button>
    </div>

  </div>

</div>
</form>

 www/ui/data/tpl/form_abspielliste.tpl

@@ -1,11 +1,13 @@
<form>
<div class="entity-formular">
  Abspielliste

  <input class="entity-element" type="text" id="abspielliste-name" placeholder="Name" value="{{name}}" />
  <input name="name" class="entity-element" type="text" id="abspielliste-name" placeholder="Name" value="{{name}}" />
  <div class="entity-buttons">
    <button class="button-primary" id="ok-btn">Speichern</button>
    <button type="submit" class="button-primary" id="ok-btn">Speichern</button>
    <button class="button" id="cancel-btn">Abbrechen</button>
    <button class="button" id="loeschen-btn">L&ouml;schen</button>
  </div>

</div>
</form>

 www/ui/js/app.js

@@ -54,6 +54,7 @@
   * Auf diese Weise kann eine generische Funktion die Formulardaten 
   * an den REST-Endpunkt des Servers uebermitteln.
   */  
  /*
  this.test_form = function() {
    self.vorlage_laden_und_fuellen("data/tpl/test_form.tpl", "", function (html) {
      document.querySelector(".zentraler-inhalt").innerHTML = html;
@@ -69,7 +70,7 @@
    console.log({ value });
    console.log(JSON.stringify(value));
  };
  
  */
  
  this.abspieler_auswahl_fuellen = function() {
    self.http_get('../api/store/Abspieler/', function (responseText) {
@@ -280,7 +281,8 @@
            self.abspieler_form(abspieler);
          });
        });
        self.addEvtListener('#neu-btn', 'click', function(event) {
        //self.addEvtListener('#neu-btn', 'click', function(event) {
        self.addEvtListener('#top-neu-btn', 'click', function(event) {
          eval("self.abspieler_form" + "(this)");
        });           
      });
@@ -310,6 +312,15 @@
  this.abspielliste_form = function(al) {
    self.vorlage_laden_und_fuellen("data/tpl/form_abspielliste.tpl", al, function (html) {
      document.querySelector(".zentraler-inhalt").innerHTML = html;
      const form = document.querySelector('form');      
      form.addEventListener('submit', function(event) {
        self.handle_submit(event, al.name, '../api/store/Abspielliste/', '#abspielliste-name', function() {
          self.abspielliste_liste();
        });
      });
      
      
      /*
      self.addEvtListener('#ok-btn', 'click', function () {
        var alname = document.querySelector('#abspielliste-name').value;
        alname = alname.replace(' ', '').replace(/[\W]+/g, '');
@@ -334,10 +345,22 @@
          });
        }
      });
      */
     
      self.addEvtListener('#cancel-btn', 'click', function () {
        //document.querySelector(".zentraler-inhalt").innerHTML = '';
        self.abspielliste_liste();
      });
      
      self.addEvtListener('#loeschen-btn', 'click', function(event) {
        event.preventDefault();
        self.handle_del_btn('#abspielliste-name', '../api/store/Abspielliste/', function() {
          self.abspielliste_auswahl_fuellen();
          self.abspielliste_liste();
        });
      });
      
      /*
      self.addEvtListener('#loeschen-btn', 'click', function() {
        var alname = document.querySelector('#abspielliste-name').value;
        var dlgdata = {"del-elem": alname};
@@ -354,12 +377,21 @@
          });
        });
      });
      */
    });
  };
  
  this.abspieler_form = function(pl) {
    self.vorlage_laden_und_fuellen("data/tpl/form_abspieler.tpl", pl, function (html) {
      document.querySelector(".zentraler-inhalt").innerHTML = html;
      const form = document.querySelector('form');      
      form.addEventListener('submit', function(event) {
        self.handle_submit(event, pl.key, '../api/store/Abspieler/', '#abspieler-name', function() {
          self.abspieler_liste();
        });
      });
      
      /*
      self.addEvtListener('#ok-btn', 'click', function () {
        var plname = document.querySelector('#abspieler-name').value;
        plname = plname.replace(' ', '').replace(/[\W]+/g, '');
@@ -385,10 +417,23 @@
          });
        }
      });
      */
      
      self.addEvtListener('#cancel-btn', 'click', function () {
        //document.querySelector(".zentraler-inhalt").innerHTML = '';
        self.abspieler_liste();
      });
      
      self.addEvtListener('#loeschen-btn', 'click', function(event) {
        event.preventDefault();
        self.handle_del_btn('#abspieler-name', '../api/store/Abspieler/', function() {
          self.abspieler_auswahl_fuellen();
          self.abspieler_liste();
        });
      });
      
      
      /*
      self.addEvtListener('#loeschen-btn', 'click', function() {
        var plname = document.querySelector('#abspieler-name').value;
        var dlgdata = {"del-elem": plname};
@@ -405,46 +450,18 @@
          });
        });
      });
      */
    });
  };

  /*
   * existingKey: wenn die Entitaet existiert und geandert werden soll
   *                 leer, wenn neue Entitaet 
   */
  this.handle_my_submit = function(event, existingKey, putUrl, keySelector) {
    event.preventDefault();
    const data = new FormData(event.target);
    const value = Object.fromEntries(data.entries());
    console.log({ value });
    console.log(JSON.stringify(value));
    var daten = JSON.stringify(value);
    var formkey = document.querySelector(keySelector).value;
    formkey = formkey.replace(' ', '').replace(/[\W]+/g, '');

    if(typeof existingKey === "undefined" ||  existingKey.length < 1) {
      // neu
      self.http_put(putUrl + formkey, daten, function (responseText) {
        // hier die Antwort verarbeiten
        self.prefs_liste();
      });
    } else {
      // aendern
      self.http_put(putUrl + existingKey, daten, function (responseText) {
        // hier die Antwort verarbeiten
        self.prefs_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;
      const form = document.querySelector('form');
      const form = document.querySelector('form');      
      form.addEventListener('submit', function(event) {
        self.handle_my_submit(event, k.key, '../api/store/Einstellung/', '#einstellung-key');
        self.handle_submit(event, k.key, '../api/store/Einstellung/', '#einstellung-key', function() {
          self.prefs_liste();
        });
      });
      
      
@@ -473,10 +490,20 @@
        }
      });
      */
      self.addEvtListener('#cancel-btn', 'click', function () {
      self.addEvtListener('#cancel-btn', 'click', function (event) {
        //document.querySelector(".zentraler-inhalt").innerHTML = '';
        event.preventDefault();
        self.prefs_liste();
      });
      
      self.addEvtListener('#loeschen-btn', 'click', function(event) {
        event.preventDefault();
        self.handle_del_btn('#einstellung-key', '../api/store/Einstellung/', function() {
          self.prefs_liste();
        });
      });
      
      /*
      self.addEvtListener('#loeschen-btn', 'click', function() {
        var pkey = document.querySelector('#einstellung-key').value;
        var dlgdata = {"del-elem": pkey};
@@ -492,6 +519,7 @@
          });
        });
      });
      */
    });
  };

@@ -506,6 +534,14 @@
  this.ablageort_form = function(ort) {
    self.vorlage_laden_und_fuellen("data/tpl/form_ablageort.tpl", ort, function (html) {
      document.querySelector(".zentraler-inhalt").innerHTML = html;
      const form = document.querySelector('form');      
      form.addEventListener('submit', function(event) {
        self.handle_submit(event, ort.name, '../api/store/Ablageort/', '#ablageort-name', function() {
          self.ablageort_liste();
        });
      });
      
      /*
      self.addEvtListener('#ok-btn', 'click', function () {
        var aName = document.querySelector('#ablageort-name').value;
        aName = aName.replace(' ', '').replace(/[\W]+/g, '');
@@ -530,10 +566,21 @@
          });
        }
      });
      */
      self.addEvtListener('#cancel-btn', 'click', function () {
        //document.querySelector(".zentraler-inhalt").innerHTML = '';
        self.ablageort_liste();
      });
      
      self.addEvtListener('#loeschen-btn', 'click', function(event) {
        event.preventDefault();
        self.handle_del_btn('#ablageort-name', '../api/store/Ablageort/', function() {
          self.ablageort_liste();
        });
      });
      
      
      /*
      self.addEvtListener('#loeschen-btn', 'click', function() {
        var aoname = document.querySelector('#ablageort-name').value;
        var dlgdata = {"del-elem": aoname};
@@ -549,8 +596,72 @@
          });
        });
      });
      */
    });
  };
  
  /* ------------------------------- Helfer ----------------------- */
  
  /*
   * existingKey: wenn die Entitaet existiert und geandert werden soll
   *                 leer, wenn neue Entitaet 
   */
  this.handle_submit = function(event, existingKey, putUrl, keySelector, cb) {
    event.preventDefault();
    const data = new FormData(event.target);
    const value = Object.fromEntries(data.entries());
    console.log({ value });
    console.log(JSON.stringify(value));
    var daten = JSON.stringify(value);
    var formkey = document.querySelector(keySelector).value;
    formkey = formkey.replace(' ', '').replace(/[\W]+/g, '');

    if(typeof existingKey === "undefined" ||  existingKey.length < 1) {
      // neu
      self.http_put(putUrl + formkey, daten, function (responseText) {
        // hier die Antwort verarbeiten
        //self.prefs_liste();
        if(typeof(cb) !== 'function') {
          // ..
        } else {
          cb();
        }
      });
    } else {
      // aendern
      self.http_put(putUrl + existingKey, daten, function (responseText) {
        // hier die Antwort verarbeiten
        // self.prefs_liste();
        if(typeof(cb) !== 'function') {
          // ..
        } else {
          cb();
        }
      });
    }
  };
  
  this.handle_del_btn = function(selectorKey, delUrl, cb) {
    var pkey = document.querySelector(selectorKey).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(event) {
        console.log("loeschen geklickt.");
        self.http_delete(delUrl + pkey, '', function (responseText) {
          // hier die Antwort verarbeiten
          self.dialog_schliessen();
          //document.querySelector(".zentraler-inhalt").innerHTML = '';
          //self.prefs_liste();
          if(typeof(cb) !== 'function') {
            // ..
          } else {
            cb();
          }
        });
      });
    });    
  };  

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