Pj/scss (#29)

bmlt-enabled · Feb 19, 2024 · 3788143 · 3788143
1 parent 7e2832b
commit 3788143
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 147 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
 		"gh-pages": "^6.1.1",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
+		"sass": "^1.71.0",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",

diff --git a/src/css/main.scss b/src/css/main.scss
@@ -0,0 +1,139 @@
+// Variables
+$error-color: red;
+$button-bg-color: #007bff;
+$button-hover-bg-color: #0056b3;
+$border-color: #ccc;
+$border-radius: 3px;
+$font-family-default: Arial, sans-serif;
+$link-color: #007bff;
+$background-light: #f7f7f7;
+$background-dark: #e0d8d8;
+$background-white: #fff;
+$text-color-dark: #333;
+
+@keyframes dots {
+	0%,
+	20% {
+		content: 'Processing.';
+	}
+	40% {
+		content: 'Processing..';
+	}
+	60% {
+		content: 'Processing...';
+	}
+	80%,
+	100% {
+		content: 'Processing....';
+	}
+}
+
+.generateButtonProcessing::after {
+	content: '';
+	animation: dots 1.5s infinite;
+}
+
+.generateButton::before {
+	content: 'Generate Export Data';
+}
+
+.download-links {
+	display: inline-block;
+	padding: 8px;
+}
+
+.error,
+#errorMessages {
+	color: $error-color;
+}
+
+#errorMessages,
+#description,
+h1,
+.download-links,
+.footer-link,
+#footer,
+#inner-box {
+	text-align: center;
+}
+
+#export-form,
+input[type='text'],
+button,
+#inner-box,
+#footer {
+	border-radius: $border-radius;
+	box-sizing: border-box;
+}
+
+#export-form,
+#inner-box {
+	border: 1px solid $border-color;
+}
+
+#inner-box {
+	padding: 20px;
+	margin-bottom: 20px;
+	background-color: $background-white;
+}
+
+#export-form {
+	font-family: $font-family-default;
+	background-color: $background-light;
+	max-width: 800px;
+	margin: 20px auto 0;
+	padding: 1px 20px 20px;
+}
+
+input[type='text'],
+button {
+	width: 100%;
+	padding: 10px;
+	margin-bottom: 10px;
+}
+
+input[type='text'] {
+	border: 1px solid $border-color;
+}
+
+button {
+	background-color: $button-bg-color;
+	color: #fff;
+	border: none;
+	padding: 10px 20px;
+	margin-bottom: 15px;
+	height: 40px;
+	cursor: pointer;
+	transition: background-color 0.3s;
+
+	&:hover {
+		background-color: $button-hover-bg-color;
+	}
+}
+
+.download-links,
+.footer-link,
+a:hover {
+	color: $link-color;
+}
+
+.download-links,
+.footer-link {
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+#footer {
+	padding: 10px;
+	background-color: $background-dark;
+	border: 1px solid $background-dark;
+}
+
+#description {
+	margin-top: 20px;
+	font-size: 1em;
+	color: $text-color-dark;
+}
diff --git a/src/lib/DataConverter.svelte b/src/lib/DataConverter.svelte
@@ -11,6 +11,11 @@
 
 	async function handleExport() {
 		if (query.trim() === '') return;
+		errorMessage.set('');
+		csvDownloadUrl = '';
+		xlsxDownloadUrl = '';
+		kmlDownloadUrl = '';
+
 		try {
 			processing.set(true);
 			const data = await fetchData(query);
@@ -56,144 +61,4 @@
 </section>
 
 <style>
-	:root {
-		--error-color: red;
-		--button-bg-color: #007bff;
-		--button-hover-bg-color: #0056b3;
-		--border-color: #ccc;
-		--border-radius: 3px;
-		--font-family-default: Arial, sans-serif;
-		--link-color: #007bff;
-		--background-light: #f7f7f7;
-		--background-dark: #e0d8d8;
-		--background-white: #fff;
-		--text-color-dark: #333;
-	}
-
-	@keyframes dots {
-		0%,
-		20% {
-			content: 'Processing.';
-		}
-		40% {
-			content: 'Processing..';
-		}
-		60% {
-			content: 'Processing...';
-		}
-		80%,
-		100% {
-			content: 'Processing....';
-		}
-	}
-
-	.generateButtonProcessing::after {
-		content: '';
-		animation: dots 1.5s infinite;
-	}
-
-	.generateButton::before {
-		content: 'Generate Export Data';
-	}
-
-	.download-links {
-		display: inline-block;
-		padding: 8px;
-	}
-
-	.error,
-	#errorMessages {
-		color: var(--error-color);
-	}
-
-	#errorMessages,
-	#description,
-	h1,
-	.download-links,
-	.footer-link,
-	#footer,
-	#inner-box {
-		text-align: center;
-	}
-
-	#export-form,
-	input[type='text'],
-	button,
-	#inner-box,
-	#footer {
-		border-radius: var(--border-radius);
-		box-sizing: border-box;
-	}
-
-	#export-form,
-	#inner-box {
-		border: 1px solid var(--border-color);
-	}
-
-	#inner-box {
-		padding: 20px;
-		margin-bottom: 20px;
-		background-color: var(--background-white);
-	}
-
-	#export-form {
-		font-family: var(--font-family-default);
-		background-color: var(--background-light);
-		max-width: 800px;
-		margin: 20px auto 0;
-		padding: 1px 20px 20px;
-	}
-
-	input[type='text'],
-	button {
-		width: 100%;
-		padding: 10px;
-		margin-bottom: 10px;
-	}
-
-	input[type='text'] {
-		border: 1px solid var(--border-color);
-	}
-
-	button {
-		background-color: var(--button-bg-color);
-		color: #fff;
-		border: none;
-		padding: 10px 20px;
-		margin-bottom: 15px;
-		height: 40px;
-		cursor: pointer;
-		transition: background-color 0.3s;
-	}
-
-	button:hover {
-		background-color: var(--button-hover-bg-color);
-	}
-
-	.download-links,
-	.footer-link,
-	a:hover {
-		color: var(--link-color);
-	}
-
-	.download-links,
-	.footer-link {
-		text-decoration: none;
-	}
-
-	a:hover {
-		text-decoration: underline;
-	}
-
-	#footer {
-		padding: 10px;
-		background-color: var(--background-dark);
-		border: 1px solid var(--background-dark);
-	}
-
-	#description {
-		margin-top: 20px;
-		font-size: 1em;
-		color: var(--text-color-dark);
-	}
 </style>
