add basic functionality for frontend, json db

front/src/routes/+page.server.ts

@@ -13,6 +13,10 @@ export const actions = {
 
 	fillPreregistered: async () => {
 		await fetch('http://localhost:3000/fill-preregistered');
+	},
+
+	sendGroupInfo: async () => {
+		await fetch('http://localhost:3000/send-group-info');
 	}
 };
 
@@ -25,6 +29,21 @@ export type UserData = {
 };
 
 export type Data = {
-	rawData: Record<string, UserData>;
-	groups: UserData[][];
+	users: User[];
+	groups: Group[];
+};
+
+export type User = {
+	availableFrom: number;
+	availableTo: number;
+	chatId: string;
+	groupId?: any;
+	id: number;
+	name: string;
+	tgUsername: string;
+};
+
+export type Group = {
+	id: number;
+	users: User[];
 };

front/src/routes/+page.svelte

@@ -11,10 +11,18 @@
 		TableHeader
 	} from '$lib/components/ui/table';
 	import { Button } from '$lib/components/ui/button';
+
+	function getAvailableTime(from: number, to: number | null) {
+		if (from === 0 && to === 10) return 'До 10 часов';
+		if (from === 10 && to === 20) return '10-20 часов';
+		if (from === 20 && to === 30) return '20-30 часов';
+		if (from === 30 && to === 40) return '30-40 часов';
+		if (from === 40) return 'Более 40 часов';
+		return 'Unknown time';
+	}
 </script>
 
 <div class="w-full">
-	<h1 class="mb-4 text-3xl font-bold">Группы</h1>
 	<div class="mb-4 flex items-center gap-6">
 		<form method="POST" action="?/prepareDb">
 			<Button type="submit">Подготовить базу данных</Button>
@@ -25,11 +33,13 @@
 		<form method="POST" action="?/generateGroups">
 			<Button type="submit">Сгенерировать группы</Button>
 		</form>
-		<form>
-			<Button>Отправить информацию в Telegram</Button>
+		<form method="POST" action="?/sendGroupInfo">
+			<Button type="submit">Отправить информацию в Telegram</Button>
 		</form>
 	</div>
-	{#if Object.keys(data.rawData).length}
+	{#if data.users.length > 0}
+		<h2 class="mb-4 text-3xl font-bold">Зарегистрированные пользователи</h2>
+
 		<div class="mb-4">
 			<Table>
 				<TableHeader>
@@ -40,11 +50,11 @@
 					</TableRow>
 				</TableHeader>
 				<TableBody>
-					{#each Object.entries(data.rawData) as [_, user]}
+					{#each data.users as user}
 						<TableRow>
 							<TableCell>{user.name}</TableCell>
 							<TableCell style="width: 200px"
-								>{user.availableTime.from} - {user.availableTime.to}</TableCell
+								>{getAvailableTime(user.availableFrom, user.availableTo)}</TableCell
 							>
 							<TableCell style="width: 200px">{user.tgUsername}</TableCell>
 						</TableRow>
@@ -54,27 +64,31 @@
 		</div>
 	{/if}
 	<div class="space-y-10">
-		{#each data.groups as group}
-			<Table>
-				<TableHeader>
-					<TableRow>
-						<TableHead>Имя</TableHead>
-						<TableHead>Время</TableHead>
-						<TableHead>Telegram</TableHead>
-					</TableRow>
-				</TableHeader>
-				<TableBody>
-					{#each group as el}
+		{#if data.groups.length > 0}
+			<h2 class="mb-4 text-3xl font-bold">Группы</h2>
+
+			{#each data.groups as group (group.id)}
+				<Table>
+					<TableHeader>
 						<TableRow>
-							<TableCell>{el.name}</TableCell>
-							<TableCell style="width: 200px"
-								>{el.availableTime.from} - {el.availableTime.to}</TableCell
-							>
-							<TableCell style="width: 200px">{el.tgUsername}</TableCell>
+							<TableHead>Имя</TableHead>
+							<TableHead>Время</TableHead>
+							<TableHead>Telegram</TableHead>
 						</TableRow>
-					{/each}
-				</TableBody>
-			</Table>
-		{/each}
+					</TableHeader>
+					<TableBody>
+						{#each group.users as user (user.id)}
+							<TableRow>
+								<TableCell>{user.name}</TableCell>
+								<TableCell style="width: 200px"
+									>{getAvailableTime(user.availableFrom, user.availableTo)}</TableCell
+								>
+								<TableCell style="width: 200px">{user.tgUsername}</TableCell>
+							</TableRow>
+						{/each}
+					</TableBody>
+				</Table>
+			{/each}
+		{/if}
 	</div>
 </div>