diff --git a/package-lock.json b/package-lock.json
index 8c60a4d..e885088 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,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",
@@ -2226,6 +2227,12 @@
"node": ">= 4"
}
},
+ "node_modules/immutable": {
+ "version": "4.3.5",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+ "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+ "dev": true
+ },
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3193,6 +3200,23 @@
"rimraf": "bin.js"
}
},
+ "node_modules/sass": {
+ "version": "1.71.0",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.0.tgz",
+ "integrity": "sha512-HKKIKf49Vkxlrav3F/w6qRuPcmImGVbIXJ2I3Kg0VMA+3Bav+8yE9G5XmP5lMj6nl4OlqbPftGAscNaNu28b8w==",
+ "dev": true,
+ "dependencies": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ },
+ "bin": {
+ "sass": "sass.js"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
"node_modules/semver": {
"version": "7.6.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
diff --git a/package.json b/package.json
index 0429109..ce4a29e 100644
--- 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
new file mode 100644
index 0000000..824ff68
--- /dev/null
+++ 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
index 9b0717a..dc88122 100644
--- 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 @@
diff --git a/src/lib/DataUtils.ts b/src/lib/DataUtils.ts
index 8bd75f8..816f1f2 100644
--- 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
index 2579188..2b697b9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
diff --git a/svelte.config.js b/svelte.config.js
index 053b121..9062703 100644
--- 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.