Gestaltung weiter angepasst, bestimmte Skeleton-Stile übergenommen

ulrich

2018-01-08 78789c299fae8b826fcae8209a240f2bfbaf906a

 app.js

@@ -1,29 +1,329 @@
var TPL_HOME = 'home';
var TPL_PREFS = 'prefs';
var TPL_SENDER = 'sender';
var templateCache = {}; // mustache templates 'home', 'prefs', '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_SENDER_EDIT_FORM = 'sender-edit-form';
var TPL_SENDER_KACHEL = 'sender-kachel';
var TPL_ABSPIELER = 'abspieler';
var templateCache = {}; // mustache templates
var prefsRendered = false;
var senderKlickModus = "1"; // 1=abspielen, 2=bearbeiten, 3=loeschen
var ID_UNDEFINED = -1;
var suchTimeout;

function app_init() {
  $('.sued').text('Initialisieren..');
  $('.dialog').hide();
  $('.ost').hide();
  app_menu_init("menu/", "hauptmenue.json", "../jslib/app-menu/app-menu.tpl", ".west");
  app_get_template('tpl/sender.tpl', TPL_SENDER);
  //app_get_template('tpl/prefs.tpl', 'prefs');
  $('.sued').text('Bereit.');

  // 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-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);

  // 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();
  /*
    Anstelle der folgenden Meldung wuerde hier
    die Suchfunktion ausgefuehrt
  */
  app_meldung_mit_timeout(
    'Suchbegriff: ' + suchbegriff,
    1500
  );
}

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");
  return new Abspieler(-1, aname, aurl, atyp, "", "selected");
}

/*
  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
  }
}

/* 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_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":
        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');
    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(templateCache[TPL_DLG_SENDER_EDIT], '');
  app_menue_umschalten();
}

function app_sender_loeschen() {
  app_meldung_mit_timeout('Nicht implementiert: Sender loeschen.', 1500);
  app_menue_umschalten();
}

function app_abspieler_loeschen() {
  app_meldung_mit_timeout('Nicht implementiert: Abspieler loeschen.', 1500);
  app_menue_umschalten();
}
function app_neuer_abspieler() {
  app_meldung_mit_timeout('Nicht implementiert: Neuer Abspieler.', 1500);
  app_menue_umschalten();
}
function app_abspieler_bearbeiten() {
  app_meldung_mit_timeout('Nicht implementiert: Abspieler bearbeiten.', 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_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: "api/sender.json",
    url: "data/sender.json",
    type: "GET",
    dataType : "json"
  }).done(function( senderliste ) {
    $("#sender").html(Mustache.render(templateCache[TPL_SENDER], 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);
  });
}

function app_dialog_laden_und_zeigen(vorlage, adresse) {
  if(adresse !== '') {
    $.ajax({
      url: adresse,
      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);
  });
}

@@ -41,3 +341,21 @@
    templateCache[tname] = template;
  });
}

/* 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;
}