67 lines
3.0 KiB
JavaScript
67 lines
3.0 KiB
JavaScript
const RadiusNetworkNode = {
|
|
name: 'RadiusNetworkNode',
|
|
props: {
|
|
device: Object
|
|
},
|
|
template: `
|
|
<div class="mesh-node">
|
|
<div class="mesh-content" :class="nodeClass">
|
|
<div class="mesh-icon">
|
|
<i :class="iconClass"></i>
|
|
<div v-if="connectionType === 'wlan'" class="conn-badge wlan"><i class="fa-duotone fa-wifi"></i></div>
|
|
<div v-if="connectionType === 'ethernet'" class="conn-badge eth"><i class="fa-duotone fa-ethernet"></i></div>
|
|
</div>
|
|
<div class="mesh-info">
|
|
<div class="mesh-name" :title="device.name">{{ device.name }}</div>
|
|
<div class="mesh-meta">
|
|
<span class="mesh-ip" v-if="device.ipv4 && device.ipv4.ip">{{ device.ipv4.ip }}</span>
|
|
</div>
|
|
<div class="mesh-meta" v-if="device.mac">
|
|
<span class="mesh-mac">{{ device.mac }}</span>
|
|
</div>
|
|
<div class="mesh-vendor" v-if="device.vendor">{{ device.vendor }}</div>
|
|
<div class="mesh-details" v-if="details">
|
|
<span class="mesh-speed">{{ details }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mesh-children" v-if="device.children && device.children.length">
|
|
<div v-for="child in device.children" :key="child.UID" class="mesh-branch">
|
|
<radius-network-node :device="child" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
computed: {
|
|
iconClass() {
|
|
if (this.device.model === 'fbox') return 'fa-duotone fa-router';
|
|
if ((this.device.name || '').toLowerCase().includes('repeater')) return 'fa-duotone fa-wifi-exclamation';
|
|
if (this.device.type === 'wlan') return 'fa-duotone fa-mobile-screen';
|
|
return 'fa-duotone fa-desktop';
|
|
},
|
|
connectionType() {
|
|
if (this.device.type === 'wlan') return 'wlan';
|
|
if (this.device.type === 'ethernet') return 'ethernet';
|
|
return null;
|
|
},
|
|
nodeClass() {
|
|
return {
|
|
'is-router': this.device.model === 'fbox',
|
|
'is-repeater': (this.device.name || '').toLowerCase().includes('repeater'),
|
|
'is-offline': this.device.state && this.device.state.class !== 'globe_online' && this.device.state.class !== 'led_green'
|
|
}
|
|
},
|
|
details() {
|
|
if (this.device.properties && this.device.properties.length > 0) {
|
|
const props = this.device.properties.filter(p => p.txt && p.txt !== 'Mesh');
|
|
if (props.length > 0) return props[0].txt;
|
|
}
|
|
if (this.device.port && this.device.port !== 'WLAN') return this.device.port;
|
|
return null;
|
|
}
|
|
}
|
|
};
|
|
|
|
if (window.VueApp) {
|
|
VueApp.component('radius-network-node', RadiusNetworkNode);
|
|
} |