From 36646e46eb05bfbceafffd02c76bbc59a7347686 Mon Sep 17 00:00:00 2001
From: ulrich <not disclosed>
Date: Thu, 04 Jan 2018 10:13:10 +0000
Subject: [PATCH] Info-Dialog hinzugefügt
---
app.js | 33 ++++++++++++----
menu/hauptmenue.json | 5 ++
tpl/dlg-info.tpl | 6 +++
app.css | 4 ++
data/info.json | 6 +++
README.md | 60 +++++++++++++++++++++---------
6 files changed, 87 insertions(+), 27 deletions(-)
diff --git a/README.md b/README.md
index 10ca910..86a5564 100644
--- a/README.md
+++ b/README.md
@@ -7,38 +7,62 @@
Diese Anwendung ist zur Zeit im Bau. Der aktuelle Prototyp zum Stand des Codes in diesem Repository ist hier zu sehen:
[Link zum Prototyp](/data/ulrich/test/radio-ui).
-## Radiostreams
+## Nutzung von Vorlagen
-Nachfolgend die Adressen einiger Radiostreams
+Die Anwendung radio-ui ist ein Beispiel für die Nutzung von Vorlagen in Webanwendungen. Die Datei `index.html` definiert Bereiche einer HTML-Seite als `div`-Elemente die während der Ausführung des Programmes dynamisch mit wechselnden Inhalten gefüllt werden.
-### hr3
+## Abhängigkeiten
-[Livestream-Übersicht](http://www.hr3.de/service/hr3-online-hoeren,webradio-100.html)
+Zur Verwendung des radio-ui sind die folgenden Komponenten erforderlich
-128 kbit http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3
++ [jQuery](http://jquery.com/)
++ [Mustache](https://github.com/janl/mustache.js)
++ [app-menu](/gitblit/docs/web!app-menu.git)
-48 kbit http://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/48/stream.mp3
+Diese sind in der Datei `index.html` über die folgenden Einträge eingebunden.
-### hr info
+````
+<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">
+<script src="../jslib/jquery-1.11.1/jquery-1.11.1.min.js"></script>
+<script src="../jslib/mustache/mustache.min.js"></script>
+<script src="../jslib/app-menu/app-menu.js"></script>
+````
-[Livestream-Übersicht](http://www.hr-inforadio.de/livestream/index.html)
+ Sollen einzelne Komponenten von einem anderen Ort wie beispielsweise einem Content Delivery Network (CDN) eingebunden werden, müssen nur die obigen Einträge entsprechend angepasst werden.
-128 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3
+ ## Radiostreams
-48 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/48/stream.mp3
+ Nachfolgend die Adressen einiger Radiostreams
-### radiobob
+ ### hr3
-[Livestream-Übersicht](http://www.radiobob.de/radiobob/empfang/livestream)
+ [Livestream-Übersicht](http://www.hr3.de/service/hr3-online-hoeren,webradio-100.html)
-MP3: http://bob.hoerradar.de/radiobob-live-mp3-hq
+ 128 kbit http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3
-Mobile Nutzung: http://bob.hoerradar.de/aac-radiobob
+ 48 kbit http://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/48/stream.mp3
-### FFH
+ ### hr info
-[Livestream-Übersicht](https://www.ffh.de/musik/webradios/stream-adressen.html)
+ [Livestream-Übersicht](http://www.hr-inforadio.de/livestream/index.html)
-128kbps http://mp3.ffh.de/radioffh/hqlivestream.mp3
+ 128 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3
-48kbps http://mp3.ffh.de/radioffh/livestream.aac
+ 48 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/48/stream.mp3
+
+ ### radiobob
+
+ [Livestream-Übersicht](http://www.radiobob.de/radiobob/empfang/livestream)
+
+ MP3: http://bob.hoerradar.de/radiobob-live-mp3-hq
+
+ Mobile Nutzung: http://bob.hoerradar.de/aac-radiobob
+
+ ### FFH
+
+ [Livestream-Übersicht](https://www.ffh.de/musik/webradios/stream-adressen.html)
+
+ 128kbps http://mp3.ffh.de/radioffh/hqlivestream.mp3
+
+ 48kbps http://mp3.ffh.de/radioffh/livestream.aac
diff --git a/app.css b/app.css
index 595d5d6..89e9593 100644
--- a/app.css
+++ b/app.css
@@ -114,6 +114,10 @@
color: #b8b8b8;
}
+.dlg-info {
+ background-color: #dcf2fb;
+}
+
/* Sender */
.sender-behaelter {
diff --git a/app.js b/app.js
index 7763234..99cb491 100644
--- a/app.js
+++ b/app.js
@@ -2,6 +2,7 @@
var TPL_PREFS = 'prefs';
var TPL_SENDER = 'sender';
var TPL_DLG_MSG = 'dlg-msg';
+var TPL_DLG_INFO = 'dlg-info';
var templateCache = {}; // mustache templates 'home', 'prefs', 'sender'
var prefsRendered = false;
@@ -10,6 +11,7 @@
$('.ost').hide();
app_menu_init("menu/", "hauptmenue.json", "../jslib/app-menu/app-menu.tpl", ".west");
app_get_template('tpl/dlg-msg.tpl', TPL_DLG_MSG);
+ app_get_template('tpl/dlg-info.tpl', TPL_DLG_INFO);
app_get_template('tpl/sender.tpl', TPL_SENDER);
//app_get_template('tpl/prefs.tpl', 'prefs');
$('.sued').text('Bereit.');
@@ -19,7 +21,11 @@
}
function app_nachricht_test() {
- app_nachricht_zeigen('data/msg-test.json');
+ app_nachricht_zeigen(templateCache[TPL_DLG_MSG], 'data/msg-test.json');
+}
+
+function app_info_dialog_zeigen() {
+ app_nachricht_zeigen(templateCache[TPL_DLG_INFO], '');
}
/* --- Ajax-Aufrufe --- */
@@ -34,19 +40,28 @@
});
}
-function app_nachricht_zeigen(addr) {
- $.ajax({
- url: addr,
- type: "GET",
- dataType : "json"
- }).done(function( msg ) {
- $(".dialog").html(Mustache.render(templateCache[TPL_DLG_MSG], msg));
+function app_nachricht_zeigen(vorlage, adresse) {
+ if(adresse !== '') {
+ $.ajax({
+ url: adresse,
+ type: "GET",
+ dataType : "json"
+ }).done(function( msg ) {
+ $(".dialog").html(Mustache.render(vorlage, msg));
+ $(".close-btn").on('click', function() {
+ $('.close-btn').attr('onclick','').unbind('click');
+ $('.dialog').slideUp(300);
+ });
+ $('.dialog').slideDown(300);
+ });
+ } else {
+ $(".dialog").html(Mustache.render(vorlage, ''));
$(".close-btn").on('click', function() {
$('.close-btn').attr('onclick','').unbind('click');
$('.dialog').slideUp(300);
});
$('.dialog').slideDown(300);
- });
+ }
}
/*
diff --git a/data/info.json b/data/info.json
new file mode 100644
index 0000000..ed16963
--- /dev/null
+++ b/data/info.json
@@ -0,0 +1,6 @@
+{
+ "typ": "dlg-info",
+ "app-titel": "radio-ui",
+ "text": "Eine Bedienoberfläche für Webradio von <a href='https://uhilger.de'>Ulrich Hilger</a>.",
+ "repo":"Weitere Infos im <a href='https://uhilger.de/gitblit/docs/web!radio-ui.git/gitblit/docs/web!radio-ui.git'>Code-Repository</a>"
+}
diff --git a/menu/hauptmenue.json b/menu/hauptmenue.json
index e1e99eb..50527c1 100644
--- a/menu/hauptmenue.json
+++ b/menu/hauptmenue.json
@@ -33,6 +33,11 @@
"funktion": "app_nachricht_test"
},
{
+ "titel": "Über radio-ui",
+ "umenue": false,
+ "funktion": "app_info_dialog_zeigen"
+ },
+ {
"titel": "H Menüeintrag 2",
"umenue": true,
"verweis": "untermenue-1.json"
diff --git a/tpl/dlg-info.tpl b/tpl/dlg-info.tpl
new file mode 100644
index 0000000..1da50af
--- /dev/null
+++ b/tpl/dlg-info.tpl
@@ -0,0 +1,6 @@
+<div class="dlg-info">
+ <span class="close-btn pointer-cursor">✖</span>
+ <div class="dlg-info-app-titel">radio-ui</div>
+ <div class="dlg-info-app-info">Eine Bedienoberfläche für Webradio von <a href='https://uhilger.de'>Ulrich Hilger</a>.</div>
+ <div class="dlg-info-app-info">Weitere Infos im <a href='https://uhilger.de/gitblit/docs/web!radio-ui.git'>Code-Repository</a>.</div>
+</div>
--
Gitblit v1.9.3