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