From 695c88521dc1a322ef93e21b0f338eca04bc3c86 Mon Sep 17 00:00:00 2001
From: "chris.watts90@outlook.com" <chris.watts90@outlook.com>
Date: Mon, 24 Feb 2020 07:40:52 +0000
Subject: [PATCH] Add new Javascript object for the policy entity. This will
 help with databinding for the relevant properties.

updated admin.html to pull in new policy object
updated admin.js to use new observables in the object.

#94
---
 .../WindowsDataCenter.csproj                  |  3 +
 .../WindowsDataCenter/www/Admin.html          | 96 +++++++++----------
 .../WindowsDataCenter/www/admin.js            | 16 ++--
 .../WindowsDataCenter/www/admin.min.js        |  2 +-
 .../WindowsDataCenter/www/js/PolicyObject.js  | 30 ++++++
 5 files changed, 91 insertions(+), 56 deletions(-)
 create mode 100644 DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/js/PolicyObject.js

diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/WindowsDataCenter.csproj b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/WindowsDataCenter.csproj
index ae6e79e..809ad79 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/WindowsDataCenter.csproj
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/WindowsDataCenter.csproj
@@ -287,6 +287,9 @@
     <Content Include="www\js\marked.min.js">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="www\js\PolicyObject.js">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
     <Content Include="www\spa.css">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/Admin.html b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/Admin.html
index bb3ebd2..4f9efba 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/Admin.html
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/Admin.html
@@ -108,60 +108,60 @@
             </div>
         </div>
     </div>
-<div id="PolicyManagement" class="container">
-    <div id="row">
-        <ul class="nav nav-tabs">
-            <li class="active"><a href="#edit" data-toggle="tab" >Edit</a></li>
-            <li ><a href="#preview" data-toggle="tab" >Preview</a></li>
-        </ul>
-        <div class="tab-content" style="max-height: 500px; min-height: 400px;overflow-y: auto">
-            <div id="edit" class="tab-pane fade in active">
-                <textarea id="policyEditor"></textarea>
-            </div>
-            <div id="preview" class="tab-pane fade in">
-                <div data-bind="html: policyData().Html" class="well-lg"></div>
+    <div id="PolicyManagement" class="container">
+        <div id="row">
+            <ul class="nav nav-tabs">
+                <li class="active"><a href="#edit" data-toggle="tab">Edit</a></li>
+                <li><a href="#preview" data-toggle="tab">Preview</a></li>
+            </ul>
+            <div class="tab-content" style="max-height: 500px; min-height: 400px;overflow-y: auto">
+                <div id="edit" class="tab-pane fade in active">
+                    <textarea id="policyEditor"></textarea>
+                </div>
+                <div id="preview" class="tab-pane fade in">
+                    <div data-bind="html: policyData.html" class="well-lg"></div>
+                </div>
             </div>
+            <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#saveDialog">Save</button><!--data-bind="click: $root.policySave"-->
+            <button class="btn btn-secondary pull-right" data-bind="click: $root.policyReload">Cancel</button>
         </div>
-        <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#saveDialog" >Save</button><!--data-bind="click: $root.policySave"-->
-        <button class="btn btn-secondary pull-right" data-bind="click: $root.policyReload">Cancel</button>
     </div>
-</div>
-<div id="saveDialog" class="modal fade" role="dialog">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal">&times;</button>
-                <h4>Change Details</h4>
-            </div>
-            <div class="modal-body">
-                <table class="table">
-                    <tr>
-                        <th>Change Author</th>
-                        <td ><input class="form-control" id="changeAuthorInput" type="text" data-bind="value: policyData().ChangeAuthor"/></td>
-                    </tr>
-                    <tr>
-                        <th>Change Date</th>
-                        <td><input class="form-control" id="changeDatePicker" type="datetime-local" data-bind="value: policyData().ChangeDate"/></td>
-                    </tr>
-                    <tr>
-                        <th >Version</th>
-                        <td ><input class="form-control" id="versionInput" type="text" data-bind="value: policyData().Version"/></td>
-                    </tr>
-                    <tr>
-                        <th>Change Description</th>
-                        <td><input class="form-control" id="changeDescription" type="text" data-bind="value: policyData().ChangeDescription"/></td>
-                    </tr>
-                </table>
-            </div>
-            <div class="modal-footer">
-                <button class="btn btn-primary pull-right" data-bind="click: $root.policySave">Save</button>
-                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+    <div id="saveDialog" class="modal fade" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <h4>Change Details</h4>
+                </div>
+                <div class="modal-body">
+                    <table class="table">
+                        <tr>
+                            <th>Change Author</th>
+                            <td><input class="form-control" id="changeAuthorInput" type="text" data-bind="value: policyData.ChangeAuthor" /></td>
+                        </tr>
+                        <tr>
+                            <th>Change Date</th>
+                            <td><input class="form-control" id="changeDatePicker" type="datetime-local" data-bind="value: policyData.ChangeDate" /></td>
+                        </tr>
+                        <tr>
+                            <th>Version</th>
+                            <td><input class="form-control" id="versionInput" type="text" data-bind="value: policyData.Version" readonly /></td>
+                        </tr>
+                        <tr>
+                            <th>Change Description</th>
+                            <td><input class="form-control" id="changeDescription" type="text" data-bind="value: policyData.ChangeDescription" /></td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-primary pull-right" data-bind="click: $root.policySave">Save</button>
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
             </div>
         </div>
     </div>
