From f9cb8bcf247a8e4f600fbf7711688258d1ef37cf Mon Sep 17 00:00:00 2001
From: chopster44 <oscar@chopster44.com>
Date: Tue, 14 Oct 2025 18:22:08 +0100
Subject: [PATCH] Basic layout and navigation

---
 android/.idea/deploymentTargetSelector.xml    |  4 +-
 android/.idea/misc.xml                        |  1 -
 android/build.gradle                          |  2 +-
 .../gradle/wrapper/gradle-wrapper.properties  |  2 +-
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 src/components/ArchiveCard.vue                | 85 +++++++++++++++++++
 src/components/DetailsCard.vue                | 61 +++++++++++++
 src/components/FlashCard.vue                  | 41 +++++++++
 src/components/HomeCard.vue                   | 48 +++++++++++
 src/components/ScanCard.vue                   | 68 +++++++++++++++
 src/views/HomePage.vue                        | 60 +++++++------
 12 files changed, 343 insertions(+), 33 deletions(-)
 create mode 100644 src/components/ArchiveCard.vue
 create mode 100644 src/components/DetailsCard.vue
 create mode 100644 src/components/FlashCard.vue
 create mode 100644 src/components/HomeCard.vue
 create mode 100644 src/components/ScanCard.vue

diff --git a/android/.idea/deploymentTargetSelector.xml b/android/.idea/deploymentTargetSelector.xml
index 7759354..f0ede7b 100644
--- a/android/.idea/deploymentTargetSelector.xml
+++ b/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>
diff --git a/android/.idea/misc.xml b/android/.idea/misc.xml
index 74dd639..b2c751a 100644
--- a/android/.idea/misc.xml
+++ b/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">
diff --git a/android/build.gradle b/android/build.gradle
index f1b3b0e..64aadf6 100644
--- a/android/build.gradle
+++ b/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
diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties
index c1d5e01..ed4c299 100644
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 94b2afb..cbc52c5 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 60e24ba..e8839bb 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/ArchiveCard.vue b/src/components/ArchiveCard.vue
new file mode 100644
index 0000000..bde318b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/DetailsCard.vue b/src/components/DetailsCard.vue
new file mode 100644
index 0000000..b9020f1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/FlashCard.vue b/src/components/FlashCard.vue
new file mode 100644
index 0000000..6401065
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/HomeCard.vue b/src/components/HomeCard.vue
new file mode 100644
index 0000000..f4b28f0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/ScanCard.vue b/src/components/ScanCard.vue
new file mode 100644
index 0000000..1d239b0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 29d51ce..e530d7c 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -13,27 +13,45 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-card>
-        <ion-card-header class="two-column">
-          <div class="header-column">
-            <ion-card-title>Board</ion-card-title>
-            <ion-card-subtitle>v1.1.1</ion-card-subtitle>
-          </div>
-          <div>
-            <ion-button>Scan</ion-button>
-          </div>
-        </ion-card-header>
-
-        <ion-card-content>
-          blah blah blah
-        </ion-card-content>
-      </ion-card>
+      <home-card v-if="shownCard == 1" @archive="showArchive" @disconnect="showScan" @update="showDetails"></home-card>
+      <scan-card v-else-if="shownCard == 0" @connect="showHome"></scan-card>
+      <details-card v-else-if="shownCard == 2" @back="showHome" @choose="showFlash"></details-card>
+      <archive-card v-else-if="shownCard == 3" @back="showHome" @details="showDetails"></archive-card>
+      <flash-card v-else-if="shownCard == 4" @back="showHome"></flash-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>