Abspielerauswahl hinzugefügt

ulrich

2018-01-07 576085b482f4579ce47ad0590df0073560eec0bb

Abspielerauswahl hinzugefügt

 README.md

@@ -177,3 +177,64 @@
128kbps http://mp3.ffh.de/radioffh/hqlivestream.mp3

48kbps http://mp3.ffh.de/radioffh/livestream.aac

## Noch zu erledigen

### Templates für Mustache dynamisch laden

Spart Ladezeit zu Beginn. Lösungsansatz: Eine Funktion, die als Parameter das Element erhält, dessen html mit dem gerenderten Template ersetzt werden soll und den zu rendernden Inhalt. Die dynamische Ladefunktion

1. prüft, ob das Template schon im cache ist
1. Lädt das Template, wenn nicht
1. wartet, bis das Template geladen ist
1. rendert das Template mit dem übergebenen Inhalt
1. schreibt das Ergebnis ins html des übergebenen Elements

Der letzte Teil des Ablaufs muss asynchron gefasst sein, damit auf das Laden gewartet werden kann.

## Schnittstellenbeschreibung

Die folgenden Funktionen sind Mocks für eine noch zu erstellende Schnittstelle.

### Senderliste lesen

Aufruf
````
data/sender.json
````

Antwort
````
{
  "senderliste": {
    "titel": "Senderliste",
    "inhalt":  [
      {
        "senderid": 1,
        "sendername": "hr info",
        "senderurl": "http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3",
        "senderlogo": "../bilder/hr-info.png"
      },
      {
        "senderid": 2,
        "sendername": "radiobob",
        "senderurl": "http://bob.hoerradar.de/radiobob-live-mp3-hq",
        "senderlogo": "../bilder/radio-bob-logo-80.png"
      },
      usw.
    ]
  }
}
````

### Neuen Sender speichern

Noch nicht realisiert.

### Änderungen an einem Sender speichern

Noch nicht realisiert.

### Sender löschen

Noch nicht realisiert.

 app.css

@@ -82,6 +82,12 @@
  flex-flow: column;
}

.inline-label {
  display: inline-block;
  width: 3em;
  text-align: right;
}

/* Dialogfeld */

.dialog {
@@ -109,12 +115,6 @@
  background-color: #f6f6f6; // grau
}

.sender-edit-label {
  display: inline-block;
  width: 3em;
  text-align: right;
}

.sender-eingabe {
  width: 80%;
}
@@ -137,6 +137,24 @@
  color: #b8b8b8;
}

/* Abspieler */

.abspieler-behaelter {
  display: flex;
  flex-flow: row;
  padding: 0.6em;
}

.abspieler-label {
  display: inline-block;
  width: 4.5em;
  padding-right: 0.2em;
  text-align: right;
}

.abspieler-auswahl {
  width: 70%;
}
/* Sender */

.sender-behaelter {

 app.js

@@ -7,6 +7,7 @@
var TPL_DLG_SENDER_EDIT = 'dlg-sender-edit';
var TPL_SENDER_EDIT_FORM = 'sender-edit-form';
var TPL_SENDER_KACHEL = 'sender-kachel';
var TPL_ABSPIELER = 'abspieler';
var templateCache = {}; // mustache templates
var prefsRendered = false;
var senderKlickModus = "0"; // 1=abspielen, 2=bearbeiten, 3=loeschen
@@ -28,9 +29,11 @@
  app_get_template('data/tpl/dlg-sender-edit.tpl', TPL_DLG_SENDER_EDIT);
  app_get_template('data/tpl/dlg-sender-edit-form.tpl', TPL_SENDER_EDIT_FORM);
  app_get_template('data/tpl/kachel.tpl', TPL_SENDER_KACHEL);
  app_get_template('data/tpl/abspieler.tpl', TPL_ABSPIELER);
  //app_get_template('tpl/prefs.tpl', 'prefs');
  $('.sued').text('Bereit.');
  setTimeout(function() {
    app_get_abspieler();
    app_get_sender();
  }, 200);
}
@@ -172,6 +175,17 @@
  });
}

