var TPL_HOME = 'home'; var TPL_PREFS = 'prefs'; var TPL_SENDER = 'sender'; var TPL_DLG_MSG = 'dlg-msg'; var TPL_DLG_INFO = 'dlg-info'; var TPL_DLG_SENDER_NEU = 'dlg-sender-neu'; var TPL_DLG_SENDER_EDIT = 'dlg-sender-edit'; var TPL_DLG_SENDER_DEL = 'dlg-sender-del'; var TPL_SENDER_EDIT_FORM = 'sender-edit-form'; var TPL_SENDER_KACHEL = 'sender-kachel'; var TPL_ABSPIELER = 'abspieler'; var TPL_DLG_ABSPIELER_NEU = 'dlg-abspieler-neu'; var TPL_DLG_ABSPIELER_EDIT_FORM = 'dlg-abspieler-edit-form'; var TPL_DLG_ABSPIELER_DEL = 'dlg-abspieler-del'; var TPL_ABSPIELER_EINTRAG = 'abspieler-eintrag'; var prefsRendered = false; var senderKlickModus = "1"; // 1=abspielen, 2=bearbeiten, 3=loeschen var ID_UNDEFINED = -1; var A_ID_UNDEFINED = -1; var suchTimeout; var vorlagen; function app_init() { vorlagen = new Vorlagen(); $('.sued').text('Initialisieren..'); $('.dialog').hide(); $('.ost').hide(); // Menü initialisieren app_menu_init( "data/menu/", "hauptmenue.json", "../jslib/app-menu/app-menu.tpl", ".west", "8em"); // Klicks auf das Hamburger-Menü-Icon an eine Funktion leiten $(".hamburger").on("click", function(e) { app_menue_umschalten(); }); // Eingaben ins Suchfeld an eine Funktion leiten $(".sendersuche-eingabe").on('keyup', function() { clearTimeout(suchTimeout); suchTimeout = setTimeout('app_sendersuche()', 500); }); // Abspieler und Sender laden setTimeout(function() { app_get_abspieler(); app_get_sender(); $('.sued').text('Bereit.'); }, 200); } function app_sendersuche() { var suchbegriff = $(".sendersuche-eingabe").val(); app_meldung_mit_timeout( 'Suchbegriff: ' + suchbegriff, 1500 ); /* nachfolgend wird ueber alle divs der Klasse sender-kachel iteriert und diejenigen mit .hide() ausgeblendet, die nicht den Suchbegiff im Namen tragen evtl. findet sich spaeter noch eine elegantere Suchfunktion.. */ var divs = $(".sender-kachel"); if(suchbegriff.length > 0) { divs.each(function(index, element) { if ($(element).html().indexOf(suchbegriff) < 0) { $(element).hide(); } else { $(element).show(); } }); } else { $(divs).show(); } } function app_menue_umschalten() { $(".hamburger").toggleClass("is-active"); // hamburger-icon umschalten app_menu_toggle(); // menue oeffnen/schliessen } /* Abspieler und abspielen */ function app_get_abspiel_ziel() { var opt = $(".abspieler-auswahl :selected"); var atyp = opt.attr("atyp"); var aname = opt.text(); var aurl = opt.attr("aurl"); var zustand = opt.attr("standardzustand"); return new Abspieler(-1, aname, aurl, atyp, "", zustand); } /* Abspiel-URL für Raspi: http://raspi:8080/pirc/sys/rpc?c=de.uhilger.pirc.App&m=abspielen&p=http://bob.hoerradar.de/radiobob-live-mp3-hq&p= der folgende Aufruf übergibt zusätzlich einen Parameter zum Abspielen über das Audiokabel (nicht das HDMI-Kabel) des Raspi (sofern angeschlossen) http://raspi-wz:8080/pirc/sys/rpc?c=de.uhilger.pirc.App &m=abspielenMitParametern&p=http://bob.hoerradar.de/radiobob-live-mp3-hq &p=-o%20local&p= */ function app_abspielen(sender, abspieler) { var url; if(abspieler.typ === 'pirc') { url = abspieler.url + '/sys/rpc?c=de.uhilger.pirc.App&m=abspielenMitParametern&p=' + sender.url + '&p=-o%20local&p='; /* Das folgende Kommando in Produktion 'entkommentieren' */ // app_radio_kommando_senden(url); } else { url = sender.url; /* Die folgenden Kommandos in Produktion 'entkommentieren' */ // var win = window.open(url, '_blank'); // win.focus(); } /* Das folgende Kommando in Produktion auskommentieren */ app_dialog_laden_und_zeigen( 'data/tpl/dlg-msg.tpl', 'data/msg-proto.json'); } function app_abspielen_stoppen() { var abspieler = app_get_abspiel_ziel(); if(abspieler.typ === 'pirc') { var url = abspieler.url + '/sys/rpc?c=de.uhilger.pirc.App&m=kommando&p=q'; app_radio_kommando_senden(url); } else { // 'hier abspielen' stoppen muss noch gebaut werden } } function app_abspieler_neu(abspieler) { vorlagen.html_erzeugen( 'data/tpl/abspieler-eintrag.tpl', abspieler, function(html) { if(abspieler.zustand === 'selected') { $.each($(".abspieler-auswahl option:selected"), function() { $(this).prop('selected', false); }); } $(".abspieler-auswahl").append(html); }); } function app_abspieler_entfernen(abspieler) { $(".abspieler-auswahl :selected").remove(); } /* Senderliste */ function app_kachel_anpassen(sender) { var kachel = $( "div[sid='" + sender.id + "']" ); kachel.find(".sender-name").text(sender.name); kachel.attr("data-verweis", sender.url); kachel.find("img").attr("src", sender.logo); } function app_kachel_neu(sender) { vorlagen.html_erzeugen( 'data/tpl/kachel.tpl', abspieler, function(html) { $("#sender").append(html); var kachel = $( "div[sid='" + sender.id + "']" ); kachel.on('click', app_kachel_klick); }); } function app_kachel_entfernen(sender) { $( "div[sid='" + sender.id + "']" ).remove(); } function app_kachel_klick() { var kachel = $( this ); var senderId = kachel.attr("sid"); var senderName = kachel.find(".sender-name").text(); var senderUrl = kachel.attr("data-verweis"); var senderLogo = kachel.find("img").attr("src"); var s = new Sender(senderId, senderName, senderUrl, senderLogo); switch (senderKlickModus) { case "1": app_abspielen(s, app_get_abspiel_ziel()); break; case "2": vorlagen.html_erzeugen( 'data/tpl/dlg-sender-edit-form.tpl', s, function(html) { $(".dlg-behaelter").html(html); var kachel = $( "div[sid='" + sender.id + "']" ); kachel.on('click', app_kachel_klick); $('#sender-speichern').on('click', function() { $('#sender-speichern').off('click'); app_kachel_anpassen(app_sender_dialog_lesen(senderId)); app_dialog_schliessen(); app_meldung_mit_timeout('Speichern gewaehlt', 1500); }); }); break; case "3": app_dialog_zeigen('data/tpl/dlg-sender-loeschen.tpl', s); $('#sender-loeschen').on('click', function() { $('#sender-loeschen').off('click'); app_kachel_entfernen(s); app_dialog_schliessen(); app_meldung_mit_timeout('Loeschen gewaehlt ' + s.name, 1500); }); //app_menue_umschalten(); break; default: app_meldung_mit_timeout( 'Sender ' + s.name + ', ID ' + s.id, 1500 ); break; } } /* --- Menüfunktionen --- */ function app_nachricht_test() { app_dialog_laden_und_zeigen( 'data/tpl/dlg-msg.tpl', 'data/msg-test.json'); app_menue_umschalten(); } function app_info_dialog_zeigen() { app_dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', ''); app_menue_umschalten(); } function app_neuer_sender() { app_dialog_laden_und_zeigen('data/tpl/dlg-sender-neu.tpl', ''); $('#sender-speichern').on('click', function() { $('#sender-speichern').off('click'); app_kachel_neu(app_sender_dialog_lesen(--ID_UNDEFINED)); app_dialog_schliessen(); app_meldung_mit_timeout('Speichern gewaehlt', 1500); }); app_menue_umschalten(); } function app_sender_bearbeiten() { senderKlickModus = "2"; // bearbeiten app_dialog_laden_und_zeigen('data/tpl/dlg-sender-edit.tpl', ''); app_menue_umschalten(); } function app_sender_loeschen() { senderKlickModus = "3"; // loeschen app_dialog_laden_und_zeigen('data/tpl/dlg-sender-edit.tpl', ''); app_menue_umschalten(); } function app_abspieler_loeschen() { var abspieler = app_get_abspiel_ziel(); app_dialog_zeigen('data/tpl/dlg-abspieler-loeschen.tpl', abspieler); $('#abspieler-loeschen').on('click', function() { $('#abspieler-loeschen').off('click'); app_abspieler_entfernen(abspieler); app_dialog_schliessen(); app_meldung_mit_timeout('Loeschen gewaehlt ' + abspieler.name, 1500); }); app_menue_umschalten(); } function app_neuer_abspieler() { app_dialog_laden_und_zeigen('data/tpl/dlg-abspieler-neu.tpl', ''); $('#abspieler-speichern').on('click', function() { $('#abspieler-speichern').off('click'); app_abspieler_neu(app_abspieler_dialog_lesen(--A_ID_UNDEFINED)); app_dialog_schliessen(); app_meldung_mit_timeout('Speichern gewaehlt', 1500); }); app_menue_umschalten(); } function app_abspieler_bearbeiten() { var abspieler = app_get_abspiel_ziel(); app_dialog_zeigen('data/tpl/dlg-abspieler-edit-form.tpl', abspieler); $("#abspieler-typ").val(abspieler.typ); $("#abspieler-zustand").val(abspieler.zustand); $('#abspieler-speichern').on('click', function() { $('#abspieler-speichern').off('click'); // Aenderungen auf die Bedienoberflaeche uebernehmen var abspieler = app_abspieler_dialog_lesen(); if(abspieler.zustand === 'selected') { $(".abspieler-auswahl").children().attr("standardzustand", ""); } var opt = $(".abspieler-auswahl :selected"); opt.attr("atyp", abspieler.typ); opt.attr("aurl", abspieler.url); opt.attr("standardzustand", abspieler.zustand); opt.text(abspieler.name); /* hier fehlt noch eine Funktion zum Speichern der Aenderungen */ app_dialog_schliessen(); app_meldung_mit_timeout('Speichern gewaehlt', 1500); }); app_menue_umschalten(); } /* --- Dialogfunktionen --- */ function app_dialog_zeigen(vurl, inhalt) { var dlg = $(".dialog"); vorlagen.html_erzeugen( vurl, inhalt, function(html) { dlg.html(html); $(".close-btn").on('click', function() { app_dialog_schliessen(); }); dlg.slideDown(300); }); } function app_sender_dialog_lesen(senderId) { var nameNeu = $("#sender-name").val(); var logoNeu = $("#sender-logo").val(); var urlNeu = $("#sender-url").val(); return new Sender(senderId, nameNeu, urlNeu, logoNeu); } function app_abspieler_dialog_lesen(abspielerId) { var aName = $("#abspieler-name").val(); var aUrl = $("#abspieler-url").val(); var aTyp = $("#abspieler-typ").val(); var aBild = $("#abspieler-bild").val(); var aZustand = $("#abspieler-zustand").val(); return new Abspieler(abspielerId, aName, aUrl, aTyp, aBild, aZustand); } function app_dialog_schliessen() { senderKlickModus = "1"; $('.close-btn').off('click'); $('.dialog').slideUp(300); } /* --- Meldungen in der Fusszeile --- */ /* Eine Meldung eine Zeitlang in der Fusszeile anzeigen meldung - Text der Meldung timeout - die Anzahl Millisekunden, die eine Meldung zu sehen sein soll */ function app_meldung_mit_timeout(meldung, timeout) { var s = $('.sued'); s.text(meldung); setTimeout(function() { s.text('Bereit.'); }, timeout); } /* --- Ajax-Aufrufe --- */ function app_get_sender() { $.ajax({ url: "data/sender.json", type: "GET", dataType : "json" }).done(function( senderliste ) { $(".sender-kachel").off("click"); vorlagen.html_erzeugen( 'data/tpl/sender.tpl', senderliste, function(html) { $(".sender-behaelter").html(html); $('.sender-kachel').on('click', app_kachel_klick); }); }); } function app_get_abspieler() { $.ajax({ url: "data/abspieler.json", type: "GET", dataType : "json" }).done(function( abspielerliste ) { vorlagen.html_erzeugen( 'data/tpl/abspieler.tpl', abspielerliste, function(html) { $(".abspieler-behaelter").html(html); $("#abspielen-stoppen").on('click', app_abspielen_stoppen); }); }); } /* vorlage - die Dialogvorlage msgTpl - eine Vorlage mit einem Mitteilungstext (optional) */ function app_dialog_laden_und_zeigen(vurl, msgTpl) { if(msgTpl !== '') { $.ajax({ url: msgTpl, type: "GET", dataType : "json" }).done(function( msg ) { app_dialog_zeigen(vurl, msg); }); } else { app_dialog_zeigen(vurl, ''); } } function app_radio_kommando_senden(kommando) { $.ajax({ url: kommando, type: "GET", dataType : "text", crossDomain: true }).done(function( antwort ) { /* der folgende Schritt wird nicht erreicht, weil beim Aufruf aus dem Browser heraus keine Adresse aufgerufen werden darf, die nicht von der Domain kommt, von der aus das radio-ui ausgeliefert wird. Kommt das radio-ui z.B. von der Domain uhilger.de, wird ein Aufruf zur Domain raspi-az blockiert. Das laesst sich vermeiden, wenn der Server den Aufruf zum Raspi uebernimmt. Interessanterweise kommt der Aufruf zum Raspi durch und löst auch das Abspielen des Radiosenders aus. Nur die Antwort vom Raspi wird blockiert und hier nicht ausgegeben. */ app_meldung_mit_timeout(antwort, 2000); }).fail(function(xhr, status, errorThrown ) { app_meldung_mit_timeout(errorThrown + " " + status, 2000); }); } /* Objekte */ function Sender(i, n, u, l) { this.id = i; this.name = n; this.url = u; this.logo = l; } function Abspieler(i, n, u, t, b, z) { this.id = i; this.name = n; this.url = u; this.typ = t; this.bild = b; this.zustand = z; }