Skip to content

Commit fd458bd

Browse files
Gabyyieva-cosma
Gabyyi
authored and
eva-cosma
committed
feat: Added Device Manager
Signed-off-by: Gabyyi <ionut.pruteanu2308@stud.fils.upb.com>
1 parent 70d8de4 commit fd458bd

5 files changed

Lines changed: 110 additions & 3 deletions

File tree

‎tock-ui/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Tauri + Vue + Typescript App</title>
7+
<title>TockUI</title>
88
</head>
99

1010
<body>

‎tock-ui/src/components/Terminal.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup>
2+
import Card from '../components/Card.vue';
3+
</script>
4+
5+
<template>
6+
<Card class="mb-4 relative h-full flex flex-col" style="background-color: #84A1C4">
7+
<div class="absolute top-0 left-0 w-full bg-[#607B9B] text-white text-xl px-4 py-1 rounded-t-2xl flex items-center justify-center">
8+
<span>Terminal</span>
9+
</div>
10+
<div class="mt-10 flex-1 overflow-hidden" @wheel.prevent.stop>
11+
<!-- terminal output goes here; clipped if too large to prevent internal scroll -->
12+
<div class="h-full w-full text-white">
13+
<!-- ...existing code... -->
14+
<p>Welcome to the Terminal</p>
15+
<p>Type 'help' to see available commands.</p>
16+
<p>tock-ui:~ admin$</p>
17+
</div>
18+
</div>
19+
</Card>
20+
</template>

‎tock-ui/src/router/router.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import KnownBoardView from '../views/KnownBoardView.vue'
44
import CustomizeDebugView from '../views/CustomizeDebugView.vue'
55
import CustomizeSerialView from '../views/CustomizeSerialView.vue'
66
import DeviceManagerView from '../views/DeviceManagerView.vue'
7+
import AddAppView from '../views/AddAppView.vue'
78

