3.4.Präsentationslogik_Dienstnutzer

##3.4) Funktionen der Dienstnutzer View

###Listener Die View besitzt Listener um bei Antworten des Dienstnutzers reagieren zu können.

socket.on('resSongs', function(data){
  document.getElementById("songsInDB").innerHTML = data.length;
  displaySongs(data);
});

3.4.1. Beispiel Listener

Durch das Auslösen eines Listeners werden wieder unterschiedliche Funktionen ausgelöst.

function displaySongs(data) {
  if (data.length === 0) {
    document.getElementById("songs").innerHTML = '<section class="section--center" style="text-align: center;"><p>Zur Zeit keine Songs in der Warteliste!</p></section>';
    document.getElementById("admin-song-list").innerHTML = '<p>Zur Zeit keine Songs in der Warteliste!</p>';
  }
  else {
    document.getElementById("songs").innerHTML = "";
    document.getElementById("admin-song-list").innerHTML = "";
    for (var i = 0; i < data.length; i++) {
      var newSonglistObject = document.createElement("section");
      newSonglistObject.className = "section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp";
      newSonglistObject.innerHTML =
      '<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white">' +
        '<i class="material-icons">play_circle_filled</i>'+
      '</header>'+
      '<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">'+
        '<div class="mdl-card__supporting-text">'+
          '<h4>#'+(i+1)+' '+data[i].title+'</h4>'+
          'Interpret: '+data[i].artist+ ' <br>Genre: '+data[i].genre+
        '</div>'+
        '<div class="mdl-card__actions">'+
          '<a href="#" class="mdl-button" onclick="addToQueue('+data[i].id+');">Zur Warteliste hinzufügen</a>'+
        '</div>'+
      '</div>';

      var newAdminSonglistObject = document.createElement("li");
      newAdminSonglistObject.innerHTML = data[i].title+"<br><i>"+data[i].artist+"//"+data[i].genre+"</i>";

      document.getElementById("songs").appendChild(newSonglistObject);
      document.getElementById("admin-song-list").appendChild(newAdminSonglistObject);
    }
  }
}

3.4.2. Beispielreaktion nach Auslösen eines Listeners

Funktionen greifen auf HTML Elemente zu um ihre Werte zu bekommen. Durch Funktionen werden außerdem auch neue Elemente generiert und eingefügt.

Desweiteren gibt es auch Funktionen die durch Buttons im Dokument ausgelöst werden.

function addToQueue(id) {
  socket.emit("postQueue", id);
}

3.4.3. Beispielreaktion nach Auslösen eines Buttons