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 templateCache = {}; // mustache templates
|
var prefsRendered = false;
|
var senderKlickModus = "1"; // 1=abspielen, 2=bearbeiten, 3=loeschen
|
var ID_UNDEFINED = -1;
|
var A_ID_UNDEFINED = -1;
|
var suchTimeout;
|
|
function app_init() {
|
$('.sued').text('Initialisieren..');
|
$('.dialog').hide();
|
$('.ost').hide();
|
|
// Menü initialisieren
|
app_menu_init(
|
"data/menu/",
|
"hauptmenue.json",
|
"../jslib/app-menu/app-menu.tpl",
|
".west",
|
"8em");
|
|
// Templates laden
|
app_get_template('data/tpl/dlg-msg.tpl', TPL_DLG_MSG);
|
app_get_template('data/tpl/dlg-info.tpl', TPL_DLG_INFO);
|
app_get_template('data/tpl/sender.tpl', TPL_SENDER);
|
app_get_template('data/tpl/dlg-sender-neu.tpl', TPL_DLG_SENDER_NEU);
|
app_get_template('data/tpl/dlg-sender-edit.tpl', TPL_DLG_SENDER_EDIT);
|
app_get_template('data/tpl/dlg-sender-loeschen.tpl', TPL_DLG_SENDER_DEL);
|
app_get_template('data/tpl/dlg-sender-edit-form.tpl', TPL_SENDER_EDIT_FORM);
|
app_get_template('data/tpl/kachel.tpl', TPL_SENDER_KACHEL);
|
app_get_template('data/tpl/abspieler.tpl', TPL_ABSPIELER);
|
app_get_template('data/tpl/dlg-abspieler-neu.tpl', TPL_DLG_ABSPIELER_NEU);
|
app_get_template('data/tpl/abspieler-eintrag.tpl', TPL_ABSPIELER_EINTRAG);
|
app_get_template('data/tpl/dlg-abspieler-loeschen.tpl', TPL_DLG_ABSPIELER_DEL);
|
app_get_template('data/tpl/dlg-abspieler-edit-form.tpl', TPL_DLG_ABSPIELER_EDIT_FORM);
|
|
// 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=';
|
app_radio_kommando_senden(url);
|
} else {
|
url = sender.url;
|
var win = window.open(url, '_blank');
|
win.focus();
|
}
|
}
|
|
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) {
|
var html = Mustache.render(templateCache[TPL_ABSPIELER_EINTRAG], abspieler);
|
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) {
|
var html = Mustache.render(templateCache[TPL_SENDER_KACHEL], sender);
|
$("#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":
|
$(".dlg-behaelter").html(
|
Mustache.render(templateCache[TPL_SENDER_EDIT_FORM], s)
|
);
|
$('#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(templateCache[TPL_DLG_SENDER_DEL], s);
|
/*
|
$(".dlg-behaelter").html(
|
Mustache.render(templateCache[TPL_DLG_SENDER_DEL], 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(
|
templateCache[TPL_DLG_MSG], 'data/msg-test.json');
|
app_menue_umschalten();
|
}
|
|
function app_info_dialog_zeigen() {
|
app_dialog_laden_und_zeigen(templateCache[TPL_DLG_INFO], '');
|
app_menue_umschalten();
|
}
|
|
function app_neuer_sender() {
|
app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_NEU], '');
|
$('#sender-speichern').on('click', function() {
|
$('#sender-speichern').off('click');
|
var sender = app_sender_dialog_lesen(--ID_UNDEFINED);
|
app_neuen_sender_speichern(sender);
|
app_kachel_neu(sender);
|
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(templateCache[TPL_DLG_SENDER_EDIT], '');
|
app_menue_umschalten();
|
}
|
|
function app_sender_loeschen() {
|
senderKlickModus = "3"; // loeschen
|
app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_EDIT], '');
|
app_menue_umschalten();
|
}
|
|
function app_abspieler_loeschen() {
|
var abspieler = app_get_abspiel_ziel();
|
app_dialog_zeigen(templateCache[TPL_DLG_ABSPIELER_DEL], 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(templateCache[TPL_DLG_ABSPIELER_NEU], '');
|
$('#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(templateCache[TPL_DLG_ABSPIELER_EDIT_FORM], 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(vorlage, inhalt) {
|
var dlg = $(".dialog");
|
dlg.html(Mustache.render(vorlage, inhalt));
|
$(".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");
|
$(".sender-behaelter").html(
|
Mustache.render(templateCache[TPL_SENDER], senderliste));
|
$('.sender-kachel').on('click', app_kachel_klick);
|
});
|
}
|
|
function app_get_abspieler() {
|
$.ajax({
|
url: "data/abspieler.json",
|
type: "GET",
|
dataType : "json"
|
}).done(function( abspielerliste ) {
|
$(".abspieler-behaelter").html(
|
Mustache.render(templateCache[TPL_ABSPIELER], abspielerliste));
|
$("#abspielen-stoppen").on('click', app_abspielen_stoppen);
|
});
|
}
|
|
/*
|
vorlage - die Dialogvorlage
|
msgTpl - eine Vorlage mit einem Mitteilungstext (optional)
|
*/
|
function app_dialog_laden_und_zeigen(vorlage, msgTpl) {
|
if(msgTpl !== '') {
|
$.ajax({
|
url: msgTpl,
|
type: "GET",
|
dataType : "json"
|
}).done(function( msg ) {
|
app_dialog_zeigen(vorlage, msg);
|
});
|
} else {
|
app_dialog_zeigen(vorlage, '');
|
}
|
}
|
|
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);
|
});
|
}
|
|
/*
|
Ein Template vom Server in den Cache laden
|
template_url - home.tpl, prefs.tpl, sender.tpl
|
tname - 'home', 'prefs', 'sender'
|
*/
|
function app_get_template(template_url, tname) {
|
$.ajax({
|
url: template_url,
|
type: "GET",
|
dataType : "text"
|
}).done(function( template ) {
|
templateCache[tname] = template;
|
});
|
}
|
|
function app_neuen_sender_speichern(sender) {
|
var obj = serialisieren(sender);
|
var url = 'api?c=de.uhilger.radiozentrale.api.SenderApi&m=neuerSender';
|
$.post( url, 'p=' + obj, function( result ) {
|
console.log( result );
|
}, "json");
|
}
|
|
/* Hilfsfunktionen */
|
|
function serialisieren(obj) {
|
return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
|
}
|
|
/* 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;
|
}
|
