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

added footer CSS.

Browse Source 
added dismissAlert method to clear error data.
added error data object.
tidying code a bit.
Added Error handling UI elements to the html page.
This commit is contained in:
Chris.Watts90@outlook.com 2017-02-07 17:24:34 +00:00
parent ea6fc3721d
commit 992f5cd1f4
3 changed files with 47 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script>
</head> </head>
<body> <body data-bind="css: {footerBody: errorData() !== null}">
<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 -->
@ -245,10 +245,19 @@
</div> </div>
</div> </div>
<footer data-bind="with: errorData, css: {footer: $root.errorData()!==null}">
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> <div class="container">
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js" type="text/javascript"></script> <!-- Alert/Error banner-->
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>--> <div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close" data-bind="click: $root.dismissAlert"><span aria-hidden="true">&times;</span></button>
<strong>Error!</strong>
<br />
<div data-bind="text: errorMessage"></div>
<div data-bind="text: errorSource"></div>
<div data-bind="text: errorDate"></div>
</div>
</div>
</footer>
<script src="spa.js" type="text/javascript"></script> <script src="spa.js" type="text/javascript"></script>
</body> </body>

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

@ -18,3 +18,15 @@
background: #eeeeee; background: #eeeeee;
cursor: pointer; cursor: pointer;
} }
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 132px;
/*background-color: #f5f5f5;*/
}
.footerBody {
/* Margin bottom by footer height */
margin-bottom: 132px;
}

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

@ -8,6 +8,7 @@
self.userTimeLogData = ko.observable(null); self.userTimeLogData = ko.observable(null);
self.unassignedCardData = ko.observable(null); self.unassignedCardData = ko.observable(null);
self.selectedCalendarWeek = ko.observable(0); self.selectedCalendarWeek = ko.observable(0);
self.errorData = ko.observable(null);
self.apiEndpoints = { self.apiEndpoints = {
root: "http://160.100.28.242:8800", root: "http://160.100.28.242:8800",
getUserList: "/api/users",//"/userstest", getUserList: "/api/users",//"/userstest",
@ -84,6 +85,9 @@
console.log("target is null, going nowhere"); console.log("target is null, going nowhere");
} }
}; };
self.dismissAlert = function(data, event) {
self.errorData(null);
};
self.initDatePicker = function () { self.initDatePicker = function () {
$("#weeklyDatePicker").datepicker({ $("#weeklyDatePicker").datepicker({
weekStart: 1, weekStart: 1,
@ -151,23 +155,21 @@
}); });
}; };
self.submitChangedUser = function (user) { self.submitChangedUser = function (user) {
//console.log("Post Edited User: " + user.UserId); console.log("Post Edited User: " + user.UserId);
var url = self.apiEndpoints.editUser; var url = self.apiEndpoints.editUser;
console.log("posting to.." + url); console.log("posting to.." + url);
$.post(url, user, function () { $.post(url, user, function () {
}, "json") }, "json")
.done(function () { .done(function () {
self.goToMenuOption("users");
self.chosenUserDetails(null); self.chosenUserDetails(null);
self.goToMenuOption(self.uiPages.home());
}) })
.fail(function (response) { .fail(function (response) {
if (response.status === 201) { if (response.status !== 201) {
self.goToMenuOption("users");
self.chosenUserDetails(null);
} else {
console.log("error - post edited user"); console.log("error - post edited user");
self.goToMenuOption(self.uiPages.home());
} }
self.chosenUserDetails(null);
self.goToMenuOption(self.uiPages.home());
}); });
}; };
self.getTimeLogData = function (userId, calendarWeek) { self.getTimeLogData = function (userId, calendarWeek) {
@ -203,7 +205,7 @@
Sammy(function () { Sammy(function () {
this.get("#users", function () { this.get("#users", function () {
var query = this.params.query; var query = this.params.query;
console.log(this.params.query); //console.log(this.params.query);
self.chosenMenuItemId("Users"); self.chosenMenuItemId("Users");
self.chosenUserDetails(null); self.chosenUserDetails(null);
self.userList(null); self.userList(null);
@ -212,10 +214,16 @@
self.searchUsers(query); self.searchUsers(query);
else else
self.getUserList(); self.getUserList();
var errDat = {
errorMessage: "An Error has occurred.. run away!!!",
errorSource: "test",
errorDate: new Date().toDateString("yyyy-mm-dd")
};
self.errorData(errDat);
//$.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("getting details for user: " + this.params.userId); //console.log("getting details for user: " + this.params.userId);
self.chosenMenuItemId("Data"); //todo: change this! (replace with actual get timelogs call) 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);
@ -224,14 +232,14 @@
//$.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("Other"); self.chosenMenuItemId("Other");
self.userList(null); self.userList(null);
self.chosenUserDetails(null); self.chosenUserDetails(null);
self.getTimeLogData(this.params.userId, self.selectedCalendarWeek()); self.getTimeLogData(this.params.userId, self.selectedCalendarWeek());
}); });
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);