move vehicles and tours updates into $effect

filter tours by day load availabilities and display them in availability view replace button text -> 'Fahrzeug hinzufügen' update availability in ui (not database) when adding (not removing) availability
motis-project · Jun 13, 2024 · 3c0959d · 3c0959d
1 parent 0cb7644
commit 3c0959d
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 28 deletions.
diff --git a/ui/src/lib/types.ts b/ui/src/lib/types.ts
@@ -5,6 +5,7 @@ export interface Database {
 	company: CompanyTable;
 	vehicle: VehicleTable;
 	tour: TourTable;
+	availability: AvailabilityTable;
 }
 
 export interface ZoneTable {
@@ -53,3 +54,14 @@ export interface TourTable {
 export type Tour = Selectable<TourTable>;
 export type NewTour = Insertable<TourTable>;
 export type TourUpdate = Updateable<TourTable>;
+
+export interface AvailabilityTable {
+	id: Generated<number>;
+	start_time: Date;
+	end_time: Date;
+	vehicle: number;
+}
+
+export type Availability = Selectable<AvailabilityTable>;
+export type NewAvailability = Insertable<AvailabilityTable>;
+export type AvailabilityUpdate = Updateable<AvailabilityTable>;
diff --git a/ui/src/routes/taxi/+page.server.ts b/ui/src/routes/taxi/+page.server.ts
@@ -1,7 +1,9 @@
 import { db } from '$lib/database';
+import { sql } from 'kysely';
 
 export async function load({ url }) {
 	const day = new Date(url.searchParams.get('date') ?? new Date().toISOString().slice(0, 10));
+	const day_string = day.toISOString().slice(0, 10);
 	const company_id = 1;
 	const vehicles = await db
 		.selectFrom('vehicle')
@@ -12,11 +14,35 @@ export async function load({ url }) {
 		.selectFrom('vehicle')
 		.where('company', '=', company_id)
 		.innerJoin('tour', 'vehicle', 'vehicle.id')
+		.where((eb) =>
+			eb.or([
+				eb(sql<string>`TO_CHAR(tour.arrival, 'YYYY-MM-DD')`, '=', day_string),
+				eb(sql<string>`TO_CHAR(tour.departure, 'YYYY-MM-DD')`, '=', day_string)
+			])
+		)
 		.select(['tour.arrival', 'tour.departure', 'tour.vehicle', 'tour.id'])
 		.execute();
+	const availabilities = await db
+		.selectFrom('vehicle')
+		.where('company', '=', company_id)
+		.innerJoin('availability', 'vehicle', 'vehicle.id')
+		.where((eb) =>
+			eb.or([
+				eb(sql<string>`TO_CHAR(availability.start_time, 'YYYY-MM-DD')`, '=', day_string),
+				eb(sql<string>`TO_CHAR(availability.end_time, 'YYYY-MM-DD')`, '=', day_string)
+			])
+		)
+		.select([
+			'availability.id',
+			'availability.start_time',
+			'availability.end_time',
+			'availability.vehicle'
+		])
+		.execute();
 	return {
 		vehicles,
 		tours,
-		day
+		day,
+		availabilities
 	};
 }
diff --git a/ui/src/routes/taxi/+page.svelte b/ui/src/routes/taxi/+page.svelte
@@ -2,7 +2,7 @@
 	const { data } = $props();
 
 	import { getCompany } from '$lib/api';
-	import type { Company } from '$lib/types';
+	import type { Availability, Company } from '$lib/types';
 
 	import {
 		DateFormatter,
@@ -42,41 +42,34 @@
 		vehicle_id!: number;
 	}
 
-	let vehicles = $state<Map<number, Vehicle>>(
-		new Map<number, Vehicle>(
+	let vehicles = $state<Map<number, Vehicle>>(new Map());
+
+	let tours = $state<Array<Tour>>([]);
+
+	let value = $state(toCalendarDate(fromDate(data.day, 'CET')));
+	let day = $derived(new ReactiveDate(value));
+
+	$effect(() => {
+		const date = value.toDate('UTC').toISOString().slice(0, 10);
+		goto(`/taxi?date=${date}`);
+		vehicles = new Map<number, Vehicle>(
 			data.vehicles.map((v) => [
 				v.id,
 				{
 					license_plate: v.license_plate,
-					availability: [
-						{
-							from: new Date('2024-05-24T05:30:00'),
-							to: new Date('2024-05-24T08:45:00')
-						},
-						{
-							from: new Date('2024-05-24T13:30:00'),
-							to: new Date('2024-05-24T17:45:00')
-						}
-					]
+					availability: data.availabilities
+						.filter((a) => a.vehicle == v.id)
+						.map((a) => ({ from: a.start_time, to: a.end_time }))
 				}
 			])
-		)
-	);
-	let tours = $state<Array<Tour>>(
-		data.tours.map((t) => ({
+		);
+
+		tours = data.tours.map((t) => ({
 			id: t.id,
 			from: t.departure,
 			to: t.arrival,
 			vehicle_id: t.vehicle
-		}))
-	);
-
-	let value = $state(toCalendarDate(fromDate(data.day, 'CET')));
-	let day = $derived(new ReactiveDate(value));
-
-	$effect(() => {
-		const date = value.toDate('UTC').toISOString().slice(0, 10);
-		goto(`/taxi?date=${date}`);
+		}));
 	});
 
 	// 11 pm local time day before
@@ -178,6 +171,15 @@
 	const selectionFinish = () => {
 		if (selection !== null) {
 			console.log(selection.available, getSelection());
+			const selectedRange = {
+				from: new Date(Math.min(selection.start.from.getTime(), selection.end.from.getTime())),
+				to: new Date(Math.max(selection.start.to.getTime(), selection.end.to.getTime()))
+			};
+			if (selection.available) {
+				selection.vehicle.availability.push(selectedRange);
+			} else {
+				//TODO
+			}
 			selection = null;
 		}
 	};
@@ -351,7 +353,7 @@
 						<Popover.Trigger>
 							<Button variant="outline">
 								<Plus class="mr-2 h-4 w-4" />
-								{company?.display_name ?? 'Not known'}
+								{'Fahrzeug hinzuügen'}
 							</Button>
 						</Popover.Trigger>
 						<Popover.Content class="absolute z-10">