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