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