From 0bbbd7625332455c8e274eee111ed37f46eab471 Mon Sep 17 00:00:00 2001
From: "chris.watts90@outlook.com" <chris.watts90@outlook.com>
Date: Sun, 9 Apr 2017 22:04:03 +0100
Subject: [PATCH] add references to knockout.contextmenu files.

add data bindings to timelog table to create the correct create+edit or create only context menus.
#29
---
 .../WindowsDataCenter/www/index.html          | 54 ++++++++++++++-----
 1 file changed, 40 insertions(+), 14 deletions(-)

diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
index 079b15d..0e1c97a 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
@@ -4,12 +4,14 @@
     <title>Flexi Time Data Viewer</title>
     <link rel="shortcut icon" href="favicon.ico" />
 
-    <link rel="stylesheet preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-    <link rel="stylesheet preload" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">
+    <link rel="stylesheet preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
+    <link rel="stylesheet preload" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css"/>
     <link href="spa.min.css" rel="stylesheet" />
+    <link href="css/knockout.contextmenu.css" rel="stylesheet" type="text/css"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js" type="text/javascript"></script>
+    <script src="js/knockout.contextmenu.js" type="text/javascript"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sammy.js/0.7.6/sammy.js" type="text/javascript"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
@@ -246,9 +248,6 @@
     </div>
     <br/>
     <br/>
-    <!--<div class="row">
-
-    </div>-->
     <div class="row">
         <div class="col-md-3 col-xs-12">
             <div id="datePickerContainer">
@@ -259,7 +258,7 @@
             <!-- main content panel. -->
             <table class="table table-striped">
                 <thead>
-                <tr>
+                <tr data-bind="contextMenu: $root.createContextMenu">
                     <th>Day Of Week</th>
                     <!-- ko foreach: new Array($root.getTimeLogEntryArrayLength(MaxDailyLogCount)) -->
                     <th>In</th>
@@ -271,24 +270,30 @@
                 <tbody>
                 <!-- ko foreach: TimeLogs-->
                 <tr>
-                    <td class="valign" data-bind="text: DayOfWeek"></td>
+                    <td class="valign" data-bind="text: DayOfWeek, contextMenu: $root.createContextMenu"></td>
                     <!-- ko foreach: Logs -->
-                    <td class="valign" data-bind="text: $root.convertToDisplayTime(EventTime)"></td>
+                    <td class="valign" data-bind="text: $root.convertToDisplayTime(EventTime), contextMenu: $root.editContextMenu"></td>
                     <!-- /ko -->
                     <!-- ko foreach: new Array($root.correctLogOffset($parent.MaxDailyLogCount)-LogCount)-->
-                    <td class="valign"></td>
+                    <td class="valign" data-bind="contextMenu: $root.createContextMenu"></td>
                     <!-- /ko -->
-                    <td class="valign"data-bind="text: $root.convertToHours(DailyTotal)"></td>
+                    <td class="valign" data-bind="text: $root.convertToHours(DailyTotal), contextMenu: $root.createContextMenu"></td>
                 </tr>
                 <!-- /ko -->
                 <tr>
-                    <td class="valign" data-bind="attr:{colspan: $root.correctLogOffset(MaxDailyLogCount)+1}">Weekly Total</td>
-                    <td class="valign" for="dailyHrsTotal" data-bind="text: $root.convertToHours(WeeklyTotal)"></td>
+                    <td class="valign" data-bind="attr:{colspan: $root.correctLogOffset(MaxDailyLogCount)+1}, contextMenu: $root.createContextMenu">Weekly Total</td>
+                    <td class="valign" for="dailyHrsTotal" data-bind="text: $root.convertToHours(WeeklyTotal), contextMenu: $root.createContextMenu"></td>
                 </tr>
                 </tbody>
             </table>
         </div>
     </div>
+    <!--<menu type="context" id="manualLogsMenu">
+        <menu label="ManuallyCreateLogs">
+            <menuitem label="Edit" onclick="$root.editLogClick()"/>
+            <menuitem label="Create" onlcick="$root.createLogClick()"/>
+        </menu>
+    </menu>-->
 </div>
 
 <div id="aboutDialog" class="modal fade" role="dialog" data-bind="with: appDetails">
@@ -318,7 +323,28 @@
         </div>
     </div>
 </div>
-
+<div id="manualLogDialog" class="modal fade" role="dialog" data-bind="with: manualLog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <h4>MANUAL EDIT</h4>
+            </div>
+            <div class="modal-body">
+                <table>
+                    <tr>
+                        <th>Event Time:</th>
+                        <td data-bind="text: EventTime"></td>
+                    </tr>
+                    <tr>
+                        <th>Direction</th>
+                        <td data-bind="text: Direction"></td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
     <footer data-bind="with: errorData, css: {footer: $root.errorData()!==null}">
         <div class="container">
             <!-- Alert/Error banner-->
@@ -333,6 +359,6 @@
         </div>
     </footer>
 
-  <script src="spa.min.js" type="text/javascript"></script>
+  <script src="spa.js" type="text/javascript"></script>
 </body>
 </html>
\ No newline at end of file