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