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