Neuen Sender als Kachel hinzufügen

ulrich

2018-01-06 f9c6e25755d0dcbd59930c3c043a4068d212a5f1

Neuen Sender als Kachel hinzufügen

 app.js

@@ -6,9 +6,11 @@
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 templateCache = {}; // mustache templates
var prefsRendered = false;
var senderKlickModus = "0"; // 1=abspielen, 2=bearbeiten, 3=loeschen
var ID_UNDEFINED = -1;

function app_init() {
  $('.dialog').hide();
@@ -25,6 +27,7 @@
  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('tpl/prefs.tpl', 'prefs');
  $('.sued').text('Bereit.');
  setTimeout(function() {
@@ -39,6 +42,46 @@
  $(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":
        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 --- */
@@ -58,6 +101,7 @@
  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);
  });
@@ -83,6 +127,13 @@
    app_dialog_schliessen();
  });
  $('.dialog').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() {
@@ -117,41 +168,7 @@
    $(".sender-kachel").off("click");
    $(".sender-behaelter").html(
      Mustache.render(templateCache[TPL_SENDER], senderliste));
    $('.sender-kachel').on('click', function() {
      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":
            break;
          case "2":
            $(".dlg-behaelter").html(
              Mustache.render(templateCache[TPL_SENDER_EDIT_FORM], s)
            );
            $('#sender-speichern').on('click', function() {
              $('#sender-speichern').off('click');
              var nameNeu = $("#sender-name").val();
              var logoNeu = $("#sender-logo").val();
              var urlNeu = $("#sender-url").val();
              var sNeu = new Sender(senderId, nameNeu, urlNeu, logoNeu);
              app_kachel_anpassen(sNeu);
              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;
      }
    });
    $('.sender-kachel').on('click', app_kachel_klick);
  });
}


 data/tpl/dlg-sender-neu.tpl

@@ -3,8 +3,11 @@
  <div class="dlg-behaelter">
    <div class="dlg-sender-titel">Neuer Sender</div>
    <form>
      <label class="sender-edit-label">Name:</label>
      <input id="sender-name" placeholder="Name" type="text" class="sender-eingabe"></br>
      <label class="sender-edit-label">Logo:</label>
      <input id="sender-logo" placeholder="Logo" type="text" class="sender-eingabe"></br>
      <label class="sender-edit-label">URL:</label>
      <input id="sender-url" placeholder="URL" type="text" class="sender-eingabe"></br>
      <div class="form-button-footer">
        <button type="button" id="sender-speichern">Speichern</button>

 data/tpl/kachel.tpl

New file
@@ -0,0 +1,6 @@
<div class="sender-kachel" sid="{{id}}" data-verweis="{{url}}">
  <div class="sender-name">{{name}}</div>
  <div class="sender-bild-behaelter">
    <img class="sender-bild" src="{{logo}}">
  </div>
</div>