added LogDirection array for dropdown list to bind to.
referenced helpers.js/Helpers() class added "selectedTimeLogDate" observable to make manual log creation filtering easier. added api endpoints for create/delete logs. removed processRequestFailure and createRequestUrl as been replaced by using Helpers.js refactored the returnButtonClick method to use Helpers.js method. updated assignHandler function for new bootstrap datetimepicker control. created assignUpdateHandler to register to change when the datetimepicker is being used for creating/editing logs. added the createManualLog and deleteManualLog methods to interact with the API. added deleteLog method, with user Confirm. added sammy route for "manualLog" for form submission in the manual log dialog. #29
This commit is contained in:
Watts
parent
46ff1a232f
commit
6e278d1478
@ -1,7 +1,12 @@
|
||||
function DataVM() {
|
||||
"use strict";
|
||||
var self = this;
|
||||
self.helpers = new Helpers();
|
||||
self.menuOptions = ["Home"];
|
||||
self.possibleLogDirections = ko.observableArray([
|
||||
{ Text: "In", value: 1 },
|
||||
{ Text: "Out", value: 2 }
|
||||
]),
|
||||
self.chosenMenuItemId = ko.observable();
|
||||
self.appDetails = ko.observable(null);
|
||||
self.userList = ko.observable(null);
|
||||
@ -10,6 +15,7 @@
|
||||
self.userTimeLogData = ko.observable(null);
|
||||
self.unassignedCardData = ko.observable(null);
|
||||
self.chosenTimeLogUserId = -1;
|
||||
self.selectedTimeLogDate = ko.observable(null);
|
||||
self.selectedCalendarWeek = ko.observable(0);
|
||||
self.errorData = ko.observable(null);
|
||||
self.manualLog = ko.observable(null);
|
||||
@ -21,7 +27,9 @@
|
||||
getTimeLogs: "/api/timelogs",
|
||||
getUnassignedCards: "/api/cards/unassigned",
|
||||
getGroups: "/api/groups",
|
||||
getAppDetails: "/api/app"
|
||||
getAppDetails: "/api/app",
|
||||
manualLogsCreate: "/api/logs/create",
|
||||
manualLogsDelete: "/api/logs/delete"
|
||||
};
|
||||
self.uiPages = {
|
||||
users: "users",
|
||||
@ -40,7 +48,7 @@
|
||||
}
|
||||
var url = "timelogs" + "/" + userId;
|
||||
if (args) {
|
||||
url = self.createRequestUrl(url, args, false, false);
|
||||
url = self.helpers.createRequestUrl(url, args, false, false);
|
||||
}
|
||||
location.hash = url;
|
||||
};
|
||||
@ -53,85 +61,10 @@
|
||||
};
|
||||
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");
|
||||
var destination = self.helpers.getPageDestination(data, event);
|
||||
if (destination !== "") {
|
||||
self.goToMenuOption(destination); //redirect to whereever the button is telling us to go..
|
||||
}
|
||||
};
|
||||
self.convertToHours = function (value) {
|
||||
@ -147,21 +80,21 @@
|
||||
var date = new Date(dateValue);
|
||||
return date.getHours() + ":" + self.padNumber(date.getMinutes());
|
||||
};
|
||||
self.correctLogOffset = function (logCount) {
|
||||
self.correctLogOffset = function(logCount) {
|
||||
if (logCount % 2 !== 0) {
|
||||
logCount += 1;
|
||||
}
|
||||
return logCount;
|
||||
}
|
||||
self.round = function (value, decimals) {
|
||||
};
|
||||
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.getDate() + " "
|
||||
@ -216,7 +149,7 @@
|
||||
value: data
|
||||
}
|
||||
];
|
||||
var url = self.createRequestUrl("users", args, false, false);
|
||||
var url = self.helpers.createRequestUrl("users", args, false, false);
|
||||
location.hash = url;
|
||||
console.log(url);
|
||||
};
|
||||
@ -231,7 +164,7 @@
|
||||
value: pageNumber
|
||||
}
|
||||
];
|
||||
var url = self.createRequestUrl("users", args, false, false);
|
||||
var url = self.helpers.createRequestUrl("users", args, false, false);
|
||||
location.hash = url;
|
||||
console.log(url);
|
||||
};
|
||||
@ -243,25 +176,41 @@
|
||||
}
|
||||
moment.locale("en", { week: { dow: 1 } });
|
||||
$("#weeklyDatePicker").datetimepicker({
|
||||
format: 'DD/MM/YYYY',
|
||||
format: "DD/MM/YYYY",
|
||||
inline: true,
|
||||
showTodayButton: true,
|
||||
calendarWeeks: true,
|
||||
maxDate: 'now',
|
||||
maxDate: "now",
|
||||
date: selectedDate
|
||||
});
|
||||
};
|
||||
self.assignHandler = function () {
|
||||
self.assignHandler = function() {
|
||||
var elem = $("#weeklyDatePicker")[0];
|
||||
var data = jQuery.hasData(elem) && jQuery._data(elem);
|
||||
if (!data.events) {
|
||||
$('#weeklyDatePicker').on('dp.change', function (e) {
|
||||
var value = e.date;
|
||||
self.selectedCalendarWeek(moment(value).isoWeek());
|
||||
self.goToTimeLogs(self.chosenTimeLogUserId, null, [{ key: "selectedDate", value: moment(value).format("MM-DD-YYYY") }]);
|
||||
});
|
||||
$("#weeklyDatePicker")
|
||||
.on("dp.change",
|
||||
function(e) {
|
||||
var value = e.date;
|
||||
self.selectedCalendarWeek(moment(value).isoWeek());
|
||||
self.goToTimeLogs(self.chosenTimeLogUserId,
|
||||
null,
|
||||
[{ key: "selectedDate", value: moment(value).format("MM-DD-YYYY") }]);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
self.assignUpdateHandler = function() {
|
||||
var elem = $("#datetimepicker1")[0];
|
||||
var data = jQuery.hasData(elem) && jQuery._data(elem);
|
||||
if (!data.events) {
|
||||
$("#datetimepicker1")
|
||||
.on("dp.change",
|
||||
function(e) {
|
||||
var value = e.date.toISOString();
|
||||
self.manualLog().EventTime = value;
|
||||
});
|
||||
}
|
||||
};
|
||||
self.getUserList = function (pageSize, pageNumber, groupId) {
|
||||
var args = null;
|
||||
if (pageSize && pageNumber) {
|
||||
@ -282,52 +231,52 @@
|
||||
value: groupId
|
||||
}];
|
||||
}
|
||||
var url = self.createRequestUrl(self.apiEndpoints.getUserList, args, false);
|
||||
var url = self.helpers.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);
|
||||
var errObj = self.helpers.processRequestFailure(response, status, error);
|
||||
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "getUserList");
|
||||
});
|
||||
};
|
||||
self.getAppDetails = function() {
|
||||
var url = self.createRequestUrl(self.apiEndpoints.getAppDetails, null, false, false);
|
||||
var url = self.helpers.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);
|
||||
var errObj = self.helpers.processRequestFailure(response, status, error);
|
||||
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "getUserList");
|
||||
});
|
||||
};
|
||||
self.searchUsers = function(query) {
|
||||
var url = self.createRequestUrl(self.apiEndpoints.getUserList,
|
||||
var url = self.helpers.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);
|
||||
var errObj = self.helpers.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);
|
||||
var url = self.helpers.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);
|
||||
var errObj = self.helpers.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;
|
||||
var url = self.helpers.createRequestUrl(self.apiEndpoints.editUser, null, false, false);
|
||||
$.post(url, user, function () {
|
||||
}, "json")
|
||||
.done(function () {
|
||||
@ -335,7 +284,7 @@
|
||||
self.goToMenuOption(self.uiPages.home());
|
||||
})
|
||||
.fail(function (resp, status, error) {
|
||||
var errObj = self.processRequestFailure(resp, status, error);
|
||||
var errObj = self.helpers.processRequestFailure(resp, status, error);
|
||||
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "submitChangedUser");
|
||||
self.chosenUserDetails(null);
|
||||
self.goToMenuOption(self.uiPages.home());
|
||||
@ -346,7 +295,7 @@
|
||||
if (selectedDate) {
|
||||
urlArgs.push({ key: "selectedDate", value: selectedDate });
|
||||
}
|
||||
var url = self.createRequestUrl(self.apiEndpoints.getTimeLogs,
|
||||
var url = self.helpers.createRequestUrl(self.apiEndpoints.getTimeLogs,
|
||||
urlArgs,
|
||||
false);
|
||||
$.getJSON(url, function (res) {
|
||||
@ -355,54 +304,84 @@
|
||||
self.assignHandler();
|
||||
}).fail(function (resp, status, error) {
|
||||
console.log("error - getuserdetails");
|
||||
var errObj = self.processRequestFailure(resp, status, error);
|
||||
var errObj = self.helpers.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);
|
||||
var url = self.helpers.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);
|
||||
var errObj = self.helpers.processRequestFailure(resp, status, error);
|
||||
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "getUnassignedCardData");
|
||||
});
|
||||
};
|
||||
self.getGroups = function (successFunc) {
|
||||
var url = self.createRequestUrl(self.apiEndpoints.getGroups, null, false);
|
||||
var url = self.helpers.createRequestUrl(self.apiEndpoints.getGroups, null, false);
|
||||
return $.getJSON(url, function (res) {
|
||||
successFunc(res);
|
||||
//self.chosenUserDetails().Groups = res;
|
||||
//self.chosenUserDetails.valueHasMutated();
|
||||
}).fail(function (resp, status, error) {
|
||||
console.log("error - getGroups");
|
||||
var errObj = self.processRequestFailure(resp, status, error);
|
||||
var errObj = self.helpers.processRequestFailure(resp, status, error);
|
||||
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "getGroups");
|
||||
});
|
||||
};
|
||||
self.createManualLog = function(newLog) {
|
||||
var url = self.helpers.createRequestUrl(self.apiEndpoints.manualLogsCreate, null, false, false);
|
||||
$.post(url, newLog, function () {
|
||||
}, "json")
|
||||
.done(function () {
|
||||
self.manualLog(null);
|
||||
$('#manualLogDialog').modal("hide");
|
||||
self.goToMenuOption(self.uiPages.home());
|
||||
})
|
||||
.fail(function (resp, status, error) {
|
||||
var errObj = self.helpers.processRequestFailure(resp, status, error);
|
||||
self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "createManualLog");
|
||||
self.chosenUserDetails(null);
|
||||
self.goToMenuOption(self.uiPages.home());
|
||||
});
|
||||
};
|
||||
self.deleteManualLog = function (logToDelete) {
|
||||
var url = self.helpers.createRequestUrl(self.apiEndpoints.manualLogsDelete, null, false, false);
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: "DELETE",
|
||||
data: logToDelete,
|
||||
success: function (result) {
|
||||
console.log("successfully deleted .." + result);
|
||||
}
|
||||
});
|
||||
};
|
||||
self.createContextMenu = ko.observableArray([
|
||||
{ text: "Create", action: createlog }
|
||||
]);
|
||||
self.editContextMenu = ko.observableArray([
|
||||
{ text: "Create", action: createlog },
|
||||
{ text: "Edit", action: editlog },
|
||||
{ text: "Create", action: createlog }
|
||||
{ text: "Delete", action: deleteLog }
|
||||
]);
|
||||
function editlog (data) {
|
||||
self.manualLog(data);
|
||||
$('#manualLogDialog').modal("show");
|
||||
$('#datetimepicker1').datetimepicker({
|
||||
format: "YYYY-DD-MM HH:mm:ss",
|
||||
date: new Date(data.EventTime),
|
||||
minDate: moment(new Date(data.EventTime)).startOf('week'),
|
||||
maxDate: moment(new Date(data.EventTime)).endOf('week')
|
||||
});
|
||||
self.assignUpdateHandler();
|
||||
};
|
||||
function createlog(data) {
|
||||
self.manualLog({
|
||||
CalendarWeek:-1,
|
||||
Direction:-1,
|
||||
EventTime: "2017-03-01T07:44:41.0861152+00:00",
|
||||
EventTime: new Date().toISOString(),
|
||||
Id: -1,
|
||||
IdentifierId: -1,
|
||||
UserId: self.chosenTimeLogUserId,
|
||||
@ -410,9 +389,16 @@
|
||||
});
|
||||
$('#manualLogDialog').modal("show");
|
||||
$('#datetimepicker1').datetimepicker({
|
||||
minDate: moment(new Date()).startOf('week'),
|
||||
maxDate: moment(new Date()).endOf('week')
|
||||
format: "YYYY-DD-MM HH:mm:ss",
|
||||
minDate: moment(self.selectedTimeLogDate()).startOf("week"),
|
||||
maxDate: moment(self.selectedTimeLogDate()).endOf("week")
|
||||
});
|
||||
self.assignUpdateHandler();
|
||||
};
|
||||
function deleteLog(data) {
|
||||
if (confirm("Are you sure you want to delete this log?")) {
|
||||
self.deleteManualLog(data);
|
||||
}
|
||||
};
|
||||
Sammy(function () {
|
||||
this.get("#users", function () {
|
||||
@ -443,12 +429,17 @@
|
||||
self.getUnassignedCardData();
|
||||
});
|
||||
this.get("#timelogs/:userId", function () {
|
||||
var selectedDate = this.params.selectedDate;
|
||||
//var selectedDate = this.params.selectedDate;
|
||||
if (this.params.selectedDate) {
|
||||
self.selectedTimeLogDate(this.params.selectedDate);
|
||||
} else {
|
||||
self.selectedTimeLogDate(new Date());
|
||||
}
|
||||
self.chosenTimeLogUserId = this.params.userId;
|
||||
self.chosenMenuItemId("Other");
|
||||
self.userList(null);
|
||||
self.chosenUserDetails(null);
|
||||
self.chosenTimeLogUserId = this.params.userId;
|
||||
self.getTimeLogData(this.params.userId, selectedDate);
|
||||
self.getTimeLogData(this.params.userId, self.selectedTimeLogDate());
|
||||
});
|
||||
this.get("#newUser", function () {
|
||||
self.chosenMenuItemId("newUser");
|
||||
@ -487,14 +478,21 @@
|
||||
self.submitChangedUser(self.chosenUserDetails());
|
||||
return false;
|
||||
});
|
||||
this.post("#manualLog",
|
||||
function() {
|
||||
self.createManualLog(self.manualLog());
|
||||
|
||||
$('#manualLogDialog').modal("hide");
|
||||
self.goToTimeLogs(self.chosenTimeLogUserId, null, [{ key: "selectedDate", value: self.selectedTimeLogDate() }]);
|
||||
});
|
||||
//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');
|
||||
$(this).addClass("highlight");
|
||||
});
|
||||
$(document).on("mouseleave", ".datepicker-days tbody tr", function () {
|
||||
$(this).removeClass('highlight');
|
||||
$(this).removeClass("highlight");
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user