diff --git a/cypress/e2e/history.spec.ts b/cypress/e2e/history.spec.ts index 92b558d8..851ea8b9 100644 --- a/cypress/e2e/history.spec.ts +++ b/cypress/e2e/history.spec.ts @@ -10,6 +10,9 @@ describe('Save History', () => { cy.contains('History').click(); }); + // TODO: Add test to verify state that's set in localstorage can be read. + // This is useful to know if migration of persistance layer will render old data invalid. + it('should save when clicked', () => { cy.get('#historyList').find('li').should('have.length', 0); cy.get('#historyList').contains('No items in History'); diff --git a/src/lib/components/history/history.svelte b/src/lib/components/history/history.svelte index 6ee60774..3e434fa9 100644 --- a/src/lib/components/history/history.svelte +++ b/src/lib/components/history/history.svelte @@ -7,10 +7,12 @@ clearHistoryData, getPreviousState, historyStore, - loaderHistoryStore + loaderHistoryStore, + restoreHistory } from './history'; import { notify, prompt } from '$lib/util/notify'; import { onMount } from 'svelte'; + import { get } from 'svelte/store'; import moment from 'moment'; import type { HistoryType, State, Tab } from '$lib/types'; @@ -32,6 +34,35 @@ } ]; + const downloadHistory = () => { + const data = get(historyStore); + const blob = new Blob([JSON.stringify(data)], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'history.json'; + a.click(); + URL.revokeObjectURL(url); + }; + + const uploadHistory = () => { + const input = document.createElement('input'); + input.type = 'file'; + input.accept = 'application/json'; + input.addEventListener('change', ({ target }: Event) => { + const file = (target).files[0]; + if (!file) { + return; + } + const reader = new FileReader(); + reader.onload = (e) => { + const data = JSON.parse(e.target.result as string); + restoreHistory(data); + }; + reader.readAsText(file); + }); + input.click(); + }; const saveHistory = (auto = false) => { const currentState: string = getStateString(); const previousState: string = getPreviousState(auto); @@ -53,7 +84,7 @@ clearHistoryData(date); }; - const restoreHistory = (state: State): void => { + const restoreHistoryItem = (state: State): void => { inputStateStore.set({ ...state, updateEditor: true, updateDiagram: true }); }; @@ -88,6 +119,19 @@
+ + {#if $historyStore.length > 0} + + {/if} + |
- {#if type !== 'loader'}