From 7dc96a8094492a07a0641dfefe8aaf56393017d6 Mon Sep 17 00:00:00 2001
From: paulober <44974737+paulober@users.noreply.github.com>
Date: Thu, 9 May 2024 18:38:00 +0200
Subject: [PATCH] Fix #2, NewProjectPanel persistent state

Signed-off-by: paulober <44974737+paulober@users.noreply.github.com>
---
 src/webview/newProjectPanel.mts |  10 +-
 web/main.js                     |   6 +-
 web/state.js                    | 419 ++++++++++++++++++++++++++++++++
 3 files changed, 430 insertions(+), 5 deletions(-)
 create mode 100644 web/state.js

diff --git a/src/webview/newProjectPanel.mts b/src/webview/newProjectPanel.mts
index 0a951307..a4625913 100644
--- a/src/webview/newProjectPanel.mts
+++ b/src/webview/newProjectPanel.mts
@@ -1174,6 +1174,9 @@ export class NewProjectPanel {
     const navScriptUri = webview.asWebviewUri(
       Uri.joinPath(this._extensionUri, "web", "nav.js")
     );
+    const stateScriptUri = webview.asWebviewUri(
+      Uri.joinPath(this._extensionUri, "web", "state.js")
+    );
     const tailwindcssScriptUri = webview.asWebviewUri(
       Uri.joinPath(this._extensionUri, "web", "tailwindcss-3_3_5.js")
     );
@@ -1513,7 +1516,11 @@ export class NewProjectPanel {
                                   !this._isProjectImport
                                     ? "C:\\MyProject"
                                     : "C:\\Project\\To\\Import"
-                                }" disabled/>
+                                }" disabled value="${
+      this._projectRoot !== undefined
+        ? this._projectRoot.fsPath.replaceAll("\\", "/")
+        : ""
+    }"/>
                             </div>
                             <button 
                                 id="btn-change-project-location"
