Chris/FlexitimeTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add references to knockout.contextmenu files.

Browse Source 
add data bindings to timelog table to create the correct create+edit or create only context menus.
#29
This commit is contained in:
chris.watts90@outlook.com 2017-04-09 22:04:03 +01:00
parent 6061b79033
commit 0bbbd76253
1 changed files with 40 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
View File

@ -4,12 +4,14 @@
<title>Flexi Time Data Viewer</title> <title>Flexi Time Data Viewer</title>
<link rel="shortcut icon" href="favicon.ico" /> <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://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://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css"/>
<link href="spa.min.css" rel="stylesheet" /> <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/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="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://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://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> <script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
@ -246,9 +248,6 @@
</div> </div>
<br/> <br/>
<br/> <br/>
<!--<div class="row">
</div>-->
<div class="row"> <div class="row">
<div class="col-md-3 col-xs-12"> <div class="col-md-3 col-xs-12">
<div id="datePickerContainer"> <div id="datePickerContainer">
@ -259,7 +258,7 @@
<!-- main content panel. --> <!-- main content panel. -->
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr data-bind="contextMenu: $root.createContextMenu">
<th>Day Of Week</th> <th>Day Of Week</th>
<!-- ko foreach: new Array($root.getTimeLogEntryArrayLength(MaxDailyLogCount)) --> <!-- ko foreach: new Array($root.getTimeLogEntryArrayLength(MaxDailyLogCount)) -->
<th>In</th> <th>In</th>
@ -271,24 +270,30 @@
<tbody> <tbody>
<!-- ko foreach: TimeLogs--> <!-- ko foreach: TimeLogs-->
<tr> <tr>
<td class="valign" data-bind="text: DayOfWeek"></td> <td class="valign" data-bind="text: DayOfWeek, contextMenu: $root.createContextMenu"></td>
<!-- ko foreach: Logs --> <!-- 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 -->
<!-- ko foreach: new Array($root.correctLogOffset($parent.MaxDailyLogCount)-LogCount)--> <!-- ko foreach: new Array($root.correctLogOffset($parent.MaxDailyLogCount)-LogCount)-->
<td class="valign"></td> <td class="valign" data-bind="contextMenu: $root.createContextMenu"></td>
<!-- /ko --> <!-- /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> </tr>
<!-- /ko --> <!-- /ko -->
<tr> <tr>
<td class="valign" data-bind="attr:{colspan: $root.correctLogOffset(MaxDailyLogCount)+1}">Weekly Total</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)"></td> <td class="valign" for="dailyHrsTotal" data-bind="text: $root.convertToHours(WeeklyTotal), contextMenu: $root.createContextMenu"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</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>
<div id="aboutDialog" class="modal fade" role="dialog" data-bind="with: appDetails"> <div id="aboutDialog" class="modal fade" role="dialog" data-bind="with: appDetails">
@ -318,7 +323,28 @@
</div> </div>
</div> </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}"> <footer data-bind="with: errorData, css: {footer: $root.errorData()!==null}">
<div class="container"> <div class="container">
<!-- Alert/Error banner--> <!-- Alert/Error banner-->
@ -333,6 +359,6 @@
</div> </div>
</footer> </footer>
<script src="spa.min.js" type="text/javascript"></script> <script src="spa.js" type="text/javascript"></script>
</body> </body>
</html> </html>