Fehler bei Abspielliste-Formular bei Cancel behoben, Abspielliste leeren, U...

ulrich

2021-04-11 095119ef9193968d088911688d18e03abc6d3b3a

Fehler bei Abspielliste-Formular bei Cancel behoben, Abspielliste leeren, UI-Erweiterungen fuer Auswahl aus Katalog

 src/de/uhilger/mediaz/api/AbstractHandler.java

@@ -17,6 +17,7 @@
 */
package de.uhilger.mediaz.api;

import com.sun.net.httpserver.Headers;
import com.sun.net.httpserver.HttpExchange;
import com.sun.net.httpserver.HttpHandler;
import java.io.BufferedReader;
@@ -90,6 +91,8 @@
        break;
    }
    logger.fine(response);
    Headers headers = e.getResponseHeaders();
    headers.add("Content-Type", "application/json");
    e.sendResponseHeaders(getReturnCode(), response.length());
    OutputStream os = e.getResponseBody();
    os.write(response.getBytes());

 src/de/uhilger/mediaz/api/ListFileHandler.java

@@ -17,6 +17,7 @@
 */
package de.uhilger.mediaz.api;

import com.sun.net.httpserver.Headers;
import com.sun.net.httpserver.HttpExchange;
import de.uhilger.mediaz.App;
import de.uhilger.mediaz.Server;
@@ -109,6 +110,8 @@
      //Collections.sort(list);
      String json = jsonWithCustomType(list, "Medialiste");
      logger.fine(json);
      Headers headers = e.getResponseHeaders();
      headers.add("Content-Type", "application/json");
      e.sendResponseHeaders(200, json.length());
      OutputStream os = e.getResponseBody();
      os.write(json.getBytes());

 src/de/uhilger/mediaz/api/ListHandler.java

@@ -35,6 +35,7 @@
 * PUT /mz/api/alist/[pl-name]          den Titel im Body anfuegen an die Liste [pl-name]
 * PUT /mz/api/alist/[pl-name]/[nr]     an der Position nr der Liste [pl-name] den Titel im Body einfuegen
 * DELETE /mz/api/alist/[pl-name]/[nr]  den Titel an der Position [nr] aus der Liste [pl-name] entfernen  
 * DELETE /mz/api/alist/[pl-name]/alle  alle Titel aus der Liste [pl-name] entfernen  
 *
 * @author Ulrich Hilger
 * @version 1, 8.4.2021
@@ -42,6 +43,8 @@
public class ListHandler extends AbstractHandler {
  
  private static final Logger logger = Logger.getLogger(ListHandler.class.getName());
  
  public static final String ALLE_TITEL = "alle";


  @Override
@@ -101,12 +104,16 @@
    String path = e.getRequestURI().toString();
    String[] elems = path.split(Server.SLASH);
    String listName = elems[elems.length - 2];
    
