Bedienoberfläche für Webradio
view | history | commit | commitdiff
ulrich
2018-01-07 c70430dc43ff3d8dc786d699f3eda0194e53c8ec
commit | author | age
623a61 1 var TPL_HOME = 'home';
U 2 var TPL_PREFS = 'prefs';
47a970 3 var TPL_SENDER = 'sender';
9e336a 4 var TPL_DLG_MSG = 'dlg-msg';
36646e 5 var TPL_DLG_INFO = 'dlg-info';
ffc872 6 var TPL_DLG_SENDER_NEU = 'dlg-sender-neu';
U 7 var TPL_DLG_SENDER_EDIT = 'dlg-sender-edit';
56852d 8 var TPL_SENDER_EDIT_FORM = 'sender-edit-form';
f9c6e2 9 var TPL_SENDER_KACHEL = 'sender-kachel';
576085 10 var TPL_ABSPIELER = 'abspieler';
df379b 11 var templateCache = {}; // mustache templates
623a61 12 var prefsRendered = false;
abef80 13 var senderKlickModus = "1"; // 1=abspielen, 2=bearbeiten, 3=loeschen
f9c6e2 14 var ID_UNDEFINED = -1;
599f2f 15 var suchTimeout;
623a61 16
U 17 function app_init() {
abef80 18   $('.sued').text('Initialisieren..');
9f0d54 19   $('.dialog').hide();
623a61 20   $('.ost').hide();
abef80 21
U 22   // Menü initialisieren
136220 23   app_menu_init(
U 24     "data/menu/",
25     "hauptmenue.json",
26     "../jslib/app-menu/app-menu.tpl",
27     ".west",
28     "8em");
abef80 29
U 30   // Templates laden
8881ca 31   app_get_template('data/tpl/dlg-msg.tpl', TPL_DLG_MSG);
U 32   app_get_template('data/tpl/dlg-info.tpl', TPL_DLG_INFO);
33   app_get_template('data/tpl/sender.tpl', TPL_SENDER);
ffc872 34   app_get_template('data/tpl/dlg-sender-neu.tpl', TPL_DLG_SENDER_NEU);
U 35   app_get_template('data/tpl/dlg-sender-edit.tpl', TPL_DLG_SENDER_EDIT);
56852d 36   app_get_template('data/tpl/dlg-sender-edit-form.tpl', TPL_SENDER_EDIT_FORM);
f9c6e2 37   app_get_template('data/tpl/kachel.tpl', TPL_SENDER_KACHEL);
576085 38   app_get_template('data/tpl/abspieler.tpl', TPL_ABSPIELER);
03f9a7 39
abef80 40   // Klicks auf das Hamburger-Menü-Icon an eine Funktion leiten
U 41   $(".hamburger").on("click", function(e) {
03f9a7 42     app_menue_umschalten();
U 43   });
44
abef80 45   // Eingaben ins Suchfeld an eine Funktion leiten
599f2f 46   $(".sendersuche-eingabe").on('keyup', function() {
U 47     clearTimeout(suchTimeout);
48     suchTimeout = setTimeout('app_sendersuche()', 500);
49   });
abef80 50
U 51   // Abspieler und Sender laden
623a61 52   setTimeout(function() {
576085 53     app_get_abspieler();
a480d0 54     app_get_sender();
abef80 55     $('.sued').text('Bereit.');
623a61 56   }, 200);
47a970 57 }
U 58
599f2f 59 function app_sendersuche() {
U 60   var suchbegriff = $(".sendersuche-eingabe").val();
61   /*
62     Anstelle der folgenden Meldung wuerde hier
63     die Suchfunktion ausgefuehrt
64   */
65   app_meldung_mit_timeout(
66     'Suchbegriff: ' + suchbegriff,
67     1500
68   );
03f9a7 69 }
U 70
71 function app_menue_umschalten() {
abef80 72   $(".hamburger").toggleClass("is-active"); // hamburger-icon umschalten
03f9a7 73   app_menu_toggle(); // menue oeffnen/schliessen
abef80 74 }
U 75 /* Abspieler und abspielen */
76
77 function app_get_abspiel_ziel() {
78   var opt = $(".abspieler-auswahl :selected");
79   var atyp = opt.attr("atyp");
80   var aname = opt.text();
81   var aurl = opt.attr("aurl");
82   return new Abspieler(-1, aname, aurl, atyp, "", "selected");
83 }
84
85 /*
86   Abspiel-URL für Raspi:
87   http://raspi:8080/pirc/sys/rpc?c=de.uhilger.pirc.App&m=abspielen&p=http://bob.hoerradar.de/radiobob-live-mp3-hq&p=
c70430 88
U 89   der folgende Aufruf übergibt zusätzlich einen Parameter zum Abspielen über
90   das Audiokabel (nicht das HDMI-Kabel) des Raspi (sofern angeschlossen)
91   http://raspi-wz:8080/pirc/sys/rpc?c=de.uhilger.pirc.App
92   &m=abspielenMitParametern&p=http://bob.hoerradar.de/radiobob-live-mp3-hq
93   &p=-o%20local&p=
abef80 94 */
U 95 function app_abspielen(sender, abspieler) {
c70430 96   var url;
abef80 97   if(abspieler.typ === 'pirc') {
c70430 98     url =
abef80 99       abspieler.url +
c70430 100       '/sys/rpc?c=de.uhilger.pirc.App&m=abspielenMitParametern&p=' +
abef80 101       sender.url +
c70430 102       '&p=-o%20local&p=';
abef80 103     app_radio_kommando_senden(url);
U 104   } else {
c70430 105     url = sender.url;
U 106     var win = window.open(url, '_blank');
107     win.focus();
abef80 108   }
U 109 }
110
111 function app_abspielen_stoppen() {
112   var abspieler = app_get_abspiel_ziel();
113   if(abspieler.typ === 'pirc') {
114     var url =
115       abspieler.url +
116       '/sys/rpc?c=de.uhilger.pirc.App&m=kommando&p=q';
117     app_radio_kommando_senden(url);
118   } else {
119     // 'hier abspielen' stoppen muss noch gebaut werden
120   }
599f2f 121 }
U 122
3cecdc 123 /* Senderliste */
U 124
125 function app_kachel_anpassen(sender) {
126   var kachel = $( "div[sid='" + sender.id + "']" );
abef80 127   kachel.find(".sender-name").text(sender.name);
U 128   kachel.attr("data-verweis", sender.url);
129   kachel.find("img").attr("src", sender.logo);
f9c6e2 130 }
U 131
132 function app_kachel_neu(sender) {
133   var html = Mustache.render(templateCache[TPL_SENDER_KACHEL], sender);
134   $("#sender").append(html);
135   var kachel = $( "div[sid='" + sender.id + "']" );
abef80 136   kachel.on('click', app_kachel_klick);
f9c6e2 137 }
U 138
139 function app_kachel_klick() {
140   var kachel = $( this );
abef80 141   var senderId = kachel.attr("sid");
U 142   var senderName = kachel.find(".sender-name").text();
143   var senderUrl = kachel.attr("data-verweis");
144   var senderLogo = kachel.find("img").attr("src");
f9c6e2 145   var s = new Sender(senderId, senderName, senderUrl, senderLogo);
U 146   switch (senderKlickModus) {
147       case "1":
abef80 148         app_abspielen(s, app_get_abspiel_ziel());
f9c6e2 149         break;
U 150       case "2":
151         $(".dlg-behaelter").html(
152           Mustache.render(templateCache[TPL_SENDER_EDIT_FORM], s)
153         );
154         $('#sender-speichern').on('click', function() {
155           $('#sender-speichern').off('click');
156           app_kachel_anpassen(app_sender_dialog_lesen(senderId));
157           app_dialog_schliessen();
158           app_meldung_mit_timeout('Speichern gewaehlt', 1500);
159         });
160         break;
161       case "3":
162         break;
163       default:
164         app_meldung_mit_timeout(
165           'Sender ' + s.name + ', ID ' + s.id,
166           1500
167         );
168         break;
169   }
3cecdc 170 }
U 171
8881ca 172 /* --- Menüfunktionen --- */
U 173
9f0d54 174 function app_nachricht_test() {
e6c850 175   app_dialog_laden_und_zeigen(
U 176     templateCache[TPL_DLG_MSG], 'data/msg-test.json');
03f9a7 177   app_menue_umschalten();
36646e 178 }
U 179
180 function app_info_dialog_zeigen() {
b520d1 181   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_INFO], '');
03f9a7 182   app_menue_umschalten();
8881ca 183 }
U 184
5226a2 185 function app_neuer_sender() {
ffc872 186   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_NEU], '');
b520d1 187   $('#sender-speichern').on('click', function() {
136220 188     $('#sender-speichern').off('click');
f9c6e2 189     app_kachel_neu(app_sender_dialog_lesen(--ID_UNDEFINED));
b520d1 190     app_dialog_schliessen();
742e75 191     app_meldung_mit_timeout('Speichern gewaehlt', 1500);
b520d1 192   });
03f9a7 193   app_menue_umschalten();
5226a2 194 }
U 195
742e75 196 function app_sender_bearbeiten() {
56852d 197   senderKlickModus = "2"; // bearbeiten
ffc872 198   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_EDIT], '');
03f9a7 199   app_menue_umschalten();
742e75 200 }
5226a2 201
742e75 202 function app_sender_loeschen() {
U 203   app_meldung_mit_timeout('Nicht implementiert: Sender loeschen.', 1500);
03f9a7 204   app_menue_umschalten();
742e75 205 }
U 206
69ffa5 207 function app_abspieler_loeschen() {
U 208   app_meldung_mit_timeout('Nicht implementiert: Abspieler loeschen.', 1500);
03f9a7 209   app_menue_umschalten();
69ffa5 210 }
U 211 function app_neuer_abspieler() {
212   app_meldung_mit_timeout('Nicht implementiert: Neuer Abspieler.', 1500);
03f9a7 213   app_menue_umschalten();
69ffa5 214 }
U 215 function app_abspieler_bearbeiten() {
216   app_meldung_mit_timeout('Nicht implementiert: Abspieler bearbeiten.', 1500);
03f9a7 217   app_menue_umschalten();
69ffa5 218 }
U 219
742e75 220 /* --- Dialogfunktionen --- */
8881ca 221
U 222 function app_dialog_zeigen(vorlage, inhalt) {
abef80 223   var dlg = $(".dialog");
U 224   dlg.html(Mustache.render(vorlage, inhalt));
8881ca 225   $(".close-btn").on('click', function() {
b520d1 226     app_dialog_schliessen();
8881ca 227   });
abef80 228   dlg.slideDown(300);
f9c6e2 229 }
U 230
231 function app_sender_dialog_lesen(senderId) {
232   var nameNeu = $("#sender-name").val();
233   var logoNeu = $("#sender-logo").val();
234   var urlNeu = $("#sender-url").val();
235   return new Sender(senderId, nameNeu, urlNeu, logoNeu);
b520d1 236 }
U 237
238 function app_dialog_schliessen() {
abef80 239   senderKlickModus = "1";
136220 240   $('.close-btn').off('click');
b520d1 241   $('.dialog').slideUp(300);
9f0d54 242 }
U 243
742e75 244 /* --- Meldungen in der Fusszeile --- */
U 245
246 /*
247   Eine Meldung eine Zeitlang in der Fusszeile anzeigen
248
249   meldung - Text der Meldung
250   timeout - die Anzahl Millisekunden, die eine Meldung zu sehen sein soll
251 */
252 function app_meldung_mit_timeout(meldung, timeout) {
abef80 253   var s = $('.sued');
U 254   s.text(meldung);
742e75 255   setTimeout(function() {
abef80 256     s.text('Bereit.');
742e75 257   }, timeout);
U 258 }
259
47a970 260 /* --- Ajax-Aufrufe --- */
U 261
a480d0 262 function app_get_sender() {
U 263   $.ajax({
0c85a2 264     url: "data/sender.json",
a480d0 265     type: "GET",
U 266     dataType : "json"
267   }).done(function( senderliste ) {
56852d 268     $(".sender-kachel").off("click");
U 269     $(".sender-behaelter").html(
270       Mustache.render(templateCache[TPL_SENDER], senderliste));
f9c6e2 271     $('.sender-kachel').on('click', app_kachel_klick);
a480d0 272   });
U 273 }
274
576085 275 function app_get_abspieler() {
U 276   $.ajax({
277     url: "data/abspieler.json",
278     type: "GET",
279     dataType : "json"
280   }).done(function( abspielerliste ) {
281     $(".abspieler-behaelter").html(
282       Mustache.render(templateCache[TPL_ABSPIELER], abspielerliste));
abef80 283     $("#abspielen-stoppen").on('click', app_abspielen_stoppen);
576085 284   });
U 285 }
286
b520d1 287 function app_dialog_laden_und_zeigen(vorlage, adresse) {
36646e 288   if(adresse !== '') {
U 289     $.ajax({
290       url: adresse,
291       type: "GET",
292       dataType : "json"
293     }).done(function( msg ) {
8881ca 294       app_dialog_zeigen(vorlage, msg);
36646e 295     });
U 296   } else {
8881ca 297     app_dialog_zeigen(vorlage, '');
36646e 298   }
abef80 299 }
U 300
301 function app_radio_kommando_senden(kommando) {
302   $.ajax({
303     url: kommando,
304     type: "GET",
305     dataType : "text",
306     crossDomain: true
307   }).done(function( antwort ) {
308     /*
309       der folgende Schritt wird nicht erreicht, weil beim Aufruf
310       aus dem Browser heraus keine Adresse aufgerufen werden darf,
311       die nicht von der Domain kommt, von der aus das radio-ui
312       ausgeliefert wird.
313
314       Kommt das radio-ui z.B. von der Domain uhilger.de, wird ein Aufruf
315       zur Domain raspi-az blockiert.
316
317       Das laesst sich vermeiden, wenn der Server den Aufruf zum Raspi
318       uebernimmt.
319
320       Interessanterweise kommt der Aufruf zum Raspi durch und löst auch
321       das Abspielen des Radiosenders aus. Nur die Antwort vom Raspi wird
322       blockiert und hier nicht ausgegeben.
323     */
324     app_meldung_mit_timeout(antwort, 2000);
325   }).fail(function(xhr, status, errorThrown ) {
326     app_meldung_mit_timeout(errorThrown + " " + status, 2000);
327   });
9e336a 328 }
U 329
47a970 330 /*
U 331   Ein Template vom Server in den Cache laden
332   template_url - home.tpl, prefs.tpl, sender.tpl
333   tname - 'home', 'prefs', 'sender'
334 */
335 function app_get_template(template_url, tname) {
336   $.ajax({
337     url: template_url,
338     type: "GET",
339     dataType : "text"
340   }).done(function( template ) {
341     templateCache[tname] = template;
342   });
623a61 343 }
e6c850 344
U 345 /* Objekte */
346
347 function Sender(i, n, u, l) {
348   this.id = i;
349   this.name = n;
350   this.url = u;
351   this.logo = l;
352 }
abef80 353
U 354 function Abspieler(i, n, u, t, b, z) {
355   this.id = i;
356   this.name = n;
357   this.url = u;
358   this.typ = t;
359   this.bild = b;
360   this.zustand = z;
361 }