feat: download csv

leaphy-robotics · May 3, 2024 · 0fe3637 · 0fe3637
1 parent f6712e4
commit 0fe3637
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/src/lib/components/core/popups/Windowed.svelte b/src/lib/components/core/popups/Windowed.svelte
@@ -10,10 +10,11 @@ import type { Writable } from "svelte/store";
 interface Props {
 	title: string;
 	content: Snippet;
+	actions?: Snippet;
 }
 
 const state = getContext<Writable<PopupState>>("state");
-const { content, title }: Props = $props();
+const { content, actions, title }: Props = $props();
 
 let x: number;
 let y: number;
@@ -53,7 +54,10 @@ onDestroy(() => {
 <div class="window">
     <div class="top" onmousedown={ondown}>
         <div class="title">{title}</div>
-        <WindowButton icon={faClose} onclick={close} />
+        <div class="actions">
+            <WindowButton icon={faClose} onclick={close} />
+            {#if actions}{@render actions()}{/if}
+        </div>
     </div>
     {@render content()}
 </div>

diff --git a/src/lib/components/core/popups/popups/SerialMonitor.svelte b/src/lib/components/core/popups/popups/SerialMonitor.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
 import TextInput from "$components/ui/TextInput.svelte";
+import WindowButton from "$components/ui/WindowButton.svelte";
 import { log } from "$state/workspace.svelte";
+import { faArrowDown, faTrash, faX } from "@fortawesome/free-solid-svg-icons";
 import { tick } from "svelte";
 import { _ } from "svelte-i18n";
+import { get } from "svelte/store";
 import Windowed from "../Windowed.svelte";
 
 let element: HTMLDivElement;
@@ -28,8 +31,33 @@ function send(event: SubmitEvent) {
 	log.write(`${value}\n`);
 	value = "";
 }
+
+function download() {
+	const data: string[][] = [["date", "time", "data"]];
+
+	for (const item of get(log)) {
+		data.push([
+			item.date.toLocaleDateString("nl-NL"),
+			item.date.toLocaleTimeString("nl-NL"),
+			item.content,
+		]);
+	}
+
+	const content = data.map((e) => e.join(",")).join("\n");
+	const url = URL.createObjectURL(new Blob([content], { type: "text/plain" }));
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = "serial_monitor_export.csv";
+	link.click();
+	URL.revokeObjectURL(url);
+	link.remove();
+}
 </script>
 
+{#snippet actions()}
+    <WindowButton icon={faArrowDown} onclick={download} />
+    <WindowButton icon={faTrash} onclick={log.clear} />
+{/snippet}
 {#snippet content()}
     <div class="content" bind:this={element}>
         {#each $log as item (item.id)}
@@ -49,7 +77,7 @@ function send(event: SubmitEvent) {
     </form>
 {/snippet}
 
-<Windowed title={$_("SERIAL_OUTPUT")} {content} />
+<Windowed title={$_("SERIAL_OUTPUT")} {content} {actions} />
 
 <style>
     .content {

diff --git a/src/lib/state/workspace.svelte.ts b/src/lib/state/workspace.svelte.ts
@@ -39,14 +39,17 @@ export const SUPPORTED_VENDOR_IDS = [0x1a86, 9025, 2341, 0x0403, 0x2e8a];
 
 let writer: WritableStreamDefaultWriter<Uint8Array>;
 function createLogState() {
-	const { subscribe, update } = writable<LogItem[]>([]);
+	const { subscribe, update, set } = writable<LogItem[]>([]);
 	let buffer = "";
 
 	return {
 		subscribe,
 		write(content: string) {
 			writer.write(new TextEncoder().encode(content));
 		},
+		clear() {
+			set([]);
+		},
 		enqueue(content: Uint8Array) {
 			buffer += new TextDecoder().decode(content);