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