Generischer Submit-Handler (in Arbeit)

ulrich

2021-04-09 71def106dcac230c9f39f5c117ad5e275ac00d5d

Generischer Submit-Handler (in Arbeit)

 www/ui/data/menu/hauptmenue.json

@@ -8,6 +8,11 @@
    },
    "inhalt":  [
      {
        "titel": "Form Test",
        "umenue": false,
        "funktion": "app.test_form"
      },
      {
        "titel": "Media",
        "umenue": false,
        "funktion": "app.media_liste"

 www/ui/data/tpl/form_einstellung.tpl

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

  <input class="entity-element" type="text" id="einstellung-key" placeholder="Key" value="{{key}}" />
  <input class="entity-element" type="text" id="einstellung-value" placeholder="Wert" value="{{value}}" />
    <input name="key" class="entity-element" type="text" id="einstellung-key" placeholder="Key" value="{{key}}" />
    <input name="value" class="entity-element" type="text" id="einstellung-value" placeholder="Wert" value="{{value}}" />
  <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/data/tpl/test_form.tpl

New file
@@ -0,0 +1,10 @@

<form name="myForm">
  <input name="key" class="entity-element" type="text" id="einstellung-key" placeholder="Key" value="{{key}}" />
  <input name="val" class="entity-element" type="text" id="einstellung-value" placeholder="Wert" value="{{value}}" />
  <div class="entity-buttons">
    <button class="button-primary" id="ok-btn" type="submit">Speichern</button>
    <button class="button" id="cancel-btn">Abbrechen</button>
    <button class="button" id="loeschen-btn">L&ouml;schen</button>
  </div>
</form>

 www/ui/js/app.js

@@ -35,6 +35,42 @@
    self.dialog_unten_zeigen();
  };
  
  /*
   * Der StorageHandler verarbeitet Entitaeten mit z.B. 
   * HTTP PUT Ablageort/[Name]
   * und erwartet dabei eine JSON-Struktur, die der Entitaet entspricht. 
   * Beim Ablageort z.B.
   *   private String name;
   *   private String ort;
   *   private String url;
   *   
   * Im HTML-Formular muessen die input-Elemente mit name="..." 
   * so genannt werden wie die Felder der Entitaet. Fuer Ablageort also
   * 
   *   <input name="name" 
   *   <input name="ort" 
   *   <input name="url" 
   * 
   * 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;
      const form = document.querySelector('form');
      form.addEventListener('submit', self.handleSubmit);
    });    
  };

  this.handleSubmit = function(event) {
    event.preventDefault();
    const data = new FormData(event.target);
    const value = Object.fromEntries(data.entries());
    console.log({ value });
    console.log(JSON.stringify(value));
  };
  
  
  this.abspieler_auswahl_fuellen = function() {
    self.http_get('../api/store/Abspieler/', function (responseText) {
      /*
@@ -175,22 +211,6 @@
      });
    }
  };
  
  /*

        {"Medialiste": [{"name":"sound_city.m4v","typ":"video","interpret":"","titelAnzName":"","album":""},{"name":"sub","typ":"folder","interpret":"","titelAnzName":"","album":""},{"name":"Aufnahmen.ods","typ":"file","interpret":"","titelAnzName":"","album":""},{"name":"index.html","typ":"file","interpret":"","titelAnzName":"","album":""},{"name":"A","typ":"folder","interpret":"","titelAnzName":"","album":""},{"name":"sleepers.m4v","typ":"video","interpret":"","titelAnzName":"","album":""}]}


        function Titel(n, p, u, i, t, a) {
          this.katalogUrl = u;
          this.pfad = p;
          this.name = n;
          this.interpret = i;
          this.titelAnzName = t;
          this.album  = a;
        }

   */
  
  this.addSelectedTitel = function() {
    var elem = document.querySelector(".selected");
@@ -388,9 +408,47 @@
    });
  };

  /*
   * 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');
      form.addEventListener('submit', function(event) {
        self.handle_my_submit(event, k.key, '../api/store/Einstellung/', '#einstellung-key');
      });
      
      
      /*
      self.addEvtListener('#ok-btn', 'click', function () {
        var pkey = document.querySelector('#einstellung-key').value;
        pkey = pkey.replace(' ', '').replace(/[\W]+/g, '');
@@ -414,6 +472,7 @@
          });
        }
      });
      */
      self.addEvtListener('#cancel-btn', 'click', function () {
        //document.querySelector(".zentraler-inhalt").innerHTML = '';
        self.prefs_liste();