function app_get_abspieler() {
  $.ajax({
    url: "data/abspieler.json",
    type: "GET",
    dataType : "json"
  }).done(function( abspielerliste ) {
    $(".abspieler-behaelter").html(
      Mustache.render(templateCache[TPL_ABSPIELER], abspielerliste));
  });
}

function app_dialog_laden_und_zeigen(vorlage, adresse) {
  if(adresse !== '') {
    $.ajax({

 data/abspieler.json

New file
@@ -0,0 +1,31 @@
{
  "abspielerliste": {
    "titel": "Abspielerliste",
    "inhalt":  [
      {
        "abspielerid": 1,
        "abspielername": "dieses Gerät",
        "abspielerurl": "",
        "abspielertyp":"lokal",
        "abspielerbild": "",
        "abspielerzustand":""
      },
      {
        "abspielerid": 2,
        "abspielername": "Raspberry Pi Wohnzimmer",
        "abspielerurl": "",
        "abspielertyp":"pirc",
        "abspielerbild": "",
        "abspielerzustand":"selected"
      },
      {
        "abspielerid": 3,
        "abspielername": "Raspberry Pi Arbeitszimmer",
        "abspielerurl": "",
        "abspielertyp":"pirc",
        "abspielerbild": "",
        "abspielerzustand":""
      }
    ]
  }
}

 data/tpl/abspieler.tpl

New file
@@ -0,0 +1,8 @@
<label class="abspieler-label">Abspieler:</label>
<select name="abspieler" size="1" class="abspieler-auswahl">
  {{#abspielerliste}}
    {{#inhalt}}
    <option {{abspielerzustand}} atyp="{{abspielertyp}}">{{abspielername}}</option>
    {{/inhalt}}
  {{/abspielerliste}}
</select>

 data/tpl/dlg-sender-edit-form.tpl

@@ -2,13 +2,13 @@
<form>
  <input value="{{id}}" id="sender-id" name="sender-id" type="hidden"
      class="sender-eingabe"></br>
  <label class="sender-edit-label">Name:</label>
  <label class="inline-label">Name:</label>
  <input value="{{name}}" id="sender-name" name="sender-name" placeholder="Name"
      type="text" class="sender-eingabe"></br>
  <label class="sender-edit-label">Logo:</label>
  <label class="inline-label">Logo:</label>
  <input value="{{logo}}" id="sender-logo" name="sender-logo" placeholder="Logo"
      type="text" class="sender-eingabe"></br>
  <label class="sender-edit-label">URL:</label>
  <label class="inline-label">URL:</label>
  <input value="{{url}}" id="sender-url"  name="sender-url" placeholder="URL"
      type="text" class="sender-eingabe"></br>
  <div class="form-button-footer">

 data/tpl/dlg-sender-neu.tpl

@@ -3,11 +3,11 @@
  <div class="dlg-behaelter">
    <div class="dlg-sender-titel">Neuer Sender</div>
    <form>
      <label class="sender-edit-label">Name:</label>
      <label class="inline-label">Name:</label>
      <input id="sender-name" placeholder="Name" type="text" class="sender-eingabe"></br>
      <label class="sender-edit-label">Logo:</label>
      <label class="inline-label">Logo:</label>
      <input id="sender-logo" placeholder="Logo" type="text" class="sender-eingabe"></br>
      <label class="sender-edit-label">URL:</label>
      <label class="inline-label">URL:</label>
      <input id="sender-url" placeholder="URL" type="text" class="sender-eingabe"></br>
      <div class="form-button-footer">
        <button type="button" id="sender-speichern">Speichern</button>

 index.html

@@ -4,7 +4,6 @@
    <title>Radio-UI</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" type="text/css" href="../jslib/app-layout/app-layout.css"> -->
    <link rel="stylesheet" type="text/css" href="../jslib/app-menu/nav-toggle.css">
    <link rel="stylesheet" type="text/css" href="../jslib/app-menu/app-menu.css">
    <link rel="stylesheet" type="text/css" href="app.css">
@@ -27,6 +26,8 @@
      <div class="zentrum-behaelter">
        <!-- Einblendbereich -->
        <div class="dialog"></div>
        <!-- Abspieler-Auswahl -->
        <div class="abspieler-behaelter"></div>
        <!-- zentraler Inhaltsbereich -->
        <div class="zentrum">
          <div id="prefs"></div>