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