Skip to content

Commit 1e59e0a

Browse files
patrickelectricpatrickelectric
committed
wip
Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>
1 parent b9c103c commit 1e59e0a

File tree

2 files changed

+229
-121
lines changed

2 files changed

+229
-121
lines changed

‎core/frontend/src/components/wifi/HotspotInfoCard.vue‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<template>
2+
<v-card-text class="text-center pa-6">
3+
<!-- Animated hotspot icon -->
4+
<div class="hotspot-icon-container mb-4">
5+
<v-icon
6+
size="80"
7+
color="primary"
8+
class="hotspot-icon"
9+
>
10+
mdi-access-point
11+
</v-icon>
12+
<div class="hotspot-pulse" />
13+
</div>
14+
15+
<div class="text-h5 font-weight-bold primary--text mb-1">
16+
Hotspot Active
17+
</div>
18+
19+
<!-- QR Code -->
20+
<v-card
21+
v-if="qrCodeImg"
22+
class="mx-auto mb-4 pa-3"
23+
max-width="220"
24+
elevation="2"
25+
rounded="lg"
26+
>
27+
<img
28+
:src="qrCodeImg"
29+
alt="WiFi QR Code"
30+
class="qr-code-img"
31+
>
32+
<div class="text-caption grey--text mt-2">
33+
Scan to connect
34+
</div>
35+
</v-card>
36+
37+
<!-- Credentials -->
38+
<v-card
39+
class="mx-auto credentials-card"
40+
max-width="300"
41+
outlined
42+
rounded="lg"
43+
>
44+
<v-list
45+
dense
46+
class="py-0"
47+
>
48+
<v-list-item v-if="ssid">
49+
<v-list-item-icon class="mr-3">
50+
<v-icon color="primary">
51+
mdi-wifi
52+
</v-icon>
53+
</v-list-item-icon>
54+
<v-list-item-content>
55+
<v-list-item-subtitle>Network Name</v-list-item-subtitle>
56+
<v-list-item-title class="font-weight-medium">
57+
{{ ssid }}
58+
</v-list-item-title>
59+
</v-list-item-content>
60+
</v-list-item>
61+
<v-divider />
62+
<v-list-item v-if="password">
63+
<v-list-item-icon class="mr-3">
64+
<v-icon color="primary">
65+
mdi-key
66+
</v-icon>
67+
</v-list-item-icon>
68+
<v-list-item-content>
69+
<v-list-item-subtitle>Password</v-list-item-subtitle>
70+
<v-list-item-title class="font-weight-medium">
71+
{{ password }}
72+
</v-list-item-title>
73+
</v-list-item-content>
74+
</v-list-item>
75+
</v-list>
76+
</v-card>
77+
</v-card-text>
78+
</template>
79+
80+
<script lang="ts">
81+
import Vue from 'vue'
82+
83+
export default Vue.extend({
84+
name: 'HotspotInfoCard',
85+
props: {
86+
ssid: {
87+
type: String,
88+
default: null,
89+
},
90+
password: {
91+
type: String,
92+
default: null,
93+
},
94+
qrCodeImg: {
95+
type: String,
96+
default: '',
97+
},
98+
},
99+
})
100+
</script>
101+
102+
<style scoped>
103+
.hotspot-icon-container {
104+
position: relative;
105+
display: inline-block;
106+
}
107+
108+
.hotspot-icon {
109+
position: relative;
110+
z-index: 1;
111+
}
112+
113+
.hotspot-pulse {
114+
position: absolute;
115+
top: 50%;
116+
left: 50%;
117+
transform: translate(-50%, -50%);
118+
width: 100px;
119+
height: 100px;
120+
border-radius: 50%;
121+
background: var(--v-primary-base);
122+
opacity: 0.2;
123+
animation: pulse 2s ease-out infinite;
124+
}
125+
126+
@keyframes pulse {
127+
0% {
128+
transform: translate(-50%, -50%) scale(0.8);
129+
opacity: 0.3;
130+
}
131+
100% {
132+
transform: translate(-50%, -50%) scale(1.5);
133+
opacity: 0;
134+
}
135+
}
136+
137+
.qr-code-img {
138+
width: 180px;
139+
height: 180px;
140+
display: block;
141+
margin: 0 auto;
142+
}
143+
144+
.credentials-card {
145+
background: rgba(var(--v-primary-base), 0.02);
146+
}
147+
</style>

