Extract component
This commit is contained in:
parent
46cbfa9acc
commit
5b27077c48
|
@ -22,28 +22,7 @@
|
|||
</template>
|
||||
|
||||
<template #[`item.signalStrength`]="{ item: { signalStrength } }">
|
||||
<template v-if="signalStrength < 0">
|
||||
<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>
|
||||
<SignalStrength :value="signalStrength" />
|
||||
</template>
|
||||
|
||||
<template #[`item.speed`]="{ item: { speed } }">
|
||||
|
@ -68,9 +47,10 @@
|
|||
|
||||
<script>
|
||||
import Avatar from './Avatar.vue'
|
||||
import SignalStrength from './signalStrength.vue'
|
||||
|
||||
export default {
|
||||
components: { Avatar },
|
||||
components: { Avatar, SignalStrength },
|
||||
props: {
|
||||
wifiDevices: {
|
||||
type: Array,
|
||||
|
@ -122,23 +102,6 @@ export default {
|
|||
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>
|
||||
|
|
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