    FileStorage fs = new FileStorage(App.getInitParameter(App.getRs(App.RB_AP_CONF)));
    Entity entity = fs.read(Abspielliste.class.getSimpleName(), listName);
    if(entity instanceof Abspielliste) {
      Abspielliste liste = (Abspielliste) entity;
      String titelStr = elems[elems.length-1];
      if(titelStr.equalsIgnoreCase(ALLE_TITEL)) {
        liste.getTitel().clear();
      } else {
      liste.getTitel().remove(Integer.parseInt(elems[elems.length-1]));
      }
      fs.write(liste, true);
      return true;
    } else {

 www/ui/data/tpl/ctrl.txt

@@ -15,13 +15,14 @@
      </select>  
    </div>
    <div class="pl-sel">
      <select class="u-full-width ctrl-item ctrl-select" id="playlist" title="Playliste">
      <select class="u-full-width ctrl-item ctrl-select" id="playlist" title="Abspielliste">
        <option value="Pl1">Liste 1</option>
        <option value="Pl2">Liste 2</option>
        <option value="Pl3">Liste 3</option>
      </select>  
    </div>
    <button class="ctrl-btn ctrl-item" id="dazu-btn" title="der Playlist hinzuf&uuml;gen"><i class="icon-forward"></i></button>
    <button class="ctrl-btn ctrl-item" id="weg-btn" title="aus Playlist entfernen"><i class="icon-trash-empty"></i></button>
    <button class="ctrl-btn ctrl-item" id="dazu-btn" title="der Abspielliste hinzuf&uuml;gen"><i class="icon-forward"></i></button>
    <button class="ctrl-btn ctrl-item" id="weg-btn" title="aus Abspielliste entfernen"><i class="icon-cancel"></i></button>
    <button class="ctrl-btn ctrl-item" id="leeren-btn" title="Abspielliste leeren"><i class="icon-trash-empty"></i></button>
  </div>
</div>

 www/ui/js/app.js

@@ -42,7 +42,7 @@
  // darunter der Inhalt des aktuellen Pfades
  this.media_liste = function() {
    self.reset_top_buttons(); 
    console.log("ortPfad: " + self.ortPfad + ", mediaPfad: " + self.mediaPfad);
    //console.log("ortPfad: " + self.ortPfad + ", mediaPfad: " + self.mediaPfad);
    document.querySelector('.bereich-name').textContent = '';    
    if(self.ortPfad === '/') {
      var bb = document.querySelector('.breadcrumb-behaelter');
@@ -81,7 +81,7 @@
      }
      bb.innerHTML = brLinks;
      self.addEvtListener('.breadcrumb-link', 'click', function(event) {
        console.log(event.target.attributes.brlink.nodeValue);
        //console.log(event.target.attributes.brlink.nodeValue);
        var neuerPfad = event.target.attributes.brlink.nodeValue;
        self.mediaPfad = neuerPfad;
        self.media_liste();
@@ -106,7 +106,7 @@
            } else {
              if(t.classList.contains('selected')) {
                t.classList.add('added-to-playlist');
                self.addSelectedTitel();
                self.titelDazu();
              } else {
                self.removeClassMulti('selected');
                t.classList.add('selected');
@@ -165,6 +165,7 @@
    self.entitaet_liste('Abspielliste','../api/store/Abspielliste/liste/', 
      "data/tpl/abspielliste_liste.txt", '../api/store/Abspielliste/', 
      "self.abspielliste_form", function(responseText) {
        //console.log("responseTest: '" + responseText + "'");
        var abspielliste = JSON.parse(responseText);
        self.abspielliste_form(abspielliste);
      });
@@ -176,7 +177,9 @@
    self.entitaet_form('Abspielliste', al, al.name,
      "data/tpl/form_abspielliste.txt", '../api/store/Abspielliste/',
      '#abspielliste-name', function(event) {
          if(event !== undefined) {
          event.preventDefault();
          }
          self.abspielliste_auswahl_fuellen();
          self.abspielliste_liste();
    });
@@ -242,50 +245,6 @@
    });
  };
  
  this.addSelectedTitel = function() {
    var elem = document.querySelector(".selected");
    //var titelName = elem.textContent;
    var titelName = elem.attributes.dateiName.nodeValue;
    var album = elem.attributes.album.nodeValue;
    var interpret = elem.attributes.interpret.nodeValue;
    var anzName = elem.attributes.titelAnzName.nodeValue;
    var titel;
    if(self.mediaPfad.endsWith('/')) {
      titel = new Titel(titelName, self.mediaPfad, self.ortPfad, interpret, anzName, album);
    } else {
      titel = new Titel(titelName, self.mediaPfad + '/', self.ortPfad, interpret, anzName, album);
    }
    var plname = document.querySelector('#playlist').value;
    self.http_put('../api/alist/' + plname, JSON.stringify(titel), function(responseText) {
      //self.meldung_mit_timeout(responseText, 1500);
    });
  };  
  
  this.removeSelectedTitel = function() {
    var elem = document.querySelector(".selected");
    var parentElem = elem.parentNode;
    //console.log("elem: " + elem.nodeName + ", parent: " + parentElem.nodeName + ", len: " + parentElem.childNodes.length);
    var liElems = parentElem.getElementsByTagName(elem.nodeName); // nur die LI Elemente
    //console.log("liElems.anz: " + liElems.length);
    var gefunden = false;
    for(var i = 0; i < liElems.length && !gefunden; i++) {
      //console.log(liElems.item(i).textContent);
      if(liElems.item(i).classList.contains("selected")) {
        gefunden = true;
        var index = i;
        //console.log(elem.textContent + ' hat Index ' + i);
      }
    }
    // /mz/api/alist/[pl-name]/[nr] 
    var plname = document.querySelector('#playlist').value;
    self.http_delete('../api/alist/' + plname + '/' + index,'', function(responseText) {
      // DELETE    http://localhost:9090/mz/api/alist/liste1/0
      //self.meldung_mit_timeout(responseText, 1500);
      self.titel_liste();
    });
    
  };
  
  /* Unterer Einblendbereich */
  
  this.dialog_unten_zeigen = function() {
@@ -295,9 +254,10 @@
      dlg.innerHTML = html;
      self.abspieler_auswahl_fuellen();
      self.abspielliste_auswahl_fuellen();
      self.addEvtListener('#dazu-btn', 'click', self.addSelectedTitel);
      self.addEvtListener('#dazu-btn', 'click', self.titelDazu);
      self.addEvtListener('#play-btn', 'click', self.play);
      self.addEvtListener('#weg-btn', 'click', self.removeSelectedTitel);
      self.addEvtListener('#weg-btn', 'click', self.titelWeg);
      self.addEvtListener('#leeren-btn', 'click', self.alleTitelEntfernen);
      self.media_liste();
    });
  };
@@ -333,6 +293,61 @@
    self.http_get('../api/strg/' + abs + '/play/liste/' + lst, function(responseText) {
      self.meldung_mit_timeout(responseText, 1500);
    });
  };
  
  /* ------------- Verwaltungsfunktionen Abspielliste -------------------- */
  
  self.alleTitelEntfernen = function() {
    var plname = document.querySelector('#playlist').value;
    self.http_delete('../api/alist/' + plname + '/alle', '', function(responseText) {
      // DELETE    http://localhost:9090/mz/api/alist/liste1/0
      //self.meldung_mit_timeout(responseText, 1500);
      self.titel_liste();
    });
  };
  
  this.titelDazu = function() {
    var elem = document.querySelector(".selected");
    //var titelName = elem.textContent;
    var titelName = elem.attributes.dateiName.nodeValue;
    var album = elem.attributes.album.nodeValue;
    var interpret = elem.attributes.interpret.nodeValue;
    var anzName = elem.attributes.titelAnzName.nodeValue;
    var titel;
    if(self.mediaPfad.endsWith('/')) {
      titel = new Titel(titelName, self.mediaPfad, self.ortPfad, interpret, anzName, album);
    } else {
      titel = new Titel(titelName, self.mediaPfad + '/', self.ortPfad, interpret, anzName, album);
    }
    var plname = document.querySelector('#playlist').value;
    self.http_put('../api/alist/' + plname, JSON.stringify(titel), function(responseText) {
      //self.meldung_mit_timeout(responseText, 1500);
    });
  };  
  
  this.titelWeg = function() {
    var elem = document.querySelector(".selected");
    var parentElem = elem.parentNode;
    //console.log("elem: " + elem.nodeName + ", parent: " + parentElem.nodeName + ", len: " + parentElem.childNodes.length);
    var liElems = parentElem.getElementsByTagName(elem.nodeName); // nur die LI Elemente
    //console.log("liElems.anz: " + liElems.length);
    var gefunden = false;
    for(var i = 0; i < liElems.length && !gefunden; i++) {
      //console.log(liElems.item(i).textContent);
      if(liElems.item(i).classList.contains("selected")) {
        gefunden = true;
        var index = i;
        //console.log(elem.textContent + ' hat Index ' + i);
      }
    }
    // /mz/api/alist/[pl-name]/[nr] 
    var plname = document.querySelector('#playlist').value;
    self.http_delete('../api/alist/' + plname + '/' + index,'', function(responseText) {
      // DELETE    http://localhost:9090/mz/api/alist/liste1/0
      //self.meldung_mit_timeout(responseText, 1500);
      self.titel_liste();
    });
    
  };
  
  /* ------------- Helfer fuer Entitaets-Formulare ----------------------- */
@@ -411,8 +426,8 @@
    event.preventDefault();
    const data = new FormData(event.target);
    const value = Object.fromEntries(data.entries());
    console.log({ value });
    console.log(JSON.stringify(value));
    //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, '');
@@ -443,7 +458,7 @@
    self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.txt', dlgdata, function() {
      self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen);
      self.addEvtListener('#ja-btn', 'click', function(event) {
        console.log("loeschen geklickt.");
        //console.log("loeschen geklickt.");
        self.http_delete(delUrl + pkey, '', function (responseText) {
          self.dialog_schliessen();
          if(typeof(cb) !== 'function') {