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