Abspieler-Dropdown (in Arbeit)

ulrich

2021-04-07 f45e203a66a5471a0dd05e0362566ef96a2b6b31

Abspieler-Dropdown (in Arbeit)

 src/de/uhilger/mediaz/App.java

@@ -47,6 +47,7 @@
  public static final String RB_AP_WWW_DATA = "appParamWWWData"; 
  public static final String RB_AP_CTX = "appParamCtx"; 
  public static final String RB_AP_UI = "appParamUi"; 
  public static final String RB_EP_LISTE = "epliste"; 

  /**
   * <p>Start-Methode dieser Anwendung</p>

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

@@ -21,6 +21,7 @@
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;
@@ -58,6 +59,9 @@
    Beispiele:
  
    HTTP GET an /mz/api/store/Ablageort/
    liefert alle Ablageort-Objekte
  
    HTTP GET an /mz/api/store/Ablageort/liste/  
    liefert eine Liste der Namen vorhandener Ablageorte
  
    HTTP GET an /mz/api/store/Ablageort/Katalog
@@ -86,6 +90,8 @@
  
  /** Name der HTTP Methode DELETE */
  public static final String HTTP_DELETE = "DELETE";
  
  public static final String EP_LISTE = "liste/";

  @Override
  public void handle(HttpExchange e) throws IOException {
@@ -177,9 +183,16 @@
    String[] elems = path.split(App.getRs(Server.RB_SLASH));
    FileStorage fs = new FileStorage(App.getInitParameter(App.getRs(App.RB_AP_CONF)));
    if(path.endsWith(App.getRs(RB_SLASH))) {
      String type = elems[elems.length - 1];
      logger.fine(type);
      List list = fs.list(type);
      List list = null;
      if(path.endsWith(App.getRs(RB_EP_LISTE))) {
        String type = elems[elems.length - 2];
        logger.fine(type);
        list = fs.list(type);
      } else {
        String type = elems[elems.length - 1];
        logger.fine(type);
        list = fs.listObjects(type);
      }
      return jsonWithEnclosingType(list);
    } else {
      String type = elems[elems.length - 2];

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

@@ -168,7 +168,7 @@
    }
    return list;
  }

  
  @Override
  public TypeToken typeFromName(String name) {
    return types.get(name);
@@ -199,5 +199,23 @@
      return false;
    }
  }

  @Override
  public List<Entity> listObjects(String typ) {
    File base = new File(fileBase);
    File dir = new File(base, typ);
    List<Entity> list = new ArrayList();
    File[] files = dir.listFiles();
    if(files != null) {
      for(File file : files) {
        try {
          list.add(entityFromFile(file));
        } catch (ClassNotFoundException | IOException ex) {
          logger.log(Level.SEVERE, null, ex);
        }
      }
    }
    return list;
  }
  
}

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

