From 974ffe4b139ea02092c39c1c4234353a486e952e Mon Sep 17 00:00:00 2001
From: "chris.watts90@outlook.com" <chris.watts90@outlook.com>
Date: Wed, 1 Feb 2017 21:10:38 +0000
Subject: [PATCH] updated html/js/css to latest codepen code. will out of box
 point to the json-server endpoint. needs to be modified to work with the
 datacenter api

---
 .../WindowsDataCenter/www/index.html          | 195 +++++++++++++++---
 .../WindowsDataCenter/www/spa.css             | 129 +-----------
 .../WindowsDataCenter/www/spa.js              |  98 ++++++---
 3 files changed, 244 insertions(+), 178 deletions(-)
diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
index 5fe9d71..cd5fadc 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
@@ -1,41 +1,34 @@
 ﻿<html>
 <head>
-    <title>Flexi Time Tracker</title>
-    <script src="https://code.jquery.com/jquery-3.1.0.min.js"
-            integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
-            crossorigin="anonymous"></script>
-    <script src="http://learn.knockoutjs.com/Scripts/Lib/knockout-3.0.0.js"></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/Chart.js/2.2.2/Chart.bundle.js"></script>
-    <!-- <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> -->
-	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-    <link href="spa.css" rel="stylesheet" type="text/css"/>
-    <script src="spa.js" type="text/javascript"></script>
+    <title>Flexi Time Data Viewer</title>
+
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
+    <link href="spa.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
     <nav class="navbar navbar-default">
         <div class="container-fluid">
             <!-- Brand and toggle get grouped for better mobile display -->
             <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed"
-                        data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
-                <a class="navbar-brand" href="#">FlexiTime DataViewer</a>
+                <a class="navbar-brand" href="#">Big Brother</a>
             </div>
 
-            <!-- Collect the nav links, forms, and other content for toggling data-bind="foreach: menuOptions"-->
+            <!-- Collect the nav links, forms, and other content for toggling data-bind="foreach: menuOptions",active: $data == $root.chosenMenuItemId() -->
             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav" data-bind="foreach: menuOptions">
-                    <li data-bind="text: $data,
-                       css: { selected: $data == $root.chosenMenuItemId(),active: $data == $root.chosenMenuItemId() },
+                <ul class="nav navbar-nav">
+                    <!-- ko foreach: menuOptions -->
+                    <li data-bind="css: { active: $root.chosenMenuItemId() == $data },
                        click: $root.goToMenuOption">
-                        <!-- "css: {active: $data == $root.chosenMenuItemId()}, click: $root.goToMenuOption()">
-                        <a data-bind="text:$data"></a>-->
+                        <a class="indent-nav-xs" data-bind="text: $data"></a> <!-- would be nice to indent these "1 col" on xs, when the navbar compacts.. any ideas? -->
                     </li>
+                    <!-- /ko -->
                 </ul>
             </div>
         </div>
@@ -43,7 +36,18 @@
 
     <div class="usersPage container" data-bind="with: userList">
         <div class="col-md-10 col-md-offset-1">
-            <button class="btn btn-default" data-bind="click: $root.addNewUserClick"><span class="glyphicon glyphicon-plus"></span> Add New User</button>
+            <div class="row">
+                <div class="col-xs-8">
+                    <div class="input-group">
+                        <span class="input-group-btn">
+                            <button class="btn btn-default" type="button">Go!</button>
+                        </span>
+                        <input type="text" class="form-control" placeholder="Search for...">
+                    </div><!-- /input-group -->
+                </div><!-- /.col-lg-6 -->
+                <button class="btn btn-default pull-right" data-bind="click: $root.returnButtonClick" pagedestination="newUser"><span class="glyphicon glyphicon-plus"></span> Add New User</button>
+            </div>
+            <br />
             <div class="usersGrid">
                 <table class="users table table-striped">
                     <thead>
@@ -52,6 +56,8 @@
                             <th>UserId</th>
                             <th class="col-md-1">firstName</th>
                             <th class="col-md-1">lastName</th>
+                            <th />
+                            <th />
                         </tr>
                     </thead>
                     <tbody data-bind="foreach: Users">
