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