‎core/frontend/src/components/wifi/WifiInterfaceManager.vue‎

Lines changed: 82 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -67,90 +67,92 @@
6767
/>
6868

6969
<v-sheet>
70+
<!-- Dual mode: Show tabs for Networks and Hotspot -->
71+
<v-tabs
72+
v-if="current_mode === WifiInterfaceMode.DUAL"
73+
v-model="dual_mode_tab"
74+
centered
75+
grow
76+
>
77+
<v-tab>
78+
<v-icon left small>
79+
mdi-wifi
80+
</v-icon>
81+
Networks
82+
</v-tab>
83+
<v-tab>
84+
<v-icon left small>
85+
mdi-access-point
86+
</v-icon>
87+
Hotspot
88+
</v-tab>
89+
</v-tabs>
90+
7091
<v-sheet
7192
max-height="600"
7293
class="overflow-y-auto"
7394
>
74-
<!-- Hotspot-only mode: Show hotspot info instead of scan results -->
95+
<!-- Hotspot-only mode: Show hotspot info -->
7596
<div v-if="current_mode === WifiInterfaceMode.HOTSPOT">
76-
<v-card-text class="text-center pa-6">
77-
<!-- Animated hotspot icon -->
78-
<div class="hotspot-icon-container mb-4">
79-
<v-icon
80-
size="80"
81-
color="primary"
82-
class="hotspot-icon"
83-
>
84-
mdi-access-point
85-
</v-icon>
86-
<div class="hotspot-pulse" />
87-
</div>
88-
89-
<div class="text-h5 font-weight-bold primary--text mb-1">
90-
Hotspot Active
91-
</div>
97+
<hotspot-info-card
98+
:ssid="hotspot_ssid"
99+
:password="hotspot_password"
100+
:qr-code-img="wifi_qr_code_img"
101+
/>
102+
</div>
92103

