From 576085b482f4579ce47ad0590df0073560eec0bb Mon Sep 17 00:00:00 2001
From: ulrich <not disclosed>
Date: Sun, 07 Jan 2018 09:45:39 +0000
Subject: [PATCH] Abspielerauswahl hinzugefügt
---
app.js | 14 ++++
data/abspieler.json | 31 ++++++++++
data/tpl/dlg-sender-edit-form.tpl | 6 +-
index.html | 3
data/tpl/abspieler.tpl | 8 ++
data/tpl/dlg-sender-neu.tpl | 6 +-
app.css | 30 ++++++++--
README.md | 61 ++++++++++++++++++++
8 files changed, 146 insertions(+), 13 deletions(-)
diff --git a/README.md b/README.md
index c48f52f..6d0680c 100644
--- a/README.md
+++ b/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.
diff --git a/app.css b/app.css
index 44c697b..58e3917 100644
--- a/app.css
+++ b/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 {
diff --git a/app.js b/app.js
index e1dac03..3b56e63 100644
--- a/app.js
+++ b/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({
diff --git a/data/abspieler.json b/data/abspieler.json
new file mode 100644
index 0000000..b1b167c
--- /dev/null
+++ b/data/abspieler.json
@@ -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":""
+ }
+ ]
+ }
+}
diff --git a/data/tpl/abspieler.tpl b/data/tpl/abspieler.tpl
new file mode 100644
index 0000000..14eceee
--- /dev/null
+++ b/data/tpl/abspieler.tpl
@@ -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>
diff --git a/data/tpl/dlg-sender-edit-form.tpl b/data/tpl/dlg-sender-edit-form.tpl
index 61734f9..1522751 100644
--- a/data/tpl/dlg-sender-edit-form.tpl
+++ b/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">
diff --git a/data/tpl/dlg-sender-neu.tpl b/data/tpl/dlg-sender-neu.tpl
index 015acd5..65862ff 100644
--- a/data/tpl/dlg-sender-neu.tpl
+++ b/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>
diff --git a/index.html b/index.html
index 4fbf529..490bfa6 100644
--- a/index.html
+++ b/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>
--
Gitblit v1.9.3