implemented playlist view

cmd/tank/ui/index.html

@@ -50,11 +50,9 @@
              </div>
              <select class="custom-select" id="groupSelect">
              </select>
-<!--
              <div class="input-group-append">
-               <button class="btn btn-outline-secondary" type="button">Add</button>
+               <button disabled="disabled" type="button" class="btn btn-outline-secondary groupClone">Clone</button>
              </div>
--->
            </div>
          </div>
          <div class="col-2"></div>
@@ -68,6 +66,7 @@
    </div>
 
    <div id="hiddenTemplates">
+     <!-- Group -->
      <div class="card groupTemplate">
        <div class="card-header">
          <ul class="nav nav-tabs card-header-tabs">
@@ -80,10 +79,11 @@
          </ul>
        </div>
        <div class="card-body">
-         <h3>... loading ...</h3>
+         ... loading group ...
        </div>
      </div>
 
+     <!-- Files -->
      <table class="table table-striped filesTemplate">
        <thead>
          <tr>
@@ -114,6 +114,33 @@
        </tr>
      </table>
 
+     <!-- Playlists -->
+     <table class="table table-striped playlistsTemplate">
+       <thead>
+         <tr>
+           <th scope="col">#</th>
+           <th scope="col">Created</th>
+           <th scope="col">Length</th>
+           <th scope="col">Action</th>
+         </tr>
+       </thead>
+       <tbody></tbody>
+     </table>
+
+     <table class="playlistTemplate">
+       <tr>
+         <td class="playlistId" scope="row"></td>
+         <td class="playlistCreated"></td>
+         <td class="playlistLength"></td>
+         <td>
+           <div class="btn-group btn-group-sm" role="group">
+             <button type="button" disabled="disabled" class="btn btn-secondary playlistEdit">Edit</button>
+             <button type="button" class="btn btn-danger playlistDelete">Delete</button>
+           </div>
+         </td>
+       </tr>
+     </table>
+
    </div>
 
    <script src="js/jquery.min.js"></script>

cmd/tank/ui/js/main.js

+/*
+ *  tank
+ *
+ *  Import and Playlist Daemon for autoradio project
+ *
+ *
+ *  Copyright (C) 2017-2018 Christian Pointner <equinox@helsinki.at>
+ *
+ *  This file is part of tank.
+ *
+ *  tank is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  any later version.
+ *
+ *  tank is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with tank. If not, see <http://www.gnu.org/licenses/>.
+ */
+
 'use strict';
 
 var main = main || {};
 
 /***************** models  *****************/
 
+/****** groupList ******/
+
 var groups = null;
 
 main.GroupList = function() {
@@ -35,6 +61,8 @@ main.GroupList.prototype.fetch = function() {
   });
 };
 
+/****** group ******/
+
 var group = null;
 
 main.Group = function(inst) {
@@ -89,6 +117,8 @@ main.Group.prototype.fetch_playlists = function() {
   });
 };
 
+/****** file ******/
+
 main.File = function(group, inst) {
   this.$group = group;
   this.id = inst.id;
@@ -111,6 +141,8 @@ main.File.prototype.delete = function() {
   });
 };
 
+/****** playlist ******/
+
 main.Playlist = function(group, inst) {
   this.$group = group;
   this.id = inst.id;
@@ -119,8 +151,23 @@ main.Playlist = function(group, inst) {
   this.entries = inst.entries;
 };
 
+main.Playlist.prototype.delete = function() {
+  var self = this;
+
+  $.ajax({
+    method: "DELETE",
+    url: "/api/v1/groups/" + this.$group.name + "/playlists/" + this.id,
+    success: function(data) { self.$group.fetch_playlists() },
+    dataType: "json"
+  }).fail(function(jqxhr, textStatus, error) {
+    alert(jqxhr.responseJSON.error + "\n" + JSON.stringify(jqxhr.responseJSON.details, null, 2));
+  });
+};
+
 /***************** views  *****************/
 
+/****** groupList  ******/
+
 var groupListView = null;
 
 main.GroupListView = function(model) {
@@ -152,6 +199,8 @@ main.GroupListView.prototype.render_error = function() {
   $('#error').show();
 };
 
+/****** group ******/
+
 var groupView = null;
 
 main.GroupView = function(model) {
@@ -167,13 +216,13 @@ main.GroupView = function(model) {
     selectFiles.addClass('active');
     selectPlaylists.removeClass('active');
     self.model.fetch_files();
-    cardBody.text("...loading files...");
+    cardBody.text("... loading files ...");
   });
   selectPlaylists.on('click', function() {
     selectPlaylists.addClass('active');
     selectFiles.removeClass('active');
     self.model.fetch_playlists();
-    cardBody.text("...loading playlists...")
+    cardBody.text("... loading playlists ...")
   });
 
   $(this.model).on('update-files', function() {
@@ -199,7 +248,9 @@ main.GroupView.prototype.render_files = function(body) {
 
 main.GroupView.prototype.render_playlists = function(body) {
   $('#error').hide();
-  body.html($('<pre>').text(JSON.stringify(this.model.playlists, null, 2)));
+  var fileListView = new main.PlaylistListView(this.model.playlists, this);
+	fileListView.render();
+  body.html(fileListView.$el);
 };
 
 main.GroupView.prototype.render_error = function() {
@@ -207,6 +258,8 @@ main.GroupView.prototype.render_error = function() {
   $('#error').show();
 };
 
+/****** files ******/
+
 main.FileListView = function(model) {
   this.model = model;
   this.$el = $('#hiddenTemplates .filesTemplate').clone().removeClass('filesTemplate');
@@ -240,6 +293,39 @@ main.FileView.prototype.render = function() {
   });
 };
 
+/****** playlists ******/
+
+main.PlaylistListView = function(model) {
+  this.model = model;
+  this.$el = $('#hiddenTemplates .playlistsTemplate').clone().removeClass('playlistsTemplate');
+};
+
+main.PlaylistListView.prototype.render = function() {
+  var table = this.$el.find("tbody");
+  for (var i = 0; i < this.model.length; i++) {
+    var playlistView = new main.PlaylistView(this.model[i], this);
+	  playlistView.render();
+    table.append(playlistView.$el);
+  }
+};
+
+main.PlaylistView = function(model) {
+  this.model = model;
+  this.$el = $('#hiddenTemplates .playlistTemplate tr').clone();
+};
+
+main.PlaylistView.prototype.render = function() {
+  this.$el.find('.playlistId').text(this.model.id)
+  this.$el.find('.playlistCreated').text(this.model.created)
+  this.$el.find('.playlistLength').text(this.model.entries.length)
+
+  var self = this;
+  // TODO: implement playlist edit
+  this.$el.find('.playlistDelete').on('click', function() {
+    self.model.delete();
+  });
+};
+
 /***************** controller  *****************/
 
 function main_init() {
@@ -253,8 +339,12 @@ function main_init() {
       group = groups.groups[group_name];
       groupView = new main.GroupView(group);
       group.fetch_files();
+      $('button.groupClone').prop('disabled', false);
     } else {
       $('#groupView').empty();
+      $('button.groupClone').prop('disabled', true);
     }
   });
 }
+
+/**********************************************/