chris.watts90@outlook.com
695c88521d
updated admin.html to pull in new policy object updated admin.js to use new observables in the object. #94
171 lines
8.8 KiB
HTML
171 lines
8.8 KiB
HTML
<!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.min.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://cdn.jsdelivr.net/momentjs/2.10.6/moment.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>
|
|
<link rel="stylesheet" href="css/easymde.min.css" />
|
|
<link rel="stylesheet" href="css/highlightjs.min.css" />
|
|
</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">
|
|
<div class="row">
|
|
<h2 class="col-md-4">Groups</h2>
|
|
<button class="col-md-1 btn btn-default pull-right" style="margin-top: 20px;" data-bind="click: $root.newGroupForm">
|
|
<span class="glyphicon glyphicon-plus"></span>
|
|
</button>
|
|
</div>
|
|
<hr />
|
|
<div class="row">
|
|
<div data-bind="with: groupsList, css:{'col-md-8': !$root.groupFormHidden(), 'col-md-12':$root.groupFormHidden()}">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th class="col-md-3">User Count</th>
|
|
<th class="col-md-1"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach: Groups">
|
|
<tr data-bind="click: $root.editGroupClick">
|
|
<td class="valign" data-bind="text: Name"></td>
|
|
<td class="valign" data-bind="text: UserCount"></td>
|
|
<td><button class="btn btn-link" data-bind="enable: UserCount=='0', click: function(data, event){$root.deleteGroup(Id);}" type="button">Delete</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<form method="post" action="#editgroup" data-bind="with: $root.groupEditItem(), css:{'col-md-4':!$root.groupFormHidden()}">
|
|
<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.hideGroupForm">
|
|
Cancel
|
|
</button>
|
|
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div id="CardManagement" class="container">
|
|
<div class="row">
|
|
<h2 class="col-md-4">Unassigned Cards</h2>
|
|
<button class="col-md-1 btn btn-default pull-right" style="margin-top: 20px;" data-bind="click: $root.clearUnassignedCards">
|
|
<span class="glyphicon glyphicon-trash"></span>
|
|
</button>
|
|
</div>
|
|
<div class="row">
|
|
<div data-bind="with: unassignedCardList">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Card Unique Id</th>
|
|
<th>Last Used Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach: data">
|
|
<tr>
|
|
<td data-bind="text: UniqueId"></td>
|
|
<td data-bind="text: $root.convertToDisplayDateTime(LastUsed)"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="PolicyManagement" class="container">
|
|
<div id="row">
|
|
<ul class="nav nav-tabs">
|
|
<li class="active"><a href="#edit" data-toggle="tab">Edit</a></li>
|
|
<li><a href="#preview" data-toggle="tab">Preview</a></li>
|
|
</ul>
|
|
<div class="tab-content" style="max-height: 500px; min-height: 400px;overflow-y: auto">
|
|
<div id="edit" class="tab-pane fade in active">
|
|
<textarea id="policyEditor"></textarea>
|
|
</div>
|
|
<div id="preview" class="tab-pane fade in">
|
|
<div data-bind="html: policyData.html" class="well-lg"></div>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#saveDialog">Save</button><!--data-bind="click: $root.policySave"-->
|
|
<button class="btn btn-secondary pull-right" data-bind="click: $root.policyReload">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<div id="saveDialog" class="modal fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h4>Change Details</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table">
|
|
<tr>
|
|
<th>Change Author</th>
|
|
<td><input class="form-control" id="changeAuthorInput" type="text" data-bind="value: policyData.ChangeAuthor" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Change Date</th>
|
|
<td><input class="form-control" id="changeDatePicker" type="datetime-local" data-bind="value: policyData.ChangeDate" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Version</th>
|
|
<td><input class="form-control" id="versionInput" type="text" data-bind="value: policyData.Version" readonly /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Change Description</th>
|
|
<td><input class="form-control" id="changeDescription" type="text" data-bind="value: policyData.ChangeDescription" /></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary pull-right" data-bind="click: $root.policySave">Save</button>
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="js/PolicyObject.js" type="text/javascript"></script>
|
|
<script src="Helpers.min.js" type="text/javascript"></script>
|
|
<script src="js/easymde.min.js" type="text/javascript"></script>
|
|
<script src="js/highlightjs.min.js" type="text/javascript"></script>
|
|
<script src="js/htmlparser.min.js" type="text/javascript"></script>
|
|
<script src="js/marked.min.js"></script>
|
|
<script src="admin.js" type="text/javascript"></script>
|
|
</body>
|
|
</html> |