#3 ui-changes, no function yet

dukecon · Feb 16, 2018 · a337cae · a337cae
1 parent 94cce2e
commit a337cae
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 31 deletions.
diff --git a/src/main/webapp/css/dukecon.css b/src/main/webapp/css/dukecon.css
@@ -22,8 +22,18 @@ table, th, td {
     background-color: #eee;
 }
 
-td:last-child {
-    vertical-align: middle;
+#main td:last-child {
+    min-width: 11em;
+    text-align: center;
+}
+#main td:last-child span{
+    padding: 5px;
+    line-height: 25px;
+    display: inline-block;
+}
+
+#main td:last-child div:last-child {
+    margin-top: 5px;
 }
 
 td, th {
@@ -87,15 +97,21 @@ h2 div {
     max-width: 1000px;
     padding: 1em;
 }
+input[type=search], input[type=number] {
+    width: 4em;
+    font-size: inherit;
+    border-radius: 5px;
+    padding: 5px;
+    border: 1px solid #ddd;
+}
+#main label, #main input[type=number] {
+    vertical-align: middle;
+}
 input[type=search] {
     width: 40%;
     -webkit-appearance: searchfield;
     appearance: searchfield;
-    font-size: inherit;
     float:right;
-    border-radius: 5px;
-    padding: 5px;
-    border: 1px solid #ddd;
     margin-right: 20px;
 }
 input[type=search]:focus {
@@ -107,19 +123,34 @@ input[type=checkbox] {
 label {
     width: 0;
 }
-label:before {
+label:before, button.setOccupied {
     font-size: 120%;
     font-weight: bold;
-    background: darkgreen;
     border-radius: 10px;
     color: white;
     padding: 5px;
-    width: 60px;
-    line-height: 40px;
+    width: auto;
+    line-height: 30px;
     display: inline-block;
     text-align: center;
     box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
 }
+label:before {
+    background: darkgreen;
+    width: 90%;
+}
+input[type=checkbox]:disabled + label:before, input[type=checkbox]:disabled + label:hover:before {
+    background: gray;
+}
+button.setOccupied {
+    background: darkblue;
+}
+button.setOccupied:hover {
+    background: blue;
+}
+button.setOccupied:disabled {
+    background: gray;
+}
 label:active:before {
     box-shadow: none;
 }
@@ -212,19 +243,6 @@ footer span:last-child {
     color: darkgreen;
 }
 
-@media (max-width: 480px) {
-    #main {
-        font-size: 95%;
-        margin-bottom: 3.5em;
-        padding: 0.5em;
-    }
-    footer {
-        height: 2.5em;
-    }
-    footer span:last-child {
-        top: 2.8em;
-    }
-}
 
 button {
     -webkit-appearance: none;
@@ -272,3 +290,16 @@ button {
     display: inline-block;
 }
 
+@media (max-width: 480px) {
+    #main {
+        font-size: 95%;
+        margin-bottom: 3.5em;
+        padding: 0.5em;
+    }
+    footer {
+        height: 2.5em;
+    }
+    footer span:last-child {
+        top: 2.8em;
+    }
+}
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
@@ -31,7 +31,7 @@ <h1>Javaland Room Control</h1>
     <div id="loading" v-if="loading"></div>
     <h2 class="dark">
         <div>Current talks</div>
-        <div><a v-if="loggedIn && !updating" v-on:click="sendWithBearer" href="../rest/conferences/update/jl2017">Force Update of Talks Data</a></div>
+        <div><a v-if="loggedIn && !updating" v-on:click="sendWithBearer" href="../rest/conferences/update/javaland2018">Force Update of Talks Data</a></div>
         <input type="search" v-on:keyup="emptyOnEsc" placeholder="Quick Filter" aria-label="Quick filter" v-model="quickFilter">
         <button v-on:click="refresh" id="refresh">&thinsp;</button>
     </h2>
@@ -44,7 +44,7 @@ <h2 class="dark">
                     Talk/Room
                 </th>
                 <th>
-                    Full?
+                    Seats occupied
                 </th>
             </tr>
             <tr v-for="(talk, index) in talks">
@@ -62,9 +62,18 @@ <h2 class="dark">
                         <div class="label">Talk:</div>
                         <div>{{ talk.title }}</div>
                     </div>
+                    <div class="talk">
+                        <div class="label">Seats:</div>
+                        <div>{{talk.occupiedSeats}} / {{ talk.availableSeats }}</div>
+                    </div>
                 </td>
                 <td>
-                    <input type="checkbox" v-bind:id="index" v-model="talk.fullyBooked" v-on:change="update"><label v-bind:for="index"></label>
+                    <div>
+                        <input type="number" :disabled="!talk.availableSeats" width="4" :value="talk.occupiedSeats"><span>/{{talk.availableSeats}} </span> <button :disabled="!talk.availableSeats" class="setOccupied" @click="">Set</button>
+                    </div>
+                    <div>
+                        <input type="checkbox" :id="index" :disabled="!talk.availableSeats" v-model="talk.fullyBooked" @click="updateEmptyOrFull"><label v-bind:for="index"></label>
+                    </div>
                 </td>
             </tr>
         </table>

diff --git a/src/main/webapp/js/store/talks.js b/src/main/webapp/js/store/talks.js
@@ -16,13 +16,24 @@ define(['store', 'computed', 'request', 'popups', 'dataHelper', 'scrollHelper'],
 			});
 		}, onError);
 	}
