chris.watts90@outlook.com
20bf968675
fixed pagination where it wasnt rounding up so <x.5 would show not 1 page less than required. fix issue introduced in last branch where group drop down/filter wouldnt work. #51
404 lines
21 KiB
HTML
404 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Flexi Time Data Viewer</title>
|
|
<link rel="shortcut icon" href="favicon.ico" />
|
|
|
|
<link rel="stylesheet" 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.min.css" rel="stylesheet" />
|
|
<link href="css/knockout.contextmenu.css" rel="stylesheet" type="text/css"/>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js" type="text/javascript"></script>
|
|
<script src="js/knockout.contextmenu.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" 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/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script>-->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" type="text/javascript"></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-md-6">
|
|
<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>
|
|
<div class="dropdown col-md-2" data-bind="with: $root.groupsList">
|
|
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
|
|
Group Filter
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<!-- ko foreach: Groups -->
|
|
<li data-bind="css:{disabled:$root.getCurrentGroupFilter()===Name}">
|
|
<a data-bind="click: function(){$root.groupFilter(Id);}, text: Name"></a>
|
|
</li>
|
|
<!-- /ko -->
|
|
</ul>
|
|
</div>
|
|
<button class="btn btn-default col-md-2"
|
|
data-bind="click: $root.clearGroupFilter, enable: ($root.hasGroupFilter() || $root.hasQuery())">Clear Filter</button>
|
|
<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">
|
|
<div class="col-md-1">
|
|
<a href="#users?sort=firstAsc"><span data-bind="css:{ 'text-success': $root.sortIsActive('firstAsc')}" class="glyphicon glyphicon-chevron-up"></span></a>
|
|
</div>
|
|
<div class="col-md-1">
|
|
<a href="#users?sort=firstDesc"><span data-bind="css:{ 'text-success': $root.sortIsActive('firstDesc')}" class="glyphicon glyphicon-chevron-down"></span></a>
|
|
</div>
|
|
<span class="col-md-9">First Name</span>
|
|
</th>
|
|
<th class="col-md-3">
|
|
<div class="col-md-1">
|
|
<a href="#users?sort=lastAsc"><span data-bind="css:{ 'text-success': $root.sortIsActive('lastAsc')}" class="glyphicon glyphicon-chevron-up"></span></a>
|
|
</div>
|
|
<div class="col-md-1">
|
|
<a href="#users?sort=lastDesc"><span data-bind="css:{ 'text-success': $root.sortIsActive('lastDesc')}"class="glyphicon glyphicon-chevron-down"></span></a>
|
|
</div>
|
|
<span class="col-md-9">Last Name</span></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" data-toggle="tooltip" data-placement="top" title="" data-bind="attr:{'title': $root.convertToDisplayDateTime(LastEventDateTime)}" style="display: block">IN</span>
|
|
<!-- /ko -->
|
|
<!-- ko if: !State -->
|
|
<span class="label label-danger" data-toggle="tooltip" data-placement="top" title="" data-bind="attr:{'title': $root.convertToDisplayDateTime(LastEventDateTime)}" 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="Groups">Groups</label>
|
|
<br/>
|
|
<div class="row">
|
|
<!-- ko foreach: Groups-->
|
|
<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: Name, checked: IsAssociatedToUser" />
|
|
</span>
|
|
<input type="text" readonly class="form-control col-md-8" data-bind="value: Name" />
|
|
</div>
|
|
</div>
|
|
<!-- /ko-->
|
|
</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"/>
|
|
<input type="text" readonly class="form-control" data-bind="value: 'Last Used on: '+$root.convertToDisplayDateTime(LastUsed)"/>
|
|
</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 class="col-md-3 col-xs-12">
|
|
<div id="datePickerContainer">
|
|
<div id="weeklyDatePicker"></div>
|
|
<div class="text-center">
|
|
<button class="btn btn-default form-control" type="button" id="manualTodayButton" data-bind="click: $root.goToToday">Today</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9 col-xs-12 well">
|
|
<!-- main content panel. -->
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr data-bind="contextMenu: $root.createContextMenu">
|
|
<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-->
|
|
<!-- ko if: !((DayOfWeek === "Saturday" || DayOfWeek=== "Sunday") && LogCount===0)-->
|
|
<tr>
|
|
<td class="valign" data-bind="text: DayOfWeek, contextMenu: $root.createContextMenu"></td>
|
|
<!-- ko foreach: Logs -->
|
|
<td class="valign" data-bind="text: $root.convertToDisplayTime(EventTime), contextMenu: $root.editContextMenu"></td>
|
|
<!-- /ko -->
|
|
<!-- ko foreach: new Array($root.correctLogOffset($parent.MaxDailyLogCount)-LogCount)-->
|
|
<td class="valign" data-bind="contextMenu: $root.createContextMenu"></td>
|
|
<!-- /ko -->
|
|
<td class="valign" data-bind="text: $root.convertToHours(DailyTotal), contextMenu: $root.createContextMenu"></td>
|
|
</tr>
|
|
<!-- /ko -->
|
|
<!-- /ko -->
|
|
<tr>
|
|
<td class="valign" data-bind="attr:{colspan: $root.correctLogOffset(MaxDailyLogCount)+1}, contextMenu: $root.createContextMenu">Weekly Total</td>
|
|
<td class="valign" for="dailyHrsTotal" data-bind="text: $root.convertToHours(WeeklyTotal), contextMenu: $root.createContextMenu"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!--<menu type="context" id="manualLogsMenu">
|
|
<menu label="ManuallyCreateLogs">
|
|
<menuitem label="Edit" onclick="$root.editLogClick()"/>
|
|
<menuitem label="Create" onlcick="$root.createLogClick()"/>
|
|
</menu>
|
|
</menu>-->
|
|
</div>
|
|
|
|
<div class="container" data-bind="with: policyData">
|
|
<div class="row" data-bind="html:Html">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="aboutDialog" class="modal fade" role="dialog" data-bind="with: 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>
|
|
<!-- Dialog to create a manual time entry-->
|
|
<div id="manualLogDialog" class="modal fade" role="dialog" data-bind="with: manualLog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h4>MANUAL EDIT</h4>
|
|
</div>
|
|
<div class="modal-body" style="height: 400px;">
|
|
<form action="#manualLog" method="post" class="form-group">
|
|
<input type="hidden" name="Id" data-bind="value: Id"/>
|
|
<div class="form-group">
|
|
<div id="datetimepicker1"></div>
|
|
</div>
|
|
<br/>
|
|
<div>
|
|
<div class="input-group col-md-offset-1">
|
|
<select class="form-control" data-bind="options: $root.possibleLogDirections,
|
|
optionsText: function(item) { return item.Text },
|
|
optionsValue: function(item){ return item.value },
|
|
value: Direction,
|
|
optionsCaption: 'Choose...'"
|
|
required></select>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="pull-right">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</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="Helpers.js" type="text/javascript"></script>
|
|
<script src="spa.js" type="text/javascript"></script>
|
|
</body>
|
|
</html> |