93-
<!-- QR Code -->
94-
<v-card
95-
v-if="wifi_qr_code_img"
96-
class="mx-auto mb-4 pa-3"
97-
max-width="220"
98-
elevation="2"
99-
rounded="lg"
100-
>
101-
<img
102-
:src="wifi_qr_code_img"
103-
alt="WiFi QR Code"
104-
class="qr-code-img"
105-
>
106-
<div class="text-caption grey--text mt-2">
107-
Scan to connect
104+
<!-- Dual mode: Tabbed content -->
105+
<div v-else-if="current_mode === WifiInterfaceMode.DUAL">
106+
<v-tabs-items v-model="dual_mode_tab">
107+
<!-- Networks Tab -->
108+
<v-tab-item>
109+
<div v-if="networks !== null && networks.length > 0">
110+
<v-text-field
111+
v-if="networks.length > 8"
112+
v-model="ssid_filter"
113+
append-icon="mdi-magnify"
114+
label="Search"
115+
single-line
116+
hide-details
117+
clearable
118+
class="ml-7 mr-7"
119+
/>
120+
<wifi-network-card
121+
v-for="(network, key) in filtered_networks"
122+
:key="key"
123+
class="available-network"
124+
:network="network"
125+
:connected="isNetworkConnected(network)"
126+
@click="openConnectionDialog(network)"
127+
/>
108128
</div>
109-
</v-card>
110-
111-
<!-- Credentials -->
112-
<v-card
113-
class="mx-auto credentials-card"
114-
max-width="300"
115-
outlined
116-
rounded="lg"
117-
>
118-
<v-list
119-
dense
120-
class="py-0"
129+
<div v-else-if="networks === null">
130+
<spinning-logo
131+
size="30%"
132+
subtitle="Scanning for wifi networks..."
133+
/>
134+
</div>
135+
<v-card-text
136+
v-else
137+
flat
138+
class="text-body-1 text-center"
121139
>
122-
<v-list-item v-if="hotspot_ssid">
123-
<v-list-item-icon class="mr-3">
124-
<v-icon color="primary">
125-
mdi-wifi
126-
</v-icon>
127-
</v-list-item-icon>
128-
<v-list-item-content>
129-
<v-list-item-subtitle>Network Name</v-list-item-subtitle>
130-
<v-list-item-title class="font-weight-medium">
131-
{{ hotspot_ssid }}
132-
</v-list-item-title>
133-
</v-list-item-content>
134-
</v-list-item>
135-
<v-divider />
136-
<v-list-item v-if="hotspot_password">
137-
<v-list-item-icon class="mr-3">
138-
<v-icon color="primary">
139-
mdi-key
140-
</v-icon>
141-
</v-list-item-icon>
142-
<v-list-item-content>
143-
<v-list-item-subtitle>Password</v-list-item-subtitle>
144-
<v-list-item-title class="font-weight-medium">
145-
{{ hotspot_password }}
146-
</v-list-item-title>
147-
</v-list-item-content>
148-
</v-list-item>
149-
</v-list>
150-
</v-card>
151-
</v-card-text>
140+
No wifi networks found.
141+
</v-card-text>
142+
</v-tab-item>
143+
144+
<!-- Hotspot Tab -->
145+
<v-tab-item>
146+
<hotspot-info-card
147+
:ssid="hotspot_ssid"
148+
:password="hotspot_password"
149+
:qr-code-img="wifi_qr_code_img"
150+
/>
151+
</v-tab-item>
152+
</v-tabs-items>
152153
</div>
153-
<!-- Client or Dual mode: Show network scan results -->
154+
155+
<!-- Client mode: Show network scan results -->
154156
<div v-else-if="networks !== null && networks.length > 0">
155157
<v-text-field
156158
v-if="networks.length > 8"
@@ -215,6 +217,7 @@ import {
215217
import back_axios, { isBackendOffline } from '@/utils/api'
216218
217219
import SpinningLogo from '../common/SpinningLogo.vue'
220+
import HotspotInfoCard from './HotspotInfoCard.vue'
218221
import InterfaceConnectionDialog from './InterfaceConnectionDialog.vue'
219222
import WifiNetworkCard from './WifiNetworkCard.vue'
220223
import WifiSettingsDialog from './WifiSettingsDialog.vue'
@@ -224,9 +227,10 @@ const notifier = new Notifier(wifi_service)
224227
export default Vue.extend({
225228
name: 'WifiInterfaceManager',
226229
components: {
227-
WifiNetworkCard,
228-
SpinningLogo,
230+
HotspotInfoCard,
229231
InterfaceConnectionDialog,
232+
SpinningLogo,
233+
WifiNetworkCard,
230234
WifiSettingsDialog,
231235
},
232236
props: {
@@ -244,6 +248,7 @@ export default Vue.extend({
244248
interface_capabilities: null as WifiInterfaceCapabilities | null,
245249
mode_loading: false,
246250
wifi_qr_code_img: '' as string,
251+
dual_mode_tab: 0,
247252
WifiInterfaceMode,
248253
}
249254
},
@@ -436,48 +441,4 @@ export default Vue.extend({
436441
</script>
437442

438443
<style scoped>
439-
.hotspot-icon-container {
440-
position: relative;
441-
display: inline-block;
442-
}
443-
444-
.hotspot-icon {
445-
position: relative;
446-
z-index: 1;
447-
}
448-
449-
.hotspot-pulse {
450-
position: absolute;
451-
top: 50%;
452-
left: 50%;
453-
transform: translate(-50%, -50%);
454-
width: 100px;
455-
height: 100px;
456-
border-radius: 50%;
457-
background: var(--v-primary-base);
458-
opacity: 0.2;
459-
animation: pulse 2s ease-out infinite;
460-
}
461-
462-
@keyframes pulse {
463-
0% {
464-
transform: translate(-50%, -50%) scale(0.8);
465-
opacity: 0.3;
466-
}
467-
100% {
468-
transform: translate(-50%, -50%) scale(1.5);
469-
opacity: 0;
470-
}
471-
}
472-
473-
.qr-code-img {
474-
width: 180px;
475-
height: 180px;
476-
display: block;
477-
margin: 0 auto;
478-
}
479-
480-
.credentials-card {
481-
background: rgba(var(--v-primary-base), 0.02);
482-
}
483444
</style>

0 commit comments

Comments
 (0)