added delete file button

cmd/tank/ui/index.html

@@ -107,8 +107,8 @@
          <td class="fileSource"></td>
          <td>
            <div class="btn-group btn-group-sm" role="group">
-             <button type="button" disabled="disabled" class="btn btn-secondary file-edit">Edit</button>
-             <button type="button" class="btn btn-danger file-delete">Delete</button>
+             <button type="button" disabled="disabled" class="btn btn-secondary fileEdit">Edit</button>
+             <button type="button" class="btn btn-danger fileDelete">Delete</button>
            </div>
          </td>
        </tr>

cmd/tank/ui/js/main.js

@@ -11,6 +11,11 @@ main.GroupList = function() {
   this.groups = {};
 };
 
+main.GroupList.prototype.error = function(error) {
+  this.last_error = error;
+  this.$this.trigger('error');
+};
+
 main.GroupList.prototype.fetch = function() {
   var self = this;
   self.last_error = null;
@@ -30,10 +35,7 @@ main.GroupList.prototype.fetch = function() {
   });
 };
 
-main.GroupList.prototype.error = function(error) {
-  this.last_error = error;
-  this.$this.trigger('error');
-};
+var group = null;
 
 main.Group = function(inst) {
   this.$this = $(this);
@@ -44,14 +46,19 @@ main.Group = function(inst) {
   this.playlists = [];
 };
 
+main.Group.prototype.error = function(error) {
+  this.last_error = error;
+  this.$this.trigger('error');
+};
+
 main.Group.prototype.fetch_files = function() {
   var self = this;
   self.last_error = null;
 
-  $.getJSON( "/api/v1/groups/" + self.name + "/files", function(data) {
+  $.getJSON("/api/v1/groups/" + self.name + "/files", function(data) {
     self.files = [];
     for(var key in data.results) {
-      self.files.push(new main.File(data.results[key]));
+      self.files.push(new main.File(self, data.results[key]));
     }
     self.$this.trigger('update-files');
   }).fail(function(jqxhr, textStatus, error) {
@@ -67,10 +74,10 @@ main.Group.prototype.fetch_playlists = function() {
   var self = this;
   self.last_error = null;
 
-  $.getJSON( "/api/v1/groups/" + self.name + "/playlists", function(data) {
+  $.getJSON("/api/v1/groups/" + self.name + "/playlists", function(data) {
     self.playlists = [];
     for(var key in data.results) {
-      self.playlists.push(new main.Playlist(data.results[key]));
+      self.playlists.push(new main.Playlist(self, data.results[key]));
     }
     self.$this.trigger('update-playlists');
   }).fail(function(jqxhr, textStatus, error) {
@@ -82,18 +89,31 @@ main.Group.prototype.fetch_playlists = function() {
   });
 };
 
-main.File = function(inst) {
-  this.id = inst.id
-  this.group = inst.group;
+main.File = function(group, inst) {
+  this.$group = group;
+  this.id = inst.id;
   this.created = inst.created;
   this.updated = inst.updated;
   this.source = inst.source;
   this.metadata = inst.metadata;
 };
 
-main.Playlist = function(inst) {
-  this.id = inst.id
-  this.group = inst.group;
+main.File.prototype.delete = function() {
+  var self = this;
+
+  $.ajax({
+    method: "DELETE",
+    url: "/api/v1/groups/" + this.$group.name + "/files/" + this.id,
+    success: function(data) { self.$group.fetch_files() },
+    dataType: "json"
+  }).fail(function(jqxhr, textStatus, error) {
+    alert(jqxhr.responseJSON.error + "\n" + JSON.stringify(jqxhr.responseJSON.details, null, 2));
+  });
+};
+
+main.Playlist = function(group, inst) {
+  this.$group = group;
+  this.id = inst.id;
   this.created = inst.created;
   this.updated = inst.updated;
   this.entries = inst.entries;
@@ -212,7 +232,12 @@ main.FileView.prototype.render = function() {
   this.$el.find('.fileAlbum').text(this.model.metadata.album)
   this.$el.find('.fileTitle').text(this.model.metadata.title)
   this.$el.find('.fileSource').text(this.model.source.filename)
-    // TODO: implement file delete
+
+  var self = this;
+  // TODO: implement file edit
+  this.$el.find('.fileDelete').on('click', function() {
+    self.model.delete();
+  });
 };
 
 /***************** controller  *****************/
@@ -225,7 +250,7 @@ function main_init() {
   $('#groupSelect').on('change', function(event) {
     var group_name = event.target.value;
     if(group_name != '__none__') {
-      var group = groups.groups[group_name];
+      group = groups.groups[group_name];
       groupView = new main.GroupView(group);
       group.fetch_files();
     } else {