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

23
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://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script>
</head>
<body>
<body data-bind="css: {footerBody: errorData() !== null}">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
@ -244,12 +244,21 @@
</div>
</div>
</div>
<footer data-bind="with: errorData, css: {footer: $root.errorData()!==null}">
<div class="container">
<!-- Alert/Error banner-->
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js" type="text/javascript"></script>
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>-->
<script src="spa.js" type="text/javascript"></script>
<script src="spa.js" type="text/javascript"></script>
</body>
</html>

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

@ -17,4 +17,16 @@
.datepicker tr.highlight {
background: #eeeeee;
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.unassignedCardData = ko.observable(null);
self.selectedCalendarWeek = ko.observable(0);
self.errorData = ko.observable(null);
self.apiEndpoints = {
root: "http://160.100.28.242:8800",
getUserList: "/api/users",//"/userstest",
@ -84,6 +85,9 @@
console.log("target is null, going nowhere");
}
};
self.dismissAlert = function(data, event) {
self.errorData(null);
};
self.initDatePicker = function () {
$("#weeklyDatePicker").datepicker({
weekStart: 1,
@ -151,23 +155,21 @@
});
};
self.submitChangedUser = function (user) {
//console.log("Post Edited User: " + user.UserId);
console.log("Post Edited User: " + user.UserId);
var url = self.apiEndpoints.editUser;
console.log("posting to.." + url);
$.post(url, user, function () {
}, "json")
.done(function () {
self.goToMenuOption("users");
self.chosenUserDetails(null);
self.goToMenuOption(self.uiPages.home());
})
.fail(function (response) {
if (response.status === 201) {
self.goToMenuOption("users");
self.chosenUserDetails(null);
} else {
if (response.status !== 201) {
console.log("error - post edited user");
self.goToMenuOption(self.uiPages.home());
}
self.chosenUserDetails(null);
self.goToMenuOption(self.uiPages.home());
});
};
self.getTimeLogData = function (userId, calendarWeek) {
@ -203,7 +205,7 @@
Sammy(function () {
this.get("#users", function () {
var query = this.params.query;
console.log(this.params.query);
//console.log(this.params.query);
self.chosenMenuItemId("Users");
self.chosenUserDetails(null);
self.userList(null);
@ -212,10 +214,16 @@
self.searchUsers(query);
else
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);
});
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.userList(null);
self.getUserDetails(this.params.userId);
@ -224,14 +232,14 @@
//$.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);
//console.log("get user time logs, userID: " + this.params.userId);
self.chosenMenuItemId("Other");
self.userList(null);
self.chosenUserDetails(null);
self.getTimeLogData(this.params.userId, self.selectedCalendarWeek());
});
this.get("#newUser", function () {
console.log("creating new user");
//console.log("creating new user");
self.chosenMenuItemId("newUser");
self.userList(null);
self.userTimeLogData(null);