Bedienoberfläche für Webradio
view | history | commit | commitdiff
ulrich
2018-01-27 299b6803ce4f89a9f1b474362baf56f3e473822a
commit | author | age
623a61 1 var TPL_HOME = 'home';
U 2 var TPL_PREFS = 'prefs';
47a970 3 var TPL_SENDER = 'sender';
9e336a 4 var TPL_DLG_MSG = 'dlg-msg';
36646e 5 var TPL_DLG_INFO = 'dlg-info';
ffc872 6 var TPL_DLG_SENDER_NEU = 'dlg-sender-neu';
U 7 var TPL_DLG_SENDER_EDIT = 'dlg-sender-edit';
56852d 8 var TPL_SENDER_EDIT_FORM = 'sender-edit-form';
f9c6e2 9 var TPL_SENDER_KACHEL = 'sender-kachel';
576085 10 var TPL_ABSPIELER = 'abspieler';
f1e273 11 var TPL_DLG_ABSPIELER_NEU = 'dlg-abspieler-neu';
8d5292 12 var TPL_DLG_ABSPIELER_EDIT_FORM = 'dlg-abspieler-edit-form';
089f14 13 var TPL_ABSPIELER_EINTRAG = 'abspieler-eintrag';
df379b 14 var templateCache = {}; // mustache templates
623a61 15 var prefsRendered = false;
abef80 16 var senderKlickModus = "1"; // 1=abspielen, 2=bearbeiten, 3=loeschen
f9c6e2 17 var ID_UNDEFINED = -1;
e73f1b 18 var A_ID_UNDEFINED = -1;
599f2f 19 var suchTimeout;
623a61 20
U 21 function app_init() {
abef80 22   $('.sued').text('Initialisieren..');
9f0d54 23   $('.dialog').hide();
623a61 24   $('.ost').hide();
abef80 25
U 26   // Menü initialisieren
136220 27   app_menu_init(
U 28     "data/menu/",
29     "hauptmenue.json",
30     "../jslib/app-menu/app-menu.tpl",
31     ".west",
32     "8em");
abef80 33
U 34   // Templates laden
8881ca 35   app_get_template('data/tpl/dlg-msg.tpl', TPL_DLG_MSG);
U 36   app_get_template('data/tpl/dlg-info.tpl', TPL_DLG_INFO);
37   app_get_template('data/tpl/sender.tpl', TPL_SENDER);
ffc872 38   app_get_template('data/tpl/dlg-sender-neu.tpl', TPL_DLG_SENDER_NEU);
U 39   app_get_template('data/tpl/dlg-sender-edit.tpl', TPL_DLG_SENDER_EDIT);
56852d 40   app_get_template('data/tpl/dlg-sender-edit-form.tpl', TPL_SENDER_EDIT_FORM);
f9c6e2 41   app_get_template('data/tpl/kachel.tpl', TPL_SENDER_KACHEL);
576085 42   app_get_template('data/tpl/abspieler.tpl', TPL_ABSPIELER);
f1e273 43   app_get_template('data/tpl/dlg-abspieler-neu.tpl', TPL_DLG_ABSPIELER_NEU);
089f14 44   app_get_template('data/tpl/abspieler-eintrag.tpl', TPL_ABSPIELER_EINTRAG);
8d5292 45   app_get_template('data/tpl/dlg-abspieler-edit-form.tpl', TPL_DLG_ABSPIELER_EDIT_FORM);
03f9a7 46
abef80 47   // Klicks auf das Hamburger-Menü-Icon an eine Funktion leiten
U 48   $(".hamburger").on("click", function(e) {
03f9a7 49     app_menue_umschalten();
U 50   });
51
abef80 52   // Eingaben ins Suchfeld an eine Funktion leiten
599f2f 53   $(".sendersuche-eingabe").on('keyup', function() {
U 54     clearTimeout(suchTimeout);
55     suchTimeout = setTimeout('app_sendersuche()', 500);
56   });
abef80 57
U 58   // Abspieler und Sender laden
623a61 59   setTimeout(function() {
576085 60     app_get_abspieler();
a480d0 61     app_get_sender();
abef80 62     $('.sued').text('Bereit.');
623a61 63   }, 200);
47a970 64 }
U 65
599f2f 66 function app_sendersuche() {
U 67   var suchbegriff = $(".sendersuche-eingabe").val();
68   /*
69     Anstelle der folgenden Meldung wuerde hier
70     die Suchfunktion ausgefuehrt
71   */
72   app_meldung_mit_timeout(
73     'Suchbegriff: ' + suchbegriff,
74     1500
75   );
03f9a7 76 }
U 77
78 function app_menue_umschalten() {
abef80 79   $(".hamburger").toggleClass("is-active"); // hamburger-icon umschalten
03f9a7 80   app_menu_toggle(); // menue oeffnen/schliessen
abef80 81 }
08bce7 82
abef80 83 /* Abspieler und abspielen */
U 84
85 function app_get_abspiel_ziel() {
86   var opt = $(".abspieler-auswahl :selected");
87   var atyp = opt.attr("atyp");
88   var aname = opt.text();
89   var aurl = opt.attr("aurl");
90   return new Abspieler(-1, aname, aurl, atyp, "", "selected");
91 }
92
93 /*
94   Abspiel-URL für Raspi:
95   http://raspi:8080/pirc/sys/rpc?c=de.uhilger.pirc.App&m=abspielen&p=http://bob.hoerradar.de/radiobob-live-mp3-hq&p=
c70430 96
U 97   der folgende Aufruf übergibt zusätzlich einen Parameter zum Abspielen über
98   das Audiokabel (nicht das HDMI-Kabel) des Raspi (sofern angeschlossen)
99   http://raspi-wz:8080/pirc/sys/rpc?c=de.uhilger.pirc.App
100   &m=abspielenMitParametern&p=http://bob.hoerradar.de/radiobob-live-mp3-hq
101   &p=-o%20local&p=
abef80 102 */
U 103 function app_abspielen(sender, abspieler) {
c70430 104   var url;
abef80 105   if(abspieler.typ === 'pirc') {
c70430 106     url =
abef80 107       abspieler.url +
c70430 108       '/sys/rpc?c=de.uhilger.pirc.App&m=abspielenMitParametern&p=' +
abef80 109       sender.url +
c70430 110       '&p=-o%20local&p=';
abef80 111     app_radio_kommando_senden(url);
U 112   } else {
c70430 113     url = sender.url;
U 114     var win = window.open(url, '_blank');
115     win.focus();
abef80 116   }
U 117 }
118
119 function app_abspielen_stoppen() {
120   var abspieler = app_get_abspiel_ziel();
121   if(abspieler.typ === 'pirc') {
122     var url =
123       abspieler.url +
124       '/sys/rpc?c=de.uhilger.pirc.App&m=kommando&p=q';
125     app_radio_kommando_senden(url);
126   } else {
127     // 'hier abspielen' stoppen muss noch gebaut werden
128   }
089f14 129 }
U 130
131 function app_abspieler_neu(abspieler) {
132   var html = Mustache.render(templateCache[TPL_ABSPIELER_EINTRAG], abspieler);
133   if(abspieler.zustand === 'selected') {
134     $.each($(".abspieler-auswahl option:selected"), function() {
135        $(this).prop('selected', false);
136     });
137   }
138   $(".abspieler-auswahl").append(html);
599f2f 139 }
U 140
3cecdc 141 /* Senderliste */
U 142
143 function app_kachel_anpassen(sender) {
144   var kachel = $( "div[sid='" + sender.id + "']" );
abef80 145   kachel.find(".sender-name").text(sender.name);
U 146   kachel.attr("data-verweis", sender.url);
147   kachel.find("img").attr("src", sender.logo);
f9c6e2 148 }
U 149
150 function app_kachel_neu(sender) {
151   var html = Mustache.render(templateCache[TPL_SENDER_KACHEL], sender);
152   $("#sender").append(html);
153   var kachel = $( "div[sid='" + sender.id + "']" );
abef80 154   kachel.on('click', app_kachel_klick);
f9c6e2 155 }
U 156
157 function app_kachel_klick() {
158   var kachel = $( this );
abef80 159   var senderId = kachel.attr("sid");
U 160   var senderName = kachel.find(".sender-name").text();
161   var senderUrl = kachel.attr("data-verweis");
162   var senderLogo = kachel.find("img").attr("src");
f9c6e2 163   var s = new Sender(senderId, senderName, senderUrl, senderLogo);
U 164   switch (senderKlickModus) {
165       case "1":
abef80 166         app_abspielen(s, app_get_abspiel_ziel());
f9c6e2 167         break;
U 168       case "2":
169         $(".dlg-behaelter").html(
170           Mustache.render(templateCache[TPL_SENDER_EDIT_FORM], s)
171         );
172         $('#sender-speichern').on('click', function() {
173           $('#sender-speichern').off('click');
174           app_kachel_anpassen(app_sender_dialog_lesen(senderId));
175           app_dialog_schliessen();
176           app_meldung_mit_timeout('Speichern gewaehlt', 1500);
177         });
178         break;
179       case "3":
180         break;
181       default:
182         app_meldung_mit_timeout(
183           'Sender ' + s.name + ', ID ' + s.id,
184           1500
185         );
186         break;
187   }
3cecdc 188 }
U 189
8881ca 190 /* --- Menüfunktionen --- */
U 191
9f0d54 192 function app_nachricht_test() {
e6c850 193   app_dialog_laden_und_zeigen(
U 194     templateCache[TPL_DLG_MSG], 'data/msg-test.json');
03f9a7 195   app_menue_umschalten();
36646e 196 }
U 197
198 function app_info_dialog_zeigen() {
b520d1 199   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_INFO], '');
03f9a7 200   app_menue_umschalten();
8881ca 201 }
U 202
5226a2 203 function app_neuer_sender() {
ffc872 204   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_NEU], '');
b520d1 205   $('#sender-speichern').on('click', function() {
136220 206     $('#sender-speichern').off('click');
f9c6e2 207     app_kachel_neu(app_sender_dialog_lesen(--ID_UNDEFINED));
b520d1 208     app_dialog_schliessen();
742e75 209     app_meldung_mit_timeout('Speichern gewaehlt', 1500);
b520d1 210   });
03f9a7 211   app_menue_umschalten();
5226a2 212 }
U 213
742e75 214 function app_sender_bearbeiten() {
56852d 215   senderKlickModus = "2"; // bearbeiten
ffc872 216   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_EDIT], '');
03f9a7 217   app_menue_umschalten();
742e75 218 }
5226a2 219
742e75 220 function app_sender_loeschen() {
U 221   app_meldung_mit_timeout('Nicht implementiert: Sender loeschen.', 1500);
03f9a7 222   app_menue_umschalten();
742e75 223 }
U 224
69ffa5 225 function app_abspieler_loeschen() {
U 226   app_meldung_mit_timeout('Nicht implementiert: Abspieler loeschen.', 1500);
03f9a7 227   app_menue_umschalten();
69ffa5 228 }
U 229 function app_neuer_abspieler() {
f1e273 230   app_dialog_laden_und_zeigen(templateCache[TPL_DLG_ABSPIELER_NEU], '');
U 231   $('#abspieler-speichern').on('click', function() {
232     $('#abspieler-speichern').off('click');
089f14 233     app_abspieler_neu(app_abspieler_dialog_lesen(--A_ID_UNDEFINED));
f1e273 234     app_dialog_schliessen();
U 235     app_meldung_mit_timeout('Speichern gewaehlt', 1500);
236   });
03f9a7 237   app_menue_umschalten();
69ffa5 238 }
U 239 function app_abspieler_bearbeiten() {
cb2424 240   var abspieler = app_get_abspiel_ziel();
d52d2a 241   app_dialog_zeigen(templateCache[TPL_DLG_ABSPIELER_EDIT_FORM], abspieler);
U 242   //app_dialog_laden_und_zeigen(templateCache[TPL_DLG_ABSPIELER_EDIT_FORM], '');
8d5292 243   $('#abspieler-speichern').on('click', function() {
U 244     $('#abspieler-speichern').off('click');
245
246     /*
247       hier eine Funktion zum Speichern der Aenderungen
248     */
249     app_dialog_schliessen();
250     app_meldung_mit_timeout('Speichern gewaehlt', 1500);
251   });
03f9a7 252   app_menue_umschalten();
69ffa5 253 }
U 254
742e75 255 /* --- Dialogfunktionen --- */
8881ca 256
U 257 function app_dialog_zeigen(vorlage, inhalt) {
abef80 258   var dlg = $(".dialog");
U 259   dlg.html(Mustache.render(vorlage, inhalt));
8881ca 260   $(".close-btn").on('click', function() {
b520d1 261     app_dialog_schliessen();
8881ca 262   });
abef80 263   dlg.slideDown(300);
f9c6e2 264 }
U 265
266 function app_sender_dialog_lesen(senderId) {
267   var nameNeu = $("#sender-name").val();
268   var logoNeu = $("#sender-logo").val();
269   var urlNeu = $("#sender-url").val();
270   return new Sender(senderId, nameNeu, urlNeu, logoNeu);
b520d1 271 }
U 272
e73f1b 273 function app_abspieler_dialog_lesen(abspielerId) {
U 274   var aName = $("#abspieler-name").val();
275   var aUrl = $("#abspieler-url").val();
276   var aTyp = $("#abspieler-typ").val();
277   var aBild = $("#abspieler-bild").val();
278   var aZustand = $("#abspieler-zustand").val();
279   return new Abspieler(abspielerId, aName, aUrl, aTyp, aBild, aZustand);
280 }
281
b520d1 282 function app_dialog_schliessen() {
abef80 283   senderKlickModus = "1";
136220 284   $('.close-btn').off('click');
b520d1 285   $('.dialog').slideUp(300);
9f0d54 286 }
U 287
742e75 288 /* --- Meldungen in der Fusszeile --- */
U 289
290 /*
291   Eine Meldung eine Zeitlang in der Fusszeile anzeigen
292
293   meldung - Text der Meldung
294   timeout - die Anzahl Millisekunden, die eine Meldung zu sehen sein soll
295 */
296 function app_meldung_mit_timeout(meldung, timeout) {
abef80 297   var s = $('.sued');
U 298   s.text(meldung);
742e75 299   setTimeout(function() {
abef80 300     s.text('Bereit.');
742e75 301   }, timeout);
U 302 }
303
47a970 304 /* --- Ajax-Aufrufe --- */
U 305
a480d0 306 function app_get_sender() {
U 307   $.ajax({
0c85a2 308     url: "data/sender.json",
a480d0 309     type: "GET",
U 310     dataType : "json"
311   }).done(function( senderliste ) {
56852d 312     $(".sender-kachel").off("click");
U 313     $(".sender-behaelter").html(
314       Mustache.render(templateCache[TPL_SENDER], senderliste));
f9c6e2 315     $('.sender-kachel').on('click', app_kachel_klick);
a480d0 316   });
U 317 }
318
576085 319 function app_get_abspieler() {
U 320   $.ajax({
321     url: "data/abspieler.json",
322     type: "GET",
323     dataType : "json"
324   }).done(function( abspielerliste ) {
325     $(".abspieler-behaelter").html(
326       Mustache.render(templateCache[TPL_ABSPIELER], abspielerliste));
abef80 327     $("#abspielen-stoppen").on('click', app_abspielen_stoppen);
576085 328   });
U 329 }
330
8d5292 331 /*
U 332   vorlage - die Dialogvorlage
333   msgTpl - eine Vorlage mit einem Mitteilungstext (optional)
334 */
335 function app_dialog_laden_und_zeigen(vorlage, msgTpl) {
98c715 336   if(msgTpl !== '') {
36646e 337     $.ajax({
8d5292 338       url: msgTpl,
36646e 339       type: "GET",
U 340       dataType : "json"
341     }).done(function( msg ) {
8881ca 342       app_dialog_zeigen(vorlage, msg);
36646e 343     });
U 344   } else {
8881ca 345     app_dialog_zeigen(vorlage, '');
36646e 346   }
abef80 347 }
U 348
349 function app_radio_kommando_senden(kommando) {
350   $.ajax({
351     url: kommando,
352     type: "GET",
353     dataType : "text",
354     crossDomain: true
355   }).done(function( antwort ) {
356     /*
357       der folgende Schritt wird nicht erreicht, weil beim Aufruf
358       aus dem Browser heraus keine Adresse aufgerufen werden darf,
359       die nicht von der Domain kommt, von der aus das radio-ui
360       ausgeliefert wird.
361
362       Kommt das radio-ui z.B. von der Domain uhilger.de, wird ein Aufruf
363       zur Domain raspi-az blockiert.
364
365       Das laesst sich vermeiden, wenn der Server den Aufruf zum Raspi
366       uebernimmt.
367
368       Interessanterweise kommt der Aufruf zum Raspi durch und löst auch
369       das Abspielen des Radiosenders aus. Nur die Antwort vom Raspi wird
370       blockiert und hier nicht ausgegeben.
371     */
372     app_meldung_mit_timeout(antwort, 2000);
373   }).fail(function(xhr, status, errorThrown ) {
374     app_meldung_mit_timeout(errorThrown + " " + status, 2000);
375   });
9e336a 376 }
U 377
47a970 378 /*
U 379   Ein Template vom Server in den Cache laden
380   template_url - home.tpl, prefs.tpl, sender.tpl
381   tname - 'home', 'prefs', 'sender'
382 */
383 function app_get_template(template_url, tname) {
384   $.ajax({
385     url: template_url,
386     type: "GET",
387     dataType : "text"
388   }).done(function( template ) {
389     templateCache[tname] = template;
390   });
623a61 391 }
e6c850 392
U 393 /* Objekte */
394
395 function Sender(i, n, u, l) {
396   this.id = i;
397   this.name = n;
398   this.url = u;
399   this.logo = l;
400 }
abef80 401
U 402 function Abspieler(i, n, u, t, b, z) {
403   this.id = i;
404   this.name = n;
405   this.url = u;
406   this.typ = t;
407   this.bild = b;
408   this.zustand = z;
409 }