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