Merge pull request #25 from LironHazan/AVR8JS-24-editor-user-history

feat(demo): saving user history

3 files changed, 41 insertions, 1 deletions

diff --git a/demo/src/index.html b/demo/src/index.html
index 99b1c84..332ccb3 100644
--- a/demo/src/index.html
+++ b/demo/src/index.html
@@ -17,6 +17,7 @@
       <div class="toolbar">
         <button id="run-button">Run</button>
         <button id="stop-button" disabled>Stop</button>
+        <button id="revert-button">Back to LEDS example</button>
         <div class="spacer"></div>
         <div id="status-label"></div>
       </div>
diff --git a/demo/src/index.ts b/demo/src/index.ts
index c886bba..e3f9a67 100644
--- a/demo/src/index.ts
+++ b/demo/src/index.ts
@@ -5,6 +5,7 @@ import { formatTime } from './format-time';
 import './index.css';
 import { CPUPerformance } from './cpu-performance';
 import { LEDElement } from '@wokwi/elements';
+import { EditorHistoryUtil } from './utils/editor-history.util';
 
 let editor: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 const BLINK_CODE = `
@@ -32,7 +33,7 @@ window.require.config({
 });
 window.require(['vs/editor/editor.main'], () => {
   editor = monaco.editor.create(document.querySelector('.code-editor'), {
-    value: BLINK_CODE,
+    value: EditorHistoryUtil.getValue() || BLINK_CODE,
     language: 'cpp',
     minimap: { enabled: false }
   });
@@ -50,6 +51,8 @@ const runButton = document.querySelector('#run-button');
 runButton.addEventListener('click', compileAndRun);
 const stopButton = document.querySelector('#stop-button');
 stopButton.addEventListener('click', stopCode);
+const revertButton = document.querySelector('#revert-button');
+revertButton.addEventListener('click', setBlinkSnippet);
 const statusLabel = document.querySelector('#status-label');
 const compilerOutputText = document.querySelector('#compiler-output-text');
 const serialOutputText = document.querySelector('#serial-output-text');
@@ -80,7 +83,11 @@ async function compileAndRun() {
   led12.value = false;
   led13.value = false;
 
+  storeUserSnippet();
+
   runButton.setAttribute('disabled', '1');
+  revertButton.setAttribute('disabled', '1');
+
   serialOutputText.textContent = '';
   try {
     statusLabel.textContent = 'Compiling...';
@@ -95,17 +102,29 @@ async function compileAndRun() {
     }
   } catch (err) {
     runButton.removeAttribute('disabled');
+    revertButton.removeAttribute('disabled');
     alert('Failed: ' + err);
   } finally {
     statusLabel.textContent = '';
   }
 }
 
+function storeUserSnippet() {
+  EditorHistoryUtil.clearSnippet();
+  EditorHistoryUtil.storeSnippet(editor.getValue());
+}
+
 function stopCode() {
   stopButton.setAttribute('disabled', '1');
   runButton.removeAttribute('disabled');
+  revertButton.removeAttribute('disabled');
   if (runner) {
     runner.stop();
     runner = null;
   }
 }
+
+function setBlinkSnippet() {
+  editor.setValue(BLINK_CODE);
+  EditorHistoryUtil.storeSnippet(editor.getValue());
+}
diff --git a/demo/src/utils/editor-history.util.ts b/demo/src/utils/editor-history.util.ts
new file mode 100644
index 0000000..65ca38a
--- /dev/null
+++ b/demo/src/utils/editor-history.util.ts
@@ -0,0 +1,20 @@
+const AVRJS8_EDITOR_HISTORY = 'AVRJS8_EDITOR_HISTORY';
+
+export class EditorHistoryUtil {
+  static hasLocalStorage: boolean = !!window.localStorage;
+
+  static storeSnippet(codeSnippet: string) {
+    if (!EditorHistoryUtil.hasLocalStorage) return;
+    window.localStorage.setItem(AVRJS8_EDITOR_HISTORY, codeSnippet);
+  }
+
+  static clearSnippet() {
+    if (!EditorHistoryUtil.hasLocalStorage) return;
+    localStorage.removeItem(AVRJS8_EDITOR_HISTORY);
+  }
+
+  static getValue() {
+    if (!EditorHistoryUtil.hasLocalStorage) return;
+    return localStorage.getItem(AVRJS8_EDITOR_HISTORY);
+  }
+}