163 lines
9.8 KiB
Plaintext
163 lines
9.8 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="two-grid capsule success-border" title="PeachCloud network mode and status">
|
|
<!-- NETWORK STATUS -->
|
|
<!-- 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>
|
|
<!-- BUTTONS -->
|
|
<div id="buttons">
|
|
<a class="button button-primary center" href="/settings/network/wifi/add" title="Add WiFi Network">Add WiFi Network</a>
|
|
<a id="connectWifi" class="button button-primary center" href="/settings/network/wifi/activate" title="Enable WiFi">Enable WiFi</a>
|
|
<a id="listWifi" class="button button-primary center" href="/settings/network/wifi" title="List WiFi Networks">List WiFi Networks</a>
|
|
<a id="viewUsage" class="button button-primary center" href="/settings/network/wifi/usage" title="View Data Usage">View Data Usage</a>
|
|
</div>
|
|
<!-- FLASH MESSAGE -->
|
|
{% include "snippets/flash_message" %}
|
|
<!-- CARD GRID -->
|
|
<div class="card-container">
|
|
<div class="three-grid">
|
|
<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 id="netInfoBox" class="two-grid capsule success-border" title="PeachCloud network mode and status">
|
|
<!-- 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 id="netInfoBox" class="two-grid capsule warning-border" title="PeachCloud network mode and status">
|
|
<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>
|
|
<!-- BUTTONS -->
|
|
<div id="buttons">
|
|
<a class="button button-primary center" href="/settings/network/wifi/add" title="Add WiFi Network">Add WiFi Network</a>
|
|
<a id="deployAccessPoint" class="button button-primary center" href="/settings/network/ap/activate" title="Deploy Access Point">Deploy Access Point</a>
|
|
<a id="listWifi" class="button button-primary center" href="/settings/network/wifi" title="List WiFi Networks">List WiFi Networks</a>
|
|
<a id="viewUsage" class="button button-primary center" href="/settings/network/wifi/usage" title="View Data Usage">View Data Usage</a>
|
|
<a id="configureDNS" class="button button-primary center" href="/settings/network/dns" title="Configure DNS">Configure DNS</a>
|
|
</div>
|
|
<!-- FLASH MESSAGE -->
|
|
{% include "snippets/flash_message" %}
|
|
<div id="gridDiv" class="card-container">
|
|
<!-- CARD GRID -->
|
|
<!-- row of icons representing network statistics -->
|
|
<div class="three-grid">
|
|
<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>
|
|
<script type="text/javascript" src="/js/network_card.js"></script>
|
|
{%- endif -%}
|
|
{%- endblock card -%}
|