chris.watts90@outlook.com
7af17661f5
would be better as a menu option on the top right, rather than in with the menu top left, but I cant figure out how. #48 #45
304 lines
15 KiB
HTML
304 lines
15 KiB
HTML
<html>
|
|
<head>
|
|
<title>Flexi Time Data Viewer</title>
|
|
<link rel="shortcut icon" href="favicon.ico" />
|
|
|
|
<link rel="stylesheet preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
|
<link rel="stylesheet preload" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.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>
|
|
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script>
|
|
</head>
|
|
<body data-bind="css: {footerBody: errorData() !== null}">
|
|
<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">
|
|
<!-- ko foreach: menuOptions -->
|
|
<li data-bind="css: { active: $root.chosenMenuItemId() == $data },
|
|
click: $root.goToMenuOption">
|
|
<a class="indent-nav-xs" data-bind="text: $data"></a>
|
|
</li>
|
|
<!-- /ko -->
|
|
<li class="hidden-xs" >
|
|
<a data-toggle="modal" data-target="#aboutDialog">About</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container" data-bind="with: userList">
|
|
<!-- Home page > All User List -->
|
|
<div class="col-md-10 col-md-offset-1">
|
|
<div class="row">
|
|
<div class="col-xs-8">
|
|
<form class="input-group" action="#users" method="get">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="submit">Go!</button>
|
|
</span>
|
|
<input type="text" class="form-control" placeholder="Search for..." name="query" data-bind="value: Query">
|
|
</form>
|
|
</div>
|
|
<button class="btn btn-default pull-right" data-bind="click: $root.returnButtonClick" pagedestination="newUser"><span class="glyphicon glyphicon-plus"></span> Add New User</button>
|
|
</div>
|
|
<br/>
|
|
<div>
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-md-1"></th>
|
|
<th class="col-md-3">First Name</th>
|
|
<th class="col-md-3">Last Name</th>
|
|
<th class="col-md-1 text-center">Contractor</th>
|
|
<th/>
|
|
<th/>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach: Users">
|
|
<tr>
|
|
<td class="valign text-center">
|
|
<!-- ko if: State -->
|
|
<span class="label label-success" style="display: block">IN</span>
|
|
<!-- /ko -->
|
|
<!-- ko if: !State -->
|
|
<span class="label label-danger" style="display: block">OUT</span>
|
|
<!-- /ko -->
|
|
</td>
|
|
<td class="valign" data-bind="text: FirstName"></td>
|
|
<td class="valign" data-bind="text: LastName"></td>
|
|
<td class="valign text-center"><span data-bind="css:{ 'glyphicon glyphicon-ok': IsContractor}"></span></td>
|
|
<td class="fit"><button data-bind="click: $root.goToUserDetails" class="btn btn-default">Details</button></td>
|
|
<td class="fit hidden-md-down"><button data-bind="click: $root.goToTimeLogs" class="btn btn-default">View Logs</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row">
|
|
<div class="pagination col-md-3 align-middle">
|
|
<label>Total User Count: <span data-bind="text: TotalUserCount"></span></label>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="text-center">
|
|
<ul class="pagination" data-bind="foreach: new Array(PageCount)">
|
|
<li data-bind="css:{ active: $parent.PageNumber==($index()+1)}">
|
|
<a data-bind="text: $index()+1, click: function(){$root.goToUserPage($index()+1);}"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="pagination col-md-2 text-center" style="float: right">
|
|
<div>
|
|
<button class="btn btn-default dropdown-toggle" type="button" id="pageSizeDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
Page Size
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="pageSizeDropDown">
|
|
<li data-bind="css:{disabled:$root.userList().PageSize===1}">
|
|
<a data-bind="click: function(){$root.setPageSize(1);}">1</a>
|
|
</li>
|
|
<li data-bind="css:{disabled:$root.userList().PageSize===10}">
|
|
<a data-bind="click: function(){$root.setPageSize(10);}">10</a>
|
|
</li>
|
|
<li data-bind="css:{disabled:$root.userList().PageSize===20}">
|
|
<a data-bind="click: function(){$root.setPageSize(20);}">20</a>
|
|
</li>
|
|
<li data-bind="css:{disabled:$root.userList().PageSize===50}">
|
|
<a data-bind="click: function(){$root.setPageSize(50);}">50</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="container" data-bind="with: chosenUserDetails">
|
|
<!-- Edit User Page -->
|
|
<div class="col-md-10 col-md-offset-1">
|
|
<button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-chevron-left"></span>Users
|
|
</button>
|
|
<h1 data-bind="text: FirstName"></h1>
|
|
<form action="#edituser" method="post">
|
|
<input type="hidden" name="id" data-bind="value: UserId">
|
|
<div class="form-group">
|
|
<label for="FirstName">First Name</label>
|
|
<input for="FirstName" type="text" class="form-control" id="firstNameEdit" placeholder="Your First Name" data-bind="value: FirstName"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="LastName">Last Name</label>
|
|
<input for="LastName" type="text" class="form-control" id="lastNameEdit" placeholder="Your Last Name" data-bind="value: LastName"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="HoursPerWeek">Hours Per Week</label>
|
|
<input for="HoursPerWeek" type="text" class="form-control" id="hoursPerWeekEdit" placeholder="Contracted Hours per Week" data-bind="value: HoursPerWeek"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-group ">
|
|
<span class="input-group-addon">
|
|
<input for="IsContractor" type="checkbox" id="isContractorEditor" data-bind="checked: IsContractor" />
|
|
</span>
|
|
<input type="text" readonly class="form-control col-md-8" value="This User is a Contractor"/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="AssociatedCards">Associated Cards</label>
|
|
<br/>
|
|
<div class="row">
|
|
<!-- ko foreach: AssociatedIdentifiers -->
|
|
<div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0">
|
|
<div class="input-group ">
|
|
<span class="input-group-addon">
|
|
<input type="checkbox" data-bind="name: Id, value: UniqueId, checked: IsAssociatedToUser" />
|
|
</span>
|
|
<input type="text" readonly class="form-control col-md-8" data-bind="value: UniqueId"/>
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
<hr/>
|
|
</div>
|
|
<div data-bind="with: $root.unassignedCardData">
|
|
<label for="AssociatedCards">Unassociated/Available Cards</label>
|
|
<br/>
|
|
<div class="row">
|
|
<!-- ko foreach: data -->
|
|
<div class="col-md-6 col-md-push-0 col-sm-6 col-sm-push-0 col-xs-12 col-xs-push-0">
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
<input type="checkbox" data-bind="name: Id, value: UniqueId, checked: IsAssociatedToUser" />
|
|
</span>
|
|
<input type="text" readonly class="form-control" data-bind="value: UniqueId"/>
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<button pageDestination="Users" class="btn btn-secondary" type="button" data-bind="click: $root.returnButtonClick">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container" data-bind="with: userTimeLogData">
|
|
<div class="row">
|
|
<div class="col-md-2 text-center" style="margin-top: 15px;">
|
|
<button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-chevron-left"></span>Users
|
|
</button>
|
|
</div>
|
|
<h3 class="col-md-offset-1 col-md-9 pull-right">
|
|
Logs for: <span data-bind="text: UserInformation.FirstName"></span> <span data-bind="text: UserInformation.LastName"></span>
|
|
</h3>
|
|
</div>
|
|
<br/>
|
|
<br/>
|
|
<!--<div class="row">
|
|
|
|
</div>-->
|
|
<div class="row">
|
|
<div class="col-md-3 col-xs-12">
|
|
<div id="datePickerContainer">
|
|
<div id="weeklyDatePicker"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9 col-xs-12 well">
|
|
<!-- main content panel. -->
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Day Of Week</th>
|
|
<!-- ko foreach: new Array($root.getTimeLogEntryArrayLength(MaxDailyLogCount)) -->
|
|
<th>In</th>
|
|
<th>Out</th>
|
|
<!-- /ko -->
|
|
<th>Sub-Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- ko foreach: TimeLogs-->
|
|
<tr>
|
|
<td class="valign" data-bind="text: DayOfWeek"></td>
|
|
<!-- ko foreach: Logs -->
|
|
<td class="valign" data-bind="text: $root.convertToDisplayTime(EventTime)"></td>
|
|
<!-- /ko -->
|
|
<!-- ko foreach: new Array($root.correctLogOffset($parent.MaxDailyLogCount)-LogCount)-->
|
|
<td class="valign"></td>
|
|
<!-- /ko -->
|
|
<td class="valign"data-bind="text: $root.convertToHours(DailyTotal)"></td>
|
|
</tr>
|
|
<!-- /ko -->
|
|
<tr>
|
|
<td class="valign" data-bind="attr:{colspan: $root.correctLogOffset(MaxDailyLogCount)+1}">Weekly Total</td>
|
|
<td class="valign" for="dailyHrsTotal" data-bind="text: $root.convertToHours(WeeklyTotal)"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="aboutDialog" class="modal fade" role="dialog" data-bind="with: $root.appDetails">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h4 data-bind="text: ApplicationName"></h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table">
|
|
<tr>
|
|
<th>Version</th>
|
|
<td data-bind="text: Version"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Database Provider</th>
|
|
<td data-bind="text: DataBaseProvider"></td>
|
|
</tr>
|
|
</table>
|
|
<br />
|
|
<a class="btn btn-default" data-bind="attr:{href:'mailto:'+ErrorEmailAddress}">Submit Error Report</a>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer data-bind="with: errorData, css: {footer: $root.errorData()!==null}">
|
|
<div class="container">
|
|
<!-- Alert/Error banner-->
|
|
<div class="alert alert-danger alert-dismissible" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close" data-bind="click: $root.dismissAlert"><span aria-hidden="true">×</span></button>
|
|
<strong>Error!</strong>
|
|
<br />
|
|
<div data-bind="text: errorMessage"></div>
|
|
<div data-bind="text: errorSource"></div>
|
|
<div data-bind="text: errorDate"></div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="spa.js" type="text/javascript"></script>
|
|
</body>
|
|
</html> |