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