43 lines
1.6 KiB
JavaScript
43 lines
1.6 KiB
JavaScript
|
const ViewClients = {
|
||
|
|
template: `<div class="row">
|
||
|
|
<p>
|
||
|
|
<span class="p-heading--one">Clients</span>
|
||
|
|
<sub v-if="$route.params.ip">of Router {{ $route.params.ip.substring(21) }}</sub>
|
||
|
|
</p>
|
||
|
|
<table class="p-table--mobile-card" role="grid">
|
||
|
|
<thead>
|
||
|
|
<tr role="row">
|
||
|
|
<th scope="col" role="columnheader" aria-sort="none">Addr</th>
|
||
|
|
<th scope="col" role="columnheader" aria-sort="none">AP</th>
|
||
|
|
<th scope="col" role="columnheader" aria-sort="none" class="u-align--right">FreqHighs</th>
|
||
|
|
<th scope="col" role="columnheader" aria-sort="none" class="u-align--right">SignalLow</th>
|
||
|
|
<th scope="col" role="columnheader" aria-sort="none" class="u-align--right">SignalHigh</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr role="row" v-for="item in getClients">
|
||
|
|
<td role="rowheader" aria-label="Addr">{{ item.addr.substring(12) }}</td>
|
||
|
|
<td role="gridcell" aria-label="AP">
|
||
|
|
<router-link :to="{ name: 'ap.clients', params: { ip: item.ap }}">
|
||
|
|
{{ item.ap.substring(21) }}
|
||
|
|
</router-link>
|
||
|
|
</td>
|
||
|
|
<td role="gridcell" aria-label="Freq Highs" class="u-align--right">{{ item.freq_highest }}</td>
|
||
|
|
<td role="gridcell" aria-label="Signal LowF" class="u-align--right">{{ item.signal_low_freq }}</td>
|
||
|
|
<td role="gridcell" aria-label="Signal HighF" class="u-align--right">{{ item.signal_high_freq }}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>`,
|
||
|
|
computed: {
|
||
|
|
getClients () {
|
||
|
|
const state = this.$store.state,
|
||
|
|
apIP = this.$route.params.ip;
|
||
|
|
|
||
|
|
return state.controller._clients.map(function(addr) {
|
||
|
|
return state.controller.clients[addr];
|
||
|
|
}).filter((client)=> (apIP === undefined || client.ap === apIP));
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|