Better back functionality

src/components/HomeCard.vue

@@ -16,13 +16,15 @@
       <ion-button @click="update">Update</ion-button>
       <br>
       <ion-button @click="archive">View older versions</ion-button>
+      <br>
+      <ion-button @click="settings">Settings</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 emit = defineEmits<{(e: 'update'): void, (e: 'archive'): void, (e: "disconnect"): void, (e: "settings"): void}>();
 
 const update = () => {
   emit("update");
@@ -36,6 +38,10 @@ const disconnect = () => {
   emit("disconnect");
 };
 
+const settings = () => {
+  emit("settings")
+}
+
 </script>
 
 <style scoped>
@@ -45,4 +51,4 @@ const disconnect = () => {
   flex-direction: row;
   flex-wrap: wrap;
 }
-</style>
+</style>

src/components/SettingsCard.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+
+import {IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonInput} from "@ionic/vue";
+
+const emit = defineEmits<{(e: "disconnect"): void, (e: "back"): void}>();
+
+const disconnect = () => {
+  emit("disconnect")
+}
+
+const back = () => {
+  emit("back")
+}
+</script>
+
+<template>
+  <ion-card>
+    <ion-card-header class="two-column">
+      <div class="header-column">
+        <ion-card-title>SETTINGS</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-input label="Source" placeholder="https://git.example.com/user/repo"></ion-input>
+      <ion-button>Set source</ion-button>
+      <br>
+      <ion-button @click="back">Back</ion-button>
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<style scoped>
+
+.two-column {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+</style>

src/views/HomePage.vue

@@ -13,11 +13,12 @@
         </ion-toolbar>
       </ion-header>
 
-      <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>
+      <home-card v-if="shownCard == 1" @archive="showArchive" @disconnect="showScan" @update="showDetails" @settings="showSettings"></home-card>
+      <scan-card v-else-if="shownCard == 0" @connect="goHome"></scan-card>
+      <details-card v-else-if="shownCard == 2" @back="goBack" @choose="showFlash"></details-card>
+      <archive-card v-else-if="shownCard == 3" @back="goBack" @details="showDetails"></archive-card>
+      <flash-card v-else-if="shownCard == 4" @back="goBack"></flash-card>
+      <settings-card v-else-if="shownCard == 5" @back="goBack"></settings-card>
     </ion-content>
   </ion-page>
 </template>
@@ -30,28 +31,45 @@ import DetailsCard from "@/components/DetailsCard.vue";
 import ArchiveCard from "@/components/ArchiveCard.vue";
 import FlashCard from "@/components/FlashCard.vue";
 import {ref} from "vue";
+import SettingsCard from "@/components/SettingsCard.vue";
 
+let prevCard = 0;
 const shownCard = ref<number>(0);
 
 const showArchive = () => {
+  prevCard = shownCard.value;
   shownCard.value = 3;
 }
 
-const showHome = () => {
-  shownCard.value = 1;
+const goBack = () => {
+  shownCard.value = prevCard;
+  prevCard = 0;
 }
 
 const showDetails = () => {
+  prevCard = shownCard.value;
   shownCard.value = 2;
 }
 
 const showFlash = () => {
+  prevCard = shownCard.value;
   shownCard.value = 4;
 }
 
 const showScan = () => {
+  prevCard = shownCard.value;
   shownCard.value = 0;
 }
+
+const goHome = () => {
+  prevCard = shownCard.value;
+  shownCard.value = 1;
+}
+
+const showSettings = () => {
+  prevCard = shownCard.value;
+  shownCard.value = 5;
+}
 </script>
 
 <style scoped>