From f27a124751c5e0231d147c182b53420d796de824 Mon Sep 17 00:00:00 2001
From: "chris.watts90@outlook.com" <chris.watts90@outlook.com>
Date: Wed, 15 Mar 2017 23:13:17 +0000
Subject: [PATCH] create add button to enable an expanding side panel to
 edit/add groups to the system.

add button to hide side panel.
#30
---
 .../WindowsDataCenter/www/Admin.html             | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/Admin.html b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/Admin.html
index 652d594..6c93040 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/Admin.html
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/Admin.html
@@ -38,9 +38,15 @@
         </div>
     </nav>
 <div id="GroupAdminPage" class="container">
-    <h2>Groups</h2>
     <div class="row">
-        <div data-bind="with: groupsList" class="col-md-8">
+        <h2 class="col-md-4">Groups</h2>
+        <button class="col-md-1 btn btn-default pull-right" style="margin-top: 20px;">
+            <span class="glyphicon glyphicon-plus"></span>
+        </button>
+    </div>
+    <hr/>
+    <div class="row">
+        <div data-bind="with: groupsList, css:{'col-md-8': !$root.groupFormHidden(), 'col-md-12':$root.groupFormHidden()}">
             <table class="table table-striped">
                 <thead>
                 <tr>
@@ -50,14 +56,13 @@
                 </thead>
                 <tbody data-bind="foreach: Groups">
                 <tr data-bind="click: $root.editGroupClick">
-                    <!--<td data-bind="text: Name"></td>-->
-                    <td><input data-bind="value: Name" /></td>
+                    <td data-bind="text: Name"></td>
                     <td data-bind="text: UserCount"></td>
                 </tr>
                 </tbody>
             </table>
         </div>
-        <form method="post" action="#editgroup" class="col-md-4" data-bind="with: $root.groupEditItem">
+        <form method="post" action="#editgroup" data-bind="with: $root.groupEditItem(), css:{'col-md-4':!$root.groupFormHidden()}">
             <input type="hidden" name="id" data-bind="value: Id">
             <div class="form-group">
                 <label for="groupNameEdit">Group Name</label>
@@ -67,6 +72,7 @@
                     data-bind="click: $root.clearGroupForm">Cancel</button>
 
             <button type="submit" class="btn btn-primary">Submit</button>
+            <button class="btn btn-link pull-right" data-bind="click: $root.hideGroupForm" type="button">Hide</button>
         </form>
     </div>
 </div>