Created new view for pages.home for Quizs

* User is now able to view their pending quizs
* Quizs have 2 states: new (not answered) and answered.
 Once answered you can't modify or re-upload the quiz.
* Once the crush accepts/rejects the Quiz answer, it will get deleted

web/src/_templates/app/js.php

@@ -24,6 +24,7 @@ var app = {
 	},
 };
 var cssprops = {
+	clr_quiz: '#0064ff',
 	meet_max_width: '40em',
 	meet_actions_height: '6em',
 };

web/src/app/app.php

@@ -16,6 +16,10 @@ $actor = $database->getActorByUsername($user->username);
 	'actor' => $actor,
 ]) ?>
 
+<main class="flex">
+	<div id="app-container" class="flex center width-max"></div>
+</main>
+
 <div id="page-meet" style="display:none"
 	class="flex overlay height-mobile">
 	<div class="center size-max"
@@ -29,11 +33,4 @@ $actor = $database->getActorByUsername($user->username);
 	</div>
 </div>
 
-<main class="flex">
-	<div id="app-container" class="flex center width-max">
-		<div class="panel center">
-			<div id="mcontent">...</div>
-		</div>
-	</div>
-</main>
 <?php tpl('app.footer') ?>

web/src/app/css/app.css

@@ -69,7 +69,7 @@ main {
 .panel {
 	margin: .8em .4em;
 	border-radius: 4px;
-	padding: 1em .6em;
+	padding: 1.5em 1em;
 	width: 100%;
 }
 
@@ -77,6 +77,35 @@ main {
 	user-select: none;
 }
 
+#quizs-container h2 { margin: 0 }
+#quizs-container h2 > .fa {
+	margin-right: .3em;
+	vertical-align: middle;
+}
+#quizs .item {
+	padding: 1em;
+}
+#quizs .name {
+	font-size: 1.2em;
+}
+#quizs .avatar img {
+	width: 3em;
+	height: 3em;
+}
+#quizs .metadata .count {
+	float: right;
+	opacity: .5;
+}
+#quizs .metadata .new {
+	color: #35ce35;
+	font-weight: bold;
+	font-size: .9em;
+}
+#quizs .metadata .old {
+	font-size: .9em;
+	opacity: .6;
+}
+
 #page-meet {
 	background: #000;
 }

web/src/app/js/pages/crushes.js

@@ -4,11 +4,11 @@ app.pages.crushes = {
 		if (args.length === 2 && args[1] === 'you')
 			key = 'to_me';
 
-		const dom = document.getElementById('mcontent');
+		const dom = document.getElementById('app-container');
-		dom.innerHTML = '...'; // TODO: replace to a better loader?
+		dom.innerHTML = '';
 		http.get('/api/v1/me/pending_follows', {}, function(json) {
-			app.template.loadMany(['crushes.content','crushes.item'], function(_) {
+			app.template.loadMany(['crushes.index','crushes.item'], function(_) {
-				dom.innerHTML = app.template.fill({}, app.template.get('crushes.content'));
+				dom.innerHTML = app.template.fill({}, app.template.get('crushes.index'));
 				if (json === undefined)
 					return false; // TODO: handle unknown error
 				json = json[key];

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

@@ -1,5 +1,35 @@
 app.pages.home = {
+	data: {},
 	load: function(args) {
-		console.log('HOME');
+		app.template.load('home.index', function(home_html) {
+			const dom = document.getElementById('app-container');
+			dom.innerHTML = app.template.fill({}, home_html);
+
+			http.get('/api/v1/me/quizs', {}, async function(json) {
+				if (json === undefined) return;
+				await app.template.loadMany(['home.quiz_item']);
+				app.pages.home.data.quizs = json;
+				app.pages.home.paint('quizs', json);
+			});
+		});
+	},
+	paint: function(section, json) {
+		json = json || app.pages.home.data[section];
+		if (section === 'quizs')
+			return app.pages.home.paintQuizs(json);
+	},
+	paintQuizs: function(data) {
+		document.querySelector('#quizs-container').removeAttribute('style');
+
+		const container = document.querySelector('#quizs-container #quizs');
+		container.innerHTML = '';
+		for (var i in data) {
+			const item = data[i];
+			var tpl = app.template.fill(item, app.template.get('home.quiz_item'));
+			if (item.responses === undefined)
+				tpl = tpl.replaceAll('{newOrAnsweredItem}', '<span class="new">NEW</span>');
+			else tpl = tpl.replaceAll('{newOrAnsweredItem}', '<span class="old">ANSWERED</span>');
+			container.innerHTML += tpl;
+		}
 	},
 };

web/src/app/js/templates/crushes/content.html

@@ -1,2 +0,0 @@
-<div class="header">HEADER_HERE</div>
-<div id="crush-items">ITEMS HERE</div>

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

@@ -0,0 +1,4 @@
+<div class="panel center">
+	<div class="header">HEADER_HERE</div>
+	<div id="crush-items">ITEMS HERE</div>
+</div>

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

@@ -0,0 +1,10 @@
+<div id="quizs-container" class="panel center"
+	style="display:none">
+	<div class="has-items">
+		<h2 style="color:var(--clr_quiz)">
+			<i class="fa fa-quote-right fa-fw">
+			</i>Quizs for you</h2>
+		<br>
+		<div id="quizs"></div>
+	</div>
+</div>

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

@@ -0,0 +1,20 @@
+<div class="item button dark rounder" data-id="{._id}"
+	onclick="window.location.href = '#quiz/{.id}'">
+	<div class="flex">
+		<div class="avatar">
+			<img class="round" src="{.from.avatar.url}"/>
+		</div>
+		<div class="width-max" style="padding-left:1em">
+			<div class="name">{.from.name}</div>
+			<div class="acct">@{.from.acct}</div>
+			<br>
+			<div class="metadata">
+				{newOrAnsweredItem}
+				<span class="count">
+					<i class="fa fa-quote-left fa-fw"></i>
+					<b>{.content.length}</b>
+				</span>
+			</div>
+		</div>
+	</div>
+</div>