69 lines
3.9 KiB
Plaintext
69 lines
3.9 KiB
Plaintext
{%- if ap_state == "up" %}
|
|
<!-- NETWORK CARD -->
|
|
<div class="card center">
|
|
<!-- NETWORK INFO BOX -->
|
|
<div class="capsule capsule-container success-border">
|
|
<!-- NETWORK STATUS GRID -->
|
|
<div class="two-grid" title="PeachCloud network mode and status">
|
|
<!-- top-right config icon -->
|
|
<a class="link two-grid-top-right" href="/settings/network" title="Configure network settings">
|
|
<img id="configureNetworking" class="icon-small" src="/icons/cog.svg" alt="Configure">
|
|
</a>
|
|
<!-- left column -->
|
|
<!-- network mode icon with label -->
|
|
<div class="grid-column-1">
|
|
<img id="netModeIcon" class="center icon icon-active" src="/icons/router.svg" alt="WiFi router">
|
|
<label id="netModeLabel" for="netModeIcon" class="center label-small font-gray" title="Access Point Online">ONLINE</label>
|
|
</div>
|
|
<!-- right column -->
|
|
<!-- network mode, ssid & ip with labels -->
|
|
<div class="grid-column-2">
|
|
<label class="label-small font-gray" for="netMode" title="Network Mode">MODE</label>
|
|
<p id="netMode" class="card-text" title="Network Mode">Access Point</p>
|
|
<label class="label-small font-gray" for="netSsid" title="Access Point SSID">SSID</label>
|
|
<p id="netSsid" class="card-text" title="SSID">peach</p>
|
|
<label class="label-small font-gray" for="netIp" title="Access Point IP Address">IP</label>
|
|
<p id="netIp" class="card-text" title="IP">{{ ap_ip }}</p>
|
|
</div>
|
|
</div>
|
|
<!-- horizontal dividing line -->
|
|
<hr>
|
|
<!-- DEVICES AND TRAFFIC GRID -->
|
|
<div class="three-grid card-container">
|
|
<div class="stack">
|
|
<img id="devices" class="icon icon-medium" title="Connected devices" src="/icons/devices.svg" alt="Digital devices">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
<label class="label-medium" for="devices" style="padding-right: 3px;" title="Number of connected devices"></label>
|
|
</div>
|
|
<label class="label-small font-gray">DEVICES</label>
|
|
</div>
|
|
<div class="stack">
|
|
<img id="dataDownload" class="icon icon-medium" title="Download" src="/icons/down-arrow.svg" alt="Download">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
{%- if ap_traffic -%}
|
|
<label class="label-medium" for="dataDownload" style="padding-right: 3px;" title="Data download total in {{ ap_traffic.rx_unit }}">{{ ap_traffic.received }}</label>
|
|
<label class="label-small font-near-black">{{ ap_traffic.rx_unit }}</label>
|
|
{%- else -%}
|
|
<label class="label-medium" for="dataDownload" style="padding-right: 3px;" title="Data download total"></label>
|
|
<label class="label-small font-near-black"></label>
|
|
{%- endif -%}
|
|
</div>
|
|
<label class="label-small font-gray">DOWNLOAD</label>
|
|
</div>
|
|
<div class="stack">
|
|
<img id="dataUpload" class="icon icon-medium" title="Upload" src="/icons/up-arrow.svg" alt="Upload">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
{%- if ap_traffic -%}
|
|
<label class="label-medium" for="dataUpload" style="padding-right: 3px;" title="Data upload total in {{ ap_traffic.tx_unit }}">{{ ap_traffic.transmitted }}</label>
|
|
<label class="label-small font-near-black">{{ ap_traffic.tx_unit }}</label>
|
|
{%- else -%}
|
|
<label class="label-medium" for="dataUpload" style="padding-right: 3px;" title="Data upload total"></label>
|
|
<label class="label-small font-near-black"></label>
|
|
{%- endif -%}
|
|
</div>
|
|
<label class="label-small font-gray">UPLOAD</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|