Vorlagen asynchron und nur bei Bedarf laden

ulrich

2018-03-24 7a416cff73f06f6f2e2070119d38d46526b49f6d

 app.js

@@ -3,29 +3,378 @@
var TPL_SENDER = 'sender';
var TPL_DLG_MSG = 'dlg-msg';
var TPL_DLG_INFO = 'dlg-info';
var templateCache = {}; // mustache templates 'home', 'prefs', 'sender'
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();
  app_menu_init("menu/", "hauptmenue.json", "../jslib/app-menu/app-menu.tpl", ".west");
  app_get_template('tpl/dlg-msg.tpl', TPL_DLG_MSG);
  app_get_template('tpl/dlg-info.tpl', TPL_DLG_INFO);
  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");

  // 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_nachricht_zeigen(templateCache[TPL_DLG_MSG], 'data/msg-test.json');
  app_dialog_laden_und_zeigen(
    'data/tpl/dlg-msg.tpl', 'data/msg-test.json');
  app_menue_umschalten();
}

function app_info_dialog_zeigen() {
  app_nachricht_zeigen(templateCache[TPL_DLG_INFO], '');
  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 --- */
@@ -36,45 +385,94 @@
    type: "GET",
    dataType : "json"
  }).done(function( senderliste ) {
    $("#sender").html(Mustache.render(templateCache[TPL_SENDER], 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_nachricht_zeigen(vorlage, adresse) {
  if(adresse !== '') {
    $.ajax({
      url: adresse,
      type: "GET",
      dataType : "json"
    }).done(function( msg ) {
      $(".dialog").html(Mustache.render(vorlage, msg));
      $(".close-btn").on('click', function() {
        $('.close-btn').attr('onclick','').unbind('click');
        $('.dialog').slideUp(300);
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);
      });
      $('.dialog').slideDown(300);
    });
  } else {
    $(".dialog").html(Mustache.render(vorlage, ''));
    $(".close-btn").on('click', function() {
      $('.close-btn').attr('onclick','').unbind('click');
      $('.dialog').slideUp(300);
    });
    $('.dialog').slideDown(300);
  }
  });
}

/*
  Ein Template vom Server in den Cache laden
  template_url - home.tpl, prefs.tpl, sender.tpl
  tname - 'home', 'prefs', 'sender'
  vorlage - die Dialogvorlage
  msgTpl - eine Vorlage mit einem Mitteilungstext (optional)
*/
function app_get_template(template_url, tname) {
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: template_url,
    url: kommando,
    type: "GET",
    dataType : "text"
  }).done(function( template ) {
    templateCache[tname] = template;
    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;
}