From d6194b8c54a13742cc74262b4c2fb59913ecfe8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Diana=20Mart=C3=ADnez?= <diananerdoficial@gmail.com>
Date: Mon, 10 Jul 2023 21:50:13 -0600
Subject: [PATCH 1/2] Add select board step

---
 src/libs/esptoolv2/index.js        | 24 +++++++++++++
 src/router/index.js                |  5 +++
 src/views/FirmwareUploadedView.vue |  2 +-
 src/views/SelectActionView.vue     |  9 ++++-
 src/views/SelectBoardView.vue      | 57 ++++++++++++++++++++++++++++++
 5 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 src/views/SelectBoardView.vue

diff --git a/src/libs/esptoolv2/index.js b/src/libs/esptoolv2/index.js
index c55ecb7..ff9af41 100644
--- a/src/libs/esptoolv2/index.js
+++ b/src/libs/esptoolv2/index.js
@@ -2,6 +2,7 @@ import { ref, reactive, computed, watch } from 'vue'
 import { ESPLoader, Transport } from 'esptool-js'
 
 const firmwareUrl = import.meta.env.VITE_FIRMWARE_URL
+const boardsUrl = import.meta.env.VITE_BOARDS_URL
 let firmwareVersion = ref('')
 let devices = ref([])
 let device = ref(null)
@@ -155,6 +156,14 @@ export function useEsptool() {
     reader.readAsBinaryString(fileBlob)
   }
 
+  const getBoardConfigs = async () => {
+    return fetch(boardsUrl, {
+      headers: {
+        'Cache-Control': 'no-cache'
+      }
+    }).then((res) => res.json())
+  }
+
   const setDevices = async (ports) => {
     console.log('setDevices', ports)
     devices.value = ports
@@ -346,6 +355,19 @@ export function useEsptool() {
     // startSerial()
   }
 
+  const toBoardCommand = (config) => {
+    return Object.keys(config).reduce((command, key) => {
+        const value = typeof config[key] === 'number' ? config[key] : `"${config[key]}"`
+        return command += ` -${key} ${value}`
+    }, 'board')
+  }
+
+  const setBoardConfig = (config) => {
+    const command = toBoardCommand(config)
+    writeSerial(command)
+    setTimeout(() => reset(), 1500)
+  }
+
   const findNetworks = () => {
     findNetworksTask = setInterval(() => {
       writeSerial('networks')
@@ -403,6 +425,8 @@ export function useEsptool() {
     stopSerialTask,
     disconnect,
     writeSerial,
+    getBoardConfigs,
+    setBoardConfig,
     findNetworks,
     join,
     stopJoin,
diff --git a/src/router/index.js b/src/router/index.js
index 81652c6..11e5c5c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,11 @@ const router = createRouter({
       name: 'start',
       component: () => import('../views/StartView.vue')
     },
+    {
+      path: '/select-board',
+      name: 'select-board',
+      component: () => import('../views/SelectBoardView.vue')
+    },
     {
       path: '/select-device',
       name: 'select-device',
diff --git a/src/views/FirmwareUploadedView.vue b/src/views/FirmwareUploadedView.vue
index a98af11..701a76b 100644
--- a/src/views/FirmwareUploadedView.vue
+++ b/src/views/FirmwareUploadedView.vue
@@ -3,7 +3,7 @@
     <p>Se actualizó el firmware correctamente, ahora es necesario configurar la conexión a internet.</p>
     <div class="flex">
         <img class="icon" src="@/assets/success.svg" alt="success" />
-        <RouterLink class="btn" to="/setup-connection">Configurar conexión</RouterLink>
+        <RouterLink class="btn" to="/select-board">Configurar hardware</RouterLink>
     </div>
     </template>
 
diff --git a/src/views/SelectActionView.vue b/src/views/SelectActionView.vue
index 4791248..d1ed2eb 100644
--- a/src/views/SelectActionView.vue
+++ b/src/views/SelectActionView.vue
@@ -3,10 +3,17 @@
     <p>Actualiza el firmware o ve directamente a la configuración de red.</p>
     <div class="flex">
         <RouterLink class="btn" to="/upload-firmware">Actualizar firmware</RouterLink>
-        <RouterLink to="/setup-connection">Configurar conexión</RouterLink>
+        <RouterLink class="link" to="/select-board">Configurar hardware</RouterLink>
+        <RouterLink class="link" to="/setup-connection">Configurar conexión</RouterLink>
     </div>
 </template>
 
+<style scoped>
+.link {
+    margin: 4px 0;
+}
+</style>
+
 <script setup>
 import { RouterLink } from 'vue-router'
 </script>
\ No newline at end of file
diff --git a/src/views/SelectBoardView.vue b/src/views/SelectBoardView.vue
new file mode 100644
index 0000000..d510a49
--- /dev/null
+++ b/src/views/SelectBoardView.vue
@@ -0,0 +1,57 @@
+<template>
+    <form class="flex" @submit.prevent="select">
+        <div v-if="boardConfigs.list.length">
+            <h2>Seleccionar tarjeta </h2>
+            <p>Selecciona el modelo de tu tarjeta de desarrollo.</p>
+            <select v-model="boardConfigs.board">
+                <option v-for="n in boardConfigs.list" :key="n" :value="n.name">
+                    {{ n.name }}
+                </option>
+            </select>
+            <div class="flex">
+                <!-- <input type="checkbox" v-model="customConfig" /> -->
+                <label v-if="customConfig">
+                    <span>Configuración manual</span>
+                </label>
+                <button>Continuar</button>
+            </div>
+        </div>
+        <div class="flex" v-else>
+            <img class="loader" src="@/assets/loading.svg" alt="loading" />
+            <p class="status">Cargando tarjetas</p>
+        </div>
+    </form>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useEsptool } from '@/libs/esptoolv2'
+
+const router = useRouter()
+
+const customConfig = ref(false)
+
+const boardConfigs = reactive({
+    list: [],
+    board: null
+})
+
+const {
+  getBoardConfigs,
+  setBoardConfig
+} = useEsptool()
+
+watch(() => boardConfigs.board, (config) => {
+    setBoardConfig(config)
+})
+
+const select = () => {
+    console.log('selected board', boardConfigs.board)
+    router.push('/setup-connection')
+}
+
+onMounted(async () => {
+    boardConfigs.list = await getBoardConfigs()
+})
+</script>

From 9611c97ce4fbea081c3dd1c2f0bbc7d0740ea7e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Diana=20Mart=C3=ADnez?= <diananerdoficial@gmail.com>
Date: Mon, 10 Jul 2023 22:36:04 -0600
Subject: [PATCH 2/2] Use double hypen for board command args

---
 src/libs/esptoolv2/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/esptoolv2/index.js b/src/libs/esptoolv2/index.js
index ff9af41..083f692 100644
--- a/src/libs/esptoolv2/index.js
+++ b/src/libs/esptoolv2/index.js
@@ -358,7 +358,7 @@ export function useEsptool() {
   const toBoardCommand = (config) => {
     return Object.keys(config).reduce((command, key) => {
         const value = typeof config[key] === 'number' ? config[key] : `"${config[key]}"`
-        return command += ` -${key} ${value}`
+        return command += ` --${key} ${value}`
     }, 'board')
   }