@@ -82,6 +82,13 @@
  public List<String> list(String typ);
  
  /**
   * Alle Objekte eines Typs auflisten
   * @param typ der gewuenschte Typ
   * @return die Liste mit Objekten 
   */
  public List listObjects(String typ);
  
  /**
   * Fuer einen gegebenen Namen den Typ bestimmen
   * @param name  der Name des gewuenschten Typs 
   * @return der Typ zum Namen

 src/mediaz_de_DE.properties

@@ -10,10 +10,12 @@
webroot=/
# uiroot=/ui
store=/api/store
epliste=liste/
stopServer=/api/server/stop
testAblage=/api/test/ablage
testStore=/api/test/store


slash=/
dash=-
bytes=bytes

 www/ui/data/tpl/abs_sel.tpl

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

 www/ui/data/tpl/ctrl.tpl

@@ -7,16 +7,20 @@
    <button class="ctrl-btn ctrl-item" id="hier-btn" title="hier spielen"><i class="icon-tablet"></i></button>
  </div>
  <div class="ctrl-orte">
    <select class="u-full-width ctrl-item ctrl-select" id="abspieler" title="Abspieler">
      <option value="as1">Wohnzimmer langtext</option>
      <option value="as2">Arbeitsz</option>
      <option value="as3">K&uuml;che</option>
    </select>  
    <select class="u-full-width ctrl-item ctrl-select" id="playlist" title="Playliste">
      <option value="Pl1">Liste 1</option>
      <option value="Pl2">Liste 2</option>
      <option value="Pl3">Liste 3</option>
    </select>  
    <div class="abs-sel">
      <select class="u-full-width ctrl-item ctrl-select" id="abspieler" title="Abspieler">
        <option value="as1">Wohnzimmer langtext</option>
        <option value="as2">Arbeitsz</option>
        <option value="as3">K&uuml;che</option>
      </select>  
    </div>
    <div class="pl-sel">
      <select class="u-full-width ctrl-item ctrl-select" id="playlist" title="Playliste">
        <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>
  </div>

 www/ui/js/app.js

@@ -1,32 +1,65 @@
function Ablageort(n, o, u) {
  this.name = n;
  this.ort = o;
  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;
  var appMenu;
  var cache; // mustache templates
  var ortPfad;
  var mediaPfad;

  this.init = function () {
    self.mediaPfad = '/';
    self.ortPfad = '/';
    self.cache = new Array();
    self.appMenu = new AppMenu();
    self.appMenu.init(
            "data/menu/",
            "hauptmenue.json",
            "data/tpl/app-menu.tpl",
            ".west",
            "8em");

    document.querySelector('.hamburger').addEventListener('click', function (e) {
      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.fusszeile_umschalten();
    self.seitenleiste_umschalten();
    self.dialog_unten_zeigen();
  };
  
  this.abspieler_auswahl_fuellen = function() {
    self.http_get('../api/store/Abspieler/', function (responseText) {
      /*
       {"ArrayList": [{"name":"Wohnz","url":"http://rpi4-wz:9090/"},{"name":"Arbz","url":"http://rpi4-az:9090/"}]}
       */
      self.vorlage_laden_und_fuellen("data/tpl/abs_sel.tpl", JSON.parse(responseText), function (html) {
        document.querySelector(".abs-sel").innerHTML = html;
      });    
    });
  };

  /* Unterer Einblendbereich */
  
  this.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;
      self.abspieler_auswahl_fuellen();
    });
  };

  
  // auf der obersten Ebene werden die Kataloge angezeigt,
  // darunter der Inhalt des aktuellen Pfades
  this.media_liste = function() {
    if(self.ortPfad === '/') {
      // Kataloge listen
      self.http_get('../api/store/Ablageort/', function (responseText) {
      self.http_get('../api/store/Ablageort/liste/', function (responseText) {
        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) {
@@ -76,7 +109,7 @@
  /* Die folgenden '_liste' Funktionen koennen noch vereinheitlicht werden */

  this.ablageort_liste = function() {
    self.http_get('../api/store/Ablageort/', function (responseText) {
    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) {
@@ -94,7 +127,7 @@
  };

  this.prefs_liste = function() {
    self.http_get('../api/store/Einstellung/', function (responseText) {
    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;
        self.addEvtListener('.entity-eintrag', 'click', function (event) {
@@ -112,7 +145,7 @@
  };

  this.abspieler_liste = function() {
    self.http_get('../api/store/Abspieler/', function (responseText) {
    self.http_get('../api/store/Abspieler/liste/', 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) {
@@ -301,7 +334,7 @@
  
  // document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });

  /* asynchroner HTTP Client */
  /* --------------------- asynchroner HTTP Client ----------------- */
  
  this.http_get = function (u, cb) {
    self.http_call('GET', u, null, cb);
@@ -337,45 +370,7 @@
    }
  };
  
  /* 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 */

  this.init = function () {
    //self.vorlagen = new Vorlagen();
    self.mediaPfad = '/';
    self.ortPfad = '/';
    self.cache = new Array();
    self.appMenu = new AppMenu();
    self.appMenu.init(
            "data/menu/",
            "hauptmenue.json",
            "data/tpl/app-menu.tpl",
            ".west",
            "8em");

    document.querySelector('.hamburger').addEventListener('click', function (e) {
      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();
  };
  /* ------------------------ aus App-Vorlage -------------------  */

  this.menue_umschalten = function () {
    var ham = document.querySelector(".hamburger");
@@ -452,7 +447,7 @@
    }, timeout);
  };
  
  /* Dialog-Funktionen */
  /* --------------------- Dialog-Funktionen ------------------------ */

  /*
   Einen Dialog aus Vorlagen erzeugen
@@ -486,14 +481,14 @@
    });
  };
  
  self.dialog_schliessen = function () {
  this.dialog_schliessen = function () {
    document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
    var dlg = document.querySelector('.dialog');
    dlg.style.height = '0';
    dlg.innerHTML = '';
  };

  /* Vorlagen */
  /* ---------------------   Vorlagen   ---------------------- */

  /*
   Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt
@@ -547,3 +542,21 @@

}

/* ----------- Objekte ---------------- */

function Ablageort(n, o, u) {
  this.name = n;
  this.ort = o;
  this.url = u;
}

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

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