-	
-	function confirmAndUpdate(event) {
+
+	function confirmAndUpdateOccupiedSeats(event) {
 		var id = event.currentTarget.id;
 		var theTalk = computed.talks()[id];
 		if (!store.loggedIn) {
 			popups.alert("Please Log In", "You must be logged in to do this.");
-			theTalk.fullyBooked = !theTalk.fullyBooked;
+			return;
+		}
+	}
+
+	function confirmAndSetEmptyOrFull(event) {
+		var id = event.currentTarget.id;
+		var theTalk = computed.talks()[id];
+		if (!store.loggedIn) {
+			popups.alert("Please Log In", "You must be logged in to do this.");
+			setTimeout(function() {
+				theTalk.fullyBooked = !theTalk.fullyBooked;
+			}, 50);
 			return;
 		}
 
@@ -89,7 +100,7 @@ define(['store', 'computed', 'request', 'popups', 'dataHelper', 'scrollHelper'],
 
 	return {
 		emptyOnEsc: emptyOnEsc,
-		update: confirmAndUpdate,
+		updateEmptyOrFull: confirmAndSetEmptyOrFull,
 		sendWithBearer: sendWithBearer,
 		refresh: loadTalks
 	}

diff --git a/src/main/webapp/js/utils/dataHelper.js b/src/main/webapp/js/utils/dataHelper.js
@@ -36,6 +36,22 @@ define(['moment'], function(moment) {
 		return "unknown";
 	}
 
+	function getSeats(roomId, rooms) {
+		// --------- Testing
+		var min = 0, max = 1900;
+		return Math.floor(Math.random()*(max - min + 1) + min);  // until we have actual data
+
+		// --------- Production
+		// var i;
+		// for (i = 0; i < rooms.length; i++) {
+		// 	if (rooms[i].id === roomId) {
+		// 		console.log(rooms[i]);
+		// 		return rooms[i].capacity;
+		// 	}
+		// }
+		// return 0;
+	}
+
 	function findByEventId(events, eventId) {
 		var i;
 		for (i = 0; i < events.length; i += 1) {
@@ -54,6 +70,8 @@ define(['moment'], function(moment) {
 	function enrichData(entry, metaData) {
 		entry.roomName = getRoomName(entry.locationId, metaData.locations);
 		entry.formattedStart = moment(entry.start).format('MMM DD, HH:mm');
+		entry.availableSeats = getSeats(entry.locationId, metaData.locations);
+		entry.occupiedSeats = 0;
 	}
 
     function addDeltaToConferences(events, delta) {

diff --git a/src/main/webapp/js/utils/request.js b/src/main/webapp/js/utils/request.js
@@ -46,7 +46,7 @@ define(['dataHelper'], function (helper) {
 
     function initialize(callback) {
         httpRequest(
-            "../rest/init.json",
+            "init.json",
             "GET",
             function (result) {
                 urls.keyCloakUrl = result.keycloak;