MicrocontrollerCD/UpdaterApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic layout and navigation

Browse Source
This commit is contained in:
chopster44
2025-10-14 18:22:08 +01:00
parent b853f9105d
commit f9cb8bcf24
12 changed files with 343 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
android/.idea/deploymentTargetSelector.xml generated
View File

@@ -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>

1
android/.idea/misc.xml generated
View File

@@ -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">

2
android/build.gradle
View File

@@ -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

2
android/gradle/wrapper/gradle-wrapper.properties vendored
View File

@@ -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

2
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

85
src/components/ArchiveCard.vue Normal file
View File

@@ -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>

61
src/components/DetailsCard.vue Normal file
View File

@@ -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>

41
src/components/FlashCard.vue Normal file
View File

@@ -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>

48
src/components/HomeCard.vue Normal file
View File

@@ -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>

68
src/components/ScanCard.vue Normal file
View File

@@ -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>

60
src/views/HomePage.vue
View File

@@ -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>