334 lines
13 KiB
JavaScript
334 lines
13 KiB
JavaScript
function DataVM() {
|
|
"use strict";
|
|
var self = this;
|
|
self.menuOptions = ["Users", "Data", "Stats", "Other"];
|
|
self.chosenMenuItemId = ko.observable();
|
|
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",//"/userstest",
|
|
getUserDetails: "/api/users",//"/users",
|
|
editUser: "/api/users/edit",//"/users/edit",
|
|
getTimeLogs: "/api/timelogs",//"/timelogs",
|
|
getUnassignedCards: "/api/cards/unassigned"//"/unassignedcards"
|
|
};
|
|
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) {
|
|
var appender = "?";
|
|
args.forEach(function(arg) {
|
|
url += appender + arg.key + "=" + arg.value;
|
|
appender = "&";
|
|
});
|
|
}
|
|
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: ""
|
|
};
|
|
}
|
|
};
|
|
self.selectedCalendarWeek.subscribe(function (selectedWeek) {
|
|
console.log("Calendar week changed to: " + selectedWeek);
|
|
//self.goToTimeLogs(self.chosenTimeLogUserId, selectedWeek);
|
|
});
|
|
/**
|
|
* 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} isRelativePath - 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, isRelativePath) {
|
|
var appender = "?";
|
|
var url = "";
|
|
if (isRelativePath) {
|
|
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 !== "") {
|
|
console.log(destination);
|
|
self.goToMenuOption(destination); //redirect to whereever the button is telling us to go..
|
|
}
|
|
} else {
|
|
console.log("target is null, going nowhere");
|
|
}
|
|
};
|
|
self.dismissAlert = function(data, event) {
|
|
self.errorData(null);
|
|
};
|
|
self.initDatePicker = function (selectedDate) {
|
|
$("#weeklyDatePicker").datepicker({
|
|
weekStart: 1,
|
|
maxViewMode: 2,
|
|
endDate: "+0d",
|
|
todayBtn: true,
|
|
format: "yyyy-mm-dd",
|
|
todayHighlight: true,
|
|
calendarWeeks: true
|
|
});
|
|
|
|
if (!selectedDate) {
|
|
selectedDate = new Date();
|
|
} else {
|
|
selectedDate = new Date(selectedDate);
|
|
}
|
|
console.log("setting date to: " + selectedDate);
|
|
$("#weeklyDatePicker").datepicker("setDate", selectedDate);
|
|
console.log("finished init");
|
|
};
|
|
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;
|
|
//console.log(
|
|
// "1: Iso Week Number: " + moment(kk).isoWeek() + " of " +
|
|
// moment(kk).weeksInYear()
|
|
//);
|
|
self.selectedCalendarWeek(moment(kk).isoWeek());
|
|
self.goToTimeLogs(self.chosenTimeLogUserId, null, [{ key: "selectedDate", value: kk.toISOString() }]);
|
|
});
|
|
}
|
|
}
|
|
self.getUserList = function () {
|
|
var url = self.createRequestUrl(self.apiEndpoints.getUserList, null, false);
|
|
console.log(url);
|
|
$.getJSON(url, function (res) {
|
|
self.userList(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;
|
|
self.chosenMenuItemId("Users");
|
|
self.chosenUserDetails(null);
|
|
self.userList(null);
|
|
self.userTimeLogData(null);
|
|
if (query)
|
|
self.searchUsers(query);
|
|
else
|
|
self.getUserList();
|
|
self.assignErrorObject(101, "An Error has occurred.. run away!!!", "test");
|
|
//$.get("http://localhost:3000", { menu: this.params.menu }, self.chosenMenuData);
|
|
});
|
|
this.get("#userData/:userId", function () {
|
|
self.chosenMenuItemId("Data");
|
|
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 () {
|
|
var selectedDate = this.params.selectedDate;
|
|
self.chosenMenuItemId("Other");
|
|
self.userList(null);
|
|
self.chosenUserDetails(null);
|
|
self.chosenTimeLogUserId = this.params.userId;
|
|
//if (!selectedDate) {
|
|
// selectedDate = new Date();
|
|
//}
|
|
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');
|
|
}); |