Fix #71, SDK selector gets disabled if an example is selected

Signed-off-by: paulober <44974737+paulober@users.noreply.github.com>
raspberrypi · Sep 5, 2024 · f8f76a8 · f8f76a8
1 parent 22fcc41
commit f8f76a8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/src/webview/newProjectPanel.mts b/src/webview/newProjectPanel.mts
@@ -1524,18 +1524,20 @@ export class NewProjectPanel {
                         <div>
                             <label for="sel-board-type" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Board type</label>
                             <select id="sel-board-type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-                                <option id="sel-${BoardType.pico}" value="${
-                          BoardType.pico
-                        }">Pico</option>
-                                <option id="sel-${BoardType.picoW}" value="${
-                          BoardType.picoW
-                        }">Pico W</option>
-                                <option id="sel-${BoardType.pico2}" value="${
+                                <option id="option-board-type-${
+                                  BoardType.pico
+                                }" value="${BoardType.pico}">Pico</option>
+                                <option id="option-board-type-${
+                                  BoardType.picoW
+                                }" value="${BoardType.picoW}">Pico W</option>
+                                <option id="option-board-type-${
+                                  BoardType.pico2
+                                }" value="${
                           BoardType.pico2
                         }" selected>Pico 2</option>
-                                <option id="sel-${BoardType.other}" value="${
-                          BoardType.other
-                        }">Other</option>
+                                <option id="option-board-type-${
+                                  BoardType.other
+                                }" value="${BoardType.other}">Other</option>
                             </select>
                         </div>
                       </div>`

diff --git a/web/main.js b/web/main.js
@@ -429,7 +429,7 @@ var isPicoWireless = false;
         document.getElementById('inp-project-location').value = message.value;
         break;
       case CMD_SET_THEME:
-        console.log("set theme", message.theme);
+        console.log("[raspberry-pi-pico] Set theme mode to:", message.theme);
         // update UI
         if (message.theme == "dark") {
           // explicitly choose dark mode
@@ -455,7 +455,7 @@ var isPicoWireless = false;
           var selectedIndex = getIndexByValue(toolchainSelector, result.toolchainVersion);
 
           if (result.riscvToolchainVersion === "NONE") {
-            document.getElementById("sel-pico2").disabled = true;
+            document.getElementById("option-board-type-pico2").disabled = true;
             const boardTypeSelector = document.getElementById('sel-board-type');
 
             if (boardTypeSelector && boardTypeSelector.value.includes("pico2")) {
@@ -474,7 +474,7 @@ var isPicoWireless = false;
               }
             }
           } else {
-            document.getElementById("sel-pico2").disabled = false;
+            document.getElementById("option-board-type-pico2").disabled = false;
           }
 
           var riscv = document.getElementById("sel-riscv").checked;
@@ -495,9 +495,9 @@ var isPicoWireless = false;
 
           if (selectedIndex !== -1) {
             toolchainSelector.selectedIndex = selectedIndex;
-            console.debug("Updated selected toolchain with new default value", toolchainSelector.options[selectedIndex].value);
+            console.debug("[raspberry-pi-pico] Updated selected toolchain with new default value", toolchainSelector.options[selectedIndex].value);
           } else {
-            console.error("Could not find default toolchain version in versionBundle response!");
+            console.error("[raspberry-pi-pico] Could not find default toolchain version in versionBundle response!");
           }
         }
 
@@ -507,9 +507,9 @@ var isPicoWireless = false;
 
           if (selectedIndex !== -1) {
             picotoolSelector.selectedIndex = selectedIndex;
-            console.debug("Updated selected picotool with new default value", picotoolSelector.options[selectedIndex].value);
+            console.debug("[raspberry-pi-pico] Updated selected picotool with new default value", picotoolSelector.options[selectedIndex].value);
           } else {
-            console.error("Could not find default picotool version in versionBundle response!");
+            console.error("[raspberry-pi-pico] Could not find default picotool version in versionBundle response!");
           }
         }
 
@@ -612,6 +612,13 @@ var isPicoWireless = false;
           navItemOnClick('nav-basic');
         }
 
+        const createFromExampleBtn = document.getElementById('btn-create-from-example');
+        const isExampleMode = createFromExampleBtn ? createFromExampleBtn.getAttribute('data-example-mode') === 'true' : true;
+        console.log("isExampleMode", isExampleMode);
+        if (isExampleMode) {
+          return;
+        }
+
         // hide pico wireless nav item
         document.getElementById('nav-pico-wireless').classList.toggle('hidden', !isPicoWireless);
         // hide pico wireless section
@@ -629,7 +636,9 @@ var isPicoWireless = false;
           command: CMD_VERSION_BUNDLE_AVAILABLE_TEST,
           value: sdkVersion.replace("v", "")
         });
-      } catch { }
+      } catch (error) {
+        console.error("[raspberry-pi-pico - new pico project] Error while changing board type", error);
+      }
     });
   }
   document.getElementById('sel-pico-sdk').addEventListener('change', function () {
@@ -653,21 +662,22 @@ var isPicoWireless = false;
       return;
     }
     const projName = document.getElementById('inp-project-name').value;
-    console.log(`${projName} is now`);
+
     if (!(Object.keys(examples).includes(projName))) {
       return;
     }
-    console.log(`${projName} is an example`);
+    console.debug("[raspberry-pi-pico - new pico project form example] Example selected:" + projName);
+
     // update available boards
     const example = examples[projName];
     const boards = example.boards;
     for (const board of boards) {
-      console.log(`${projName} supports ${board}`);
+      console.debug(`[raspberry-pi-pico - new pico project from example] Example ${projName} supports ${board}`);
     }
-    const board_sels = document.querySelectorAll('[id^="sel-pico"]')
+    const board_sels = document.querySelectorAll('[id^="option-board-type-"]');
     board_sels.forEach(e => { e.disabled = true });
     for (const board of boards) {
-      document.getElementById(`sel-${board}`).disabled = false;
+      document.getElementById(`option-board-type-${board}`).disabled = false;
     }
     const boardTypeSelector = document.getElementById('sel-board-type');
 

diff --git a/web/nav.js b/web/nav.js
@@ -342,11 +342,11 @@ window.onload = function () {
     }
   }
 
-  // TODO: maybe can remove if sel-pico2 disable is moved into state restore
+  // TODO: maybe can remove if option-board-type-pico2 disable is moved into state restore
   const sdkSelector = document.getElementById('sel-pico-sdk');
   if (sdkSelector) {
     if (parseInt(sdkSelector.value.split(".")[0]) < 2) {
-      const selPico2 = document.getElementById('sel-pico2');
+      const selPico2 = document.getElementById('option-board-type-pico2');
       if (selPico2) {
         selPico2.disabled = true;
       }