242 lines
13 KiB
HTML
242 lines
13 KiB
HTML
<html>
|
|
<head>
|
|
<title>Flexi Time Data Viewer</title>
|
|
<link rel="shortcut icon" href="/favicon.ico" />
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="spa.css" rel="stylesheet" type="text/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 data-bind="foreach: menuOptions",active: $data == $root.chosenMenuItemId() -->
|
|
<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> <!-- would be nice to indent these "1 col" on xs, when the navbar compacts.. any ideas? -->
|
|
</li>
|
|
<!-- /ko -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="usersPage container" data-bind="with: userList">
|
|
<div class="col-md-10 col-md-offset-1">
|
|
<div class="row">
|
|
<div class="col-xs-8">
|
|
<div class="input-group">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button">Go!</button>
|
|
</span>
|
|
<input type="text" class="form-control" placeholder="Search for...">
|
|
</div><!-- /input-group -->
|
|
</div><!-- /.col-lg-6 -->
|
|
<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 class="usersGrid">
|
|
<table class="users table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>UserId</th>
|
|
<th class="col-md-1">firstName</th>
|
|
<th class="col-md-1">lastName</th>
|
|
<th />
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach: Users">
|
|
<tr>
|
|
<td class="valign" data-bind="text: UserId"></td>
|
|
<td class="valign" data-bind="text: UserId"></td>
|
|
<td class="valign" data-bind="text: LastName"></td>
|
|
<td class="valign" data-bind="text: FirstName"></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>
|
|
<label>Total User Count: <span data-bind="text: UserCount"></span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chosenUserDetails container" data-bind="with: chosenUserDetails">
|
|
<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: Id">
|
|
<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="FirstName" 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>
|
|
<label for="AssociatedCards">Associated Cards</label>
|
|
<br />
|
|
<div class="row">
|
|
<!-- ko foreach: AssociatedCards -->
|
|
<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: CardUId, checked: IsSelected">
|
|
</span>
|
|
<input type="text" readonly class="form-control col-md-8" data-bind="value: CardUId">
|
|
</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: CardUId, checked: IsSelected">
|
|
</span>
|
|
<input type="text" readonly class="form-control" data-bind="value: CardUId">
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timelogPage container" data-bind="with: userTimeLogData">
|
|
<button pageDestination="Users" data-bind="click: $root.returnButtonClick" id="returnButton" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-chevron-left"></span>Users
|
|
</button>
|
|
<br />
|
|
<br />
|
|
<div class="row">
|
|
<div class="col-md-3 col-xs-12">
|
|
<div id="datePickerContainer">
|
|
<div id="weeklyDatePicker"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" data-bind="value: $root.selectedCalendarWeek">
|
|
</div>
|
|
<!--<div class="week-picker"></div>
|
|
<p>Date: <input type="text" id="datepicker"></p>-->
|
|
</div>
|
|
<div class="col-md-9 col-xs-12 well">
|
|
<!-- main content panel. -->
|
|
<p>Content</p>
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Day Of Week</th>
|
|
<th>In</th>
|
|
<th>Out</th>
|
|
<th>In</th>
|
|
<th>Out</th>
|
|
<th>In</th>
|
|
<th>Out</th>
|
|
<th>Sub-Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="valign" for="monday">Monday</td>
|
|
<td class="valign" for="timein1"></td>
|
|
<td class="valign" for="timeout1"></td>
|
|
<td class="valign" for="timein2"></td>
|
|
<td class="valign" for="timeout2"></td>
|
|
<td class="valign" for="timein3"></td>
|
|
<td class="valign" for="timeout3"></td>
|
|
<td class="valign" for="dailyHrsTotal">8</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="valign" for="monday">Tuesday</td>
|
|
<td class="valign" for="timein1"></td>
|
|
<td class="valign" for="timeout1"></td>
|
|
<td class="valign" for="timein2"></td>
|
|
<td class="valign" for="timeout2"></td>
|
|
<td class="valign" for="timein3"></td>
|
|
<td class="valign" for="timeout3"></td>
|
|
<td class="valign" for="dailyHrsTotal">8</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="valign" for="monday">Wednesday</td>
|
|
<td class="valign" for="timein1"></td>
|
|
<td class="valign" for="timeout1"></td>
|
|
<td class="valign" for="timein2"></td>
|
|
<td class="valign" for="timeout2"></td>
|
|
<td class="valign" for="timein3"></td>
|
|
<td class="valign" for="timeout3"></td>
|
|
<td class="valign" for="dailyHrsTotal">8</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="valign" for="monday">Thursday</td>
|
|
<td class="valign" for="timein1"></td>
|
|
<td class="valign" for="timeout1"></td>
|
|
<td class="valign" for="timein2"></td>
|
|
<td class="valign" for="timeout2"></td>
|
|
<td class="valign" for="timein3"></td>
|
|
<td class="valign" for="timeout3"></td>
|
|
<td class="valign" for="dailyHrsTotal">8</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="valign" for="monday">Friday</td>
|
|
<td class="valign" for="timein1"></td>
|
|
<td class="valign" for="timeout1"></td>
|
|
<td class="valign" for="timein2"></td>
|
|
<td class="valign" for="timeout2"></td>
|
|
<td class="valign" for="timein3"></td>
|
|
<td class="valign" for="timeout3"></td>
|
|
<td class="valign" for="dailyHrsTotal">8</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="valign" colspan="7" for="monday">Weekly Total</td>
|
|
<td class="valign" for="dailyHrsTotal">37</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
|
<script src="http://learn.knockoutjs.com/Scripts/Lib/knockout-3.0.0.js"></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://rawgit.com/uxsolutions/bootstrap-datepicker/master/dist/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
|
|
<script src="spa.js" type="text/javascript"></script>
|
|
</body>
|
|
</html> |