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