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