From 384ae45c636845908ec1602f3d933fa9275f91db Mon Sep 17 00:00:00 2001 From: "Chris.Watts90@outlook.com" Date: Thu, 2 Feb 2017 17:03:50 +0000 Subject: [PATCH] pulled out endpoints into single object, instead of having the strings in file. all strings now use double quotes. all url generation now handled by createRequestUrl, instead of string concatenation in methods. errors in getJson methods will now redirect home, suggest implementing proper error message or something... removed unnecessary console.log's --- .../WindowsDataCenter/www/spa.js | 164 +++++++++++------- 1 file changed, 101 insertions(+), 63 deletions(-) diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js index f4ecdb4..0610c00 100644 --- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js +++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/spa.js @@ -1,52 +1,86 @@ -(function ($) { - 'use strict'; - $.fn.clickToggle = function (func1, func2) { - var funcs = [func1, func2]; - this.data('toggleclicked', 0); - this.click(function () { - var data = $(this).data(); - var tc = data.toggleclicked; - $.proxy(funcs[tc], this)(); - data.toggleclicked = (tc + 1) % 2; - }); - return this; - }; -}(jQuery)); +//(function ($) { +// "use strict"; +// $.fn.clickToggle = function (func1, func2) { +// var funcs = [func1, func2]; +// this.data("toggleclicked", 0); +// this.click(function () { +// var data = $(this).data(); +// var tc = data.toggleclicked; +// $.proxy(funcs[tc], this)(); +// data.toggleclicked = (tc + 1) % 2; +// }); +// return this; +// }; +//}(jQuery)); function DataVM() { - 'use strict'; + "use strict"; var self = this; - self.endpointUrl = 'http://192.168.1.178:3000'; - self.menuOptions = ['Users', 'Data', 'Other']; + self.menuOptions = ["Users", "Data", "Stats", "Other"]; self.chosenMenuItemId = ko.observable(); - self.userList = ko.observable(); - self.chosenUserDetails = ko.observable(); - self.chosenMenuData = ko.observable(); - self.userTimeLogData = ko.observable(); - self.unassignedCardData = ko.observable(); + self.userList = ko.observable(null); + self.chosenUserDetails = ko.observable(null); + self.userTimeLogData = ko.observable(null); + self.unassignedCardData = ko.observable(null); self.selectedCalendarWeek = ko.observable(0); - + self.apiEndpoints = { + root: "http://160.100.28.242:3000", + getUserList: "/userstest", + getUserDetails: "/users", + editUser: "/users/edit", + getTimeLogs: "/timelogs", + getUnassignedCards: "/unassignedcards" + }; + self.uiPages = { + users: "users", + userDetails: "userData", + timeLogs: "timelogs", + home: this.users + }; self.goToMenuOption = function (menu) { location.hash = menu; console.log("goToMenuOption: " + menu); }; - self.goToUserDetails = function (user) { location.hash = 'userData/' + user.Id; }; - self.goToTimeLogs = function (user) { console.log("getTimeLogs"); location.hash = 'timeLogs/' + user.Id; }; + self.goToUserDetails = function (user) { location.hash = self.uiPages.userDetails + "/" + user.Id; }; + self.goToTimeLogs = function (user) { location.hash= "timelogs" + "/" + user.Id; }; + self.createRequestUrl = function (routePath, params, requiresCallback) { + var appender = "?"; + var url = self.apiEndpoints.root + 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; + }; //this function looks for a custom attribute called "pagedestination". //if this is used as a clickhandler, the pagedestination attribute should name the page you want. self.returnButtonClick = function (data, event) { - var target; + var target = null; if (event.target) target = event.target; else if (event.srcElement) target = event.srcElement; var destination = ""; - for (var i = 0; i < target.attributes.length; i++) { - if (target.attributes[i].nodeName === "pagedestination") { - destination = target.attributes[i].value; - break; + if (target != null) { + for (var i = 0; i < target.attributes.length; i++) { + if (target.attributes[i].nodeName === "pagedestination") { + destination = target.attributes[i].value; + break; + } } + console.log(destination); + self.goToMenuOption(destination); //redirect to whereever the button is telling us to go.. + } else { + console.log("target is null, going nowhere"); } - console.log(destination); - self.goToMenuOption(destination); //redirect to whereever the button is telling us to go.. }; self.getUserList = function () { console.log("beginGetUserData"); - $.getJSON(self.endpointUrl + '/userstest?callback=?', function (res) { + var url = self.createRequestUrl(self.apiEndpoints.getUserList, null, true); + console.log(url); + $.getJSON(url, function (res) { console.log("getting user data"); console.log(res); self.userList(res); @@ -56,9 +90,10 @@ function DataVM() { }; self.getUserDetails = function (userId) { console.log("beginGetUserDetailsData"); - var url = self.endpointUrl + '/users/' + userId; + //var url = self.apiEndpoints.root + self.apiEndpoints.getUserDetails + "/" + userId; + var url = self.createRequestUrl(self.apiEndpoints.getUserDetails + "/" + userId, null, true); console.log(url); - $.getJSON(url + '?callback=?', function (res) { + $.getJSON(url, function (res) { console.log("got user data"); //console.log(res); self.chosenUserDetails(res); @@ -69,13 +104,14 @@ function DataVM() { }; self.handleEditedUser = function (user) { console.log("Post Edited User: " + user.Id); - var url = self.endpointUrl + '/users/edit'; - console.log("posting.."); + //var url = self.apiEndpoints.root + self.apiEndpoints.editUser; + var url = self.createRequestUrl(self.apiEndpoints.editUser, null, true); + console.log("posting to.." + url); $.post(url, user, function () { console.log("finished posting.."); - }, 'json') + }, "json") .done(function () { - self.goToMenuOption("Users"); + self.goToMenuOption("users"); self.chosenUserDetails(null); }) .fail(function () { @@ -84,64 +120,64 @@ function DataVM() { self.goToUserDetails(self.chosenUserDetails().Id); }); }; - self.getTimeLogData = function (userId) { + self.getTimeLogData = function (userId, calendarWeek) { console.log("begin get TimeLog Data"); - var url = self.endpointUrl + '/timelogs?userId=' + userId; - console.log(url); - $.getJSON(url + '&callback=?', function (res) { + var url = self.createRequestUrl(self.apiEndpoints.getTimeLogs, + [{ key: "userId", value: userId }, { key: "calendarWeek", value: calendarWeek }], + true); + $.getJSON(url, function (res) { console.log("got user timelog data"); //console.log(res); self.userTimeLogData(res); - //console.log(self.chosenUserDetails()); }).fail(function () { console.log("error - getuserdetails"); + self.goToMenuOption(self.uiPages.home); //go home. }); }; self.getUnassignedCardData = function () { console.log("begin get unassigned cards"); - var url = self.endpointUrl + '/unassignedCards'; - console.log(url); - $.getJSON(url + '?callback=?', function (res) { + var url = self.createRequestUrl(self.apiEndpoints.getUnassignedCards, null, true); + $.getJSON(url, function (res) { console.log("got unassigned card data"); //console.log(res); self.unassignedCardData(res); - //console.log(self.chosenUserDetails()); }).fail(function () { console.log("error - getuserdetails"); + self.goToMenuOption(self.uiPages.home); //go home. }); }; Sammy(function () { - this.get('#Users', function () { + this.get("#users", function () { console.log(this.params.menuOption); - self.chosenMenuItemId('Users'); + self.chosenMenuItemId("Users"); self.chosenUserDetails(null); self.userList(null); self.userTimeLogData(null); self.getUserList(); //$.get("http://localhost:3000", { menu: this.params.menu }, self.chosenMenuData); }); - this.get('#userData/:userId', function () { + this.get("#userData/:userId", function () { console.log("userData userId: " + 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.chosenMenuItemId("Data"); //todo: change this! (replace with actual get timelogs call) 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 () { + this.get("#timelogs/:userId", function () { console.log("get user time logs, userID: " + this.params.userId); self.chosenMenuItemId('Other'); self.userList(null); self.chosenUserDetails(null); //self.selectedCalendarWeek = 0; - //self.getTimeLogData(this.params.userId); + self.getTimeLogData(this.params.userId, self.selectedCalendarWeek()); self.userTimeLogData({ "test": 0 }); self.initDatePicker(); //$( "#datepicker" ).datepicker(); }); - this.get('#newUser', function () { + this.get("#newUser", function () { console.log("creating new user"); self.chosenMenuItemId('newUser'); self.userList(null); @@ -156,8 +192,10 @@ function DataVM() { }); self.getUnassignedCardData(); }); - this.get('#stats', function () { }); - this.post('#edituser', function (context) { + this.get("#stats", function() { + self.goToMenuOption("users"); + }); + this.post("#edituser", function (context) { $.each(self.chosenUserDetails().AssociatedCards, function (k, v) { if (v.IsSelected !== true) { console.log("removing.."); @@ -176,13 +214,13 @@ function DataVM() { return true; }); //default route (home page) - this.get('', function () { this.app.runRoute('get', '#Users') }); + this.get("", function () { this.app.runRoute("get", "#" + self.uiPages.users) }); }).run(); self.initDatePicker = function () { "use strict"; //Initialize the datePicker(I have taken format as mm-dd-yyyy, you can //have your owh) - $('#weeklyDatePicker').datepicker({ + $("#weeklyDatePicker").datepicker({ weekStart: 1, maxViewMode: 2, endDate: "+0d", @@ -191,7 +229,7 @@ function DataVM() { todayHighlight: true, calendarWeeks: true }); - $('#weeklyDatePicker').on('changeDate', function (e) { + $("#weeklyDatePicker").on("changeDate", function (e) { "use strict"; console.log("in here2"); var kk = e.date; @@ -200,11 +238,11 @@ function DataVM() { "1: Iso Week Number: " + moment(kk).isoWeek() + " of " + moment(kk).weeksInYear() ); - console.log(self.selectedCalendarWeek()); + console.log("before: " + self.selectedCalendarWeek()); self.selectedCalendarWeek(moment(kk).isoWeek()); - console.log(self.selectedCalendarWeek()); + console.log("after: " + self.selectedCalendarWeek()); }); - console.log("finished init"); + //console.log("finished init"); }; }; ko.applyBindings(new DataVM()); \ No newline at end of file