From f5ccdf74654c2906a937ee1a6d93ce31f99fec5b Mon Sep 17 00:00:00 2001
From: Ziver Koc <Ziver@users.noreply.github.com>
Date: Fri, 11 Dec 2015 17:53:39 +0100
Subject: [PATCH] Added external user modal

Former-commit-id: 4b1a8ed74f3a4085ab5c250626c51b0f0b017c0d
---
 src/se/koc/hal/page/PCConfigureHttpPage.java |  4 +-
 web-resource/configure.tmpl                  | 83 ++++++++++++++++++--
 2 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/src/se/koc/hal/page/PCConfigureHttpPage.java b/src/se/koc/hal/page/PCConfigureHttpPage.java
index b85305a0..65db860f 100755
--- a/src/se/koc/hal/page/PCConfigureHttpPage.java
+++ b/src/se/koc/hal/page/PCConfigureHttpPage.java
@@ -26,8 +26,8 @@ public class PCConfigureHttpPage extends HalHttpPage {
         User localUser = User.getLocalUser(db);
 
         // Save new input
-        if(request.containsKey("form")){
-            if(request.get("form").equals("user")){
+        if(request.containsKey("action")){
+            if(request.get("action").equals("update_user")){
                 localUser.setUserName(request.get("username"));
                 localUser.setAddress(request.get("address"));
                 localUser.save(db);
diff --git a/web-resource/configure.tmpl b/web-resource/configure.tmpl
index a71f5559..fb42d789 100755
--- a/web-resource/configure.tmpl
+++ b/web-resource/configure.tmpl
@@ -5,18 +5,17 @@
         <div class="panel-heading">Profile Information</div>
         <div class="panel-body">
             <form class="form-horizontal" method="POST">
-                <input type="hidden" name="form" value="user">
-                <input type="hidden" name="id" value="{{user.getId()}}">
+                <input type="hidden" name="action" value="update_user">
                 <div class="form-group">
-                    <label for="username" class="col-sm-2 control-label">Username</label>
+                    <label for="username" class="col-sm-2 control-label">Username:</label>
                     <div class="col-sm-10">
                         <input type="text" class="form-control" id="username" name="username" value="{{user.username}}">
                     </div>
                 </div>
                 <div class="form-group">
-                    <label for="address" class="col-sm-2 control-label">Address</label>
+                    <label for="address" class="col-sm-2 control-label">Address:</label>
                     <div class="col-sm-10">
-                        <input type="text" class="form-control" id="address" name="address" value="{{user.address}}">
+                        <textarea class="form-control" id="address" name="address">{{user.address}}</textarea>
                     </div>
                 </div>
                 <div class="form-group">
@@ -75,7 +74,11 @@
                 <th>Hostname</th>
                 <th>Port</th>
                 <th>
-                    <button class="btn btn-default btn-xs pull-right"><span class="glyphicon glyphicon-plus"></span></button>
+                    <button class="btn btn-default btn-xs pull-right" data-toggle="modal"
+                            data-target="#extUserModal"
+                            data-id="-1">
+                        <span class="glyphicon glyphicon-plus"></span>
+                    </button>
                 </th>
                 </thead>
                 {{#extUsers}}
@@ -86,8 +89,18 @@
                     <td>{{.port}}</td>
                     <td>
                         <div class="btn-toolbar pull-right">
-                            <button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
-                            <button class="btn btn-danger btn-xs"> <span class="glyphicon glyphicon-trash"></span></button>
+                            <button class="btn btn-default btn-xs" data-toggle="modal"
+                                    data-target="#extUserModal"
+                                    data-id="{{.getId()}}"
+                                    data-hostname="{{.hostname}}"
+                                    data-port="{{.port}}">
+                                <span class="glyphicon glyphicon-pencil"></span>
+                            </button>
+                            <button class="btn btn-danger btn-xs" data-toggle="modal"
+                                    data-target="#deleteModal"
+                                    data-name="{{.hostname}}">
+                                <span class="glyphicon glyphicon-trash"></span>
+                            </button>
                         </div>
                     </td>
                 </tr>
@@ -126,4 +139,58 @@
             </table>
         </div>
     </div>
+</div>
+
+
+<!------------- MODALS --------------->
+<script>
+    $(function(){
+        $("#extUserModal").on('show.bs.modal', function (event) {
+            var button = $(event.relatedTarget);
+            var modal = $(this);
+            if(button.data("id") >= 0){ // edit
+                modal.find("#action").val(button.data("edit_external_user"));
+                modal.find("#id").val(button.data("id"));
+                modal.find("#hostname").val(button.data("hostname"));
+                modal.find("#port").val(button.data("port"));
+            }
+            else{ // create
+                modal.find("#action").val("create_external_user");
+                modal.find("#id").val(-1);
+                modal.find("#hostname").val("");
+                modal.find("#port").val("");
+            }
+        });
+    });
+</script>
+
+<div class="modal fade" id="extUserModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="exampleModalLabel">External User</h4>
+            </div>
+            <form method="POST">
+                <div class="modal-body">
+                    <input type="hidden" id="action" name="action">
+                    <input type="hidden" id="id" name="id">
+                    <div class="form-group">
+                        <label for="hostname" class="control-label">Hostname/IP:</label>
+                        <input type="text" class="form-control" id="hostname">
+                    </div>
+                    <div class="form-group">
+                        <label for="port" class="control-label">Port:</label>
+                        <input type="number" class="form-control" id="port" min="1">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save</button>
+                </div>
+            </form>
+        </div>
+    </div>
 </div>
\ No newline at end of file