@@ -61,7 +67,7 @@
                             <td class="valign" data-bind="text: LastName"></td>
                             <td class="valign" data-bind="text: FirstName"></td>
                             <td class="fit"><button data-bind="click: $root.goToUserDetails" class="btn btn-default">Details</button></td>
-                            <td class="fit"><button data-bind="click: $root.goToTimeLogs" class="btn btn-default">View Logs</button></td>
+                            <td class="fit hidden-md-down"><button data-bind="click: $root.goToTimeLogs" class="btn btn-default">View Logs</button></td>
                         </tr>
                     </tbody>
                 </table>
@@ -69,8 +75,9 @@
             </div>
         </div>
     </div>
+
     <div class="chosenUserDetails container" data-bind="with: chosenUserDetails">
-        <div class=" col-md-10 col-md-offset-1">
+        <div class="col-md-10 col-md-offset-1">
             <button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">
                 <span class="glyphicon glyphicon-chevron-left"></span>Users
             </button>
@@ -89,15 +96,147 @@
                     <label for="HoursPerWeek">Hours Per Week</label>
                     <input for="HoursPerWeek" type="text" class="form-control" id="hoursPerWeekEdit" placeholder="Contracted Hours per Week" data-bind="value: HoursPerWeek">
                 </div>
-                <div data-bind="with: $root.unassignedCardData">
-                    <!-- ko foreach: data -->
-                    <input type="checkbox" data-bind="name: Id, value: CardUId, checked: IsSelected"> <span data-bind="text: CardUId"></span><br />
-                    <!-- /ko -->
+                <div>
+                    <label for="AssociatedCards">Associated Cards</label>
+                    <br />
+                    <div class="row">
+                        <!-- ko foreach: AssociatedCards -->
+                        <div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0">
+                            <div class="input-group ">
+                                <span class="input-group-addon">
+                                    <input type="checkbox" data-bind="name: Id, value: CardUId, checked: IsSelected">
+                                </span>
+                                <input type="text" readonly class="form-control col-md-8" data-bind="value: CardUId">
+                            </div>
+                        </div>
+                        <!-- /ko -->
+                    </div>
+                    <hr />
                 </div>
-
+                <div data-bind="with: $root.unassignedCardData">
+                    <label for="AssociatedCards">Unassociated/Available Cards</label>
+                    <br />
+                    <div class="row">
+                        <!--  -->
+                        <!-- ko foreach: data -->
+                        <div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0">
+                            <div class="input-group">
+                                <span class="input-group-addon">
+                                    <input type="checkbox" data-bind="name: Id, value: CardUId, checked: IsSelected">
+                                </span>
+                                <input type="text" readonly class="form-control" data-bind="value: CardUId">
+                            </div>
+                        </div>
+                        <!-- /ko -->
+                    </div>
+                </div>
+                <br />
                 <button type="submit" class="btn btn-primary">Submit</button>
             </form>
         </div>
     </div>
