From f3829e3bcba4e9de785aa957a8e65288353efdf9 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Fri, 9 Apr 2021 13:19:47 +0200
Subject: [PATCH] Secret (devs don't share) progress list with ETA + feature
 list on website

---
 public/charts.js                          | 35 +++++++++++++
 public/main.css                           | 61 +++++++++++++++++++++++
 views/home.handlebars                     | 45 +++++++++++++++--
 views/layouts/main.handlebars             |  2 +
 views/partials/custom-checkbox.handlebars |  6 +++
 5 files changed, 146 insertions(+), 3 deletions(-)
 create mode 100644 public/charts.js
 create mode 100644 views/partials/custom-checkbox.handlebars

diff --git a/public/charts.js b/public/charts.js
new file mode 100644
index 0000000..ca36cef
--- /dev/null
+++ b/public/charts.js
@@ -0,0 +1,35 @@
+/* eslint-disable no-undef */
+function loadAllCharts() {
+	document.querySelectorAll('.feature-list-wrapper').forEach(wrapper => {
+		// Find and generate all relevant data
+		const allFeatureNodes = wrapper.querySelectorAll('.feature');
+		const allDoneFeatureNodes = wrapper.querySelectorAll('.feature [checked]');
+		
+		const progressPercentage = Math.round(Math.min((allDoneFeatureNodes.length / allFeatureNodes.length) * 100, 100));
+		const remainingPercentage = 100 - progressPercentage;
+
+		// Set inner paragraph
+		wrapper.querySelectorAll('.percentage-label').forEach(p => {
+			p.innerText = progressPercentage.toString().padStart(2, '0') + '%';
+		});
+
+		// Create chart
+		const data = [progressPercentage, remainingPercentage];
+		Chart.defaults.plugins.legend = {
+			display: false
+		};
+		new Chart(wrapper.querySelector('canvas'), {
+			type: 'doughnut',
+			data: {
+				labels: ['Done', 'Todo'],
+				datasets: [
+					{
+						data,
+						backgroundColor: ['white', 'transparent']
+					}
+				]
+			}
+		});
+	});
+}
+loadAllCharts();
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index acc1cdf..241a487 100644
--- a/public/main.css
+++ b/public/main.css
@@ -353,7 +353,68 @@ section.team {
 	color: var(--text-secondary);
 }
 
+/* Progress */
+.feature-list-wrapper h3 {
+	margin: 0;
+}
+.feature-list-wrapper hr {
+	border: 0;
+	width: 100%;
+	height: 1px;
+	margin: 20px 0;
+	background: rgba(255, 255, 255, 0.1);
+}
+.feature-list-wrapper .feature-list-top {
+	display: grid;
+	align-items: center;
+	grid-template-columns: auto 1fr;
+	grid-gap: 20px;
+}
+.feature-list-wrapper canvas {
+	width: 100px;
+	height: 100px;
+}
 
+.feature-progress-chart {
+	position: relative;
+}
+.feature-progress-chart p {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	margin: 0;
+}
+
+/* Progress: Feature list */
+.feature-list {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-gap: 10px;
+}
+.feature {
+	display: grid;
+	align-items: center;
+	grid-template-columns: auto 1fr;
+	grid-gap: 10px;
+}
+
+/* Custom checkboxes */
+.custom-checkbox {
+	width: 1.5rem;
+	height: 1.5rem;
+	background: var(--background);
+	/* border: 1px solid var(--text-secondary); */
+	color: var(--text);
+	border-radius: 4px;
+}
+.custom-checkbox svg {
+	width: 100%;
+	height: 100%;
+}
+
+
+/* Footer */
 footer {
 	text-align: center;
 	color: var(--text-secondary);
diff --git a/views/home.handlebars b/views/home.handlebars
index 2115e67..270ab0c 100644
--- a/views/home.handlebars
+++ b/views/home.handlebars
@@ -98,9 +98,48 @@
 		</div>
 		<div class="right sect">
 			<h2 class="title">{{ locale.progress.title }}</h2>
-			{{#each locale.progress.paragraphs}}
-			<p class="text">{{ this }}</p>
-			{{/each}}
+			<div class="feature-list-wrapper">
+				<div class="feature-list-top">
+					<div class="feature-progress-chart">
+						<canvas></canvas>
+						<p class="percentage-label"></p>
+					</div>
+					<div class="progress-title">
+						<h3>Miiverse (Juxt)</h3>
+					</div>
+				</div>
+				<hr />
+				<div class="feature-list">
+					<div class="feature">
+						{{> custom-checkbox checked=true }}
+						<span>Feature A</span>
+					</div>
+					<div class="feature">
+						{{> custom-checkbox }}
+						<span>Feature A</span>
+					</div>
+					<div class="feature">
+						{{> custom-checkbox checked=true }}
+						<span>Feature A</span>
+					</div>
+					<div class="feature">
+						{{> custom-checkbox }}
+						<span>Feature A</span>
+					</div>
+					<div class="feature">
+						{{> custom-checkbox checked=true }}
+						<span>Feature A</span>
+					</div>
+					<div class="feature">
+						{{> custom-checkbox }}
+						<span>Feature A</span>
+					</div>
+					<div class="feature">
+						{{> custom-checkbox }}
+						<span>Feature A</span>
+					</div>
+				</div>
+			</div>
 		</div>
 	</section>
 
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index 481afd6..3001abd 100644
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -35,5 +35,7 @@
 	</head>
 	<body>
 		{{{ body }}}
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js"></script>
+		<script src="/charts.js"></script>
 	</body>
 </html>
\ No newline at end of file
diff --git a/views/partials/custom-checkbox.handlebars b/views/partials/custom-checkbox.handlebars
new file mode 100644
index 0000000..0fd5907
--- /dev/null
+++ b/views/partials/custom-checkbox.handlebars
@@ -0,0 +1,6 @@
+<div class="custom-checkbox" {{#if checked}}checked{{/if}}>
+	{{#if checked}}
+	{{!-- Icon --}}
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
+	{{/if}}
+</div>
\ No newline at end of file