Basic layout and navigation

android/.idea/deploymentTargetSelector.xml

@@ -4,10 +4,10 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2025-10-13T16:05:33.805388384Z">
+        <DropdownSelection timestamp="2025-10-14T17:00:16.525383985Z">
           <Target type="DEFAULT_BOOT">
             <handle>
-              <DeviceId pluginId="PhysicalDevice" identifier="serial=51021JEKB04011" />
+              <DeviceId pluginId="LocalEmulator" identifier="path=/home/chptr/.android/avd/Medium_Phone.avd" />
             </handle>
           </Target>
         </DropdownSelection>

android/.idea/misc.xml

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
   <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK">

android/build.gradle

@@ -7,7 +7,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.7.2'
+        classpath 'com.android.tools.build:gradle:8.13.0'
         classpath 'com.google.gms:google-services:4.4.2'
 
         // NOTE: Do not place your application dependencies here; they belong

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

package-lock.json

@@ -8,7 +8,7 @@
       "name": "UpdaterApp",
       "version": "0.0.1",
       "dependencies": {
-        "@capacitor/android": "7.4.3",
+        "@capacitor/android": "^7.4.3",
         "@capacitor/app": "7.1.0",
         "@capacitor/core": "7.4.3",
         "@capacitor/haptics": "7.0.2",

package.json

@@ -12,7 +12,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@capacitor/android": "7.4.3",
+    "@capacitor/android": "^7.4.3",
     "@capacitor/app": "7.1.0",
     "@capacitor/core": "7.4.3",
     "@capacitor/haptics": "7.0.2",

src/components/ArchiveCard.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonIcon,
+  IonNote,
+IonLabel, IonItem,
+    IonList
+} from "@ionic/vue";
+import {chevronForward} from "ionicons/icons";
+
+const emit = defineEmits<{(e: "back"): void, (e: "disconnect"): void, (e: "details"):void}>();
+
+const back = () => {
+  emit("back");
+}
+
+const disconnect = () => {
+  emit("disconnect");
+};
+
+const details = () => {
+  emit("details");
+}
+
+</script>
+
+<template>
+  <ion-card>
+    <ion-card-header class="two-column">
+      <div class="header-column">
+        <ion-card-title>ARCHIVE</ion-card-title>
+        <ion-card-title>Board</ion-card-title>
+        <ion-card-subtitle>v1.1.1</ion-card-subtitle>
+      </div>
+      <div style="flex-grow: 1"></div>
+      <div>
+        <ion-button @click="disconnect">Disconnect</ion-button>
+      </div>
+    </ion-card-header>
+
+    <ion-card-content>
+      <ion-button @click="back">Back</ion-button>
+      <ion-list lines="full" class="item-scroll">
+        <ion-item :button="true" v-for="i in 10" :key="i" @click="details">
+          <ion-label>
+            <strong>v{{i}}</strong> <br>
+            <ion-note>date</ion-note>
+          </ion-label>
+          <div slot="end" class="metadata-end-wrapper">
+            <ion-icon color="medium" :icon="chevronForward"></ion-icon>
+          </div>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<style scoped>
+.two-column {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.item-scroll {
+  max-height: 200px;
+  overflow: scroll;
+}
+.metadata-end-wrapper {
+  position: absolute;
+
+  top: 10px;
+  inset-inline-end: 10px;
+
+  font-size: 0.8rem;
+
+  display: flex;
+  align-items: center;
+}
+</style>

src/components/DetailsCard.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+} from "@ionic/vue";
+
+const emit = defineEmits<{(e:"back"):void, (e: "disconnect"): void, (e:"choose"): void}>();
+
+const back = () => {
+  emit("back");
+}
+
+const disconnect = () => {
+  emit("disconnect");
+};
+
+const choose = () => {
+  emit("choose");
+};
+
+</script>
+
+<template>
+  <ion-card>
+    <ion-card-header class="two-column">
+      <div>
+        <ion-card-title>DETAILS</ion-card-title>
+        <ion-card-title>Board</ion-card-title>
+        <ion-card-subtitle>v1.1.1</ion-card-subtitle>
+      </div>
+      <div style="flex-grow: 1"></div>
+      <div>
+        <ion-button @click="disconnect">Disconnect</ion-button>
+      </div>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>Update Name</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          <p>Some blurb about the update</p>
+          <ion-button @click="choose">Select</ion-button>
+          <ion-button @click="back">Cancel</ion-button>
+        </ion-card-content>
+      </ion-card>
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<style scoped>
+.two-column {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+</style>

src/components/FlashCard.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+
+import {IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle} from "@ionic/vue";
+
+const emit = defineEmits<{(e:"back"):void}>();
+
+const back = () => {
+  emit("back");
+}
+</script>
+
+<template>
+  <ion-card>
+    <ion-card-header class="two-column">
+      <div class="header-column">
+        <ion-card-title>FLASH</ion-card-title>
+        <ion-card-title>Board</ion-card-title>
+        <ion-card-subtitle>v1.1.1</ion-card-subtitle>
+      </div>
+<!--      <div style="flex-grow: 1"></div>-->
+<!--      <div>-->
+<!--        <ion-button>Disconnect</ion-button>-->
+<!--      </div>-->
+    </ion-card-header>
+
+    <ion-card-content>
+      <p>v1.1.1 -> v1.1.2</p> <br>
+      <ion-button>Flash</ion-button>
+
+      <ion-button @click="back">Cancel</ion-button>
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<style scoped>
+.two-column {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+</style>

src/components/HomeCard.vue

@@ -0,0 +1,48 @@
+<template>
+  <ion-card>
+    <ion-card-header class="two-column">
+      <div class="header-column">
+        <ion-card-title>HOME</ion-card-title>
+        <ion-card-title>Board</ion-card-title>
+        <ion-card-subtitle>v1.1.1</ion-card-subtitle>
+      </div>
+      <div style="flex-grow: 1"></div>
+      <div>
+        <ion-button @click="disconnect">Disconnect</ion-button>
+      </div>
+    </ion-card-header>
+
+    <ion-card-content>
+      <ion-button @click="update">Update</ion-button>
+      <br>
+      <ion-button @click="archive">View older versions</ion-button>
+    </ion-card-content>
+  </ion-card>
+</template>
+<script setup lang="ts">
+import {IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle} from "@ionic/vue";
+
+const emit = defineEmits<{(e: 'update'): void, (e: 'archive'): void, (e: "disconnect"): void}>();
+
+const update = () => {
+  emit("update");
+};
+
+const archive = () => {
+  emit("archive");
+};
+
+const disconnect = () => {
+  emit("disconnect");
+};
+
+</script>
+
+<style scoped>
+
+.two-column {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+</style>

src/components/ScanCard.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import {IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonButton, IonIcon, IonNote,  IonLabel, IonItem, IonList
+} from '@ionic/vue';
+import { chevronForward } from 'ionicons/icons';
+
+const emit = defineEmits<{(e: "connect"):void}>();
+
+const connect = () => {
+  emit("connect");
+}
+</script>
+
+<template>
+  <ion-card>
+    <ion-card-header class="two-column">
+      <div class="header-column">
+        <ion-card-title>SCAN</ion-card-title>
+        <ion-card-title>Board</ion-card-title>
+        <ion-card-subtitle>v1.1.1</ion-card-subtitle>
+      </div>
+      <div style="flex-grow: 1"></div>
+      <div>
+        <ion-button>Scan</ion-button>
+      </div>
+    </ion-card-header>
+
+    <ion-card-content class="item-scroll">
+    <ion-list lines="full" :inset="true">
+      <ion-item button v-for="i in 10" :key="i" @click="connect">
+        <ion-label>
+          <strong>Device {{i}}</strong> <br>
+          <ion-note>EA-EA-EA-EA-EA</ion-note>
+        </ion-label>
+        <div slot="end" class="metadata-end-wrapper">
+          <ion-note>{{(i*Math.random()).toFixed(2)}}dB</ion-note>
+          <ion-icon color="medium" :icon="chevronForward"></ion-icon>
+        </div>
+      </ion-item>
+    </ion-list>
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<style scoped>
+
+.two-column {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.item-scroll {
+  max-height: 200px;
+  overflow: scroll;
+}
+
+.metadata-end-wrapper {
+  position: absolute;
+
+  top: 10px;
+  inset-inline-end: 10px;
+
+  font-size: 0.8rem;
+
+  display: flex;
+  align-items: center;
+}
+</style>

src/views/HomePage.vue

@@ -13,27 +13,45 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-card>
+      <home-card v-if="shownCard == 1" @archive="showArchive" @disconnect="showScan" @update="showDetails"></home-card>
-        <ion-card-header class="two-column">
+      <scan-card v-else-if="shownCard == 0" @connect="showHome"></scan-card>
-          <div class="header-column">
+      <details-card v-else-if="shownCard == 2" @back="showHome" @choose="showFlash"></details-card>
-            <ion-card-title>Board</ion-card-title>
+      <archive-card v-else-if="shownCard == 3" @back="showHome" @details="showDetails"></archive-card>
-            <ion-card-subtitle>v1.1.1</ion-card-subtitle>
+      <flash-card v-else-if="shownCard == 4" @back="showHome"></flash-card>
-          </div>
-          <div>
-            <ion-button>Scan</ion-button>
-          </div>
-        </ion-card-header>
-
-        <ion-card-content>
-          blah blah blah
-        </ion-card-content>
-      </ion-card>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonButton } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import HomeCard from "@/components/HomeCard.vue";
+import ScanCard from "@/components/ScanCard.vue";
+import DetailsCard from "@/components/DetailsCard.vue";
+import ArchiveCard from "@/components/ArchiveCard.vue";
+import FlashCard from "@/components/FlashCard.vue";
+import {ref} from "vue";
+
+const shownCard = ref<number>(0);
+
+const showArchive = () => {
+  shownCard.value = 3;
+}
+
+const showHome = () => {
+  shownCard.value = 1;
+}
+
+const showDetails = () => {
+  shownCard.value = 2;
+}
+
+const showFlash = () => {
+  shownCard.value = 4;
+}
+
+const showScan = () => {
+  shownCard.value = 0;
+}
 </script>
 
 <style scoped>
@@ -65,14 +83,4 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardC
   text-decoration: none;
 }
 
-.two-column {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-content: flex-start;
-}
-
-.header-column {
-  width: 75%;
-}
 </style>