Add support to multiple boards

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,

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',

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>
 

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>

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>