Auf dynamisch geladene Vorlagen umgestellt

ulrich

2018-03-24 d166463aa463122d2387b05e8f4bfe82fe2ad104

Auf dynamisch geladene Vorlagen umgestellt

 web/app.js

@@ -1,26 +1,13 @@
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;
var vorlagen;

function app_init() {
  vorlagen = new Vorlagen();
  $('.sued').text('Initialisieren..');
  $('.dialog').hide();
  $('.ost').hide();
@@ -32,23 +19,6 @@
    "../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/sender-transit.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/abspieler-transit.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) {
@@ -163,13 +133,17 @@
function app_abspieler_neu(abspieler) {
  app_neuen_abspieler_speichern(abspieler, function(a) {
    //console.log(a.Abspieler.id);
    var html = Mustache.render(templateCache[TPL_ABSPIELER_EINTRAG], a.Abspieler);
    if(a.zustand === 'selected') {
      $.each($(".abspieler-auswahl option:selected"), function() {
         $(this).prop('selected', false);
      });
    }
    $(".abspieler-auswahl").append(html);
    vorlagen.html_erzeugen(
      'data/tpl/abspieler-eintrag.tpl',
      a.Abspieler,
      function(html) {
        if(a.zustand === 'selected') {
          $.each($(".abspieler-auswahl option:selected"), function() {
             $(this).prop('selected', false);
          });
        }
        $(".abspieler-auswahl").append(html);
    });
  });
}

@@ -188,10 +162,14 @@
}

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);
  vorlagen.html_erzeugen(
    'data/tpl/kachel.tpl',
    sender,
    function(html) {
      $("#sender").append(html);
      var kachel = $( "div[sid='" + sender.id + "']" );
      kachel.on('click', app_kachel_klick);
  });
}