@@ -1820,6 +1827,7 @@ export class NewProjectPanel {
         </main>
 
         <script nonce="${nonce}" src="${navScriptUri.toString()}"></script>
+        <script nonce="${nonce}" src="${stateScriptUri.toString()}"></script>
         <script nonce="${nonce}" src="${mainScriptUri.toString()}"></script>
       </body>
     </html>`;
diff --git a/web/main.js b/web/main.js
index 684b3cdf..e919c3d3 100644
--- a/web/main.js
+++ b/web/main.js
@@ -18,10 +18,8 @@ var isPicoWireless = false;
 (function () {
   const vscode = acquireVsCodeApi();
 
-  // TODO: save input in state
-  const oldState = vscode.getState();
-
-  console.log("oldState", oldState);
+  // setup state for webview implemented in state.js
+  setupStateSystem(vscode);
 
   // needed so a element isn't hidden behind the navbar on scroll
   const navbarOffsetHeight = document.getElementById('top-navbar').offsetHeight;
diff --git a/web/state.js b/web/state.js
new file mode 100644
index 00000000..34ad04c4
--- /dev/null
+++ b/web/state.js
@@ -0,0 +1,419 @@
+class State {
+  // data state properties
+  projectName;
+  projectLocation;
+  boardType;
+  selectedSDK;
+  selectedToolchain;
+  ninjaMode;
+  // ninjaPath; setting the path of a file input is not supported
+  ninjaVersion;
+  cmakeMode;
+  // cmakePath; setting the path of a file input is not supported
+  cmakeVersion;
+  pythonMode;
+  // pythonPath; setting the path of a file input is not supported
+  uartStdioSupport;
+  usbStdioSupport;
+  spiFeature;
+  pioFeature;
+  i2cFeature;
+  dmaFeature;
+  hwwatchdogFeature;
+  hwclocksFeature;
+  hwinterpolationFeature;
+  hwtimerFeature;
+  picoWirelessSelection;
+  addExamplesCodeGen;
+  runFromRamCodeGen;
+  cppCodeGen;
+  cppRttiCodeGen;
+  cppExceptionsCodeGen;
+  debuggerSelection;
+
+  // special ui only state
+  uiShowAdvancedOptions;
+
+  constructor() { }
+}
+
+function restoreState(state) {
+  console.debug("Restoring state from previous session");
+  // load state
+  if (state.projectName) {
+    document.getElementById('inp-project-name').value = state.projectName;
+  }
+  // redundant, as this property is managed by the extension
+  /*if (state.projectLocation) {
+    document.getElementById('inp-project-location').value = state.projectLocation;
+  }*/
+  if (state.boardType) {
+    document.getElementById('sel-board-type').value = state.boardType;
+    // trigger change event to update the ui based on the selected board
+    document.getElementById('sel-board-type').dispatchEvent(new Event('change'));
+  }
+  if (state.selectedSDK) {
+    document.getElementById('sel-pico-sdk').value = state.selectedSDK;
+  }
+  if (state.selectedToolchain) {
+    document.getElementById('sel-toolchain').value = state.selectedToolchain;
+  }
+  if (state.ninjaVersion) {
+    document.getElementById('sel-ninja').value = state.ninjaVersion;
+  }
+  if (state.cmakeVersion) {
+    document.getElementById('sel-cmake').value = state.cmakeVersion;
+  }
+  if (state.pythonVersion) {
+    document.getElementById('sel-python').value = state.pythonVersion;
+  }
+
+  /* setting the path of a file input is not supported
+  if (state.ninjaPath !== undefined) {
+    document.getElementById('ninja-path-executable').value = state.ninjaPath;
+  }
+
+  if (state.cmakePath !== undefined) {
+    document.getElementById('cmake-path-executable').value = state.cmakePath;
+  }
+
+  if (state.pythonPath !== undefined) {
+    document.getElementById('python-path-executable').value = state.pythonPath;
+  }
+  */
+
+  if (state.uartStdioSupport !== undefined) {
+    document.getElementById('uart-stdio-support-cblist').checked = state.uartStdioSupport;
+  }
+
+  if (state.usbStdioSupport !== undefined) {
+    document.getElementById('usb-stdio-support-cblist').checked = state.usbStdioSupport;
+  }
+
+  if (state.spiFeature !== undefined) {
+    document.getElementById('spi-features-cblist').checked = state.spiFeature;
+  }
+
+  if (state.pioFeature !== undefined) {
+    document.getElementById('pio-features-cblist').checked = state.pioFeature;
+  }
+
+  if (state.i2cFeature !== undefined) {
+    document.getElementById('i2c-features-cblist').checked = state.i2cFeature;
+  }
+
+  if (state.dmaFeature !== undefined) {
+    document.getElementById('dma-features-cblist').checked = state.dmaFeature;
+  }
+
+  if (state.hwwatchdogFeature !== undefined) {
+    document.getElementById('hwwatchdog-features-cblist').checked = state.hwwatchdogFeature;
+  }
+
+  if (state.hwclocksFeature !== undefined) {
+    document.getElementById('hwclocks-features-cblist').checked = state.hwclocksFeature;
+  }
+
+  if (state.hwinterpolationFeature !== undefined) {
+    document.getElementById('hwinterpolation-features-cblist').checked = state.hwinterpolationFeature;
+  }
+
+  if (state.hwtimerFeature !== undefined) {
+    document.getElementById('hwtimer-features-cblist').checked = state.hwtimerFeature;
+  }
+
+  if (state.addExamplesCodeGen !== undefined) {
+    document.getElementById('add-examples-code-gen-cblist').checked = state.addExamplesCodeGen;
+  }
+
+  if (state.runFromRamCodeGen !== undefined) {
+    document.getElementById('run-from-ram-code-gen-cblist').checked = state.runFromRamCodeGen;
+  }
+
+  if (state.cppCodeGen !== undefined) {
+    document.getElementById('cpp-code-gen-cblist').checked = state.cppCodeGen;
+  }
+
+  if (state.cppRttiCodeGen !== undefined) {
+    document.getElementById('cpp-rtti-code-gen-cblist').checked = state.cppRttiCodeGen;
+  }
+
+  if (state.cppExceptionsCodeGen !== undefined) {
+    document.getElementById('cpp-exceptions-code-gen-cblist').checked = state.cppExceptionsCodeGen;
+  }
+
+  if (state.picoWirelessSelection !== undefined) {
+    document.getElementById('pico-wireless-radio-none').checked = state.picoWirelessSelection == 0;
+    document.getElementById('pico-wireless-radio-led').checked = state.picoWirelessSelection == 1;
+    document.getElementById('pico-wireless-radio-pool').checked = state.picoWirelessSelection == 2;
+    document.getElementById('pico-wireless-radio-background').checked = state.picoWirelessSelection == 3;
+  }
+  // instead of setting debug-probe if selection is undefined or 0, 
+  // first check so the default can be controlled in the html 
+  if (state.debuggerSelection !== undefined) {
+    document.getElementById('debugger-radio-debug-probe').checked = state.debuggerSelection == 0;
+    document.getElementById('debugger-radio-swd').checked = state.debuggerSelection == 1;
+  }
+
+  // instead of setting ninja-radio-default-version if selection is undefined or 0, 
+  // first check so the default can be controlled in the html 
+  if (state.ninjaMode !== undefined) {
+    const ninjaDefaultVersionRadio = document.getElementById('ninja-radio-default-version');
+    if (ninjaDefaultVersionRadio) {
+      ninjaDefaultVersionRadio.checked = state.ninjaMode == 0;
+    }
+    const ninjaSystemVersionRadio = document.getElementById('ninja-radio-system-version');
+    // not available in the DOM is system ninja is not available
+    if (ninjaSystemVersionRadio) {
+      ninjaSystemVersionRadio.checked = state.ninjaMode == 1;
+    }
+    document.getElementById('ninja-radio-select-version').checked = state.ninjaMode == 2;
+    document.getElementById('ninja-radio-path-executable').checked = state.ninjaMode == 3;
+  }
+
+  if (state.cmakeMode !== undefined) {
+    const cmakeDefaultVersionRadio = document.getElementById('cmake-radio-default-version');
+    if (cmakeDefaultVersionRadio) {
+      cmakeDefaultVersionRadio.checked = state.cmakeMode == 0;
+    }
+    const cmakeSystemVersionRadio = document.getElementById('cmake-radio-system-version');
+    // not available in the DOM is system cmake is not available
+    if (cmakeSystemVersionRadio) {
+      cmakeSystemVersionRadio.checked = state.cmakeMode == 1;
+    }
+    document.getElementById('cmake-radio-select-version').checked = state.cmakeMode == 2;
+    document.getElementById('cmake-radio-path-executable').checked = state.cmakeMode == 3;
+  }
+
+  if (state.pythonMode !== undefined && document.getElementById('python-radio-path-executable') !== undefined) {
+    const pythonDefaultVersionRadio = document.getElementById('python-radio-default-version');
+    if (pythonDefaultVersionRadio) {
+      pythonDefaultVersionRadio.checked = state.pythonMode == 0;
+    }
+    const pythonSystemVersionRadio = document.getElementById('python-radio-system-version');
+    // not available in the DOM is system python is not available
+    if (pythonSystemVersionRadio) {
+      pythonSystemVersionRadio.checked = state.pythonMode == 1;
+    }
+    document.getElementById('python-radio-path-executable').checked = state.pythonMode == 2;
+  }
+
+  // ui state
+  if (state.uiShowAdvancedOptions) {
+    document.getElementById('btn-advanced-options').click();
+  }
+}
+
+function setupStateSystem(vscode) {
+  document.addEventListener('DOMContentLoaded', function () {
+    const oldState = vscode.getState();
+    const state = oldState || new State();
+
+    // restore state
+    if (oldState !== null) {
+      restoreState(state);
+    }
+
+    // add on change event to all inputs to save state
+    document.querySelectorAll('input[type="text"]').forEach(input => {
+      input.addEventListener('change', function () {
+        const id = input.id;
+        switch (id) {
+          case "inp-project-name":
+            state.projectName = input.value;
+            break;
+          // redundant, as this property is managed by the extension
+          /*case "inp-project-location":
+            state.projectLocation = input.value;
+            break;*/
+        }
+        vscode.setState(state);
+      });
+    });
+    // add on change event to all selects to save state
+    document.querySelectorAll('select').forEach(select => {
+      select.addEventListener('change', function () {
+        switch (select.id) {
+          case "sel-board-type":
+            state.boardType = select.value;
+            break;
+          case "sel-pico-sdk":
+            state.selectedSDK = select.value;
+            break;
+          case "sel-toolchain":
+            state.selectedToolchain = select.value;
+            break;
+          case "sel-ninja":
+            state.ninjaVersion = select.value;
+            break;
+          case "sel-cmake":
+            state.cmakeVersion = select.value;
+            break;
+        }
+        vscode.setState(state);
+      });
+    });
+    // add to radio buttons
+    document.querySelectorAll('input[type="radio"]').forEach(radio => {
+      radio.addEventListener('change', function () {
+        switch (radio.name) {
+          case "ninja-version-radio":
+            switch (radio.id) {
+              case "ninja-radio-default-version":
+                state.ninjaMode = parseInt(radio.value);
+                break;
+              case "ninja-radio-system-version":
+                state.ninjaMode = parseInt(radio.value);
+                break;
+              case "ninja-radio-select-version":
+                state.ninjaMode = parseInt(radio.value);
+                break;
+              case "ninja-radio-path-executable":
+                state.ninjaMode = parseInt(radio.value);
+                break;
+            }
+            break;
+          case "cmake-version-radio":
+            switch (radio.id) {
+              case "cmake-radio-default-version":
+                state.cmakeMode = parseInt(radio.value);
+                break;
+              case "cmake-radio-system-version":
+                state.cmakeMode = parseInt(radio.value);
+                break;
+              case "cmake-radio-select-version":
+                state.cmakeMode = parseInt(radio.value);
+                break;
+              case "cmake-radio-path-executable":
+                state.cmakeMode = parseInt(radio.value);
+                break;
+            }
+            break;
+          case "python-version-radio":
+            switch (radio.id) {
+              case "python-radio-default-version":
+                state.pythonMode = parseInt(radio.value);
+                break;
+              case "python-radio-system-version":
+                state.pythonMode = parseInt(radio.value);
+                break;
+              case "python-radio-path-executable":
+                state.pythonMode = parseInt(radio.value);
+                break;
+            }
+            break;
+          case "pico-wireless-radio":
+            switch (radio.id) {
+              case "pico-wireless-radio-none":
+                state.picoWirelessSelection = parseInt(radio.value);
+                break;
+              case "pico-wireless-radio-led":
+                state.picoWirelessSelection = parseInt(radio.value);
+                break;
+              case "pico-wireless-radio-pool":
+                state.picoWirelessSelection = parseInt(radio.value);
+                break;
+              case "pico-wireless-radio-background":
+                state.picoWirelessSelection = parseInt(radio.value);
+                break;
+            }
+            break;
+          case "debugger-radio":
+            switch (radio.id) {
+              case "debugger-radio-debug-probe":
+                state.debuggerSelection = parseInt(radio.value);
+                break;
+              case "debugger-radio-swd":
+                state.debuggerSelection = parseInt(radio.value);
+                break;
+            }
+            break;
+        }
+        vscode.setState(state);
+      });
+    });
+    // add on change event to all checkboxes to save state
+    document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+      checkbox.addEventListener('change', function () {
+        switch (checkbox.id) {
+          case "spi-features-cblist":
+            state.spiFeature = checkbox.checked;
+            break;
+          case "pio-features-cblist":
+            state.pioFeature = checkbox.checked;
+            break;
+          case "i2c-features-cblist":
+            state.i2cFeature = checkbox.checked;
+            break;
+          case "dma-features-cblist":
+            state.dmaFeature = checkbox.checked;
+            break;
+          case "hwwatchdog-features-cblist":
+            state.hwwatchdogFeature = checkbox.checked;
+            break;
+          case "hwclocks-features-cblist":
+            state.hwclocksFeature = checkbox.checked;
+            break;
+          case "hwinterpolation-features-cblist":
+            state.hwinterpolationFeature = checkbox.checked;
+            break;
+          case "hwtimer-features-cblist":
+            state.hwtimerFeature = checkbox.checked;
+            break;
+          case "uart-stdio-support-cblist":
+            state.uartStdioSupport = checkbox.checked;
+            break;
+          case "usb-stdio-support-cblist":
+            state.usbStdioSupport = checkbox.checked;
+            break;
+          case "add-examples-code-gen-cblist":
+            state.addExamplesCodeGen = checkbox.checked;
+            break;
+          case "run-from-ram-code-gen-cblist":
+            state.runFromRamCodeGen = checkbox.checked;
+            break;
+          case "cpp-code-gen-cblist":
+            state.cppCodeGen = checkbox.checked;
+            break;
+          case "cpp-rtti-code-gen-cblist":
+            state.cppRttiCodeGen = checkbox.checked;
+            break;
+          case "cpp-exceptions-code-gen-cblist":
+            state.cppExceptionsCodeGen = checkbox.checked;
+            break;
+        }
+
+        vscode.setState(state);
+      });
+    });
+
+    /* setting the path of a file input is not supported
+    document.querySelectorAll('input[type="file"]').forEach(file => {
+      file.addEventListener('change', function () {
+        switch (file.id) {
+          case "ninja-path-executable":
+            state.ninjaPath = file.files[0].name;
+            break;
+          case "cmake-path-executable":
+            state.cmakePath = file.files[0].name;
+            break;
+          case "python-path-executable":
+            state.pythonPath = file.files[0].name;
+            break;
+        }
+
+        vscode.setState(state);
+      });
+    });
+    */
+
+    // ui only state watch
+    document.getElementById('btn-advanced-options').addEventListener('click', function () {
+      // TODO: maybe synchronize with the advanced options value expected in main.js
+      state.uiShowAdvancedOptions = state.uiShowAdvancedOptions === undefined ? true : !state.uiShowAdvancedOptions;
+      vscode.setState(state);
+    });
+  });
+}
+
+// export { setupStateSystem, State };