From 47a970ab16fb42d62734ab53ae5fa113c9b47165 Mon Sep 17 00:00:00 2001
From: ulrich <not disclosed>
Date: Tue, 02 Jan 2018 12:59:21 +0000
Subject: [PATCH] Senderübersicht wird jetzt dynamisch aus einer JSON-Beschreibung gelesen.
---
app.js | 26 ++++++++++--
tpl/sender.tpl | 16 ++++++++
index.html | 15 +++++--
api/sender.json | 27 +++++++++++++
app.css | 34 +++++++++++++++++
5 files changed, 108 insertions(+), 10 deletions(-)
diff --git a/api/sender.json b/api/sender.json
new file mode 100644
index 0000000..6bb7fde
--- /dev/null
+++ b/api/sender.json
@@ -0,0 +1,27 @@
+{
+ "senderliste": {
+ "titel": "Senderliste",
+ "inhalt": [
+ {
+ "sendername": "hr info",
+ "senderurl": "http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3",
+ "senderlogo": "../bilder/hr-info.png"
+ },
+ {
+ "sendername": "radiobob",
+ "senderurl": "http://bob.hoerradar.de/radiobob-live-mp3-hq",
+ "senderlogo": "../bilder/radio-bob-logo-80.png"
+ },
+ {
+ "sendername": "hr3",
+ "senderurl": "http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3",
+ "senderlogo": "../bilder/hr3.png"
+ },
+ {
+ "sendername": "FFH",
+ "senderurl": "http://mp3.ffh.de/radioffh/hqlivestream.mp3",
+ "senderlogo": "../bilder/ffh.svg"
+ }
+ ]
+ }
+}
diff --git a/app.css b/app.css
index 6e83174..e79ecbd 100644
--- a/app.css
+++ b/app.css
@@ -32,6 +32,40 @@
margin: 0;
}
+/* Sender */
+
+.sender-behaelter {
+ display: flex;
+ flex-flow: column;
+}
+
+.sender {
+ display: flex;
+ flex-flow: row;
+ padding: 0.4em;
+ flex-wrap: wrap;
+ background-color: #eaeaea;
+ width: 100%;
+}
+
+.sender-kachel {
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ margin: 0.4em;
+ padding: 0.4em;
+ background-color: white;
+}
+
+.sender-name {
+ font-family: RobotoCondensedBold;
+}
+
+.sender-bild {
+ width: 5em;
+ background-color: #ebe6e6;
+}
+
/* fonts */
@font-face {
diff --git a/app.js b/app.js
index 1a2b854..1d258d7 100644
--- a/app.js
+++ b/app.js
@@ -1,17 +1,33 @@
var TPL_HOME = 'home';
var TPL_PREFS = 'prefs';
-var templateCache = {}; // mustache templates 'home', 'prefs'
+var TPL_SENDER = 'sender';
+var templateCache = {}; // mustache templates 'home', 'prefs', 'sender'
var prefsRendered = false;
function app_init() {
$('.ost').hide();
app_menu_init("menu/", "hauptmenue.json", "../jslib/app-menu/app-menu.tpl", ".west");
- //app_get_template('tpl/home.tpl', 'home');
+ app_get_template('tpl/sender.tpl', TPL_SENDER);
//app_get_template('tpl/prefs.tpl', 'prefs');
$('.sued').text('Bereit.');
- /*
setTimeout(function() {
- app_seitenwechsel('home', 'vor');
+ $("#sender").html(Mustache.render(templateCache[TPL_SENDER], ''));
}, 200);
- */
+}
+
+/* --- Ajax-Aufrufe --- */
+
+/*
+ Ein Template vom Server in den Cache laden
+ template_url - home.tpl, prefs.tpl, sender.tpl
+ tname - 'home', 'prefs', 'sender'
+*/
+function app_get_template(template_url, tname) {
+ $.ajax({
+ url: template_url,
+ type: "GET",
+ dataType : "text"
+ }).done(function( template ) {
+ templateCache[tname] = template;
+ });
}
diff --git a/index.html b/index.html
index f49a286..8a31b86 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,14 @@
<body>
<!-- Kopfzeile -->
<div class="nord">
- <a id="nav-toggle" href="#"><span></span></a> <span id="app-titel">Home</span>
+ <div id="nav-menu">
+ <a id="nav-toggle" href="#"><span></span></a>
+ </div>
+ <div class="app-titel">
+ <span id="app-titel">Home</span>
+ </div>
</div>
+ <!-- Inhalt -->
<div class="inhalt">
<!-- westliche Seitenleiste -->
<div class="west"></div>
@@ -21,10 +27,9 @@
<div class="zentrum">
<div id="prefs"></div>
<div id="home"></div>
- </div>
- <div class="cond">
- Dieser Teil (Klasse cond für conditional) erscheint nur, wenn das
- Anzeigegerät rechts genügend Platz hat.
+ <div class="sender-behaelter">
+ <div id="sender" class="sender"></div>
+ </div>
</div>
<!-- oestliche Seitenleiste -->
<div class="ost">
diff --git a/tpl/sender.tpl b/tpl/sender.tpl
new file mode 100644
index 0000000..3b3bc7d
--- /dev/null
+++ b/tpl/sender.tpl
@@ -0,0 +1,16 @@
+<div class="sender-kachel">
+ <div class="sender-name">hr info</div>
+ <div class="sender-bild-behaelter"><img class="sender-bild" src="../bilder/hr-info.png"></div>
+</div>
+<div class="sender-kachel">
+ <div class="sender-name">radiobob</div>
+ <div class="sender-bild-behaelter"><img class="sender-bild" src="../bilder/radio-bob-logo-80.png"></div>
+</div>
+<div class="sender-kachel">
+ <div class="sender-name">hr3</div>
+ <div class="sender-bild-behaelter"><img class="sender-bild" src="../bilder/hr3.png"></div>
+</div>
+<div class="sender-kachel">
+ <div class="sender-name">FFH</div>
+ <div class="sender-bild-behaelter"><img class="sender-bild" src="../bilder/ffh.svg"></div>
+</div>
--
Gitblit v1.9.3