Extract component
This commit is contained in:
parent
46cbfa9acc
commit
5b27077c48
|
@ -22,28 +22,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #[`item.signalStrength`]="{ item: { signalStrength } }">
|
<template #[`item.signalStrength`]="{ item: { signalStrength } }">
|
||||||
<template v-if="signalStrength < 0">
|
<SignalStrength :value="signalStrength" />
|
||||||
<v-chip
|
|
||||||
small
|
|
||||||
:color="signalStrengthColor(signalStrength) + ' lighten-5'"
|
|
||||||
>
|
|
||||||
<v-icon
|
|
||||||
small
|
|
||||||
left
|
|
||||||
:color="signalStrengthColor(signalStrength) + ' darken-2'"
|
|
||||||
>
|
|
||||||
{{ signalStrengthIcon(signalStrength) }}
|
|
||||||
</v-icon>
|
|
||||||
<span class="font-weight-medium">{{ signalStrength }}</span>
|
|
||||||
<small class="ml-1"> dBm </small>
|
|
||||||
</v-chip>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<v-chip small color="grey lighten-4">
|
|
||||||
<v-icon small left color="grey">mdi-signal-off</v-icon>
|
|
||||||
<small>Aguarde...</small>
|
|
||||||
</v-chip>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #[`item.speed`]="{ item: { speed } }">
|
<template #[`item.speed`]="{ item: { speed } }">
|
||||||
|
@ -68,9 +47,10 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Avatar from './Avatar.vue'
|
import Avatar from './Avatar.vue'
|
||||||
|
import SignalStrength from './signalStrength.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { Avatar },
|
components: { Avatar, SignalStrength },
|
||||||
props: {
|
props: {
|
||||||
wifiDevices: {
|
wifiDevices: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
@ -122,23 +102,6 @@ export default {
|
||||||
this.headers.includes(value)
|
this.headers.includes(value)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
signalStrengthIcon(signalStrength) {
|
|
||||||
if (signalStrength > -50) return 'mdi-signal-cellular-3'
|
|
||||||
if (signalStrength > -67) return 'mdi-signal-cellular-2'
|
|
||||||
if (signalStrength > -80) return 'mdi-signal-cellular-1'
|
|
||||||
return 'mdi-signal-cellular-outline'
|
|
||||||
},
|
|
||||||
signalStrengthColor(signalStrength) {
|
|
||||||
if (signalStrength > -50) return 'green'
|
|
||||||
else if (signalStrength > -60) return 'light-green'
|
|
||||||
else if (signalStrength > -67) return 'lime'
|
|
||||||
else if (signalStrength > -70) return 'amber'
|
|
||||||
else if (signalStrength > -80) return 'orange'
|
|
||||||
else if (signalStrength > -90) return 'deep-orange'
|
|
||||||
else return 'red'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
49
web/src/components/signalStrength.vue
Normal file
49
web/src/components/signalStrength.vue
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
<template>
|
||||||
|
<span class="signal-strength">
|
||||||
|
<template v-if="value < 0">
|
||||||
|
<v-chip :color="signalStrengthColor(value) + ' lighten-5'" small>
|
||||||
|
<v-icon small left :color="signalStrengthColor(value) + ' darken-2'">
|
||||||
|
{{ signalStrengthIcon(value) }}
|
||||||
|
</v-icon>
|
||||||
|
<span class="font-weight-medium">{{ value }}</span>
|
||||||
|
<small class="ml-1"> dBm </small>
|
||||||
|
</v-chip>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<v-chip small color="grey lighten-4">
|
||||||
|
<v-icon small left color="grey">mdi-signal-off</v-icon>
|
||||||
|
<small>Aguarde...</small>
|
||||||
|
</v-chip>
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: Number,
|
||||||
|
default: -1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
signalStrengthIcon(signalStrength) {
|
||||||
|
if (signalStrength > -50) return 'mdi-signal-cellular-3'
|
||||||
|
if (signalStrength > -67) return 'mdi-signal-cellular-2'
|
||||||
|
if (signalStrength > -80) return 'mdi-signal-cellular-1'
|
||||||
|
return 'mdi-signal-cellular-outline'
|
||||||
|
},
|
||||||
|
signalStrengthColor(signalStrength) {
|
||||||
|
if (signalStrength > -50) return 'green'
|
||||||
|
else if (signalStrength > -60) return 'light-green'
|
||||||
|
else if (signalStrength > -67) return 'lime'
|
||||||
|
else if (signalStrength > -70) return 'amber'
|
||||||
|
else if (signalStrength > -80) return 'orange'
|
||||||
|
else if (signalStrength > -90) return 'deep-orange'
|
||||||
|
else return 'red'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
Loading…
Reference in New Issue
Block a user