Aula style change, updated dependencies, use Svelte 5 components

package.json

@@ -20,7 +20,7 @@
 		"@event-calendar/resource-timeline": "^3.10.0",
 		"@event-calendar/time-grid": "^3.10.0",
 		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.17.1",
+		"@sveltejs/kit": "^2.17.2",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/typography": "^0.5.16",
 		"@types/leaflet": "^1.9.16",
@@ -31,17 +31,17 @@
 		"bulma": "^1.0.3",
 		"daisyui": "^4.12.23",
 		"dayjs": "^1.11.13",
-		"eslint": "^9.20.0",
+		"eslint": "^9.20.1",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",
 		"leaflet": "^1.9.4",
 		"moment": "^2.30.1",
 		"monaco-editor": "^0.52.2",
-		"postcss": "^8.5.1",
-		"prettier": "^3.5.0",
+		"postcss": "^8.5.2",
+		"prettier": "^3.5.1",
 		"prettier-plugin-svelte": "^3.3.3",
-		"sass": "^1.84.0",
-		"svelte": "^5.19.9",
+		"sass": "^1.85.0",
+		"svelte": "^5.20.1",
 		"svelte-check": "^4.1.4",
 		"tailwindcss": "^3.4.17",
 		"tslib": "^2.8.1",

src/lib/api/impegni.ts

