creating group works now

api/v1/api_groups.go

@@ -26,6 +26,8 @@ package v1
 
 import (
 	"net/http"
+
+	"github.com/gorilla/mux"
 )
 
 func (api *API) ListGroups() http.Handler {
@@ -42,6 +44,13 @@ func (api *API) ListGroups() http.Handler {
 
 func (api *API) CreateGroup() http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		sendWebResponse(w, http.StatusNotImplemented, ErrorResponse{Error: "creating groups not yet implemented"})
+		// TODO: implement clone depending on query parameter
+		vars := mux.Vars(r)
+		group, err := api.store.CreateGroup(vars["group-id"])
+		if err != nil {
+			sendStoreError(w, err)
+			return
+		}
+		sendWebResponse(w, http.StatusCreated, group)
 	})
 }

cmd/tank/ui/index.html

@@ -35,7 +35,9 @@
          <div class="col-2"></div>
          <div class="col-8">
            <div id="error">
-             <div id="error-message" class="alert alert-danger" role="alert">
+             <div class="alert alert-danger alert-dismissible" role="alert">
+               <span id="error-message"></span>
+               <button type="button" class="close" data-dismiss="alert"><span >&times;</span></button>
              </div>
            </div>
          </div>
@@ -54,7 +56,7 @@
                <button disabled="disabled" type="button" class="btn btn-outline-secondary groupClone">Clone</button>
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"></button>
                <div class="dropdown-menu">
-                 <button type="button" class="dropdown-item groupNew">New Group</button>
+                 <button type="button" class="dropdown-item" data-toggle="modal" data-target="#groupNewModal">New Group</button>
                  <div role="separator" class="dropdown-divider"></div>
                  <button type="button" class="dropdown-item disabled groupAddFile">Add File</button>
                  <button type="button" class="dropdown-item disabled groupAddPlaylist">Add Playlist</button>
@@ -147,7 +149,32 @@
          </td>
        </tr>
      </table>
+   </div>
 
+   <!-- Modals -->
+   <div class="modal fade" id="groupNewModal" tabindex="-1" role="dialog">
+     <div class="modal-dialog modal-dialog-centered" role="document">
+       <div class="modal-content">
+         <form id="groupNewForm">
+           <div class="modal-header">
+             <h5 class="modal-title">New group</h5>
+             <a class="close" data-dismiss="modal"><span>&times;</span></a>
+           </div>
+           <div class="modal-body">
+             <form>
+               <div class="form-group">
+                 <label for="recipient-name" class="col-form-label">Name:</label>
+                 <input type="text" class="form-control" id="groupNewName">
+               </div>
+             </form>
+           </div>
+           <div class="modal-footer">
+             <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+             <button type="button" class="btn btn-primary groupNew" disabled="disabled" data-dismiss="modal">Create Group</button>
+           </div>
+         </form>
+       </div>
+     </div>
    </div>
 
    <script src="js/jquery.min.js"></script>

cmd/tank/ui/js/main.js

@@ -61,6 +61,23 @@ main.GroupList.prototype.fetch = function() {
   });
 };
 
+main.GroupList.prototype.new_group = function(group_name) {
+  var self = this;
+
+  $.ajax({
+    method: "POST",
+    url: "/api/v1/groups/" + group_name,
+    success: function(data) { self.fetch() },
+    dataType: "json"
+  }).fail(function(jqxhr, textStatus, error) {
+    if(error == "") {
+      self.error("connection problem");
+    } else {
+      self.error(jqxhr.responseJSON.error);
+    }
+  });
+}
+
 /****** group ******/
 
 var group = null;
@@ -328,10 +345,32 @@ main.PlaylistView.prototype.render = function() {
 
 /***************** controller  *****************/
 
+function modal_group_new_init() {
+  $('#groupNewModal').on('show.bs.modal', function(event) {
+    var groupNewName = $(this).find('#groupNewName');
+    groupNewName.val("");
+    groupNewName.on('keyup', function() {
+      if(groupNewName.val().length == 0) {
+        groupNewBtn.prop('disabled', true)
+      } else {
+        groupNewBtn.prop('disabled', false)
+      }
+    });
+
+    var groupNewBtn = $(this).find('button.groupNew');
+    groupNewBtn.prop('disabled', true)
+    groupNewBtn.on('click', function() { groups.new_group(groupNewName.val()); });
+
+    $(this).find('#groupNewForm').on('submit', function() { groupNewBtn.trigger('click'); return false; });
+  });
+}
+
 function main_init() {
   groups = new main.GroupList();
   groupListView = new main.GroupListView(groups);
 
+  modal_group_new_init();
+
   groups.fetch();
   $('#groupSelect').on('change', function(event) {
     var group_name = event.target.value;