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

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

Browse Source
This commit is contained in:
chris.watts90@outlook.com 2017-02-01 21:10:38 +00:00
parent fa3a115c5c
commit 974ffe4b13
3 changed files with 244 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,41 +1,34 @@
<html> <html>
<head> <head>
<title>Flexi Time Tracker</title> <title>Flexi Time Data Viewer</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="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"/> <link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
<script src="spa.js" type="text/javascript"></script> <link href="spa.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container-fluid"> <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">FlexiTime DataViewer</a> <a class="navbar-brand" href="#">Big Brother</a>
</div> </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"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" data-bind="foreach: menuOptions"> <ul class="nav navbar-nav">
<li data-bind="text: $data, <!-- ko foreach: menuOptions -->
css: { selected: $data == $root.chosenMenuItemId(),active: $data == $root.chosenMenuItemId() }, <li data-bind="css: { active: $root.chosenMenuItemId() == $data },
click: $root.goToMenuOption"> click: $root.goToMenuOption">
<!-- "css: {active: $data == $root.chosenMenuItemId()}, click: $root.goToMenuOption()"> <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? -->
<a data-bind="text:$data"></a>-->
</li> </li>
<!-- /ko -->
</ul> </ul>
</div> </div>
</div> </div>
@ -43,7 +36,18 @@
<div class="usersPage container" data-bind="with: userList"> <div class="usersPage container" data-bind="with: userList">
<div class="col-md-10 col-md-offset-1"> <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"> <div class="usersGrid">
<table class="users table table-striped"> <table class="users table table-striped">
<thead> <thead>
@ -52,6 +56,8 @@
<th>UserId</th> <th>UserId</th>
<th class="col-md-1">firstName</th> <th class="col-md-1">firstName</th>
<th class="col-md-1">lastName</th> <th class="col-md-1">lastName</th>
<th />
<th />
</tr> </tr>
</thead> </thead>
<tbody data-bind="foreach: Users"> <tbody data-bind="foreach: Users">
@ -61,7 +67,7 @@
<td class="valign" data-bind="text: LastName"></td> <td class="valign" data-bind="text: LastName"></td>
<td class="valign" data-bind="text: FirstName"></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.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> </tr>
</tbody> </tbody>
</table> </table>
@ -69,8 +75,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="chosenUserDetails container" data-bind="with: chosenUserDetails"> <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"> <button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-left"></span>Users <span class="glyphicon glyphicon-chevron-left"></span>Users
</button> </button>
@ -89,15 +96,147 @@
<label for="HoursPerWeek">Hours Per Week</label> <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"> <input for="HoursPerWeek" type="text" class="form-control" id="hoursPerWeekEdit" placeholder="Contracted Hours per Week" data-bind="value: HoursPerWeek">
</div> </div>
<div data-bind="with: $root.unassignedCardData"> <div>
<!-- ko foreach: data --> <label for="AssociatedCards">Associated Cards</label>
<input type="checkbox" data-bind="name: Id, value: CardUId, checked: IsSelected"> <span data-bind="text: CardUId"></span><br /> <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 --> <!-- /ko -->
</div> </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> <button type="submit" class="btn btn-primary">Submit</button>
</form> </form>
</div> </div>
</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> </body>
</html> </html>

129
DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.css
View File

