Implement pages.quiz for loading and filling a Quiz in /app

* Added id= filter in API /me/quizs
* Added animations slide-to-(right|left)
* TODO: develop the quiz.index template

api/src/api/me.js

@@ -84,13 +84,20 @@ module.exports = {
 			if (actors === undefined || actors === null)
 				return res.json({ error: 'unknown_error' })
 
-			const quizs = await db.table.quizs().find({
+			var filter = {
 				to: uactor,
 				from: { $in: actors },
-			}).toArray()
+			}
+			if (req.query.id !== undefined)
+				filter.id = req.query.id
+
+			const quizs = await db.table.quizs()
+				.find(filter).toArray()
 			for (var i in quizs)
 				quizs[i].from = await api.accounts.getAccount(quizs[i].from)
 
+			if (quizs.length > 0 && req.query.id !== undefined)
+				return res.json(quizs[0])
 			return res.json(quizs)
 		}],
 	},

web/src/app/css/app.css

@@ -17,6 +17,10 @@ body.app {
 	top: 2px;
 }
 
+hr {
+	color: #00000045;
+}
+
 img.avatar {
 	width: 2.6em;
 }
@@ -77,8 +81,11 @@ main {
 	user-select: none;
 }
 
-#quizs-container h2 { margin: 0 }
+#quizs-container h2,
-#quizs-container h2 > .fa {
+#quiz h2 { margin: 0 }
+
+#quizs-container h2 > .fa,
+#quiz h2 > .fa {
 	margin-right: .3em;
 	vertical-align: middle;
 }
@@ -88,9 +95,16 @@ main {
 #quizs .name {
 	font-size: 1.2em;
 }
-#quizs .avatar img {
+#quizs .avatar.round,
+#quiz .avatar.round {
+	padding: 3px;
+	background: linear-gradient(30deg, #df00ff, pink, pink, #7c4cff);
+}
+#quizs .avatar img,
+#quiz .avatar img {
 	width: 3em;
 	height: 3em;
+	filter: brightness(120%);
 }
 #quizs .metadata .count {
 	float: right;
@@ -105,6 +119,9 @@ main {
 	font-size: .9em;
 	opacity: .6;
 }
+#quiz hr {
+	max-width: 70%;
+}
 
 #page-meet {
 	background: #000;

web/src/app/css/base.css

@@ -54,19 +54,35 @@ body {
 @media (max-width: 400px) { .media-max400 { display: none } }
 @media (max-width: 500px) { .media-max500 { display: none } }
 
+.slide-to-right {
+	position: relative !important;
+	animation. animate2right 0.1s;
+}
 .slide-from-right {
-	position: relative;
+	position: relative !important;
 	animation: animateright 0.1s;
 }
+.slide-to-left {
+	position: relative !important;
+	animation: animate2left 0.1s;
+}
 .slide-from-left {
-	position: relative;
+	position: relative !important;
 	animation: animateleft 0.1s;
 }
+@keyframes animate2right {
+	from { right: 0; opacity: 1 }
+	to   { right: -200px; opacity: .5 }
+}
 @keyframes animateright {
 	from { right: -200px; opacity: .5 }
-	to   { right: 0; opacity:1 }
+	to   { right: 0; opacity: 1 }
+}
+@keyframes animate2left {
+	from { left: 0; opacity: 1 }
+	to   { left: -200px; opacity: .5 }
 }
 @keyframes animateleft {
 	from { left: -200px; opacity: .5 }
-	to   { left: 0; opacity:1 }
+	to   { left: 0; opacity: 1 }
 }

web/src/app/js/app.js

@@ -31,6 +31,9 @@ app.template = {
 			window.__cache_templates = {};
 		return window.__cache_templates[name];
 	},
+	isLoaded: function(name) {
+		return app.template.get(name) !== undefined;
+	},
 	load: function(name, cback) {
 		file = app.vars.js_dir + '/templates/' +
 			name.replaceAll('.', '/') + '.html';
@@ -396,6 +399,7 @@ window.onload = function(e) {
 	dayjs.extend(window.dayjs_plugin_updateLocale);
 	if (getNormalizedURI() === app.vars.app_dir) {
 		scriptPageHandler('pages.home',		{ exact: '' });
+		scriptPageHandler('pages.quiz',		{ regex: /^quiz\/[^\/]+?$/ });
 		scriptPageHandler('pages.meet',		{ exact: 'meet' });
 		scriptPageHandler('pages.crushes',	{ regex: /^crushes(\/you)?$/ });
 		scriptPageHandler('pages.chat',		{ exact: 'chat' });

web/src/app/js/pages/home.js

@@ -13,6 +13,16 @@ app.pages.home = {
 			});
 		});
 	},
+	loadQuiz: function(id) {
+		animateTimeout('#quizs-container', 'slide-to-left');
+		setTimeout(function() {
+			document.getElementById('app-container').innerHTML = '';
+			if (app.template.isLoaded('quiz.index'))
+				window.location.href = `#quiz/${id}`
+		}, 80);
+		if (!app.template.isLoaded('quiz.index'))
+			window.location.href = `#quiz/${id}`;
+	},
 	paint: function(section, json) {
 		json = json || app.pages.home.data[section];
 		if (section === 'quizs')

web/src/app/js/pages/quiz.js

@@ -0,0 +1,37 @@
+app.pages.quiz = {
+	data: {},
+	load: function(args) {
+		let data;
+		if (app.pages.home !== undefined &&
+			app.pages.home.data.quizs !== undefined) {
+			for (var i in app.pages.home.data.quizs) {
+				const it = app.pages.home.data.quizs[i];
+				if (it.id === args[1]) {
+					data = it;
+					break;
+				}
+			}
+		}
+
+		const container = document.getElementById('app-container');
+		container.innerHTML = '';
+
+		const onDataLoaded = async function(json) {
+			await app.template.loadMany(['quiz.index']);
+			app.pages.quiz.data = json;
+			app.pages.quiz.paint(json);
+			if (getNormalizedURI() === app.vars.app_dir)
+				animateTimeout('#quiz', 'slide-from-right');
+		};
+		if (data === undefined)
+			http.get(`/api/v1/me/quizs?id=${args[1]}`,
+				{}, onDataLoaded);
+		else onDataLoaded(data);
+	},
+	paint: function(json) {
+		json = json || app.pages.quiz.data;
+		const container = document.getElementById('app-container');
+		container.innerHTML = app.template.fill(json, app.template.get('quiz.index'));
+		console.log(json);
+	},
+}

web/src/app/js/templates/home/quiz_item.html

@@ -1,9 +1,9 @@
 <div class="item button dark rounder" data-id="{._id}"
-	onclick="window.location.href = '#quiz/{.id}'">
+	onclick="app.pages.home.loadQuiz('{.id}')">
 	<div class="flex">
-		<div class="avatar">
+		<div><div class="avatar round">
 			<img class="round" src="{.from.avatar.url}"/>
-		</div>
+		</div></div>
 		<div class="width-max" style="padding-left:1em">
 			<div class="name">{.from.name}</div>
 			<div class="acct">@{.from.acct}</div>

web/src/app/js/templates/quiz/index.html

@@ -0,0 +1,6 @@
+<div id="quiz" class="panel center">
+	<h2 style="color:var(--clr_quiz); height: 4em">
+		<i class="fa fa-quote-right fa-fw">
+		</i>FediLove Quiz
+	</h2>
+</div>