Gestaltung der Buttons, Abspielliste (in Arbeit)

ulrich

2021-04-08 8d7d357497e80b87f1d3be2357cb9cb2e853e582

Gestaltung der Buttons, Abspielliste (in Arbeit)

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

@@ -6,36 +6,97 @@
package de.uhilger.mediaz.api;

import com.google.gson.Gson;
import com.sun.net.httpserver.HttpExchange;
import com.sun.net.httpserver.HttpHandler;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.util.logging.Level;
import java.util.logging.Logger;


/**
 *
 * @author ulrich
 */
public class AbstractHandler {
public abstract class AbstractHandler extends JsonHelper implements HttpHandler {
  
  protected String jsonWithEnclosingType(Object o) {
    /*
    StringBuilder sb = new StringBuilder();
    sb.append("{\"");
    sb.append(o.getClass().getSimpleName());
    sb.append("\": ");
    Gson gson = new Gson();
    sb.append(gson.toJson(o));
    sb.append("}");
    return sb.toString();
    */
    return jsonWithCustomType(o, o.getClass().getSimpleName());
  private static final Logger logger = Logger.getLogger(AbstractHandler.class.getName());

  /** Name der HTTP Methode GET */
  public static final String HTTP_GET = "GET";
  
  /** Name der HTTP Methode PUT */
  public static final String HTTP_PUT = "PUT";
  
  /** Name der HTTP Methode POST */
  public static final String HTTP_POST = "POST";
  
  /** Name der HTTP Methode DELETE */
  public static final String HTTP_DELETE = "DELETE";
  
  @Override
  public void handle(HttpExchange e) throws IOException {
    String method = e.getRequestMethod();
    String response = "";
    int code = 200;
    switch(method) {
      case HTTP_GET:
        String json = get(e);
        if(json != null) {
          response = json;
        } else {
          response = "nicht gefunden";
          code = 404;
        }
        break;
        
      case HTTP_PUT:
        response = put(e);
        break;
        
      case HTTP_POST:
        response = post(e);
        code = 404;
        break;
        
      case HTTP_DELETE:
        boolean geloescht = delete(e);
        if(geloescht) {
          response = "geloescht";
        } else {
          response = "nicht geloescht";
        }
        break;
    }
    logger.fine(response);
    e.sendResponseHeaders(code, response.length());
    OutputStream os = e.getResponseBody();
    os.write(response.getBytes());
    os.close();        
  }
  
  protected String jsonWithCustomType(Object o, String typeName) {
  protected String bodyLesen(HttpExchange e) throws IOException {
    InputStream is = e.getRequestBody();
    BufferedReader r = new BufferedReader(new InputStreamReader(is));
    StringBuilder sb = new StringBuilder();
    sb.append("{\"");
    sb.append(typeName);
    sb.append("\": ");
    Gson gson = new Gson();
    sb.append(gson.toJson(o));
    sb.append("}");
    return sb.toString();
    String line = r.readLine();
    while(line != null) {
      sb.append(line);
      line = r.readLine();
  }
    r.close();
    String json = sb.toString();
    logger.log(Level.FINE, "json: {0}", json);
    return json;
  }

  
  protected abstract String get(HttpExchange e);
  protected abstract String put(HttpExchange e) throws IOException;
  protected abstract String post(HttpExchange e);
  protected abstract boolean delete(HttpExchange e);
  
}

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

@@ -47,7 +47,7 @@
 * @author Ulrich Hilger
 * @version 0.1, 25. März 2021
 */
public class FileHandler extends AbstractHandler implements HttpHandler {
public class FileHandler extends JsonHelper implements HttpHandler {

  /* Der Logger fuer diesen FileHandler */
  private static final Logger logger = Logger.getLogger(FileHandler.class.getName());

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

New file
@@ -0,0 +1,41 @@
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package de.uhilger.mediaz.api;

import com.google.gson.Gson;

/**
 *
 * @author ulrich
 */
public class JsonHelper {
  
    public String jsonWithEnclosingType(Object o) {
    /*
    StringBuilder sb = new StringBuilder();
    sb.append("{\"");
    sb.append(o.getClass().getSimpleName());
    sb.append("\": ");
    Gson gson = new Gson();
    sb.append(gson.toJson(o));
    sb.append("}");
    return sb.toString();
    */
    return jsonWithCustomType(o, o.getClass().getSimpleName());
  }
  
  public String jsonWithCustomType(Object o, String typeName) {
    StringBuilder sb = new StringBuilder();
    sb.append("{\"");
    sb.append(typeName);
    sb.append("\": ");
    Gson gson = new Gson();
    sb.append(gson.toJson(o));
    sb.append("}");
    return sb.toString();
  }
  
}

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

New file
@@ -0,0 +1,56 @@
/*
  Mediazentrale - Personal Media Center
  Copyright (C) 2021  Ulrich Hilger

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
package de.uhilger.mediaz.api;

import com.sun.net.httpserver.HttpExchange;
import java.io.IOException;

/**
 * Der ListHandler bearbeitet HTTP-Anfragen zu Abspiellisten
 * 
 * GET /mz/api/alist/[pl-name]          die Titel-Objekte der Liste [pl-name] liefern
 * 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  
 *
 * @author Ulrich Hilger
 * @version 1, 8.4.2021
 */
public class ListHandler extends AbstractHandler {

  @Override
  protected String get(HttpExchange e) {
    throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
  }

  @Override
  protected String put(HttpExchange e) throws IOException {
    throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
  }

  @Override
  protected String post(HttpExchange e) {
    throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
  }

  @Override
  protected boolean delete(HttpExchange e) {
    throw new UnsupportedOperationException("Not supported yet."); //To change body of generated methods, choose Tools | Templates.
  }
  
}

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

@@ -19,18 +19,13 @@

import com.google.gson.Gson;
import com.sun.net.httpserver.HttpExchange;
import com.sun.net.httpserver.HttpHandler;
import de.uhilger.mediaz.App;
import static de.uhilger.mediaz.App.RB_EP_LISTE;
import de.uhilger.mediaz.Server;
import static de.uhilger.mediaz.Server.RB_SLASH;
import de.uhilger.mediaz.store.FileStorage;
import de.uhilger.mediaz.entity.Entity;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.util.List;
import java.util.logging.Level;
import java.util.logging.Logger;
@@ -41,7 +36,7 @@
 * @author Ulrich Hilger
 * @version 1, 5.4.2021
 */
public class StorageHandler extends AbstractHandler implements HttpHandler {
public class StorageHandler extends AbstractHandler {
  
  private static final Logger logger = Logger.getLogger(StorageHandler.class.getName());

@@ -78,19 +73,20 @@
  */
  
  /** Name der HTTP Methode GET */
  public static final String HTTP_GET = "GET";
  //public static final String HTTP_GET = "GET";
  
  /** Name der HTTP Methode PUT */
  public static final String HTTP_PUT = "PUT";
  //public static final String HTTP_PUT = "PUT";
  
  /** Name der HTTP Methode POST */
  public static final String HTTP_POST = "POST";
  //public static final String HTTP_POST = "POST";
  
  /** Name der HTTP Methode DELETE */
  public static final String HTTP_DELETE = "DELETE";
  //public static final String HTTP_DELETE = "DELETE";
  
  public static final String EP_LISTE = "liste/";
  //public static final String EP_LISTE = "liste/";

  /*
  @Override
  public void handle(HttpExchange e) throws IOException {
    String method = e.getRequestMethod();
@@ -131,8 +127,10 @@
    os.write(response.getBytes());
    os.close();        
  }
  */
  
  private String put(HttpExchange e) throws IOException {
  @Override
  protected String put(HttpExchange e) throws IOException {
    String path = e.getRequestURI().toString();
    String[] elems = path.split(App.getRs(Server.RB_SLASH));
    String type = elems[elems.length - 2];
@@ -158,6 +156,7 @@
      return "Ungueltiger Elementname: " + App.getRs(RB_EP_LISTE);
    }
  }
  
  private boolean loeschen(HttpExchange e) {
    String path = e.getRequestURI().toString();
    String[] elems = path.split(App.getRs(Server.RB_SLASH));
@@ -190,18 +189,18 @@
    }
  }
  
  private String bodyLesen(HttpExchange e) throws IOException {
    InputStream is = e.getRequestBody();
    BufferedReader r = new BufferedReader(new InputStreamReader(is));
    StringBuilder sb = new StringBuilder();
    String line = r.readLine();
    while(line != null) {
      sb.append(line);
      line = r.readLine();
  @Override
  public String get(HttpExchange e) {
    return lesen(e);
    }
    r.close();
    String json = sb.toString();
    logger.log(Level.FINE, "json: {0}", json);
    return json;

  @Override
  public String post(HttpExchange e) {
    return "nicht unterstuetzt";
  }

  @Override
  public boolean delete(HttpExchange e) {
    return loeschen(e);
  }
}

 src/de/uhilger/mediaz/entity/Abspielliste.java

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

import java.util.ArrayList;
import java.util.List;

/**
@@ -28,6 +29,10 @@
  private String name;
  private List<Titel> titel;

  public Abspielliste() {
    titel = new ArrayList<>();
  }

  public List<Titel> getTitel() {
    return titel;
  }

 src/de/uhilger/mediaz/store/FileStorage.java

@@ -23,6 +23,7 @@
import de.uhilger.mediaz.Server;
import de.uhilger.mediaz.entity.Ablageort;
import de.uhilger.mediaz.entity.Abspieler;
import de.uhilger.mediaz.entity.Abspielliste;
import de.uhilger.mediaz.entity.Einstellung;
import java.io.BufferedReader;
import java.io.File;
@@ -69,10 +70,12 @@
    TypeToken<Ablageort> ttAblageort = new TypeToken<Ablageort>() {};
    TypeToken<Einstellung> ttEinstellung = new TypeToken<Einstellung>() {};
    TypeToken<Abspieler> ttAbspieler = new TypeToken<Abspieler>() {};
    TypeToken<Abspielliste> ttAbspielliste = new TypeToken<Abspielliste>() {};
    types = new HashMap();
    types.put(Ablageort.class.getSimpleName(), ttAblageort);
    types.put(Einstellung.class.getSimpleName(), ttEinstellung);
    types.put(Abspieler.class.getSimpleName(), ttAbspieler);
    types.put(Abspielliste.class.getSimpleName(), ttAbspielliste);
  }
  
  /**

 www/ui/app.css

@@ -228,7 +228,7 @@
  margin-top: 0.2rem;
}

.ctrl-btn {
.ctrl-btn, .ctrl-btn:focus {
  width: 4rem;
  font-size: medium;
  display: inline-block;
@@ -242,11 +242,16 @@
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  /* background-color: transparent; */
  border-radius: 4px;
  border: 1px solid #bbb;
  border: 0;
  cursor: pointer;
  box-sizing: border-box; 
}

.ctrl-btn:hover {
  color: white;
  background-color: #707070; /* #e1e1e1;*/  /* #707070; */
}

.ctrl-select {
@@ -260,21 +265,30 @@
}

.top-btn-area {
  display: flex;
  flex-flow: row;
  /*margin-left: auto;*/
  margin: -0.5em 1em 0 2em;
}

.top-btn {
.top-btn, .top-btn:focus {
  margin: 0;
  padding: 0 0.2em 0 0.2em;
  height: 1.3em;
  line-height: 1em;
  text-align: center;
  font-size: large;
  background-color: white;
  color: white;
  border-radius: 4px;
  border: 0;
  /* background-color: white; */
  /* width: 1em; */
}

.top-btn:hover {
  color: black;
  background-color: #e1e1e1; /* #707070; */
}

@media (min-width: 800px) {
  .zentraler-inhalt {

 www/ui/data/tpl/ablageort_liste.tpl

@@ -2,7 +2,7 @@
<div class='entity-formular'>
  <div class='entity-liste-kopf'>
    Kataloge     
    <button class='ctrl-btn' id='neu-btn' title='Neu'><i class='icon-doc'></i></button>
    <!-- <button class='ctrl-btn' id='neu-btn' title='Neu'><i class='icon-doc'></i></button> -->
  </div>
  <ul class='entity-liste'>
    {{#ArrayList}}

 www/ui/data/tpl/abspieler_liste.tpl

@@ -1,7 +1,7 @@
<div class='entity-formular'>
  <div class='entity-liste-kopf'>
    Abspieler     
    <button class='ctrl-btn' id='neu-btn' title='Neu'><i class='icon-doc'></i></button>
    <!-- <button class='ctrl-btn' id='neu-btn' title='Neu'><i class='icon-doc'></i></button> -->
  </div>
  <ul class='entity-liste'>
    {{#ArrayList}}

 www/ui/data/tpl/abspielliste_liste.tpl

New file
@@ -0,0 +1,12 @@
<div class='entity-formular'>
  <div class='entity-liste-kopf'>
    Abspiellisten
    <!-- <button class='ctrl-btn' id='neu-btn' title='Neu'><i class='icon-doc'></i></button> -->
  </div>
  <ul class='entity-liste'>
    {{#ArrayList}}
    <li class='entity-eintrag'>{{.}}</li>
    {{/ArrayList}}
  </ul>
</div>


 www/ui/data/tpl/einstellung_liste.tpl

@@ -1,7 +1,7 @@
<div class='entity-formular'>
  <div class='entity-liste-kopf'>
    Einstellungen     
    <button class='ctrl-btn' id='neu-btn' title='Neu'><i class='icon-doc'></i></button>
    <!-- <button class='ctrl-btn' id='neu-btn' title='Neu'><i class='icon-doc'></i></button> -->
  </div>
  <ul class='entity-liste'>
    {{#ArrayList}}

 www/ui/data/tpl/form_abspielliste.tpl

New file
@@ -0,0 +1,11 @@
<div class="entity-formular">
  Abspielliste

  <input 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 class="button" id="cancel-btn">Abbrechen</button>
    <button class="button" id="loeschen-btn">L&ouml;schen</button>
  </div>

</div>

 www/ui/data/tpl/katalog_inhalt_liste.tpl

@@ -1,7 +1,7 @@
<div class='entity-formular'>
  <div class='entity-liste-kopf'>
    Media-Inhalte     
    <button class='ctrl-btn' id='zurueck-btn'><i class='icon-up-open'></i></button>
    <!-- <button class='ctrl-btn' id='zurueck-btn'><i class='icon-up-open'></i></button> -->
  </div>
  <ul class='entity-liste'>
    {{#Medialiste}}

 www/ui/data/tpl/pl_sel.tpl

New file
@@ -0,0 +1,5 @@
<select class="u-full-width ctrl-item ctrl-select" id="playlist" title="Playliste">
  {{#ArrayList}}
  <option kurl="{{url}}" value="{{name}}">{{name}}</option>
  {{/ArrayList}}
</select>  

 www/ui/data/tpl/titel_liste.tpl

New file
@@ -0,0 +1,12 @@
<div class='entity-formular'>
  <div class='entity-liste-kopf'>
    Abspielliste {{name}}     
    <!-- <button class='ctrl-btn' id='neu-btn' title='Neu'><i class='icon-doc'></i></button> -->
  </div>
  <ul class='entity-liste'>
    {{#ArrayList}}
    <li class='entity-eintrag'>{{.}}</li>
    {{/ArrayList}}
  </ul>
</div>


 www/ui/data/tpl/top_btns.tpl

New file
@@ -0,0 +1,2 @@
<button type="button"  title="Neu" class="top-btn" id="top-neu-btn"><i class="icon-doc"></i></button>
<button type="button"  title="herauf" class="top-btn" id="top-up-btn"><i class="icon-up-open"></i></button>

 www/ui/index.html

@@ -41,11 +41,16 @@
        <span id="app-titel">Mediazentrale</span>
      </div>
      <div class="top-btn-area">
        <div class="top-btns">          
          <button type="button"  title="Neu" class="top-btn" id="top-neu-btn"><i class="icon-doc"></i></button>
          <button type="button"  title="herauf" class="top-btn" id="top-up-btn"><i class="icon-up-open"></i></button>
        </div>
        <div class="dropdown">
          <button class="top-btn"><i class="icon-down-dir"></i></button>
          <div class="dropdown-content">
            <a id="mi-katalog"><i class="icon-music"></i> Media-Inhalte</a>
            <a id="mi-list"><i class="icon-list"></i> Abspiellisten</a>
            <a id="mi-katalog"><i class="icon-video"></i> Media-Inhalte</a>
            <a id="mi-list"><i class="icon-music"></i> Abspielliste</a>
            <a id="mi-listen"><i class="icon-list"></i> Abspiellisten</a>
            <a id="mi-orte"><i class="icon-database"></i> Kataloge</a>
            <a id="mi-player"><i class="icon-play"></i> Abspieler</a>
            <a id="mi-radio"><i class="icon-ellipsis-vert"></i> Radio</a>

 www/ui/js/app.js

@@ -25,6 +25,8 @@
    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-listen', 'click', self.abspielliste_liste);
    self.addEvtListener('#mi-list', 'click', self.titel_liste);
    
    self.fusszeile_umschalten();
    self.seitenleiste_umschalten();
@@ -42,6 +44,17 @@
    });
  };

  this.abspielliste_auswahl_fuellen = function() {
    self.http_get('../api/store/Abspielliste/', function (responseText) {
      /*
          ?
       */
      self.vorlage_laden_und_fuellen("data/tpl/pl_sel.tpl", JSON.parse(responseText), function (html) {
        document.querySelector(".pl-sel").innerHTML = html;
      });    
    });
  };
  
  /* Unterer Einblendbereich */
  
  this.dialog_unten_zeigen = function() {
@@ -50,16 +63,47 @@
      dlg.style.height = '4.5em';
      dlg.innerHTML = html;
      self.abspieler_auswahl_fuellen();
      self.abspielliste_auswahl_fuellen();
      self.media_liste();
    });
  };

  /* ---------------- Titel einer Abspielliste ----------------- */
  
  this.titel_liste = function() {
    self.http_get('../api/store/Ablageort/liste/', function (responseText) {
      self.vorlage_laden_und_fuellen("data/tpl/ablageort_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.ablageort_form(ablageort);
          });
        });
        self.addEvtListener('#neu-btn', 'click', function (event) {
          eval("self.ablageort_form" + "(this)");
        });        
      });
    });
  };
    
  /* ---------------- Entitaets-Listen ----------------- */

  self.reset_top_buttons = function() {
    self.vorlage_laden_und_fuellen("data/tpl/top_btns.tpl", '', function (html) {
      document.querySelector(".top-btns").innerHTML = html;
    });
  };
  
  // auf der obersten Ebene werden die Kataloge angezeigt,
  // darunter der Inhalt des aktuellen Pfades
  this.media_liste = function() {
    self.reset_top_buttons();
    if(self.ortPfad === '/') {
      // Kataloge listen
      self.http_get('../api/store/Ablageort/liste/', function (responseText) {
        //document.querySelector('#top-up-btn').removeEventListener('click', self.media_liste_herauf);
        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) {
@@ -107,7 +151,7 @@
              t.classList.add('selected');
            }
          });
          self.addEvtListener('#zurueck-btn', 'click', function (event) {
          self.addEvtListener('#top-up-btn', 'click', function(event) {
            if(self.mediaPfad === '/') {
              self.ortPfad = '/';              
            } else {
@@ -129,6 +173,7 @@
  };

  this.ablageort_liste = function() {
    self.reset_top_buttons();
    self.http_get('../api/store/Ablageort/liste/', function (responseText) {
      self.vorlage_laden_und_fuellen("data/tpl/ablageort_liste.tpl", JSON.parse(responseText), function (html) {
        document.querySelector(".zentraler-inhalt").innerHTML = html;
@@ -139,7 +184,8 @@
            self.ablageort_form(ablageort);
          });
        });
        self.addEvtListener('#neu-btn', 'click', function (event) {
        //self.addEvtListener('#neu-btn', 'click', function (event) {
        self.addEvtListener('#top-neu-btn', 'click', function(event) {
          eval("self.ablageort_form" + "(this)");
        });        
      });
@@ -147,6 +193,7 @@
  };

  this.prefs_liste = function() {
    self.reset_top_buttons();
    self.http_get('../api/store/Einstellung/liste/', function (responseText) {
      self.vorlage_laden_und_fuellen("data/tpl/einstellung_liste.tpl", JSON.parse(responseText), function (html) {
        document.querySelector(".zentraler-inhalt").innerHTML = html;
@@ -157,7 +204,7 @@
            self.prefs_form(einstellung);
          });
        });
        self.addEvtListener('#neu-btn', 'click', function (event) {
        self.addEvtListener('#top-neu-btn', 'click', function(event) {
          eval("self.prefs_form" + "(this)");
        });        
      });
@@ -177,6 +224,76 @@
        });
        self.addEvtListener('#neu-btn', 'click', function (event) {
          eval("self.abspieler_form" + "(this)");
        });           
      });
    });
  };
  
  this.abspielliste_liste = function() {
    self.http_get('../api/store/Abspielliste/liste/', function (responseText) {
      self.vorlage_laden_und_fuellen("data/tpl/abspielliste_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/Abspielliste/' + t.textContent, function(responseText){
            var abspielliste = JSON.parse(responseText);
            self.abspielliste_form(abspielliste);
          });
        });
        self.addEvtListener('#top-neu-btn', 'click', function(event) {
          eval("self.abspielliste_form" + "(this)");
        });            
      });
    });
  };
  
  /* -------------------- Entitaets-Formulare ------------------ */
  
  this.abspielliste_form = function(al) {
    self.vorlage_laden_und_fuellen("data/tpl/form_abspielliste.tpl", al, function (html) {
      document.querySelector(".zentraler-inhalt").innerHTML = html;
      self.addEvtListener('#ok-btn', 'click', function () {
        var alname = document.querySelector('#abspielliste-name').value;
        alname = alname.replace(' ', '').replace(/[\W]+/g, '');
        var abspielliste = new Abspielliste(
          alname
        );
        var daten = JSON.stringify(abspielliste);        
        //if(typeof pl === "undefined" || pl.key !== plname) {
        if(typeof al.name === "undefined" || al.name.length < 1) {
          // neu
          self.http_put('../api/store/Abspielliste/' + alname, daten, function (responseText) {
            // hier die Antwort verarbeiten
            self.abspielliste_auswahl_fuellen();
            self.abspielliste_liste();
          });
        } else {
          // aendern
          self.http_put('../api/store/Abspielliste/' + al.name, daten, function (responseText) {
            // hier die Antwort verarbeiten
            self.abspielliste_auswahl_fuellen();
            self.abspielliste_liste();
          });
        }
      });
      self.addEvtListener('#cancel-btn', 'click', function () {
        //document.querySelector(".zentraler-inhalt").innerHTML = '';
        self.abspielliste_liste();
      });
      self.addEvtListener('#loeschen-btn', 'click', function() {
        var alname = document.querySelector('#abspielliste-name').value;
        var dlgdata = {"del-elem": alname};
        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/Abspielliste/' + alname, '', function (responseText) {
              // hier die Antwort verarbeiten
              self.dialog_schliessen();
              //document.querySelector(".zentraler-inhalt").innerHTML = '';
              self.abspielliste_auswahl_fuellen();
              self.abspielliste_liste();
            });
          });
        });        
      });
    });
@@ -571,3 +688,7 @@
  this.name = n;
  this.url = u;
}

function Abspielliste(n) {
  this.name = n;
}