Add status page

Bold link, nav-start for status and settings Fix build page margins Rimuovi prestito dall'inglese Underline CSUnibo homepage link Stop showing badges for disabled teachings Stop showing badges for disabled teachings 2 build/page.ts Fix Comment out refactor getActiveTeachings chore: create and use filterAsync
cartabinaria · Oct 7, 2023 · 2da7c2f · 2da7c2f
1 parent d0a9c68
commit 2da7c2f
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 106 deletions.
diff --git a/src/config b/src/config
diff --git a/src/lib/filter.ts b/src/lib/filter.ts
@@ -0,0 +1,18 @@
+/**
+ * Filters an array asynchronously using a predicate function.
+ * @param arr The array to filter
+ * @param predicate The predicate function to use
+ * @returns The filtered array
+ */
+export async function filterAsync<T>(
+	arr: T[],
+	predicate: (t: T) => Promise<boolean>
+): Promise<T[]> {
+	const result = Array<T>(arr.length);
+	for (const item of arr) {
+		if (await predicate(item)) {
+			result.push(item);
+		}
+	}
+	return result;
+}
diff --git a/src/lib/teachings.ts b/src/lib/teachings.ts
@@ -1,3 +1,6 @@
+import { getManifest } from '$lib/api';
+import { filterAsync } from './filter';
+
 export type Teaching = {
 	name: string;
 	url: string;
@@ -17,5 +20,21 @@ export type Course = {
 	years: TeachingYear[];
 };
 
+export async function isTeachingActive(fetch: typeof window.fetch, teaching: Teaching) {
+	try {
+		await getManifest(fetch, teaching.url);
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+export async function getActiveTeachings(fetch: typeof window.fetch, course: Course) {
+	const allTeachings = course.years.flatMap((year) => year.teachings);
+	const activeTeachings = await filterAsync(allTeachings, (t) => isTeachingActive(fetch, t));
+
+	return activeTeachings;
+}
+
 import TEACHINGS from '../config/courses.json' assert { type: 'json' };
 export default TEACHINGS as Course[];
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -20,14 +20,17 @@
 	<div class="container max-w-5xl">
 		<div class="m-10">
 			<h1 class="text-4xl font-semibold text-center">Risorse</h1>
-			<h3 class="text-2 font-semibold text-center">Raccolte di materiali per lo studio da CSUnibo</h3>
+			<h3 class="text-2 font-semibold text-center">Raccolte di materiali per lo
+      studio da <span class="underline"><a
+      href="https://csunibo.github.io">CSUnibo</a></span></h3>
 		</div>
 		<ul class="menu p-2 text-lg">
 			{#each data.courses as course}
 				<Line name={course.name} icon={course.icon} href="{base}/dash/{course.id}" />
 			{/each}
 
-			<Line name="Settings" icon="🔧" href="{base}/settings" />
+			<Line name="Impostazioni" icon="🔧" href="{base}/settings" />
+			<Line name="Stato" icon="📊" href="{base}/build" />
 		</ul>
 	</div>
 </div>
diff --git a/src/routes/build/+page.svelte b/src/routes/build/+page.svelte
@@ -1,84 +1,60 @@
 <script lang="ts">
+	import type { PageData } from './$types';
+	import { onMount } from 'svelte';
+	import type { Teaching } from '$lib/teachings';
 	import TEACHINGS from '$lib/teachings';
-	const WORKFLOW_NAMES = ['filenames', 'build-and-deploy'];
-
-	const PROJECTS = [
-		{
-			title: 'Bot',
-			projects: [{ name: 'Informabot', url: 'informabot', workflows: ['codeql'] }]
-		},
-		{
-			title: 'Web scrapers',
-			projects: [{ name: 'Raccoglitesi', url: 'raccoglitesi', workflows: ['pages'] }]
-		},
-		{
-			title: 'Modelli di tesi',
-			projects: [
-				{ name: 'Asciidoc', url: 'asciidoc-thesis', workflows: ['asciidoc'] },
-				{ name: 'LaTeX', url: 'latex-thesis', workflows: ['tex'] }
-			]
-		},
-		{
-			title: 'Altro',
-			projects: [
-				{ name: 'csurename', url: 'csurename', workflows: ['rust'] },
-				{ name: 'Diario tirocinio', url: 'diario-tirocinio', workflows: ['pages'] },
-				{ name: 'Laboratori', url: 'lab', workflows: ['check', 'build-and-deploy'] }
-			]
-		}
-	];
 
+	const WORKFLOW_NAMES = ['filenames', 'build-and-deploy'];
 	const WORKFLOW_URL = (project: string, workflow: string) =>
 		`https://github.com/csunibo/${project}/actions/workflows/${workflow}.yml`;
-</script>
 
-<div class="m-8">
-	{#each TEACHINGS as course, i}
-		{#if i > 0}
-			<hr class="my-8 border-primary" />
-		{/if}
-		<h2 class="text-center text-2xl">{course.name}</h2>
-		{#each course.years as years}
-			<h3 class="text-center text-xl font-bold my-4">{years.year}</h3>
-			<div class="grid grid-cols-4 gap-4">
-				{#each years.teachings as teaching}
-					<div>
-						<h4 class="font-bold">{teaching.name}</h4>
-						<div class="flex gap-2">
-							{#each WORKFLOW_NAMES as workflow}
-								{@const href = WORKFLOW_URL(teaching.url, workflow)}
-								{@const src = `${href}/badge.svg`}
-								<a {href}>
-									<img {src} alt="Not found" />
-								</a>
-							{/each}
-						</div>
-					</div>
-				{/each}
-			</div>
-		{/each}
-	{/each}
+	export let data: PageData;
+	let activeYears: Teaching[][] = [];
 
-	<hr class="my-12 border-primary" />
-	<h2 class="text-center text-2xl">Progetti</h2>
+	onMount(async () => {
+		activeYears = (await data.streaming?.activeCourses) ?? [];
+		console.log(data);
+	});
+</script>
 
-	{#each PROJECTS as category}
-		<h3 class="text-center text-xl font-bold my-4">{category.title}</h3>
-		<div class="grid grid-cols-4 gap-4">
-			{#each category.projects as proj}
-				<div>
-					<h4 class="font-bold">{proj.name}</h4>
-					<div class="flex gap-2">
-						{#each proj.workflows as workflow}
-							{@const href = WORKFLOW_URL(proj.url, workflow)}
-							{@const src = `${href}/badge.svg`}
-							<a {href}>
-								<img {src} alt="Not found" />
-							</a>
-						{/each}
-					</div>
+<main class="md:container md:m-auto p-4">
+	<nav class="navbar flex bg-base-200 text-neutral-content rounded-box shadow-sm px-5 mb-5">
+		<div class="navbar-start">
+			<h1 class="text-xl font-semibold text-base-content">Stato delle raccolte</h1>
+		</div>
+		<div class="navbar-end">
+			<a class="btn btn-square btn-ghost" title="Indietro" href="/"> ⬆️ </a>
+		</div>
+	</nav>
+	<div class="m-8">
+		{#each TEACHINGS as course, i}
+			{#if i > 0}
+				<hr class="my-8 border-primary" />
+			{/if}
+			<h2 class="text-center text-2xl">{course.name}</h2>
+			<!-- {@const activeTeachings = activeYears[i]} -->
+			{#each course.years as years}
+				<h3 class="text-center text-xl font-bold my-4">{years.year}</h3>
+				<div class="grid grid-cols-4 gap-4">
+					{#each years.teachings as teaching}
+						<!-- {@const enabled = activeTeachings.includes(teaching)} -->
+						<div>
+							<h4 class="font-bold">{teaching.name}</h4>
+							<!-- {#if enabled} -->
+							<div class="flex gap-2">
+								{#each WORKFLOW_NAMES as workflow}
+									{@const href = WORKFLOW_URL(teaching.url, workflow)}
+									{@const src = `${href}/badge.svg`}
+									<a {href}>
+										<img {src} alt="Not found" />
+									</a>
+								{/each}
+							</div>
+							<!-- {/if} -->
+						</div>
+					{/each}
 				</div>
 			{/each}
-		</div>
-	{/each}
-</div>
+		{/each}
+	</div>
+</main>
diff --git a/src/routes/build/+page.ts b/src/routes/build/+page.ts
@@ -0,0 +1,11 @@
+import type { PageLoad } from './$types';
+import { getActiveTeachings } from '$lib/teachings';
+import TEACHINGS from '$lib/teachings';
+
+export const load: PageLoad = async ({ fetch }) => {
+	const activeTeachings = TEACHINGS.map((c) => getActiveTeachings(fetch, c));
+
+	return {
+		activeTeachings: Promise.all(activeTeachings)
+	};
+};
diff --git a/src/routes/dash/[course]/+page.svelte b/src/routes/dash/[course]/+page.svelte
@@ -66,7 +66,7 @@
 			</div>
 			<div class="navbar-center">
 				<h1 class="text-xl font-semibold text-base-content">
-					Dashboard di {data.course.name}
+					{data.course.name}
 				</h1>
 			</div>
 			<div class="navbar-end">

diff --git a/src/routes/dash/[course]/+page.ts b/src/routes/dash/[course]/+page.ts
@@ -1,34 +1,8 @@
 import type { PageLoad } from './$types';
-import type { Course, Teaching, TeachingYear } from '$lib/teachings';
-import { getManifest } from '$lib/api';
+import { getActiveCourses } from '$lib/teachings';
 import TEACHINGS from '$lib/teachings';
 import { error } from '@sveltejs/kit';
 
-async function getActiveCourse(fetch: typeof window.fetch, teaching: Teaching) {
-	try {
-		await getManifest(fetch, teaching.url);
-		return true;
-	} catch {
-		return false;
-	}
-}
-
-async function getActiveCourses(fetch: typeof window.fetch, course: Course) {
-	const allTeachings = course.years.flatMap((year: TeachingYear) => year.teachings);
-	const activeTeachings: Teaching[] = [];
-
-	const promises = allTeachings.map(async (teaching: Teaching) => {
-		const isActive = await getActiveCourse(fetch, teaching);
-		if (isActive) {
-			activeTeachings.push(teaching);
-		}
-	});
-
-	await Promise.allSettled(promises);
-
-	return activeTeachings;
-}
-
 export const load = (async ({ fetch, params }) => {
 	const course = TEACHINGS.find((c) => c.id === params.course);
 

diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
@@ -6,7 +6,16 @@
 </script>
 
 <main class="md:container md:m-auto p-4">
-	<h1 class="text-3xl font-bold my-8 text-primary">Settings</h1>
+  <nav class="navbar flex bg-base-200 text-neutral-content rounded-box shadow-sm px-5 mb-5">
+    <div class="navbar-start">
+      <h1 class="text-xl font-semibold text-base-content">
+        Impostazioni
+      </h1>
+    </div>
+    <div class="navbar-end">
+      <a class="btn btn-square btn-ghost" title="Indietro" href="/"> ⬆️ </a>
+    </div>
+  </nav>
 
 	<div class="form-control my-4">
 		<label class="label">