Info-Dialog hinzugefügt

ulrich

2018-01-04 36646e46eb05bfbceafffd02c76bbc59a7347686

Info-Dialog hinzugefügt

 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

 app.css

@@ -114,6 +114,10 @@
  color: #b8b8b8;
}

.dlg-info {
  background-color: #dcf2fb;
}

/* Sender */

.sender-behaelter {

 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);
  });
  }
}

/*

 data/info.json

New file
@@ -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>"
}

 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"

 tpl/dlg-info.tpl

New file
@@ -0,0 +1,6 @@
<div class="dlg-info">
  <span class="close-btn pointer-cursor">&#10006;</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>