From a337cae590ac7d338b71c215f29a456a438d1ebf Mon Sep 17 00:00:00 2001 From: StephanieP Date: Fri, 16 Feb 2018 12:17:13 +0100 Subject: [PATCH] #3 ui-changes, no function yet --- src/main/webapp/css/dukecon.css | 77 ++++++++++++++++++-------- src/main/webapp/index.html | 15 ++++- src/main/webapp/js/store/talks.js | 19 +++++-- src/main/webapp/js/utils/dataHelper.js | 18 ++++++ src/main/webapp/js/utils/request.js | 2 +- 5 files changed, 100 insertions(+), 31 deletions(-) diff --git a/src/main/webapp/css/dukecon.css b/src/main/webapp/css/dukecon.css index 7c21f82..4a25419 100644 --- 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 index 13e97e2..a9eade0 100644 --- a/src/main/webapp/index.html +++ b/src/main/webapp/index.html @@ -31,7 +31,7 @@

Javaland Room Control

Current talks
-
Force Update of Talks Data
+
Force Update of Talks Data

@@ -44,7 +44,7 @@

Talk/Room - Full? + Seats occupied @@ -62,9 +62,18 @@

Talk:
{{ talk.title }}
+
+
Seats:
+
{{talk.occupiedSeats}} / {{ talk.availableSeats }}
+
- +
+ /{{talk.availableSeats}} +
+
+ +
diff --git a/src/main/webapp/js/store/talks.js b/src/main/webapp/js/store/talks.js index cd97e48..8b3131b 100644 --- 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 index c16ef02..b4e9fbf 100644 --- 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 index fccc0f4..d91965e 100644 --- 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;