fyp/webpage/src/routes/models/edit/ModelTable.svelte

<script lang="ts" context="module">
	export type Image = {
		file_path: string;
		mode: number;
        status: number;
	};
</script>

<script lang="ts">
	import Tabs from 'src/lib/Tabs.svelte';
	import type { Class } from './ModelData.svelte';
	import { get } from 'src/lib/requests.svelte';
	import type { Model } from './+page.svelte';

	let selected_class: Class | undefined = $state();

	let { classes, model } = $props<{ classes: Class[]; model: Model }>();

	let page = $state(0);
	let showNext = $state(false);
	let image_list = $state<Image[]>([]);

	function setActiveClass(c: Class, tb_fn: (name: string) => () => void) {
		selected_class = c;
		console.log('test', c, classes, c.name);
		tb_fn(c.name)();
	}

	$effect(() => {
		selected_class = classes[0];
	});

	async function getList() {
		console.log(selected_class);

		try {
			let url = new URLSearchParams();
			url.append('id', selected_class?.id ?? '');
			url.append('page', `${page}`);

			let res = await get('models/data/list?' + url.toString());
			showNext = res.showNext;
			image_list = res.image_list;

			console.log(image_list);
		} catch (e) {
			console.error('TODO notify user', e);
		}
	}

	$effect(() => {
		if (selected_class) {
			page = 0;
		}
	});

	$effect(() => {
		if (selected_class) {
			getList();
		}
	});
</script>

{#if classes.length == 0}
	TODO CREATE TABLE
{:else}
	<Tabs active={classes[0]?.name} let:isActive>
		<div slot="buttons" let:setActive let:isActive>
			<!-- TODO Auto Load 1st -->
			{#each classes as item}
				<button
					on:click={() => setActiveClass(item, setActive)}
					class="tab"
					class:selected={isActive(item.name)}
				>
					{item.name}
				</button>
			{/each}
		</div>
		<div class="content selected">
			<table>
				<thead>
					<tr>
						<th> File Path </th>
						<th> Mode </th>
						<th>
							<!-- Img -->
						</th>
						<th>
							<!-- Status -->
						</th>
					</tr>
				</thead>
				<tbody>
					{#each image_list as image}
						<tr>
							<td>
								{#if image.file_path == 'id://'}
									Managed
								{:else}
									{image.file_path}
								{/if}
							</td>
							<td>
								{#if image.mode == 2}
									Testing
								{:else}
									Training
								{/if}
							</td>
							<td class="text-center">
								{#if image.file_path == 'id://'}
									<img
                                        alt=""
										src="/api/savedData/{model.id}/data/{image.id}.{model.format}"
										height="30px"
										width="30px"
										style="object-fit: contain;"
									/>
								{:else}
									TODO img {image.file_path}
								{/if}
							</td>
							<td class="text-center">
								{#if image.status == 1}
									<span class="bi bi-check-circle-fill" style="color: green"></span>
								{:else}
									<span class="bi bi-exclamation-triangle-fill" style="color: red"></span>
								{/if}
							</td>
						</tr>
					{/each}
				</tbody>
			</table>
			<div class="flex justify-center align-center">
				<div class="grow-1 flex justify-end align-center">
					{#if page > 0}
						<button on:click={() => (page -= 1)}> Prev </button>
					{/if}
				</div>

				<div style="padding: 10px;">
					{page}
				</div>

				<div class="grow-1 flex justify-start align-center">
					{#if showNext}
						<button on:click={() => (page += 1)}> Next </button>
					{/if}
				</div>
			</div>
		</div>
	</Tabs>
{/if}

<style lang="scss">
	table {
		width: 100%;
		box-shadow: 0 2px 8px 1px #66666622;
		border-radius: 10px;
		border-collapse: collapse;
		overflow: hidden;
	}

	table thead {
		background: #60606022;
	}

	table tr td,
	table tr th {
		border-left: 1px solid #22222244;
		padding: 15px;
	}

	table tr td:first-child,
	table tr th:first-child {
		border-left: none;
	}

	table tr td button,
	table tr td .button {
		padding: 5px 10px;
		box-shadow: 0 2px 5px 1px #66666655;
	}
</style>