index on AddUserGroups-#59: 1e01271 add doctype tag.
This commit is contained in:
parent
1e01271276
commit
0cbc9dffbb
@ -0,0 +1,76 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Flexitime Admin page</title>
|
||||||
|
<link rel="stylesheet preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||||
|
<link href="spa.css" rel="stylesheet" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js" type="text/javascript"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/sammy.js/0.7.6/sammy.js" type="text/javascript"></script>
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar navbar-default">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<!-- Brand and toggle get grouped for better mobile display -->
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Big Brother</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||||
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li><a class="indent-nav-xs" href="index.html">Home</a></li>
|
||||||
|
<li class="hidden-xs">
|
||||||
|
<a data-toggle="modal" data-target="#aboutDialog">About</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div id="GroupAdminPage" class="container">
|
||||||
|
<h2>Groups</h2>
|
||||||
|
<div class="row">
|
||||||
|
<div data-bind="with: groupsList" class="col-md-8">
|
||||||
|
<table class="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>User Count</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody data-bind="foreach: Groups">
|
||||||
|
<tr data-bind="click: $root.editGroupClick">
|
||||||
|
<!--<td data-bind="text: Name"></td>-->
|
||||||
|
<td><input data-bind="value: Name" /></td>
|
||||||
|
<td data-bind="text: UserCount"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<form method="post" action="#editgroup" class="col-md-4" data-bind="with: $root.groupEditItem">
|
||||||
|
<input type="hidden" name="id" data-bind="value: Id">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="groupNameEdit">Group Name</label>
|
||||||
|
<input for="Name" type="text" class="form-control" id="groupNameEdit" placeholder="Group Name" data-bind="value: Name"/>
|
||||||
|
</div>
|
||||||
|
<button pageDestination="Users" class="btn btn-secondary" type="button"
|
||||||
|
data-bind="click: $root.clearGroupForm">Cancel</button>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="Helpers.js" type="text/javascript"></script>
|
||||||
|
<script src="admin.js" type="text/javascript"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
function Helpers() {
|
||||||
|
var self = this;
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
function AdminVM() {
|
||||||
|
var self = this;
|
||||||
|
self.groupsList = ko.observable(null);
|
||||||
|
self.groupEditItem = ko.observable({Id:-1,Name:""});
|
||||||
|
self.helpers = new Helpers();
|
||||||
|
self.uiPages = {
|
||||||
|
overview: "overview",
|
||||||
|
home: function () { return this.overview; }
|
||||||
|
};
|
||||||
|
self.apiEndpoints = {
|
||||||
|
getGroups:"/api/groups"
|
||||||
|
};
|
||||||
|
self.clearGroupForm = function(data, event) {
|
||||||
|
self.groupEditItem({ Id: -1, Name: "" });
|
||||||
|
};
|
||||||
|
self.editGroupClick = function(data, event) {
|
||||||
|
self.groupEditItem(data);
|
||||||
|
};
|
||||||
|
self.getGroups = function () {
|
||||||
|
var url = self.helpers.createRequestUrl(self.apiEndpoints.getGroups, null, false);
|
||||||
|
$.getJSON(url, function (res) {
|
||||||
|
self.groupsList(res);
|
||||||
|
console.log(res);
|
||||||
|
}).fail(function (resp, status, error) {
|
||||||
|
console.log("error - getGroups");
|
||||||
|
//var errObj = self.processRequestFailure(resp, status, error);
|
||||||
|
//self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "getGroups");
|
||||||
|
//self.goToMenuOption(self.uiPages.home());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
Sammy(function () {
|
||||||
|
this.get("#overview", function () {
|
||||||
|
self.getGroups();
|
||||||
|
});
|
||||||
|
this.post("#editgroup", function () {
|
||||||
|
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
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 AdminVM());
|
||||||
Loading…
Reference in New Issue
Block a user