159 lines
9.3 KiB
Plaintext
159 lines
9.3 KiB
Plaintext
{%- extends "nav" -%}
|
|
|
|
{%- block card %}
|
|
<!-- if ap is up, show ap card, else show wlan card -->
|
|
{%- 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 style="color: var(--light-gray);">
|
|
<!-- 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>
|
|
{%- else %}
|
|
<!-- NETWORK CARD -->
|
|
<div class="card center">
|
|
<!-- NETWORK INFO BOX -->
|
|
{%- if wlan_state == "up" %}
|
|
<div class="capsule capsule-container success-border">
|
|
<!-- NETWORK STATUS GRID -->
|
|
<div id="netInfoBox" class="two-grid" title="PeachCloud network mode and status">
|
|
<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>
|
|
<!-- NETWORK STATUS -->
|
|
<!-- left column -->
|
|
<!-- network mode icon with label -->
|
|
<div class="grid-column-1">
|
|
<img id="netModeIcon" class="center icon icon-active" src="/icons/wifi.svg" alt="WiFi online">
|
|
<label id="netModeLabel" for="netModeIcon" class="center label-small font-gray" title="WiFi Client Status">ONLINE</label>
|
|
{%- else %}
|
|
<div class="capsule capsule-container warning-border">
|
|
<div id="netInfoBox" class="two-grid" title="PeachCloud network mode and status">
|
|
<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>
|
|
<div class="grid-column-1">
|
|
<img id="netModeIcon" class="center icon icon-inactive" src="/icons/wifi.svg" alt="WiFi offline">
|
|
<label id="netModeLabel" for="netModeIcon" class="center label-small font-gray" title="WiFi Client Status">OFFLINE</label>
|
|
{%- endif %}
|
|
</div>
|
|
<div class="grid-column-2">
|
|
<!-- right column -->
|
|
<!-- network mode, ssid & ip with labels -->
|
|
<label class="label-small font-gray" for="netMode" title="Network Mode">MODE</label>
|
|
<p id="netMode" class="card-text" title="Network Mode">WiFi Client</p>
|
|
<label class="label-small font-gray" for="netSsid" title="WiFi SSID">SSID</label>
|
|
<p id="netSsid" class="card-text" title="SSID">{{ wlan_ssid }}</p>
|
|
<label class="label-small font-gray" for="netIp" title="WiFi Client IP Address">IP</label>
|
|
<p id="netIp" class="card-text" title="IP">{{ wlan_ip }}</p>
|
|
</div>
|
|
</div>
|
|
<!-- horizontal dividing line -->
|
|
<hr style="color: var(--light-gray);">
|
|
<!-- SIGNAL AND TRAFFIC GRID -->
|
|
<!-- row of icons representing network statistics -->
|
|
<div class="three-grid card-container">
|
|
<div class="stack">
|
|
<img id="netSignal" class="icon icon-medium" alt="Signal" title="WiFi Signal (%)" src="/icons/low-signal.svg">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
<label class="label-medium" for="netSignal" style="padding-right: 3px;" title="Signal strength of WiFi connection (%)">{% if wlan_rssi %}{{ wlan_rssi }}{% else %}0{% endif %}%</label>
|
|
</div>
|
|
<label class="label-small font-gray">SIGNAL</label>
|
|
</div>
|
|
<div class="stack">
|
|
<img id="dataDownload" class="icon icon-medium" alt="Download" title="WiFi download total" src="/icons/down-arrow.svg">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
{%- if wlan_traffic %}
|
|
<!-- display wlan traffic data -->
|
|
<label class="label-medium" for="dataDownload" style="padding-right: 3px;" title="Data download total in {{ wlan_traffic.rx_unit }}">{{ wlan_traffic.received }}</label>
|
|
<label class="label-small font-near-black">{{ wlan_traffic.rx_unit }}</label>
|
|
{%- else %}
|
|
<!-- no wlan traffic data to display -->
|
|
<label class="label-medium" for="dataDownload" style="padding-right: 3px;" title="Data download total">0</label>
|
|
<label class="label-small font-near-black">MB</label>
|
|
{%- endif %}
|
|
</div>
|
|
<label class="label-small font-gray">DOWNLOAD</label>
|
|
</div>
|
|
<div class="stack">
|
|
<img id="dataUpload" class="icon icon-medium" alt="Upload" title="WiFi upload total" src="/icons/up-arrow.svg">
|
|
<div class="flex-grid" style="padding-top: 0.5rem;">
|
|
{%- if wlan_traffic %}
|
|
<!-- display wlan traffic data -->
|
|
<label class="label-medium" for="dataUpload" style="padding-right: 3px;" title="Data upload total in {{ wlan_traffic.tx_unit }}">{{ wlan_traffic.transmitted }}</label>
|
|
<label class="label-small font-near-black">{{ wlan_traffic.tx_unit }}</label>
|
|
{%- else %}
|
|
<!-- no wlan traffic data to display -->
|
|
<label class="label-medium" for="dataUpload" style="padding-right: 3px;" title="Data upload total">0</label>
|
|
<label class="label-small font-near-black">MB</label>
|
|
{%- endif %}
|
|
</div>
|
|
<label class="label-small font-gray">UPLOAD</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|
|
{%- endblock card -%}
|