diff --git a/src/lib/DataUtils.ts b/src/lib/DataUtils.ts
@@ -54,12 +54,6 @@ export function exportXLSX(data: any[]): string {
 	const ws = XLSX.utils.json_to_sheet(processedData);
 	XLSX.utils.book_append_sheet(wb, ws, 'Data');
 	const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
-	function s2ab(s: string): ArrayBuffer {
-		const buf = new ArrayBuffer(s.length);
-		const view = new Uint8Array(buf);
-		for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff;
-		return buf;
-	}
 	const blob = new Blob([s2ab(wbout)], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
 	return URL.createObjectURL(blob);
 }
@@ -76,6 +70,13 @@ export function exportKML(data: Meeting[]): string {
 	return URL.createObjectURL(blob);
 }
 
+function s2ab(s: string): ArrayBuffer {
+	const buf = new ArrayBuffer(s.length);
+	const view = new Uint8Array(buf);
+	for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff;
+	return buf;
+}
+
 // This is for Bus/Train/Custom fields
 function processExportData(data: any[]): any[] {
 	return data.map((row) =>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script>
 	import DataConverter from '$lib/DataConverter.svelte';
+	import '../css/main.scss';
 </script>
 
 <svelte:head>

diff --git a/svelte.config.js b/svelte.config.js
@@ -5,7 +5,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: vitePreprocess({ scss: true }),
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.