+
+    <div class="timelogPage container" data-bind="with: userTimeLogData">
+        <button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">
+            <span class="glyphicon glyphicon-chevron-left"></span>Users
+        </button>
+        <br />
+        <br />
+        <div class="row">
+            <div class="col-md-3 col-xs-12">
+                <div id="datePickerContainer">
+                    <div id="weeklyDatePicker"></div>
+                </div>
+                <div class="form-group">
+                    <input type="text" data-bind="value: $root.selectedCalendarWeek">
+                </div>
+                <!--<div class="week-picker"></div>
+                <p>Date: <input type="text" id="datepicker"></p>-->
+            </div>
+            <div class="col-md-9 col-xs-12 well">
+                <!-- main content panel. -->
+                <p>Content</p>
+                <table class="table table-striped">
+                    <thead>
+                        <tr>
+                            <th>Day Of Week</th>
+                            <th>In</th>
+                            <th>Out</th>
+                            <th>In</th>
+                            <th>Out</th>
+                            <th>In</th>
+                            <th>Out</th>
+                            <th>Sub-Total</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="valign" for="monday">Monday</td>
+                            <td class="valign" for="timein1"></td>
+                            <td class="valign" for="timeout1"></td>
+                            <td class="valign" for="timein2"></td>
+                            <td class="valign" for="timeout2"></td>
+                            <td class="valign" for="timein3"></td>
+                            <td class="valign" for="timeout3"></td>
+                            <td class="valign" for="dailyHrsTotal">8</td>
+                        </tr>
+                        <tr>
+                            <td class="valign" for="monday">Tuesday</td>
+                            <td class="valign" for="timein1"></td>
+                            <td class="valign" for="timeout1"></td>
+                            <td class="valign" for="timein2"></td>
+                            <td class="valign" for="timeout2"></td>
+                            <td class="valign" for="timein3"></td>
+                            <td class="valign" for="timeout3"></td>
+                            <td class="valign" for="dailyHrsTotal">8</td>
+                        </tr>
+                        <tr>
+                            <td class="valign" for="monday">Wednesday</td>
+                            <td class="valign" for="timein1"></td>
+                            <td class="valign" for="timeout1"></td>
+                            <td class="valign" for="timein2"></td>
+                            <td class="valign" for="timeout2"></td>
+                            <td class="valign" for="timein3"></td>
+                            <td class="valign" for="timeout3"></td>
+                            <td class="valign" for="dailyHrsTotal">8</td>
+                        </tr>
+                        <tr>
+                            <td class="valign" for="monday">Thursday</td>
+                            <td class="valign" for="timein1"></td>
+                            <td class="valign" for="timeout1"></td>
+                            <td class="valign" for="timein2"></td>
+                            <td class="valign" for="timeout2"></td>
+                            <td class="valign" for="timein3"></td>
+                            <td class="valign" for="timeout3"></td>
+                            <td class="valign" for="dailyHrsTotal">8</td>
+                        </tr>
+                        <tr>
+                            <td class="valign" for="monday">Friday</td>
+                            <td class="valign" for="timein1"></td>
+                            <td class="valign" for="timeout1"></td>
+                            <td class="valign" for="timein2"></td>
+                            <td class="valign" for="timeout2"></td>
+                            <td class="valign" for="timein3"></td>
+                            <td class="valign" for="timeout3"></td>
+                            <td class="valign" for="dailyHrsTotal">8</td>
+                        </tr>
+                        <tr>
+                            <td class="valign" colspan="7" for="monday">Weekly Total</td>
+                            <td class="valign" for="dailyHrsTotal">37</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+    <script src="http://learn.knockoutjs.com/Scripts/Lib/knockout-3.0.0.js"></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>
+    <script src="https://rawgit.com/uxsolutions/bootstrap-datepicker/master/dist/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
+    <script src="spa.js" type="text/javascript"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.css b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.css
index aa309c1..583e3ae 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.css
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.css
@@ -1,127 +1,16 @@
-﻿table.scroll {
-    width: 650px; /* Optional */
-    /* border-collapse: collapse; */
-    border-spacing: 0;
-    table-layout:auto;
-    border: 2px solid black;
-    word-wrap: break-word;
-}
-
-/*table.scroll tbody,
-table.scroll thead { display: block }*/
-
-table.scroll thead tr th {
-    /*width: 100px;
-    width: 90px;*/
-    height: 30px;
-    line-height: 30px;
-    border-bottom: 1px solid black;
-    /*text-align: left;*/
-}
-
-table.scroll tbody {
-    border-top: 1px solid black;
-    height: 300px;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-table.scroll tbody { border-top: 2px solid black; }
-
-table.scroll tbody td, thead th {
-    /*width: 20%;  Optional 
-    width: 100px;*/
-    border-right: 1px solid black;
-}
-
-table.scroll tbody td {
-  text-align: center;
-}
-
-table.scroll tbody td:last-child, thead th:last-child {
-    border-right: none;
-}
-
-#contentContainer{
-}
-
-#nav {
-  padding-top: 10px;
-  float: left;
-  height: 800px;
-}
-#navBar{
-  width: 200px;
-  padding: 20px;
-  float:left;
-}
-
-#content {
-  margin-left: 250px;
-  width: 700px;
-  padding: 10px;
-}
-
-#collapser{
-  float: right;
-  background: black;
-  width: 10px;
-  height: 100%;
-}
-/* Dropdown Button */
-.hoverdropbtn {
-    /*background-color: #4CAF50;
-    color: white;*/
-    padding: 14px;
-    border: none;
-    cursor: pointer;
-}
-.hoverdropdown:hover {
-    background-color: #4CAF50;
-}
-
-/* The container <div> - needed to position the dropdown content */
-.hoverdropdown {
-    position: relative;
-    display: inline-block;
-}
-
-/* Dropdown Content (Hidden by Default) */
-.hoverdropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #f9f9f9;
-    min-width: 200px;
-    z-index: 999;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-}
-
-/* Links inside the dropdown */
-.hoverdropdown-content a {
-    color: black;
-    padding: 12px 16px;
-    text-decoration: none;
-    display: block;
-}
-
-/* Change color of dropdown links on hover */
-.hoverdropdown-content a:hover {background-color: #f1f1f1}
-
-/* Show the dropdown menu on hover */
-.hoverdropdown:hover .hoverdropdown-content {
-    display: block;
-}
-
-/* Change the background color of the dropdown button when the dropdown content is shown */
-.hoverdropdown:hover .hoverdropbtn {
-    background-color: #4CAF50;
-}
-
-.table td.fit, 
+﻿.table td.fit, 
 .table th.fit {
     white-space: nowrap;
     width: 1%;
 }
 .table > tbody > tr > td.valign {
      vertical-align: middle;
+}
+@media (max-width: 576px) {
+  ul>li>a.indent-nav-xs{
+    padding-left: 50px;
+  }
+}
+.bootstrap-datetimepicker-widget tr:hover {
+    background-color: #808080;
 }
\ No newline at end of file
diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js
index ed4a012..f4ecdb4 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js
@@ -12,11 +12,10 @@
         return this;
     };
 }(jQuery));