-</div>
-
-<script src="Helpers.min.js" type="text/javascript"></script>
+    <script src="js/PolicyObject.js" type="text/javascript"></script>
+    <script src="Helpers.min.js" type="text/javascript"></script>
     <script src="js/easymde.min.js" type="text/javascript"></script>
     <script src="js/highlightjs.min.js" type="text/javascript"></script>
     <script src="js/htmlparser.min.js" type="text/javascript"></script>
diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/admin.js b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/admin.js
index d44f266..61713dd 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/admin.js
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/admin.js
@@ -5,7 +5,7 @@
     self.unassignedCardList = ko.observable(null);
     self.helpers = new Helpers();
     self.policyMarkdown = "";
-    self.policyData = ko.observable({ChangeAuthor:"", ChangeDate:moment(), Version:1, ChangeDescription:"", Markdown:"", Html:""});
+    self.policyData = new policy();
     self.renderer = new marked.Renderer();
     self.renderer.blockquote = function(quote) {
         return "<blockquote class=\"blockquote\">" + quote + "</blockquote>";
@@ -66,7 +66,7 @@
     });
     self.editor.codemirror.on("changes",
         function () {
-            self.policyData().Html=self.editor.options.previewRender(self.editor.value());
+            self.policyData.html(self.editor.options.previewRender(self.editor.value()));
         });
     self.uiPages = {
         overview: "overview",
@@ -168,10 +168,10 @@
     };
     self.policySave = function () {
         var url = self.helpers.createRequestUrl(self.apiEndpoints.savePolicy, null, false);
-        self.policyData().Markdown = self.editor.value(); //make sure we update it, as it doesnt push the value back into the variable
-        console.log(self.policyData());
+        self.policyData.Markdown(self.editor.value()); //make sure we update it, as it doesnt push the value back into the variable
+        //console.log(self.policyData());
         $.post(url, self.policyData(), function() {
-        }, "json")
+        }, "json") //todo: check this serialisation as the object is now complex.
             .done(function() {
                 self.policyReload();
             }).fail(function(resp, status, error) {
@@ -183,9 +183,11 @@
         var url = self.helpers.createRequestUrl(self.apiEndpoints.getPolicy,
             [], false, false);
         $.getJSON(url, function (res) {
-            console.log(res);
+            //console.log(res);
             self.editor.value(res.Markdown);
-            self.policyData(res);
+            res.Version = (parseInt(res.Version) + 1).toString();
+            self.policyData.update(res);
+            $('#saveDialog').modal('hide');
         }).fail(function (resp, status, error) {
             console.log("error - policyReload");
             var errObj = self.helpers.processRequestFailure(resp, status, error);
diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/admin.min.js b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/admin.min.js
index 80c0157..1e8dff2 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/admin.min.js
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/admin.min.js
@@ -1 +1 @@
-function AdminVM(){var n=this;n.groupsList=ko.observable(null);n.groupEditItem=ko.observable(null);n.unassignedCardList=ko.observable(null);n.helpers=new Helpers;n.policyMarkdown="";n.policyData=ko.observable({ChangeAuthor:"",ChangeDate:moment(),Version:1,ChangeDescription:"",Markdown:"",Html:""});n.renderer=new marked.Renderer;n.renderer.blockquote=function(n){return'<blockquote class="blockquote">'+n+"<\/blockquote>"};n.renderer.heading=function(n,t){var r=new Tautologistics.NodeHtmlParser.DefaultHandler(function(t){if(t)throw new Error('Cannot parse "'+n+'" in markdown file.');}),u=new Tautologistics.NodeHtmlParser.Parser(r),i;return u.parseComplete(n),i="unknown",r.dom.length>0&&(i=r.dom[0].raw.toLowerCase().trim().replace(/ /g,"-")),"<h"+t+' id="'+i+'">  <a class="heading-anchor" style="display:none;" href="#'+i+'">    <i class="oi oi-link-intact"><\/i>  <\/a>'+n+"<\/h"+t+">"};n.renderer.table=function(n,t){return'<table class="table"><thead class="thead-default">'+n+"<\/thead><tbody>"+t+"<\/tbody><\/table>"};n.renderer.code=function(n,t){var i=!!(t&&hljs.getLanguage(t)),r=i?hljs.highlight(t,n).value:n;return'<pre><code class="hljs lang-'+t+'">'+r+"<\/code><\/pre>"};n.editor=new EasyMDE({element:document.getElementById("policyEditor"),showIcons:["bold","italic","strikethrough","heading","heading-smaller","heading-bigger","heading-1","heading-2","heading-3","code","quote","unordered-list","ordered-list","clean-block","link","table","horizontal-rule","guide","table"],hideIcons:["preview","side-by-side","fullscreen"],renderingConfig:{markedOptions:{renderer:n.renderer}}});n.editor.codemirror.on("changes",function(){n.policyData().Html=n.editor.options.previewRender(n.editor.value())});n.uiPages={overview:"overview",group:"groups",home:function(){return this.overview}};n.apiEndpoints={deleteGroups:"/api/groups/delete",getGroups:"/api/groups",editGroup:"/api/groups/edit",getUnassignedCards:"/api/cards/unassigned",clearUnassignedCards:"/api/cards/unassigned",getPolicy:"/api/app/policy",savePolicy:"/api/app/policy"};n.clearGroupForm=function(){n.helpers.goToMenuOption(n.uiPages.group);n.groupEditItem(null)};n.hideGroupForm=function(){n.groupEditItem(null)};n.newGroupForm=function(){n.groupEditItem({Id:-1,Name:""});n.helpers.goToMenuOption(n.uiPages.group)};n.groupFormHidden=ko.computed(function(){return n.groupEditItem()==null},n);n.editGroupClick=function(t){n.helpers.goToMenuOption(n.uiPages.group);n.groupEditItem(t)};n.getGroups=function(){var t=n.helpers.createRequestUrl(n.apiEndpoints.getGroups,null,!1);$.getJSON(t,function(t){n.groupsList(t)}).fail(function(t,i,r){console.log("error - getGroups");var u=n.helpers.processRequestFailure(t,i,r)})};n.deleteGroup=function(t){var i=n.helpers.createRequestUrl(n.apiEndpoints.deleteGroups,[{key:"groupId",value:t}],!1,!1);$.ajax({url:i,type:"DELETE",success:function(){console.log("deleted "+t);n.hideGroupForm();n.helpers.goToMenuOption(n.uiPages.home())}});console.log("delete: "+t)};n.submitGroupEdit=function(t){var i=n.helpers.createRequestUrl(n.apiEndpoints.editGroup,null,!1);$.post(i,t,function(){},"json").done(function(){n.groupEditItem(null);n.helpers.goToMenuOption(n.uiPages.home())}).fail(function(t,i,r){n.helpers.goToMenuOption(n.uiPages.home());var u=n.helpers.processRequestFailure(t,i,r)})};n.getUnassignedCardData=function(){var t=n.helpers.createRequestUrl(n.apiEndpoints.getUnassignedCards,null,!1);$.getJSON(t,function(t){n.unassignedCardList(t)}).fail(function(t,i,r){console.log("error - getUnassignedCards");var u=n.helpers.processRequestFailure(t,i,r)})};n.clearUnassignedCards=function(){var t=n.helpers.createRequestUrl(n.apiEndpoints.clearUnassignedCards,null,!1);$.ajax({type:"DELETE",url:t,data:"",success:function(){n.getUnassignedCardData()},error:function(t,i,r){console.log("error - clearUnassignedCards");var u=n.helpers.processRequestFailure(resp,i,r)}})};n.padNumber=function(n){return(n<10?"0":"")+n};n.policySave=function(){var t=n.helpers.createRequestUrl(n.apiEndpoints.savePolicy,null,!1);n.policyData().Markdown=n.editor.value();console.log(n.policyData());$.post(t,n.policyData(),function(){},"json").done(function(){n.policyReload()}).fail(function(t,i,r){var u=n.helpers.processRequestFailure(t,i,r);console.log(u)})};n.policyReload=function(){var t=n.helpers.createRequestUrl(n.apiEndpoints.getPolicy,[],!1,!1);$.getJSON(t,function(t){console.log(t);n.editor.value(t.Markdown);n.policyData(t)}).fail(function(t,i,r){console.log("error - policyReload");var u=n.helpers.processRequestFailure(t,i,r);n.assignErrorObject(u.errorCode,u.errorMessage,"policyReload")})};n.convertToDisplayDateTime=function(t){var i=new Date(t);return i.getDate()+" "+i.toLocaleString("en-us",{month:"long"})+" "+(i.getYear()-100)+"  "+n.padNumber(i.getHours())+":"+n.padNumber(i.getMinutes())+":"+n.padNumber(i.getSeconds())};Sammy(function(){this.disable_push_state=!0;this.get("#overview",function(){n.getGroups();n.getUnassignedCardData();n.policyReload()});this.post("#editgroup",function(){return n.submitGroupEdit(n.groupEditItem()),!1});this.get("",function(){this.app.runRoute("get","#"+n.uiPages.home())})}).run()}ko.applyBindings(new AdminVM)
\ No newline at end of file
+function AdminVM(){var n=this;n.groupsList=ko.observable(null);n.groupEditItem=ko.observable(null);n.unassignedCardList=ko.observable(null);n.helpers=new Helpers;n.policyMarkdown="";n.policyData=new policy;n.renderer=new marked.Renderer;n.renderer.blockquote=function(n){return'<blockquote class="blockquote">'+n+"<\/blockquote>"};n.renderer.heading=function(n,t){var r=new Tautologistics.NodeHtmlParser.DefaultHandler(function(t){if(t)throw new Error('Cannot parse "'+n+'" in markdown file.');}),u=new Tautologistics.NodeHtmlParser.Parser(r),i;return u.parseComplete(n),i="unknown",r.dom.length>0&&(i=r.dom[0].raw.toLowerCase().trim().replace(/ /g,"-")),"<h"+t+' id="'+i+'">  <a class="heading-anchor" style="display:none;" href="#'+i+'">    <i class="oi oi-link-intact"><\/i>  <\/a>'+n+"<\/h"+t+">"};n.renderer.table=function(n,t){return'<table class="table"><thead class="thead-default">'+n+"<\/thead><tbody>"+t+"<\/tbody><\/table>"};n.renderer.code=function(n,t){var i=!!(t&&hljs.getLanguage(t)),r=i?hljs.highlight(t,n).value:n;return'<pre><code class="hljs lang-'+t+'">'+r+"<\/code><\/pre>"};n.editor=new EasyMDE({element:document.getElementById("policyEditor"),showIcons:["bold","italic","strikethrough","heading","heading-smaller","heading-bigger","heading-1","heading-2","heading-3","code","quote","unordered-list","ordered-list","clean-block","link","table","horizontal-rule","guide","table"],hideIcons:["preview","side-by-side","fullscreen"],renderingConfig:{markedOptions:{renderer:n.renderer}}});n.editor.codemirror.on("changes",function(){n.policyData.html(n.editor.options.previewRender(n.editor.value()))});n.uiPages={overview:"overview",group:"groups",home:function(){return this.overview}};n.apiEndpoints={deleteGroups:"/api/groups/delete",getGroups:"/api/groups",editGroup:"/api/groups/edit",getUnassignedCards:"/api/cards/unassigned",clearUnassignedCards:"/api/cards/unassigned",getPolicy:"/api/app/policy",savePolicy:"/api/app/policy"};n.clearGroupForm=function(){n.helpers.goToMenuOption(n.uiPages.group);n.groupEditItem(null)};n.hideGroupForm=function(){n.groupEditItem(null)};n.newGroupForm=function(){n.groupEditItem({Id:-1,Name:""});n.helpers.goToMenuOption(n.uiPages.group)};n.groupFormHidden=ko.computed(function(){return n.groupEditItem()==null},n);n.editGroupClick=function(t){n.helpers.goToMenuOption(n.uiPages.group);n.groupEditItem(t)};n.getGroups=function(){var t=n.helpers.createRequestUrl(n.apiEndpoints.getGroups,null,!1);$.getJSON(t,function(t){n.groupsList(t)}).fail(function(t,i,r){console.log("error - getGroups");var u=n.helpers.processRequestFailure(t,i,r)})};n.deleteGroup=function(t){var i=n.helpers.createRequestUrl(n.apiEndpoints.deleteGroups,[{key:"groupId",value:t}],!1,!1);$.ajax({url:i,type:"DELETE",success:function(){console.log("deleted "+t);n.hideGroupForm();n.helpers.goToMenuOption(n.uiPages.home())}});console.log("delete: "+t)};n.submitGroupEdit=function(t){var i=n.helpers.createRequestUrl(n.apiEndpoints.editGroup,null,!1);$.post(i,t,function(){},"json").done(function(){n.groupEditItem(null);n.helpers.goToMenuOption(n.uiPages.home())}).fail(function(t,i,r){n.helpers.goToMenuOption(n.uiPages.home());var u=n.helpers.processRequestFailure(t,i,r)})};n.getUnassignedCardData=function(){var t=n.helpers.createRequestUrl(n.apiEndpoints.getUnassignedCards,null,!1);$.getJSON(t,function(t){n.unassignedCardList(t)}).fail(function(t,i,r){console.log("error - getUnassignedCards");var u=n.helpers.processRequestFailure(t,i,r)})};n.clearUnassignedCards=function(){var t=n.helpers.createRequestUrl(n.apiEndpoints.clearUnassignedCards,null,!1);$.ajax({type:"DELETE",url:t,data:"",success:function(){n.getUnassignedCardData()},error:function(t,i,r){console.log("error - clearUnassignedCards");var u=n.helpers.processRequestFailure(resp,i,r)}})};n.padNumber=function(n){return(n<10?"0":"")+n};n.policySave=function(){var t=n.helpers.createRequestUrl(n.apiEndpoints.savePolicy,null,!1);n.policyData.Markdown(n.editor.value());$.post(t,n.policyData(),function(){},"json").done(function(){n.policyReload()}).fail(function(t,i,r){var u=n.helpers.processRequestFailure(t,i,r);console.log(u)})};n.policyReload=function(){var t=n.helpers.createRequestUrl(n.apiEndpoints.getPolicy,[],!1,!1);$.getJSON(t,function(t){n.editor.value(t.Markdown);t.Version=(parseInt(t.Version)+1).toString();n.policyData.update(t);$("#saveDialog").modal("hide")}).fail(function(t,i,r){console.log("error - policyReload");var u=n.helpers.processRequestFailure(t,i,r);n.assignErrorObject(u.errorCode,u.errorMessage,"policyReload")})};n.convertToDisplayDateTime=function(t){var i=new Date(t);return i.getDate()+" "+i.toLocaleString("en-us",{month:"long"})+" "+(i.getYear()-100)+"  "+n.padNumber(i.getHours())+":"+n.padNumber(i.getMinutes())+":"+n.padNumber(i.getSeconds())};Sammy(function(){this.disable_push_state=!0;this.get("#overview",function(){n.getGroups();n.getUnassignedCardData();n.policyReload()});this.post("#editgroup",function(){return n.submitGroupEdit(n.groupEditItem()),!1});this.get("",function(){this.app.runRoute("get","#"+n.uiPages.home())})}).run()}ko.applyBindings(new AdminVM)
\ No newline at end of file
diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/js/PolicyObject.js b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/js/PolicyObject.js
new file mode 100644
index 0000000..d891362
--- /dev/null
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/js/PolicyObject.js
@@ -0,0 +1,30 @@
+function policy(data) {
+    var self = this;
+    if (typeof data === "undefined") {
+        data = createDefaultPolicy();
+    }
+    self.changeDate = ko.observable(data.changeDate);
+    self.description = ko.observable(data.description);
+    self.changeAuthor = ko.observable(data.changeAuthor);
+    self.version = ko.observable(data.version);
+    self.markdown = ko.observable(data.markdown);
+    self.html = ko.observable(data.html);
+    function createDefaultPolicy() {
+        return {
+            changeDate: moment().format(),
+            description: "",
+            changeAuthor: "",
+            version: -1,
+            markdown: "",
+            html: ""
+        };
+    }
+    self.update = function(data) {
+        self.changeDate(data.changeDate);
+        self.description(data.description);
+        self.changeAuthor(data.changeAuthor);
+        self.version(data.version);
+        self.markdown(data.markdown);
+        self.html(data.html);
+    }
+}
\ No newline at end of file