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