chris.watts90@outlook.com
50e9d3d182
added method to convert the datetime to a display format. created padNumber to ensure numbers below 10 get shown as two digits. #53
404 lines
16 KiB
JavaScript
404 lines
16 KiB
JavaScript
function DataVM() {
|
|
"use strict";
|
|
var self = this;
|
|
self.menuOptions = ["Home"];
|
|
self.chosenMenuItemId = ko.observable();
|
|
self.appDetails = ko.observable(null);
|
|
self.userList = ko.observable(null);
|
|
self.chosenUserDetails = ko.observable(null);
|
|
self.userTimeLogData = ko.observable(null);
|
|
self.unassignedCardData = ko.observable(null);
|
|
self.chosenTimeLogUserId = -1;
|
|
self.selectedCalendarWeek = ko.observable(0);
|
|
self.errorData = ko.observable(null);
|
|
self.apiEndpoints = {
|
|
root: "http://localhost:8800",
|
|
getUserList: "/api/users",
|
|
getUserDetails: "/api/users",
|
|
editUser: "/api/users/edit",
|
|
getTimeLogs: "/api/timelogs",
|
|
getUnassignedCards: "/api/cards/unassigned",
|
|
getAppDetails: "/api/app"
|
|
};
|
|
self.uiPages = {
|
|
users: "users",
|
|
userDetails: "userData",
|
|
timeLogs: "timelogs",
|
|
home: function () { return this.users; }
|
|
};
|
|
self.goToMenuOption = function (menu) { location.hash = menu; console.log("goToMenuOption: " + menu); };
|
|
self.goToUserDetails = function (user) { location.hash = self.uiPages.userDetails + "/" + user.UserId; };
|
|
self.goToTimeLogs = function (user, data, args) {
|
|
var userId;
|
|
if (user.UserId) {
|
|
userId = user.UserId;
|
|
} else {
|
|
userId = user;
|
|
}
|
|
var url = "timelogs" + "/" + userId;
|
|
if (args) {
|
|
url = self.createRequestUrl(url, args, false, false);
|
|
}
|
|
location.hash = url;
|
|
};
|
|
self.assignErrorObject = function(errCode, errMessage, errorSource) {
|
|
var errDat = {
|
|
errorCode: errCode,
|
|
errorMessage: errMessage,
|
|
errorSource: errorSource,
|
|
errorDate: new Date().toDateString("yyyy-mm-dd")
|
|
};
|
|
self.errorData(errDat);
|
|
}
|
|
self.processRequestFailure = function (xmlHttpRequest, textStatus, errorThrown) {
|
|
if (xmlHttpRequest.readyState === 4) {
|
|
return {
|
|
errorCode: xmlHttpRequest.status,
|
|
errorMessage: xmlHttpRequest.statusText,
|
|
errorSource: ""
|
|
};
|
|
}
|
|
else if (xmlHttpRequest.readyState === 0) {
|
|
return {
|
|
errorCode: xmlHttpRequest.status,
|
|
errorMessage: "Network Error - Is the server available?",
|
|
errorSource: ""
|
|
};
|
|
}
|
|
else {
|
|
return {
|
|
errorCode: xmlHttpRequest.status,
|
|
errorMessage: "Unknown Error",
|
|
errorSource: ""
|
|
};
|
|
}
|
|
};
|
|
/**
|
|
* Create a request URL - references apiEndpoints object to construct url with args, and optional callback url.
|
|
* @param {string} routePath
|
|
* @param {Array<Object<string>} params - Key, Value object detailing the param name (key) and value (value).
|
|
* @param {boolean} requiresCallback - True - add callback function for JSONP/CORS.
|
|
* @param {boolean} isAbsolutePath - True, create a relative URL (without root).
|
|
* @returns {string} the url generated
|
|
* @example
|
|
* createRequestUrl("/api/endpoint", [{key:"param", value:"value"}], true, false);
|
|
* returns: "http://192.168.2.2/api/endpoint?param=value&callback=?"
|
|
*/
|
|
self.createRequestUrl = function (routePath, params, requiresCallback, isAbsoluteUrl) {
|
|
var appender = "?";
|
|
var url = "";
|
|
if (isAbsoluteUrl) {
|
|
url = self.apiEndpoints.root;
|
|
}
|
|
url = url + routePath;
|
|
if (params !== undefined
|
|
&& params !== null) {
|
|
if (params.length > 0) {
|
|
for (var i = 0; i < params.length; i++) {
|
|
url += appender + params[i].key + "=" + params[i].value;
|
|
appender = "&";
|
|
}
|
|
}
|
|
}
|
|
if (requiresCallback) {
|
|
url += appender + "callback=?";
|
|
}
|
|
return url;
|
|
};
|
|
/**
|
|
* Function to redirect to a page in the sammy.js eco system.
|
|
* Relies on "pagedestination" tag in the html. This is a button click handler.
|
|
* @param {Object<unknown>} data - dunno?
|
|
* @param {Object<buttonhandle>} event - handle to the button that was clicked.
|
|
* @returns {nothing} - redirects to the url referenced by the pageDestination tag.
|
|
*/
|
|
self.returnButtonClick = function (data, event) {
|
|
var target = null;
|
|
if (event.target) target = event.target;
|
|
else if (event.srcElement) target = event.srcElement;
|
|
var destination = "";
|
|
if (target != null) {
|
|
for (var i = 0; i < target.attributes.length; i++) {
|
|
if (target.attributes[i].nodeName === "pagedestination") {
|
|
destination = target.attributes[i].value;
|
|
break;
|
|
}
|
|
}
|
|
if (destination !== "") {
|
|
self.goToMenuOption(destination); //redirect to whereever the button is telling us to go..
|
|
}
|
|
} else {
|
|
console.log("target is null, going nowhere");
|
|
}
|
|
};
|
|
self.convertToHours = function (value) {
|
|
var hrs = value / 60;
|
|
if (hrs < 1) {
|
|
return value + " mins";
|
|
}
|
|
var h = Math.floor(hrs);
|
|
var m = Math.floor((hrs % 1) * 60);
|
|
return h + " hrs " + m + " minutes";
|
|
};
|
|
self.convertToDisplayTime = function (dateValue) {
|
|
var date = new Date(dateValue);
|
|
return date.getHours() + ":" + self.padNumber(date.getMinutes());
|
|
};
|
|
self.correctLogOffset = function (logCount) {
|
|
if (logCount % 2 !== 0) {
|
|
logCount += 1;
|
|
}
|
|
return logCount;
|
|
}
|
|
self.round = function (value, decimals) {
|
|
return parseFloat(Math.round(value * 100) / 100).toFixed(decimals);
|
|
}
|
|
self.getTimeLogEntryArrayLength = function(maxDailyLogs) {
|
|
return Math.round(maxDailyLogs/2);
|
|
};
|
|
self.padNumber = function(number) {
|
|
return (number < 10 ? '0' : '') + number;
|
|
}
|
|
self.convertToDisplayDateTime = function (dateValue) {
|
|
var date = new Date(dateValue); // dd MM YY HH:mm:ss e.g.: 01 Mar 17 17:34:02
|
|
return date.getDay() + " "
|
|
+ date.toLocaleString("en-us", { month: "long" }) + " "
|
|
+ (date.getYear()-100) + " "
|
|
+ self.padNumber(date.getHours()) + ":"
|
|
+ self.padNumber(date.getMinutes()) + ":"
|
|
+ self.padNumber(date.getSeconds());
|
|
};
|
|
self.dismissAlert = function(data, event) {
|
|
self.errorData(null);
|
|
};
|
|
self.setPageSize = function(data) {
|
|
if (self.userList().PageSize !== data && self.userList().PageSize !== -1) {
|
|
self.setPagination(data, 1);
|
|
}
|
|
};
|
|
self.goToUserPage = function (data) {
|
|
if (self.userList().PageNumber !== data && self.userList().PageNumber !== -1) {
|
|
self.setPagination(self.userList().PageSize, data);
|
|
}
|
|
};
|
|
self.setPagination = function(pageSize, pageNumber) {
|
|
var args = [
|
|
{
|
|
key: "pageSize",
|
|
value: pageSize
|
|
},
|
|
{
|
|
key: "pageNumber",
|
|
value: pageNumber
|
|
}
|
|
];
|
|
var url = self.createRequestUrl("users", args, false, false);
|
|
location.hash = url;
|
|
console.log(url);
|
|
};
|
|
self.initDatePicker = function (selectedDate) {
|
|
$("#weeklyDatePicker").datepicker({
|
|
weekStart: 1,
|
|
maxViewMode: 2,
|
|
endDate: "+0d",
|
|
todayBtn: "linked",
|
|
format: "yyyy-mm-dd",
|
|
todayHighlight: true,
|
|
calendarWeeks: true
|
|
});
|
|
if (!selectedDate) {
|
|
selectedDate = new Date();
|
|
} else {
|
|
selectedDate = new Date(selectedDate);
|
|
}
|
|
$("#weeklyDatePicker").datepicker("setDate", selectedDate);
|
|
};
|
|
self.assignHandler = function () {
|
|
var elem = $("#weeklyDatePicker")[0];
|
|
var data = jQuery.hasData(elem) && jQuery._data(elem);
|
|
if (!data.events.changeDate) {
|
|
$("#weeklyDatePicker").on("changeDate", function (e) {
|
|
var kk = e.date;
|
|
self.selectedCalendarWeek(moment(kk).isoWeek());
|
|
self.goToTimeLogs(self.chosenTimeLogUserId, null, [{ key: "selectedDate", value: moment(kk).format("MM-DD-YYYY") }]);
|
|
});
|
|
}
|
|
}
|
|
self.getUserList = function (pageSize, pageNumber) {
|
|
var args = null;
|
|
if (pageSize && pageNumber) {
|
|
args = [
|
|
{
|
|
key: "pageSize",
|
|
value: pageSize
|
|
},
|
|
{
|
|
key: "pageNumber",
|
|
value: pageNumber
|
|
}
|
|
];
|
|
}
|
|
var url = self.createRequestUrl(self.apiEndpoints.getUserList, args, false);
|
|
$.getJSON(url, function (res) {
|
|
self.userList(res);
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
}).fail(function (response, status, error) {
|
|
console.log("error - getusers");
|
|
var errObj = self.processRequestFailure(response, status, error);
|
|
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "getUserList");
|
|
});
|
|
};
|
|
self.getAppDetails = function() {
|
|
var url = self.createRequestUrl(self.apiEndpoints.getAppDetails, null, false, false);
|
|
$.getJSON(url, function (res) {
|
|
self.appDetails(res);
|
|
}).fail(function (response, status, error) {
|
|
console.log("error - getusers");
|
|
var errObj = self.processRequestFailure(response, status, error);
|
|
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "getUserList");
|
|
});
|
|
};
|
|
self.searchUsers = function(query) {
|
|
var url = self.createRequestUrl(self.apiEndpoints.getUserList,
|
|
[{ key: "query", value: query }], false, false);
|
|
$.getJSON(url,
|
|
function(res) {
|
|
self.userList(res);
|
|
}).fail(function(resp, status, error) {
|
|
self.goToMenuOption(self.uiPages.home());
|
|
var errObj = self.processRequestFailure(resp, status, error);
|
|
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "searchUsers");
|
|
}
|
|
);
|
|
};
|
|
self.getUserDetails = function (userId) {
|
|
var url = self.createRequestUrl(self.apiEndpoints.getUserDetails + "/" + userId, null, false);
|
|
$.getJSON(url, function (res) {
|
|
self.chosenUserDetails(res);
|
|
}).fail(function (resp, status, error) {
|
|
console.log("error - getuserdetails");
|
|
var errObj = self.processRequestFailure(resp, status, error);
|
|
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "getUserDetails");
|
|
self.goToMenuOption(self.uiPages.home());
|
|
});
|
|
};
|
|
self.submitChangedUser = function (user) {
|
|
var url = self.apiEndpoints.editUser;
|
|
$.post(url, user, function () {
|
|
}, "json")
|
|
.done(function () {
|
|
self.chosenUserDetails(null);
|
|
self.goToMenuOption(self.uiPages.home());
|
|
})
|
|
.fail(function (resp, status, error) {
|
|
var errObj = self.processRequestFailure(resp, status, error);
|
|
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "submitChangedUser");
|
|
self.chosenUserDetails(null);
|
|
self.goToMenuOption(self.uiPages.home());
|
|
});
|
|
};
|
|
self.getTimeLogData = function (userId, selectedDate) {
|
|
var urlArgs = [{ key: "userId", value: userId }];
|
|
if (selectedDate) {
|
|
urlArgs.push({ key: "selectedDate", value: selectedDate });
|
|
}
|
|
var url = self.createRequestUrl(self.apiEndpoints.getTimeLogs,
|
|
urlArgs,
|
|
false);
|
|
$.getJSON(url, function (res) {
|
|
self.userTimeLogData(res);
|
|
self.initDatePicker(res.SelectedDate);
|
|
self.assignHandler();
|
|
}).fail(function (resp, status, error) {
|
|
console.log("error - getuserdetails");
|
|
var errObj = self.processRequestFailure(resp, status, error);
|
|
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "getTimeLogData");
|
|
self.goToMenuOption(self.uiPages.home()); //go home.
|
|
});
|
|
};
|
|
self.getUnassignedCardData = function () {
|
|
var url = self.createRequestUrl(self.apiEndpoints.getUnassignedCards, null, false);
|
|
$.getJSON(url, function (res) {
|
|
self.unassignedCardData(res);
|
|
}).fail(function (resp, status, error) {
|
|
console.log("error - getuserdetails");
|
|
var errObj = self.processRequestFailure(resp, status, error);
|
|
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "getUnassignedCardData");
|
|
});
|
|
};
|
|
Sammy(function () {
|
|
this.get("#users", function () {
|
|
var query = this.params.query;
|
|
var pageSize = this.params.pageSize;
|
|
var pageNumber = this.params.pageNumber;
|
|
self.chosenMenuItemId("Home");
|
|
self.chosenUserDetails(null);
|
|
self.userList(null);
|
|
self.userTimeLogData(null);
|
|
if (self.appDetails() === null) {
|
|
self.getAppDetails();
|
|
}
|
|
if (query)
|
|
self.searchUsers(query);
|
|
else
|
|
self.getUserList(pageSize, pageNumber);
|
|
});
|
|
this.get("#userData/:userId", function () {
|
|
self.chosenMenuItemId("Data");
|
|
self.userList(null);
|
|
self.getUserDetails(this.params.userId);
|
|
self.userTimeLogData(null);
|
|
self.getUnassignedCardData();
|
|
});
|
|
this.get("#timelogs/:userId", function () {
|
|
var selectedDate = this.params.selectedDate;
|
|
self.chosenMenuItemId("Other");
|
|
self.userList(null);
|
|
self.chosenUserDetails(null);
|
|
self.chosenTimeLogUserId = this.params.userId;
|
|
self.getTimeLogData(this.params.userId, selectedDate);
|
|
});
|
|
this.get("#newUser", function () {
|
|
self.chosenMenuItemId("newUser");
|
|
self.userList(null);
|
|
self.userTimeLogData(null);
|
|
self.chosenUserDetails({
|
|
"UserId": -1,
|
|
"FirstName": null,
|
|
"LastName": null,
|
|
"HoursPerWeek": null,
|
|
"AssociatedIdentifiers": [],
|
|
"IsContractor": false
|
|
});
|
|
self.getUnassignedCardData();
|
|
});
|
|
this.get("#stats", function () {
|
|
self.goToMenuOption("users");
|
|
});
|
|
this.post("#edituser", function () {
|
|
$.each(self.chosenUserDetails().AssociatedIdentifiers,
|
|
function (k, v) {
|
|
if (v.IsAssociatedToUser !== true) {
|
|
self.chosenUserDetails().AssociatedIdentifiers.splice(k, 1);
|
|
}
|
|
});
|
|
$.each(self.unassignedCardData().data, function (k, v) {
|
|
if (v.IsAssociatedToUser === true) {
|
|
self.chosenUserDetails().AssociatedIdentifiers.push(v);
|
|
}
|
|
});
|
|
self.submitChangedUser(self.chosenUserDetails());
|
|
return false;
|
|
});
|
|
//default route (home page)
|
|
this.get("", function () { this.app.runRoute("get", "#" + self.uiPages.home()) });
|
|
}).run();
|
|
};
|
|
ko.applyBindings(new DataVM());
|
|
|
|
$(document).on("mouseenter", ".datepicker-days tbody tr", function () {
|
|
$(this).addClass('highlight');
|
|
});
|
|
$(document).on("mouseleave", ".datepicker-days tbody tr", function () {
|
|
$(this).removeClass('highlight');
|
|
}); |