@ -1,123 +1,4 @@
table.scroll { .table td.fit,
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 th.fit { .table th.fit {
white-space: nowrap; white-space: nowrap;
width: 1%; width: 1%;
@ -125,3 +6,11 @@ table.scroll tbody td:last-child, thead th:last-child {
.table > tbody > tr > td.valign { .table > tbody > tr > td.valign {
vertical-align: middle; vertical-align: middle;
} }
@media (max-width: 576px) {
ul>li>a.indent-nav-xs{
padding-left: 50px;
}
}
.bootstrap-datetimepicker-widget tr:hover {
background-color: #808080;
}

88
DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js
View File

@ -12,11 +12,10 @@
return this; return this;
}; };
}(jQuery)); }(jQuery));
function DataVM() { function DataVM() {
'use strict'; 'use strict';
var self = this; var self = this;
self.endpointUrl = 'http://localhost:8800/api'; self.endpointUrl = 'http://192.168.1.178:3000';
self.menuOptions = ['Users', 'Data', 'Other']; self.menuOptions = ['Users', 'Data', 'Other'];
self.chosenMenuItemId = ko.observable(); self.chosenMenuItemId = ko.observable();
self.userList = ko.observable(); self.userList = ko.observable();
@ -24,10 +23,11 @@ function DataVM() {
self.chosenMenuData = ko.observable(); self.chosenMenuData = ko.observable();
self.userTimeLogData = ko.observable(); self.userTimeLogData = ko.observable();
self.unassignedCardData = 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.goToUserDetails = function (user) { location.hash = 'userData/' + user.Id; };
self.goToTimeLogs = function (user) { console.log("getTimeLogs"); location.hash = 'timeLogs/' + 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". //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. //if this is used as a clickhandler, the pagedestination attribute should name the page you want.
self.returnButtonClick = function (data, event) { self.returnButtonClick = function (data, event) {
@ -44,12 +44,9 @@ function DataVM() {
console.log(destination); console.log(destination);
self.goToMenuOption(destination); //redirect to whereever the button is telling us to go.. self.goToMenuOption(destination); //redirect to whereever the button is telling us to go..
}; };
self.addNewUserClick = function (data, event) { self.getUserList = function () {
self.goToMenuOption("newUser");
};
self.getUserData = function () {
console.log("beginGetUserData"); console.log("beginGetUserData");
$.getJSON(self.endpointUrl + '/users?callback=?', function (res) { $.getJSON(self.endpointUrl + '/userstest?callback=?', function (res) {
console.log("getting user data"); console.log("getting user data");
console.log(res); console.log(res);
self.userList(res); self.userList(res);
@ -84,7 +81,7 @@ function DataVM() {
.fail(function () { .fail(function () {
console.log("error - post edited user"); console.log("error - post edited user");
console.log(self.chosenUserDetails().Id); console.log(self.chosenUserDetails().Id);
self.goToUserData(self.chosenUserDetails().Id); self.goToUserDetails(self.chosenUserDetails().Id);
}); });
}; };
self.getTimeLogData = function (userId) { self.getTimeLogData = function (userId) {
@ -116,57 +113,98 @@ function DataVM() {
Sammy(function () { Sammy(function () {
this.get('#Users', function () { this.get('#Users', function () {
console.log(this.params.menuOption); console.log(this.params.menuOption);
self.chosenMenuItemId(this.params.menuOption); self.chosenMenuItemId('Users');
self.chosenUserDetails(null); self.chosenUserDetails(null);
self.userList(null); self.userList(null);
self.userTimeLogData(null); self.userTimeLogData(null);
self.getUserData(); self.getUserList();
//$.get("http://localhost:3000", { menu: this.params.menu }, self.chosenMenuData); //$.get("http://localhost:3000", { menu: this.params.menu }, self.chosenMenuData);
}); });
this.get('#userData/:userId', function () { this.get('#userData/:userId', function () {
console.log("userData userId: " + this.params.userId); console.log("userData userId: " + this.params.userId);
console.log("getting details for user: " + 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.userList(null);
self.getUserDetails(this.params.userId); self.getUserDetails(this.params.userId);
self.userTimeLogData(null); self.userTimeLogData(null);
self.getUnassignedCardData();
//$.get("http://localhost:3000", { menu: this.params.menu }, self.chosenMenuData); //$.get("http://localhost:3000", { menu: this.params.menu }, self.chosenMenuData);
}); });
this.get('#timeLogs/:userId', function () { this.get('#timeLogs/:userId', function () {
console.log("get user time logs, userID: " + this.params.userId); console.log("get user time logs, userID: " + this.params.userId);
self.chosenMenuItemId('TimeLogs'); self.chosenMenuItemId('Other');
self.userList(null); self.userList(null);
self.chosenUserDetails(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 () { this.get('#newUser', function () {
console.log("creating new user"); console.log("creating new user");
self.chosenMenuItemId('newUser'); self.chosenMenuItemId('newUser');
self.userList(null); self.userList(null);
self.userTimeLogData(null); self.userTimeLogData(null);
self.chosenUserDetails( self.chosenUserDetails({
{
"Id": -1, "Id": -1,
"UserId": -1, "UserId": -1,
"FirstName": null, "FirstName": null,
"LastName": null, "LastName": null,
"HoursPerWeek": null "HoursPerWeek": null,
"AssociatedCards": null
}); });
self.getUnassignedCardData(); self.getUnassignedCardData();
}); });
this.get('#stats', function () { });
this.post('#edituser', function (context) { 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()); console.log(self.chosenUserDetails());
self.handleEditedUser(self.chosenUserDetails()); self.handleEditedUser(self.chosenUserDetails());
return true; return true;
}); });
//default route (home page)
this.get('', function () { this.app.runRoute('get', '#Users') }); this.get('', function () { this.app.runRoute('get', '#Users') });
}).run(); }).run();
} self.initDatePicker = function () {
DataVM.prototype.dispose = function () { "use strict";
'use strict'; //Initialize the datePicker(I have taken format as mm-dd-yyyy, you can
//window.clearInterval(self.locationTimerHandle); //have your owh)
//window.clearInterval(self.weatherTimerHandle); $('#weeklyDatePicker').datepicker({
//self.chart.destroy(); 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()); ko.applyBindings(new DataVM());