89
const routes = [
910
{
@@ -31,6 +32,11 @@ const routes = [
3132
name: 'DeviceManager',
3233
component: DeviceManagerView
3334
},
35+
{
36+
path: '/add-app',
37+
name: 'AddApp',
38+
component: AddAppView
39+
},
3440
]
3541

3642
const router = createRouter({

‎tock-ui/src/views/AddAppView.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script setup>
2+
import Card from '../components/Card.vue';
3+
</script>
4+
5+
<template>
6+
<Card class="relative items-center justify-center text-center mt-10 w-3/4 max-w-4xl mx-auto p-20 min-h-80">
7+
<!-- corner outlines (L-shaped) -->
8+
<div class="absolute top-3 left-3 w-8 h-8 border-t-4 border-l-4 border-gray-300 rounded-tl-md pointer-events-none" aria-hidden="true"></div>
9+
<div class="absolute top-3 right-3 w-8 h-8 border-t-4 border-r-4 border-gray-300 rounded-tr-md pointer-events-none" aria-hidden="true"></div>
10+
<div class="absolute bottom-3 left-3 w-8 h-8 border-b-4 border-l-4 border-gray-300 rounded-bl-md pointer-events-none" aria-hidden="true"></div>
11+
<div class="absolute bottom-3 right-3 w-8 h-8 border-b-4 border-r-4 border-gray-300 rounded-br-md pointer-events-none" aria-hidden="true"></div>
12+
13+
<!-- plus inside rounded square -->
14+
<div class="mb-4 mt-16">
15+
<span class="inline-flex items-center justify-center w-14 h-14 rounded-lg bg-white text-black border-2 border-black">
16+
<span class="pi pi-plus text-2xl" aria-hidden="true"></span>
17+
</span>
18+
</div>
19+
20+
<h3 class="text-xl font-medium mb-1">Drag files here to install them on your board</h3>
21+
<p class="mb-5">Or click here to browse</p>
22+
</Card>
23+
24+
<Card class="w-3/4 max-w-4xl mx-auto mt-6 p-4">
25+
<div class="flex items-center justify-between">
26+
<span class="text-lg font-medium">App2.tbf</span>
27+
<button class="text-gray-600 hover:text-red-600" aria-label="Remove App2.tbf">
28+
<span class="pi pi-times text-xl" aria-hidden="true"></span>
29+
</button>
30+
</div>
31+
</Card>
32+
<Card class="w-3/4 max-w-4xl mx-auto mt-6 p-4">
33+
<div class="flex items-center justify-between">
34+
<span class="text-lg font-medium">App2.tbf</span>
35+
<button class="text-gray-600 hover:text-red-600" aria-label="Remove App2.tbf">
36+
<span class="pi pi-times text-xl" aria-hidden="true"></span>
37+
</button>
38+
</div>
39+
</Card>
40+
<Card class="w-3/4 max-w-4xl mx-auto mt-6 p-4">
41+
<div class="flex items-center justify-between">
42+
<span class="text-lg font-medium">App2.tbf</span>
43+
<button class="text-gray-600 hover:text-red-600" aria-label="Remove App2.tbf">
44+
<span class="pi pi-times text-xl" aria-hidden="true"></span>
45+
</button>
46+
</div>
47+
</Card>
48+
49+
<!-- Install button fixed at bottom center -->
50+
<RouterLink to="/device-manager">
51+
<div class="fixed inset-x-0 bottom-6 flex justify-center pointer-events-none">
52+
<button class="pointer-events-auto bg-[#84A1C4] hover:bg-[#6B8DA4] text-white py-2 px-12 rounded-full shadow-lg min-w-[180px]" aria-label="Install selected apps">
53+
Install
54+
</button>
55+
</div>
56+
</RouterLink>
57+
</template>
58+

‎tock-ui/src/views/DeviceManagerView.vue‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
<script setup>
2+
import { defineEmits } from 'vue';
23
import Card from '../components/Card.vue';
34
import AppIcon from '../components/AppIcon.vue';
5+
import Terminal from '../components/Terminal.vue';
6+
7+
const emit = defineEmits(['reset-connection']);
8+
9+
function resetConnection() {
10+
// safe default: emit an event so parent can handle actual reset logic
11+
emit('reset-connection');
12+
}
413
</script>
514

615

@@ -17,7 +26,7 @@ import AppIcon from '../components/AppIcon.vue';
1726
<div class="absolute top-0 left-0 w-full bg-[#607B9B] text-white text-xl px-4 py-1 rounded-t-2xl flex items-center justify-center">
1827
<span>Installed Apps</span>
1928
</div>
20-
<RouterLink to="/">
29+
<RouterLink to="/add-app">
2130
<button aria-label="Add" class="absolute top-0 right-0 h-9 px-3 bg-[#84A1C4] text-white rounded-tr-2xl flex items-center justify-center z-10 shadow-md">
2231
<i class="pi pi-file-plus text-lg"></i>
2332
</button>
@@ -30,7 +39,21 @@ import AppIcon from '../components/AppIcon.vue';
3039
</Card>
3140
</div>
3241
<!-- Right column left empty to reserve the right half -->
33-
<div class="hidden md:block md:w-[48%] ml-4">
42+
<div class="hidden md:flex md:flex-col md:w-1/2 ml-4 h-full">
43+
<!-- Top half: paragraphs, scrollable if overflow -->
44+
<div class="h-[40%] overflow-auto p-4 relative">
45+
<RouterLink to="/">
46+
<button @click="resetConnection" class="absolute top-2 right-2 text-lg bg-[#84A1C4] text-white px-3 py-2 rounded-xl shadow-xl hover:bg-[#607B9B]">
47+
Reset connection
48+
</button>
49+
</RouterLink>
50+
<p class="mb-2">Product: BBC micro:bit CMSIS-DAP</p>
51+
<p class="mb-2">Serial Number: 5738946523759834256986908476543698436984</p>
52+
</div>
53+
<!-- Bottom half: terminal area, scrollable -->
54+
<div class="h-[60%] overflow-auto mt-4">
55+
<Terminal />
56+
</div>
3457
</div>
3558
</div>
3659
</div>

0 commit comments

Comments
 (0)