draft UI for reporting presence (issue #13)

index.html

@@ -5,6 +5,8 @@
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
 	<link rel="stylesheet" href="/public/app.css"/>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/locale/ru.js"></script>
 	<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 	<script src="/public/client.js"></script>
@@ -17,12 +19,13 @@
 	<h1 class="app-title text-center login-header">Track Your Time</h1>
 
 		<p class="greeting">Привет!</p>
+
 		<form id="form">
 			<div class="form-group">
 				<textarea class="form-control" id="message" value="" placeholder="Что ты сегодня сделал?"></textarea>
 			</div>
 			<div class="form-group">
-				<label for="duration-dropdown">Затраченное время:</label>
+				<label for="duration-dropdown">Затраченное время</label>
 				<div class="dropdown" id="duration-dropdown">
 					<button class="btn btn-default dropdown-toggle" type="button" id="durationMenu" data-toggle="dropdown"
 							aria-haspopup="true" aria-expanded="true">
@@ -36,8 +39,16 @@ <h1 class="app-title text-center login-header">Track Your Time</h1>
 			<div class="form-group">
 				<button class="btn btn-default btn-lg btn-primary" id="btn-send" type="submit">Отправить</button>
 			</div>
+		</form>
 		<a href="/statistics.html" id="edu-stat-link">Статистика</a>
 
+		<div class="lecture-info">
+			<div class="lecture-label">Следующий доклад</div>
+			<div class="lecture-title">Тестирование</div>
+			<button class="btn btn-lecture btn-lecture-date">8 Ноября, 18:10</button>
+			<button class="btn btn-lecture btn-here">Я здесь!</button>
+		</div>
+
 	<div class="edu-copyright"> Xored Educational Program • 2016–2017 </div>
 </div>
 </body>

public/app.css

@@ -5,12 +5,14 @@ form {
 }
 
 label {
-	font-size: 2em;
+	display: block;
+	font-size: 14px;
 	font-weight: 400;
 	color:#fff;
+	text-align: center;
 }
 
-.container{
+.container {
 	box-shadow: 0 5px 20px #000;
 	max-width: 440px;
 	border-radius:8px;
@@ -20,37 +22,87 @@ label {
 	border-color: #fff;
 	background-color: rgba(0,0,0, 0.5)
 }
+
 .edu-copyright {
 		color:#888;
 		text-align:center;
 		padding: 0;
-		margin: 0 0 20px 0;
+		margin: 20px 0;
 		position: relative;
 }
 
 #edu-stat-link {
-
 }
 
 .greeting {
-	margin: 50px auto;
+	margin: 20px auto;
 	font-size: 2em;
 	color:#fff;
+	text-align: center;
 }
 
 #message {
 	height: 150px;
 	resize: vertical;
 }
 
-
 .form-control {
 	margin:0;
 	background-color: transparent;
 	border-style: solid;
 	border-color: #fff;
 }
 
+#duration-dropdown {
+	display: block;
+	text-align: center;
+}
+
+#duration-dropdown .dropdown-menu {
+	left: 30%;
+}
+
+.lecture-info {
+	display: none;
+}
+
+.lecture-label {
+	color: white;
+	font-size: 14px;
+	margin: 0.5em 0;
+	text-align: center;
+}
+
+.lecture-title {
+	color: white;
+	font-size: 20px;
+	font-weight: bold;
+	margin: 0.5em 0;
+	text-align: center;
+}
+
+.btn.btn-lecture-date {
+	display: block;
+	width: 100%;
+	border: 1px solid #E02926;
+	background: transparent;
+	color: white;
+	font-size: 14px;
+	font-weight: bold;
+	cursor: default;
+	padding: 0.75em 0;
+}
+
+.btn.btn-here {
+	display: block;
+	width: 100%;
+	background: olivedrab;
+	color: white;
+	font-size: 14px;
+	font-weight: bold;
+	padding: 0.75em 0;
+}
+
 .form-login {
 	max-width: 330px;
 	padding: 15px;
@@ -68,6 +120,7 @@ label {
 	margin:0 0 20px 0;
 	color:#fff;
 }
+
 .body-login {
 	font-family: "PT Sans", sans-serif;
 	background-color: #fff;

public/app.js

@@ -38,6 +38,7 @@ function isValidEvent(event) {
 }
 
 var currentUser = {};
+var currentLecture;
 
 function makeEvent() {
 	return {
@@ -92,6 +93,64 @@ function fetchCurrentUser() {
 	});
 }
 
+function initLectureUI() {
+	moment.locale('ru');
+	const now = moment();
+	API.spectacles.getList().then(allLectures => {
+		allLectures.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());
+		const lectures = allLectures.filter(t => moment(new Date(t.start)).add(t.duration, 'hours').isAfter(now));
+		const lecture = lectures[0];
+		if (lecture) {
+			$('.lecture-info').show();
+
+			const start = moment(new Date(lecture.start));
+			const isCurrent = start.isSameOrBefore(now);
+
+			$('.lecture-label').text(isCurrent ? 'Текущий доклад' : 'Следующий доклад');
+			$('.lecture-title').text(lecture.title);
+
+			const btnDate = $('.btn-lecture-date').text(start.format('DD MMMM, [18:10]'));
+
+			if (isCurrent) {
+				currentLecture = lecture;
+				btnDate.hide();
+				initHereButton();
+			} else {
+				btnDate.show();
+				$('.btn-here').hide();
+			}
+		} else {
+			$('.lecture-info').hide();
+		}
+	});
+}
+
+function initHereButton() {
+	// hide here button if the user is already reported presense
+	API.events.getList().then(events => {
+		const alreadyReported = events.some(e => e.type === 'presence' && e.spectacle_id === currentLecture.id);
+		if (alreadyReported) {
+			$('.btn-here').hide();
+		} else {
+			$('.btn-here').show();
+		}
+	});
+
+	$('.btn-here').click(() => {
+		if (!currentUser || !currentLecture) {
+			return;
+		}
+		API.iamhere({
+			spectacle_id: currentLecture.id,
+		}).then(() => {
+			$('.btn-here').hide();
+		}, err => {
+			// TODO use sweet alert
+			alert(err);
+		});
+	});
+}
+
 $(function() {
 	initDurationMenu();
 	bindSubmitHandler();
@@ -102,4 +161,5 @@ $(function() {
 		.change(toggleButtonState);
 
 	fetchCurrentUser();
+	initLectureUI();
 });

public/client.js

@@ -86,6 +86,13 @@ const API = {
 			headers: makeHeaders(),
 		}).then(toJSON);
 	},
+	iamhere: function(payload) {
+		return fetch(`${BASE}/iamhere`, {
+			credentials: "same-origin",
+			method: 'POST',
+			body: JSON.stringify(payload),
+		}).then(toJSON);
+	},
 	users: makeAPI({
 		resource: 'user',
 		collection: 'users',

statistics.html

@@ -9,6 +9,8 @@
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
 	<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
 	<link rel="stylesheet" href="/public/app.css"/>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/locale/ru.js"></script>
 	<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 	<script src="https://code.highcharts.com/highcharts.js"></script>