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