FlexitimeTracker/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js

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) {
            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";
        }
        return (value / 60)+" hrs";
    };
    self.convertToDisplayTime = function (dateValue) {
        var date = new Date(dateValue);
        return date.getHours() + ":" + (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
    };
    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;
                //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: 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);
        }).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("Users");
            self.chosenUserDetails(null);
            self.userList(null);
            self.userTimeLogData(null);
            if (query)
                self.searchUsers(query);
            else
                self.getUserList(pageSize, pageNumber);
            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');
});