From e17568bdc584fe43c6e52ea22e0f17d8fd43c95d Mon Sep 17 00:00:00 2001
From: "Chris.Watts90@outlook.com" <Chris.Watts90@outlook.com>
Date: Mon, 27 Feb 2017 10:25:31 +0000
Subject: [PATCH] update the html page to show the IN/OUT state as per the UI
 suggestion on the issue. Will conditionally show IN (green text)/OUT (red
 text) based on whether the system reports the user to be in or out.

#47
---
 .../WindowsDataCenter/www/index.html                  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
index 983b120..a421a7e 100644
--- a/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
+++ b/DataCenter_Windows/WindowsDataCenter/WindowsDataCenter/www/index.html
@@ -61,15 +61,24 @@
             <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/>
                     <th/>
                 </tr>
                 </thead>
                 <tbody data-bind="foreach: Users">
                 <tr>
+                    <td class="valign text-center">
+                        <!-- ko if: State -->
+                        <span class="label label-success">IN</span>
+                        <!-- /ko -->
+                        <!-- ko if: !State -->
+                        <span class="label label-danger">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>