function app_kachel_entfernen(sender) {
@@ -210,27 +188,27 @@
        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');
          var sender = app_sender_dialog_lesen(senderId);
          
          app_sender_aendern(sender);
          
          app_kachel_anpassen(sender);
          app_dialog_schliessen();
          app_meldung_mit_timeout('Speichern gewaehlt', 1500);
        vorlagen.html_erzeugen(
          'data/tpl/dlg-sender-edit-form.tpl',
          s,
          function(html) {
            $(".dlg-behaelter").html(html);
            $('#sender-speichern').on('click', function() {
              $('#sender-speichern').off('click');
              var sender = app_sender_dialog_lesen(senderId);

              app_sender_aendern(sender);

              app_kachel_anpassen(sender);
              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)
        );
        */
        app_dialog_zeigen('data/tpl/dlg-sender-loeschen.tpl', s);
        $('#sender-loeschen').on('click', function() {
          $('#sender-loeschen').off('click');
          
@@ -255,17 +233,17 @@

function app_nachricht_test() {
  app_dialog_laden_und_zeigen(
    templateCache[TPL_DLG_MSG], 'data/msg-test.json');
    'data/tpl/dlg-msg.tpl', 'data/msg-test.json');
  app_menue_umschalten();
}

function app_info_dialog_zeigen() {
  app_dialog_laden_und_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(templateCache[TPL_DLG_SENDER_NEU], '');
  app_dialog_laden_und_zeigen('data/tpl/dlg-sender-neu.tpl', '');
  $('#sender-speichern').on('click', function() {
    $('#sender-speichern').off('click');
    var sender = app_sender_dialog_lesen(--ID_UNDEFINED);
@@ -280,19 +258,19 @@

function app_sender_bearbeiten() {
  senderKlickModus = "2"; // bearbeiten
  app_dialog_laden_und_zeigen(templateCache[TPL_DLG_SENDER_EDIT], '');
  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(templateCache[TPL_DLG_SENDER_EDIT], '');
  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(templateCache[TPL_DLG_ABSPIELER_DEL], abspieler);
  app_dialog_zeigen('data/tpl/dlg-abspieler-loeschen.tpl', abspieler);
  $('#abspieler-loeschen').on('click', function() {
    $('#abspieler-loeschen').off('click');
    app_abspieler_entfernen(abspieler);
@@ -302,7 +280,7 @@
  app_menue_umschalten();
}
function app_neuer_abspieler() {
  app_dialog_laden_und_zeigen(templateCache[TPL_DLG_ABSPIELER_NEU], '');
  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));
@@ -313,7 +291,7 @@
}
function app_abspieler_bearbeiten() {
  var abspieler = app_get_abspiel_ziel();
  app_dialog_zeigen(templateCache[TPL_DLG_ABSPIELER_EDIT_FORM], abspieler);
  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() {
@@ -344,13 +322,18 @@

/* --- Dialogfunktionen --- */

function app_dialog_zeigen(vorlage, inhalt) {
function app_dialog_zeigen(vurl, inhalt) {
  var dlg = $(".dialog");
  dlg.html(Mustache.render(vorlage, inhalt));
  $(".close-btn").on('click', function() {
    app_dialog_schliessen();
  vorlagen.html_erzeugen(
    vurl,
    inhalt,
    function(html) {
      dlg.html(html);
      $(".close-btn").on('click', function() {
        app_dialog_schliessen();
      });
      dlg.slideDown(300);
  });
  dlg.slideDown(300);
}

function app_sender_dialog_lesen(senderId) {
@@ -400,9 +383,13 @@
    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);
    vorlagen.html_erzeugen(
      'data/tpl/sender-transit.tpl',
      senderliste,
      function(html) {
        $(".sender-behaelter").html(html);
        $('.sender-kachel').on('click', app_kachel_klick);
    });
  });
}

@@ -413,9 +400,13 @@
    type: "GET",
    dataType : "json"
  }).done(function( abspielerliste ) {
    $(".abspieler-behaelter").html(
      Mustache.render(templateCache[TPL_ABSPIELER], abspielerliste));
    $("#abspielen-stoppen").on('click', app_abspielen_stoppen);
    vorlagen.html_erzeugen(
      'data/tpl/abspieler-transit.tpl',
      abspielerliste,
      function(html) {
        $(".abspieler-behaelter").html(html);
        $("#abspielen-stoppen").on('click', app_abspielen_stoppen);
    });
  });
}

@@ -463,21 +454,6 @@
    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;
  });
}


 web/index.html

@@ -54,6 +54,7 @@
    <script src="../jslib/jquery-1.11.1/jquery-1.11.1.min.js"></script>
    <script src="../jslib/mustache/mustache.min.js"></script>
    <script src="../jslib/app-menu/app-menu.js"></script>
    <script src="vorlagen.js"></script>
    <script src="app.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {

 web/vorlagen.js

New file
@@ -0,0 +1,55 @@


function Vorlagen() {
  var self = this;
  this.cache = {}; // mustache templates

  /*
    Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt
    gefüllt wird

    Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem
    Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten.
    Das fertige HTML wird der Callback-Funktion übergeben
    sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der
    Programmlauf zu diesem Zeitpunkt mittlerweile ist.

    vurl - URL zur Vorlagendatei
    inhalt - die JSON-Struktur, deren Inhalt in die
              Vorlage gefüllt werden soll
    cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist.
          Dieser Callback-Funktion wird das fertige HTML übergeben
  */
  this.html_erzeugen = function(vurl, inhalt, cb) {
    var vorlage = self.cache[vurl];
    if(vorlage === undefined) {
      self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
    } else {
      self.vorlage_fuellen(vurl, inhalt, cb);
    }
  };

  this.vorlage_fuellen = function(vurl, inhalt, cb) {
    cb(Mustache.render(self.cache[vurl], inhalt));
  };

  /*
    Eine Vorlage vom Server in den lokalen Speicher laden
    vurl - der URL unter dem die Vorlage zu finden ist
    inhalt - die JSON-Struktur, deren Inhalt in die
              Vorlage gefüllt werden soll
    cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem
            Inhalt gefüllt ist
  */
  this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) {
    $.ajax({
      url: vurl,
      type: "GET",
      dataType : "text"
    }).done(function( vorlage ) {
      self.cache[vurl] = vorlage;
      self.vorlage_fuellen(vurl, inhalt, cb);
    });
  };

}