-
-
- {{ network.ssid }}
-
- Connected
-
-
+ @for (network of wifi; track $index) {
+ @if (network.ssid) {
+
+
+
+ {{ network.ssid }}
+ @if (network.connected) {
+ Connected
+ }
+
+
+ @if (!network.connected) {
+
+ }
+ @if (network.connected !== undefined) {
+
+ } @else {
+
+ }
+ @if (getSignal(network.strength); as signal) {
+
+ } @else {
+
+ }
-
-
-
-
-
-
![Signal Strength: {{ network.strength }}]()
-
-
+ }
+ }
`,
host: { style: 'align-items: stretch' },
+ styles: `
+ tui-icon {
+ width: 2rem;
+ color: var(--tui-text-tertiary);
+ }
+ `,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [CommonModule, TuiCell, TuiTitle, TuiBadge, TuiButton, TuiIcon],
@@ -81,20 +94,27 @@ export class WifiTableComponent {
@Input()
wifi: readonly Wifi[] = []
- getSignal(signal: number): string {
+ getSignal(signal: number) {
if (signal < 5) {
- return 'assets/img/icons/wifi-0.png'
+ return null
}
if (signal >= 5 && signal < 50) {
- return 'assets/img/icons/wifi-1.png'
+ return {
+ icon: '@tui.wifi-low',
+ color: 'var(--tui-text-negative)',
+ }
}
- if (signal >= 50 && signal < 90) {
- return 'assets/img/icons/wifi-2.png'
- }
-
- return 'assets/img/icons/wifi-3.png'
+ return signal >= 50 && signal < 90
+ ? {
+ icon: '@tui.wifi-high',
+ color: 'var(--tui-status-warning)',
+ }
+ : {
+ icon: '@tui.wifi',
+ color: 'var(--tui-text-positive)',
+ }
}
async forget({ ssid }: Wifi): Promise
{