-
 function DataVM() {
     'use strict';
     var self = this;
-    self.endpointUrl = 'http://localhost:8800/api';
+    self.endpointUrl = 'http://192.168.1.178:3000';
     self.menuOptions = ['Users', 'Data', 'Other'];
     self.chosenMenuItemId = ko.observable();
     self.userList = ko.observable();
@@ -24,10 +23,11 @@ function DataVM() {
     self.chosenMenuData = ko.observable();
     self.userTimeLogData = ko.observable();
     self.unassignedCardData = ko.observable();
-    self.goToMenuOption = function (menu) { location.hash = menu; console.log(menu); };
+    self.selectedCalendarWeek = ko.observable(0);
+
+    self.goToMenuOption = function (menu) { location.hash = menu; console.log("goToMenuOption: " + menu); };
     self.goToUserDetails = function (user) { location.hash = 'userData/' + user.Id; };
     self.goToTimeLogs = function (user) { console.log("getTimeLogs"); location.hash = 'timeLogs/' + user.Id; };
-    //$.each(self.unassignedCardData().data, function(k,v){ if(v.IsSelected == true){console.log(v.CardUId);}})
     //this function looks for a custom attribute called "pagedestination". 
     //if this is used as a clickhandler, the pagedestination attribute should name the page you want.
     self.returnButtonClick = function (data, event) {
@@ -44,12 +44,9 @@ function DataVM() {
         console.log(destination);
         self.goToMenuOption(destination);  //redirect to whereever the button is telling us to go..
     };
-    self.addNewUserClick = function (data, event) {
-        self.goToMenuOption("newUser");
-    };
-    self.getUserData = function () {
+    self.getUserList = function () {
         console.log("beginGetUserData");
-        $.getJSON(self.endpointUrl + '/users?callback=?', function (res) {
+        $.getJSON(self.endpointUrl + '/userstest?callback=?', function (res) {
             console.log("getting user data");
             console.log(res);
             self.userList(res);
@@ -84,7 +81,7 @@ function DataVM() {
           .fail(function () {
               console.log("error - post edited user");
               console.log(self.chosenUserDetails().Id);
-              self.goToUserData(self.chosenUserDetails().Id);
+              self.goToUserDetails(self.chosenUserDetails().Id);
           });
     };
     self.getTimeLogData = function (userId) {
@@ -116,57 +113,98 @@ function DataVM() {
     Sammy(function () {
         this.get('#Users', function () {
             console.log(this.params.menuOption);
-            self.chosenMenuItemId(this.params.menuOption);
+            self.chosenMenuItemId('Users');
             self.chosenUserDetails(null);
             self.userList(null);
             self.userTimeLogData(null);
-            self.getUserData();
+            self.getUserList();
             //$.get("http://localhost:3000", { menu: this.params.menu }, self.chosenMenuData);
         });
         this.get('#userData/:userId', function () {
             console.log("userData userId: " + this.params.userId);
             console.log("getting details for user: " + this.params.userId);
-            self.chosenMenuItemId('Data');
+            self.chosenMenuItemId('Data');  //todo: change this! (replace with actual get timelogs call)
             self.userList(null);
             self.getUserDetails(this.params.userId);
             self.userTimeLogData(null);
+            self.getUnassignedCardData();
             //$.get("http://localhost:3000", { menu: this.params.menu }, self.chosenMenuData);
         });
         this.get('#timeLogs/:userId', function () {
             console.log("get user time logs, userID: " + this.params.userId);
-            self.chosenMenuItemId('TimeLogs');
+            self.chosenMenuItemId('Other');
             self.userList(null);
             self.chosenUserDetails(null);
-            self.getTimeLogData(this.params.userId);
+            //self.selectedCalendarWeek = 0;
+            //self.getTimeLogData(this.params.userId);
+            self.userTimeLogData({ "test": 0 });
+            self.initDatePicker();
+            //$( "#datepicker" ).datepicker();
         });
         this.get('#newUser', function () {
             console.log("creating new user");
             self.chosenMenuItemId('newUser');
             self.userList(null);
             self.userTimeLogData(null);
-            self.chosenUserDetails(
-              {
-                  "Id": -1,
-                  "UserId": -1,
-                  "FirstName": null,
-                  "LastName": null,
-                  "HoursPerWeek": null
-              });
+            self.chosenUserDetails({
+                "Id": -1,
+                "UserId": -1,
+                "FirstName": null,
+                "LastName": null,
+                "HoursPerWeek": null,
+                "AssociatedCards": null
+            });
             self.getUnassignedCardData();
         });
+        this.get('#stats', function () { });
         this.post('#edituser', function (context) {
+            $.each(self.chosenUserDetails().AssociatedCards, function (k, v) {
+                if (v.IsSelected !== true) {
+                    console.log("removing..");
+                    self.chosenUserDetails().AssociatedCards.splice(k, 1);
+                    console.log(v.CardUId);
+                }
+            });
+            $.each(self.unassignedCardData().data, function (k, v) {
+                if (v.IsSelected == true) {
+                    self.chosenUserDetails().AssociatedCards.push(v);
+                    console.log(v.CardUId);
+                }
+            });
             console.log(self.chosenUserDetails());
             self.handleEditedUser(self.chosenUserDetails());
             return true;
         });
+        //default route (home page)
         this.get('', function () { this.app.runRoute('get', '#Users') });
     }).run();
-}
-DataVM.prototype.dispose = function () {
-    'use strict';
-    //window.clearInterval(self.locationTimerHandle);
-    //window.clearInterval(self.weatherTimerHandle);
-    //self.chart.destroy();
+    self.initDatePicker = function () {
+        "use strict";
+        //Initialize the datePicker(I have taken format as mm-dd-yyyy, you can     
+        //have your owh)
+        $('#weeklyDatePicker').datepicker({
+            weekStart: 1,
+            maxViewMode: 2,
+            endDate: "+0d",
+            todayBtn: true,
+            format: "yyyy-mm-dd",
+            todayHighlight: true,
+            calendarWeeks: true
+        });
+        $('#weeklyDatePicker').on('changeDate', function (e) {
+            "use strict";
+            console.log("in here2");
+            var kk = e.date;
+            console.log(kk);
+            console.log(
+              "1: Iso Week Number: " + moment(kk).isoWeek() + " of " +
+              moment(kk).weeksInYear()
+            );
+            console.log(self.selectedCalendarWeek());
+            self.selectedCalendarWeek(moment(kk).isoWeek());
+            console.log(self.selectedCalendarWeek());
+        });
+        console.log("finished init");
+    };
 };
-
 ko.applyBindings(new DataVM());
\ No newline at end of file
