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