History

src/global.d.ts

@@ -23,3 +23,10 @@ interface State {
 	updateDiagram: boolean;
 	autoSync: boolean;
 }
+
+interface HistoryEntry {
+	state: State;
+	time: Date;
+	name: string;
+	auto: boolean;
+}

src/lib/History/index.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import Tabs from '$lib/Tabs/index.svelte';
+	import Card from '$lib/Card/index.svelte';
+	import { codeStore } from '$lib/Util/state';
+	import { historyStore } from '$lib/Util/history';
+
+	let historyMode: string = 'saved';
+
+	const tabSelectHandler = (message: CustomEvent<Tab>) => {
+		historyMode = message.detail.id;
+	};
+	const tabs: Tab[] = [
+		{
+			id: 'saved',
+			title: 'Saved'
+		},
+		{
+			id: 'timeline',
+			title: 'Timeline'
+		}
+	];
+
+	setInterval(() => {
+		saveHistory(true);
+	}, 1000);
+	let history: HistoryEntry[] = [];
+	$: history = $historyStore.filter((h) => (historyMode === 'saved' ? !h.auto : h.auto));
+	const saveHistory = (auto = false) => {
+		historyStore.update((h) => [
+			{
+				state: $codeStore,
+				time: new Date(),
+				name: 'test',
+				auto
+			},
+			...h
+		]);
+	};
+
+	const restoreHistory = (state: State): any => {
+		codeStore.set({ ...state, updateEditor: true, updateDiagram: true });
+	};
+</script>
+
+<Card class="h-1/2">
+	<div slot="title" class="flex">
+		<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} /></div>
+		<div class="flex-grow" />
+		<div class="flex gap-x-4 text-white">
+			<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={saveHistory}>Save</button
+			>
+		</div>
+	</div>
+	<ul>
+		{#each history as { state, time, name }}
+			<li>
+				{time}
+				<button on:click={restoreHistory(state)}>Restore</button>
+			</li>
+		{/each}
+	</ul>
+</Card>

src/lib/Tabs/index.svelte

@@ -10,21 +10,19 @@
 	};
 </script>
 
-<div class="flex gap-2">
-	<ul class="flex mb-0 list-none flex-wrap flex-row">
-		{#each tabs as tab}
-			<li class="-mb-2 mr-2 last:mr-0 flex-auto text-center">
-				<!-- svelte-ignore a11y-missing-attribute -->
-				<a
-					class="text-xs font-bold w-16 py-1 shadow-lg rounded-t block leading-normal {activeTabID ===
-					tab.id
-						? 'text-blue-500 bg-white'
-						: 'text-white bg-blue-500'}"
-					on:click={() => toggleTabs(tab)}
-				>
-					{tab.title}
-				</a>
-			</li>
-		{/each}
-	</ul>
-</div>
+<ul class="flex list-none flex-wrap flex-row">
+	{#each tabs as tab}
+		<li class="mr-2 last:mr-0 flex-auto text-center">
+			<!-- svelte-ignore a11y-missing-attribute -->
+			<a
+				class="text font-bold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t  block leading-normal {activeTabID ===
+				tab.id
+					? 'text-blue-500 bg-white border-white'
+					: 'text-white bg-blue-500 border-blue-500'}"
+				on:click={() => toggleTabs(tab)}
+			>
+				{tab.title}
+			</a>
+		</li>
+	{/each}
+</ul>

src/lib/Util/history.ts

@@ -0,0 +1,3 @@
+import { Writable, writable } from 'svelte/store';
+
+export const historyStore: Writable<HistoryEntry[]> = writable([]);

src/lib/Util/state.ts

@@ -50,8 +50,6 @@ export const updateConfig = (config: string, updateEditor: boolean): void => {
 
 export const initURLSubscription = (): void => {
 	codeStore.subscribe((state: State) => {
-		console.log(state);
-
 		window.location.hash = encode(JSON.stringify(state), true);
 	});
 };