fix routing errors

ssciwr · Aug 22, 2024 · aa32834 · aa32834
1 parent c5c8305
commit aa32834
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 34 deletions.
diff --git a/src/lib/components/DataDisplay/TableDisplay.svelte b/src/lib/components/DataDisplay/TableDisplay.svelte
@@ -8,37 +8,68 @@
 		TableSearch
 	} from 'flowbite-svelte';
 
+	// variables
 	export let data = [{ id: 1, name: 'testA', time: 2017, status: 'good' }];
 
+	export let caption =
+		'Hier finden sie eine Übersicht über alle abgeschlossenen und ausstehenden Meilensteine für die momentane Bestandsaufnahme.';
+
 	export let statusIndicator = {
 		good: 'bg-green-500',
 		bad: 'bg-red-500',
 		warn: 'bg-yellow-500'
 	};
 
+	export let statusColumns = ['status'];
+
+	export let searchableColumns = ['name'];
+	// functionality
 	let searchTerm = '';
 
+	// make the placeholdertext for the searchbar dynamic
+	const numCols = Object.keys(data[0]).length;
+	let placeholderText = 'Search ' + searchableColumns[0];
+
+	if (searchableColumns.length > 1 && searchableColumns.length < numCols - 1) {
+		placeholderText = 'Search ' + `any of ${searchableColumns.join(', ')}`;
+	} else if (searchableColumns.length >= numCols - 1 && searchableColumns.length < numCols) {
+		const difference = Object.keys(data[0]).filter((key) => !searchableColumns.includes(key));
+		placeholderText = 'Search all columns except ' + `${difference.join(', ')}`;
+	} else if (searchableColumns.length === numCols) {
+		placeholderText = 'Search all columns';
+	}
+
+	// TODO: adjust this to searchable stuff
 	$: filteredItems = data.filter(
 		(item) => item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
 	);
-
-	function extractStatusIndicator(status) {
-		return statusIndicator?.[status] || '';
-	}
 </script>
 
-<TableSearch placeholder="Search test by name" hoverable={true} bind:inputValue={searchTerm}>
+<TableSearch
+	placeholder={placeholderText}
+	hoverable={true}
+	bind:inputValue={searchTerm}
+	striped={true}
+	shadow
+>
+	<caption class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
+		{caption}
+	</caption>
 	<TableHead>
-		<TableHeadCell>ID</TableHeadCell>
-		<TableHeadCell>Name</TableHeadCell>
-		<TableHeadCell>Result</TableHeadCell>
+		{#each Object.keys(data[0]) as key}
+			<TableHeadCell>{key}</TableHeadCell>
+		{/each}
 	</TableHead>
 	<TableBody tableBodyClass="divide-y">
 		{#each filteredItems as item}
 			<TableBodyRow>
-				<TableBodyCell>{item.id}</TableBodyCell>
-				<TableBodyCell>{item.name}</TableBodyCell>
-				<TableBodyCell color={extractStatusIndicator(item.status)}>{item.status}</TableBodyCell>
+				{#each Object.entries(item) as pair}
+					{#if statusColumns.includes(pair[0])}
+						<TableBodyCell class={statusIndicator[pair[1]]}>{pair[1]}</TableBodyCell>
+					{:else}
+						<TableBodyCell>{pair[1]}</TableBodyCell>
+					{/if}
+				{/each}
 			</TableBodyRow>
 		{/each}
 	</TableBody>

diff --git a/src/routes/feedback/+page.svelte b/src/routes/feedback/+page.svelte
diff --git a/src/routes/nextdropdown/+page.svelte b/src/routes/nextdropdown/+page.svelte
@@ -40,7 +40,7 @@
 <AbstractContent
 	showBottomNavbar={true}
 	lastpage="/firstdropdown"
-	nextpage="/feedback"
+	nextpage="/surveyfeedback"
 	infopage="/info"
 >
 	<AbstractDataInput data={dropdownData} {heading} itemComponent={AbstractDropdownItem} />

diff --git a/src/routes/surveyfeedback/+page.svelte b/src/routes/surveyfeedback/+page.svelte
@@ -0,0 +1,27 @@
+<script>
+	import AbstractContent from '$lib/components/AbstractContent.svelte';
+	import TableDisplay from '$lib/components/DataDisplay/TableDisplay.svelte';
+
+	export let data_to_display = [
+		{ name: 'surveyA', time: 2017, status: 'good' },
+		{ name: 'surveyB', time: 2016, status: 'bad' },
+		{ name: 'surveyC', time: 2012, status: 'bad' },
+		{ name: 'surveyD', time: 2020, status: 'warn' },
+		{ name: 'surveyE', time: 2019, status: 'good' }
+	];
+
+	export let statusIndicator = {
+		good: 'bg-green-500',
+		bad: 'bg-red-600',
+		warn: 'bg-yellow-300'
+	};
+</script>
+
+<AbstractContent
+	showBottomNavbar={true}
+	lastpage="/nextdropdown"
+	nextpage="/trafficlightfeedback"
+	infopage="/info"
+>
+	<TableDisplay data={data_to_display} {statusIndicator} />
+</AbstractContent>
diff --git a/src/routes/trafficlightfeedback/+page.svelte b/src/routes/trafficlightfeedback/+page.svelte
@@ -0,0 +1,69 @@
+<script>
+	import AbstractContent from '$lib/components/AbstractContent.svelte';
+	import TableDisplay from '$lib/components/DataDisplay/TableDisplay.svelte';
+
+	// this will be passed from the backend eventually
+	const data_to_display = [
+		{
+			name: 'SurveyA',
+			'05-11-2017': 'good',
+			'08-05-2016': 'bad',
+			'22-07-2012': 'bad',
+			'11-11-2020': 'warn',
+			'30-03-2019': 'warn'
+		},
+		{
+			name: 'SurveyB',
+			'05-11-2017': 'bad',
+			'08-05-2016': 'warn',
+			'22-07-2012': 'bad',
+			'11-11-2020': 'warn',
+			'30-03-2019': 'good'
+		},
+		{
+			name: 'SurveyC',
+			'05-11-2017': 'good',
+			'08-05-2016': 'warn',
+			'22-07-2012': 'bad',
+			'11-11-2020': 'warn',
+			'30-03-2019': 'bad'
+		},
+		{
+			name: 'SurveyD',
+			'05-11-2017': 'good',
+			'08-05-2016': 'good',
+			'22-07-2012': 'good',
+			'11-11-2020': 'warn',
+			'30-03-2019': 'good'
+		},
+		{
+			name: 'SurveyE',
+			'05-11-2017': 'good',
+			'08-05-2016': 'warn',
+			'22-07-2012': 'warn',
+			'11-11-2020': 'warn',
+			'30-03-2019': 'good'
+		}
+	];
+
+	const statusIndicator = {
+		good: 'bg-green-500',
+		bad: 'bg-red-600',
+		warn: 'bg-yellow-300'
+	};
+
+	const searchableColumns = [
+		'name',
+		'05-11-2017',
+		'08-05-2016',
+		'22-07-2012',
+		'11-11-2020',
+		'30-03-2019'
+	];
+
+	const statusColumns = ['05-11-2017', '08-05-2016', '22-07-2012', '11-11-2020', '30-03-2019'];
+</script>
+
+<AbstractContent showBottomNavbar={true} lastpage="/surveyfeedback" nextpage="/" infopage="/info">
+	<TableDisplay data={data_to_display} {statusIndicator} {searchableColumns} {statusColumns} />
+</AbstractContent>