@@ -33,6 +33,7 @@ export async function getImpegni(
 			clienteId: UNIBO_CLIENT,
 			dataInizio,
 			dataFine,
+			auleIds: idAule,
 			aule: idAule,
 			limitaRisultati,
 			mostraImpegniAnnullati,

src/lib/cals.ts

@@ -1,26 +1,39 @@
 export const CAL_MAP: { id: string; name: string }[] = [
 	{ id: '5e9996a228a649001237296d', name: 'Risorgimento' },
-	{ id: '619b9674a810d60017224b93', name: 'Risorgimento - Laboratori' },
+	{ id: '619b9674a810d60017224b93', name: 'Risorgimento - Labs' },
 	{ id: '5f0310d366e423001758ae01', name: 'Matematica' },
+	{ id: '5e9995b828a649001237296a', name: 'Matematicaa (backup)' },
 	{ id: '5f5b3cb4dd64620012b0f502', name: 'Chimica Industriale' },
-	{ id: '5e99b3883252110012b67395', name: 'Ingegneria Terracini' },
-	{ id: '5facf686fa03a40018c76c91', name: 'Navile' },
-	{ id: '613216659f5a940011ad923c', name: 'Navile 2'},
+	{ id: '5e99b3883252110012b67395', name: 'Terracini' },
+	{ id: '5facf686fa03a40018c76c91', name: 'Navile - 1' },
+	{ id: '613216659f5a940011ad923c', name: 'Navile - 2' },
 	{ id: '6130b28e50feed001775ba08', name: 'Navile - UE1' },
 	{ id: '6130cea9ec45f20012e3e449', name: 'Navile - UE4' },
-	{ id: '5f438f86f99ac70017442977', name: 'Aule Ciamician' },
-	{ id: '5e590a119340f00018c1cbfb', name: 'Campus Rimini' },
+	{ id: '5f438f86f99ac70017442977', name: 'Ciamician' },
+	{ id: '5e590a119340f00018c1cbfb', name: 'Rimini Campus' },
 	{ id: '6357917144fa720a6a0b3edf', name: 'Fisica' },
-	{ id: '5e6f3daa15108d00192bb024', name: 'Laboratori Beverara' },
+	{ id: '5e6f3daa15108d00192bb024', name: 'Beverara Labs' },
 	{ id: '5e6f403e2e6b88001ba842e6', name: 'Aule Irnerio 42 - Orto Botanico ' },
-	{ id: '5e6f3eef9f045c00181a09fe', name: 'Aule Belmeloro 6' },
-	{ id: '651e7c907e15ad003a034cd7', name: 'Aule Belmeloro' },
+	{ id: '5e6f3eef9f045c00181a09fe', name: 'Aule Belmeloro - 1' },
+	{ id: '651e7c907e15ad003a034cd7', name: 'Aule Belmeloro - 2' },
+	{ id: '5e6f5eb04ad7a80017fd4185', name: 'Aule Belmeloro - 3' },
 	{ id: '5e6f538e15108d00192bb374', name: 'Aule ex Ist. Igiene S. Giacomo 12' },
-	{ id: '5e6f53f04ad7a80017fd3c4c', name: 'Complesso UNIONE ' },
-	{ id: '5f06bc2126181c0017979fcd', name: 'CAAB - Bologna' },
+	{ id: '5e6f53f04ad7a80017fd3c4c', name: 'Complesso UNIONE' },
+	{ id: '5f06bc2126181c0017979fcd', name: 'CAAB' },
 	{ id: '64b8ef2fb9fb8b00217e07d5', name: '9262 - CTF II anno' },
 	{ id: '64b8eeef2279a5001c1a8158', name: '9262 - CTF III anno' },
 	{ id: '64b8eb93deaf19001c0d0996', name: '9262 - CTF IV anno' },
 	{ id: '64b8ef6f5ca37b001c67e0b6', name: '8412 - CTF V anno' },
-	{ id: '5f632ffc78b5fe001d1ea638', name: 'Ercolani' }
+	{ id: '5f632ffc78b5fe001d1ea638', name: 'Ercolani' },
+	{ id: '61557f7c93143f00173c1652', name: "Sant'Orsola" },
+	{ id: '5f070dedbf12720017c41bb0', name: 'Veterinaria' },
+	{ id: '5e6f550e4ad7a80017fd3c97', name: 'Fisiologia' },
+	{ id: '5e68c480c8f72d0018de543e', name: 'Farmacologia' },
+	{ id: '5e68f72fc8f72d0018de653a', name: 'EX BODONIANA' },
+	{ id: '5f070e604fb4b60018b0c36e', name: 'Forlì' },
+	{ id: '5f5f768159cded0017ec015a', name: 'Non ne ho idea' },
+	{ id: '5e9da51f651dc60017d8e4ff', name: 'Laboratorio 4.2 - Campus Ex Zuccherificio' },
+	{ id: '642be07ba9496f00e20a1a73', name: 'Ex Zuccherificio' },
+	{ id: '5f5b704fed932e00125444bb', name: 'Aule Vespignani e Pero' },
+	{ id: '5e9f0969290c0b0017e5b122', name: ' Sala Tesi - Villa Almerici ' }
 ];

src/routes/+layout.svelte

@@ -1,19 +1,26 @@
 <script lang="ts">
+	import { page } from '$app/state';
+
 	import '../app.css';
 </script>
 
 <div class="mx-4 md:mx-auto max-w-5xl">
-	<nav class="navbar bg-base-100 gap-2" aria-label="main navigation">
-		<a href="/">
-			<h2 class="font-bold">Aule@Unibo</h2>
-		</a>
-
-		<div class="flex-1"></div>
+	<nav
+		class="navbar bg-base-300 text-base-content rounded-box mt-4 mb-8"
+		aria-label="main navigation"
+	>
+		<div class="navbar-start">
+			<a href="/" class="font-bold btn btn-ghost"> Aule@Unibo </a>
+		</div>
 
-		<a href="/aule" class="btn">Aule</a>
+		<div class="navbar-end">
+			<a href="/aule" class="btn btn-primary" class:btn-active={page.url.pathname === '/aule'}>
+				Lista aule
+			</a>
+		</div>
 	</nav>
 
-	<main class="container">
+	<main class="container mx-auto mb-8">
 		<slot />
 	</main>
 </div>

src/routes/+page.svelte

@@ -5,24 +5,29 @@
 <div class="prose md:mx-auto mx-4">
 	<h1 class="text-3xl text-center font-bold">AULE @ UNIBO</h1>
 	<p>
-		Welcome to the <strong>🚀 Unofficial Classroom Availability Checker 🚀</strong> for the University
-		of Bologna!
+		Welcome to the <strong>🚀 Unofficial Classroom Calendar 🚀</strong> for the University of Bologna!
 	</p>
 	<p>
 		Since the University doesn't offer a system to check the availability of classrooms, this
 		website was created to assist students in locating <strong>free spaces for studying</strong>.
 	</p>
 	<p>
-		We <strong>don't scrape</strong> the university's website, but instead rely on the data provided
-		by the university itself via some hidden but <strong>public</strong> APIs.
+		It can also be useful for teachers who need to book a classroom for their lessons, or in general
+		to anyone who needs to know the events scheduled in a specific classroom.
+	</p>
+	<p>
+		We <strong>don't scrape</strong> the university's website, but instead rely data provided by the
+		university itself via some hidden but <strong>public</strong> APIs.
 	</p>
 	<p>
 		Actually, it's your browser that makes the HTTP requests to the servers, so we're not doing
-		anything at all. We're just providing a nice interface to the data. 😼
+		anything at all. We're just providing a nice interface. 😼
 	</p>
+
+	<hr />
 	<div class="flex not-prose gap-4">
-		<a href="#calendars" class="not-prose btn btn-primary grow"> CALENDARS </a>
-		<a href="/aule" class="not-prose btn btn-secondary mx-auto grow"> CLASSROOMS </a>
+		<a href="#calendars" class="not-prose btn btn-primary grow"> Go to calendars 📅 </a>
+		<a href="/aule" class="not-prose btn btn-secondary mx-auto grow"> Go to classroom list 📚 </a>
 	</div>
 
 	<hr />
@@ -45,7 +50,7 @@
 	<hr />
 </div>
 
-<h2 class="text-2xl text-center font-bold mt-16 mb-4" id="calendars">Select a <em>calendar</em></h2>
+<h2 class="text-2xl text-center font-bold mt-16 mb-4" id="calendars">Select a calendar</h2>
 <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
 	{#each CAL_MAP as { id, name }}
 		<a href={`/cal/${id}`} class="btn btn-lg h-auto leading-6 card btn-ghost">{name}</a>

src/routes/aule/+page.svelte

@@ -3,39 +3,52 @@
 	import type { Aula } from '$lib/api';
 	import type { PageData } from './$types';
 
-	export let data: PageData;
+	let { data }: { data: PageData } = $props();
 
 	function sortingName(aula: Aula) {
-		return `${aula.relazioneEdificio.comune} - ${aula.relazioneEdificio.descrizione} - ${aula.descrizione}`;
+		return `${aula.relazioneEdificio.comune} - ${aula.relazioneEdificio.plesso} - ${aula.descrizione}`;
 	}
 
-	let search = '';
-
-	$: filteredClass = data.aule
-		.sort((a, b) => {
-			const nameA = sortingName(a);
-			const nameB = sortingName(b);
-			return nameA.toLowerCase().localeCompare(nameB.toLowerCase());
-		})
-		.filter((aula) => {
-			return aula.descrizione.toLowerCase().includes(search.toLowerCase());
-		});
+	function filterAule(aula: Aula) {
+		return sortingName(aula).toLowerCase().includes(search.toLowerCase());
+	}
+
+	function sortAule(a: Aula, b: Aula) {
+		const nameA = sortingName(a);
+		const nameB = sortingName(b);
+		return nameA.toLowerCase().localeCompare(nameB.toLowerCase());
+	}
+
+	let search = $state('');
+	let filteredClass = $derived(data.aule.sort(sortAule).filter(filterAule));
 </script>
 
+<h1 class="text-2xl font-bold mb-4">Aule</h1>
+
+<input
+	type="text"
+	class="input input-bordered w-full my-4"
+	placeholder="Cerca aula"
+	bind:value={search}
+/>
+
 <table class="table table-zebra hover">
 	<thead>
 		<tr>
+			<th>Aula</th>
 			<th>Comune</th>
 			<th>Edificio</th>
-			<th>Aula</th>
 		</tr>
 	</thead>
 	<tbody>
 		{#each filteredClass as aula}
-			<tr class="hover cursor-pointer" on:click={() => goto(`/cal/${aula.calId}/${aula.id}`)}>
-				<td> {aula.relazioneEdificio.comune} </td>
-				<td>{aula.relazioneEdificio.descrizione} - {aula.relazioneEdificio.plesso} </td>
-				<td>{aula.descrizione}</td>
+			{@const edificio = aula.relazioneEdificio}
+			<tr class="hover cursor-pointer" onclick={() => goto(`/cal/${aula.calId}/${aula.id}`)}>
+				<td>
+					<a href="/cal/{aula.calId}/{aula.id}"> {edificio.plesso} - {aula.descrizione} </a>
+				</td>
+				<td>{edificio.comune}</td>
+				<td>{edificio.descrizione}</td>
 			</tr>
 		{/each}
 	</tbody>

src/routes/aule/+page.ts

@@ -4,21 +4,26 @@ import type { PageLoad } from './$types';
 
 type CalendarAula = Aula & { calId: string };
 
+function deduplicate(aule: CalendarAula[]) {
+	const auleMap = new Map<string, CalendarAula>();
+	for (const aula of aule) {
+		auleMap.set(aula.id, aula);
+	}
+	return Array.from(auleMap.values());
+}
+
 export const load: PageLoad = async ({ fetch }) => {
 	const calendars = CAL_MAP;
 
 	const aulePromises = calendars.map(async (cal) => {
 		let aule = await getAule(fetch, cal.id);
+
+		// Add calId to each aula
 		return aule.map((a) => ({ ...a, calId: cal.id }));
 	});
-	const aule: CalendarAula[] = (await Promise.all(aulePromises)).flat();
 
-	// deduplicate based on id
-	const auleMap = new Map<string, CalendarAula>();
-	for (const aula of aule) {
-		auleMap.set(aula.id, aula);
-	}
-	let dedupAule = Array.from(auleMap.values());
+	let aule: CalendarAula[] = (await Promise.all(aulePromises)).flat();
+	aule = deduplicate(aule);
 
-	return { aule: dedupAule };
+	return { aule };
 };

src/routes/cal/[calId]/+page.svelte

@@ -4,6 +4,7 @@
 	import { getActualImpegniAule } from '../../../lib/impegni';
 	import type { PageData } from '../$types';
 	import dayjs from 'dayjs';
+	import { page } from '$app/state';
 
 	function formatTimeImpegno(impegno: Impegno) {
 		return (
@@ -31,8 +32,8 @@
 		</thead>
 		<tbody>
 			{#each impegnoAule as { aula, impegno }}
-				<tr class="hover cursor-pointer" on:click={() => goto(`/cal/${data.cal.id}/${aula.id}`)}>
-					<td><a href="/cal/${data.cal.id}/{aula.id}"> {aula.descrizione} </a></td>
+				<tr class="hover cursor-pointer" on:click={() => goto(page.url + `/${aula.id}`)}>
+					<td><a href="{page.url}/{aula.id}"> {aula.descrizione} </a></td>
 					<td>{aula.capienza}</td>
 					<td>{impegno != null ? impegno.nome : ''}</td>
 					<td>{impegno != null ? formatTimeImpegno(impegno) : ''}</td>