Webradio
view | history | commit | commitdiff
ulrich
2018-02-25 87af61e06637362d33ea91b25a464aaf88cd9bd4
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');
206           app_kachel_anpassen(app_sender_dialog_lesen(senderId));
207           app_dialog_schliessen();
208           app_meldung_mit_timeout('Speichern gewaehlt', 1500);
209         });
210         break;
211       case "3":
212         app_dialog_zeigen(templateCache[TPL_DLG_SENDER_DEL], s);
213         /*
214         $(".dlg-behaelter").html(
215           Mustache.render(templateCache[TPL_DLG_SENDER_DEL], s)
216         );
217         */
218         $('#sender-loeschen').on('click', function() {
219           $('#sender-loeschen').off('click');
220           app_kachel_entfernen(s);
221           app_dialog_schliessen();
222           app_meldung_mit_timeout('Loeschen gewaehlt ' + s.name, 1500);
223         });
224         //app_menue_umschalten();
225         break;
226       default:
227         app_meldung_mit_timeout(
228           'Sender ' + s.name + ', ID ' + s.id,
229           1500
230         );
231         break;
232   }
233 }
234
235 /* --- Menüfunktionen --- */
236
237 function app_nachricht_test() {
238   app_dialog_laden_und_zeigen(
239     templateCache[TPL_DLG_MSG], 'data/msg-test.json');
240   app_menue_umschalten();
241 }
242
243 function app_info_dialog_zeigen() {
244   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_INFO], '');
245   app_menue_umschalten();
246 }
247
248 function app_neuer_sender() {
249   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_NEU], '');
250   $('#sender-speichern').on('click', function() {
251     $('#sender-speichern').off('click');
a0ec7b 252     var sender = app_sender_dialog_lesen(--ID_UNDEFINED);
U 253     app_neuen_sender_speichern(sender);
254     app_kachel_neu(sender);
9c2c3c 255     app_dialog_schliessen();
U 256     app_meldung_mit_timeout('Speichern gewaehlt', 1500);
257   });
258   app_menue_umschalten();
259 }
260
261 function app_sender_bearbeiten() {
262   senderKlickModus = "2"; // bearbeiten
263   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_EDIT], '');
264   app_menue_umschalten();
265 }
266
267 function app_sender_loeschen() {
268   senderKlickModus = "3"; // loeschen
269   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_EDIT], '');
270   app_menue_umschalten();
271 }
272
273 function app_abspieler_loeschen() {
274   var abspieler = app_get_abspiel_ziel();
275   app_dialog_zeigen(templateCache[TPL_DLG_ABSPIELER_DEL], abspieler);
276   $('#abspieler-loeschen').on('click', function() {
277     $('#abspieler-loeschen').off('click');
278     app_abspieler_entfernen(abspieler);
279     app_dialog_schliessen();
280     app_meldung_mit_timeout('Loeschen gewaehlt ' + abspieler.name, 1500);
281   });
282   app_menue_umschalten();
283 }
284 function app_neuer_abspieler() {
285   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_ABSPIELER_NEU], '');
286   $('#abspieler-speichern').on('click', function() {
287     $('#abspieler-speichern').off('click');
288     app_abspieler_neu(app_abspieler_dialog_lesen(--A_ID_UNDEFINED));
289     app_dialog_schliessen();
290     app_meldung_mit_timeout('Speichern gewaehlt', 1500);
291   });
292   app_menue_umschalten();
293 }
294 function app_abspieler_bearbeiten() {
295   var abspieler = app_get_abspiel_ziel();
296   app_dialog_zeigen(templateCache[TPL_DLG_ABSPIELER_EDIT_FORM], abspieler);
297   $("#abspieler-typ").val(abspieler.typ);
298   $("#abspieler-zustand").val(abspieler.zustand);
299   $('#abspieler-speichern').on('click', function() {
300     $('#abspieler-speichern').off('click');
301
302     // Aenderungen auf die Bedienoberflaeche uebernehmen
303     var abspieler = app_abspieler_dialog_lesen();
304     if(abspieler.zustand === 'selected') {
305       $(".abspieler-auswahl").children().attr("standardzustand", "");
306     }
307     var opt = $(".abspieler-auswahl :selected");
308     opt.attr("atyp", abspieler.typ);
309     opt.attr("aurl", abspieler.url);
310     opt.attr("standardzustand", abspieler.zustand);
311     opt.text(abspieler.name);
312
313     /*
314       hier fehlt noch eine Funktion zum Speichern
315       der Aenderungen
316     */
317
318     app_dialog_schliessen();
319     app_meldung_mit_timeout('Speichern gewaehlt', 1500);
320   });
321   app_menue_umschalten();
322 }
323
324 /* --- Dialogfunktionen --- */
325
326 function app_dialog_zeigen(vorlage, inhalt) {
327   var dlg = $(".dialog");
328   dlg.html(Mustache.render(vorlage, inhalt));
329   $(".close-btn").on('click', function() {
330     app_dialog_schliessen();
331   });
332   dlg.slideDown(300);
333 }
334
335 function app_sender_dialog_lesen(senderId) {
336   var nameNeu = $("#sender-name").val();
337   var logoNeu = $("#sender-logo").val();
338   var urlNeu = $("#sender-url").val();
339   return new Sender(senderId, nameNeu, urlNeu, logoNeu);
340 }
341
342 function app_abspieler_dialog_lesen(abspielerId) {
343   var aName = $("#abspieler-name").val();
344   var aUrl = $("#abspieler-url").val();
345   var aTyp = $("#abspieler-typ").val();
346   var aBild = $("#abspieler-bild").val();
347   var aZustand = $("#abspieler-zustand").val();
348   return new Abspieler(abspielerId, aName, aUrl, aTyp, aBild, aZustand);
349 }
350
351 function app_dialog_schliessen() {
352   senderKlickModus = "1";
353   $('.close-btn').off('click');
354   $('.dialog').slideUp(300);
355 }
356
357 /* --- Meldungen in der Fusszeile --- */
358
359 /*
360   Eine Meldung eine Zeitlang in der Fusszeile anzeigen
361
362   meldung - Text der Meldung
363   timeout - die Anzahl Millisekunden, die eine Meldung zu sehen sein soll
364 */
365 function app_meldung_mit_timeout(meldung, timeout) {
366   var s = $('.sued');
367   s.text(meldung);
368   setTimeout(function() {
369     s.text('Bereit.');
370   }, timeout);
371 }
372
373 /* --- Ajax-Aufrufe --- */
374
375 function app_get_sender() {
376   $.ajax({
6b63ff 377     url: "api?c=de.uhilger.radiozentrale.api.SenderApi&m=senderliste&f=JSONNICE",
9c2c3c 378     type: "GET",
U 379     dataType : "json"
380   }).done(function( senderliste ) {
381     $(".sender-kachel").off("click");
382     $(".sender-behaelter").html(
383       Mustache.render(templateCache[TPL_SENDER], senderliste));
384     $('.sender-kachel').on('click', app_kachel_klick);
385   });
386 }
387
388 function app_get_abspieler() {
389   $.ajax({
390     url: "data/abspieler.json",
391     type: "GET",
392     dataType : "json"
393   }).done(function( abspielerliste ) {
394     $(".abspieler-behaelter").html(
395       Mustache.render(templateCache[TPL_ABSPIELER], abspielerliste));
396     $("#abspielen-stoppen").on('click', app_abspielen_stoppen);
397   });
398 }
399
400 /*
401   vorlage - die Dialogvorlage
402   msgTpl - eine Vorlage mit einem Mitteilungstext (optional)
403 */
404 function app_dialog_laden_und_zeigen(vorlage, msgTpl) {
405   if(msgTpl !== '') {
406     $.ajax({
407       url: msgTpl,
408       type: "GET",
409       dataType : "json"
410     }).done(function( msg ) {
411       app_dialog_zeigen(vorlage, msg);
412     });
413   } else {
414     app_dialog_zeigen(vorlage, '');
415   }
416 }
417
418 function app_radio_kommando_senden(kommando) {
419   $.ajax({
420     url: kommando,
421     type: "GET",
422     dataType : "text",
423     crossDomain: true
424   }).done(function( antwort ) {
425     /*
426       der folgende Schritt wird nicht erreicht, weil beim Aufruf
427       aus dem Browser heraus keine Adresse aufgerufen werden darf,
428       die nicht von der Domain kommt, von der aus das radio-ui
429       ausgeliefert wird.
430
431       Kommt das radio-ui z.B. von der Domain uhilger.de, wird ein Aufruf
432       zur Domain raspi-az blockiert.
433
434       Das laesst sich vermeiden, wenn der Server den Aufruf zum Raspi
435       uebernimmt.
436
437       Interessanterweise kommt der Aufruf zum Raspi durch und löst auch
438       das Abspielen des Radiosenders aus. Nur die Antwort vom Raspi wird
439       blockiert und hier nicht ausgegeben.
440     */
441     app_meldung_mit_timeout(antwort, 2000);
442   }).fail(function(xhr, status, errorThrown ) {
443     app_meldung_mit_timeout(errorThrown + " " + status, 2000);
444   });
445 }
446
447 /*
448   Ein Template vom Server in den Cache laden
449   template_url - home.tpl, prefs.tpl, sender.tpl
450   tname - 'home', 'prefs', 'sender'
451 */
452 function app_get_template(template_url, tname) {
453   $.ajax({
454     url: template_url,
455     type: "GET",
456     dataType : "text"
457   }).done(function( template ) {
458     templateCache[tname] = template;
459   });
460 }
461
a0ec7b 462 function app_neuen_sender_speichern(sender) {
U 463   var obj = serialisieren(sender);
464   var url = 'api?c=de.uhilger.radiozentrale.api.SenderApi&m=neuerSender';
465   $.post( url, 'p=' + obj, function( result ) {
466     console.log( result );
467   }, "json");
468 }
469
470 /* Hilfsfunktionen */
471
472 function serialisieren(obj) {
473   return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
474 }
475
9c2c3c 476 /* Objekte */
U 477
478 function Sender(i, n, u, l) {
479   this.id = i;
480   this.name = n;
481   this.url = u;
482   this.logo = l;
483 }
484
485 function Abspieler(i, n, u, t, b, z) {
486   this.id = i;
487   this.name = n;
488   this.url = u;
489   this.typ = t;
490   this.bild = b;
491   this.zustand = z;
492 }