daynivo-kiosk-os/src/voxip_kiosk/web/templates/network.html

{% extends "base.html" %}
{% from "_macros.html" import badge, csrf with context %}
{% set title = "Netwerk" %}
{% block content %}
<div class="page-head"><h1>Netwerkbeheer</h1></div>

{% if pending %}
<section class="card card-pending" data-pending="{{ url_for('ui.api_network_pending') }}" data-remaining="{{ pending.remaining }}">
  <h2>Netwerkwijziging bevestigen</h2>
  <p>De nieuwe instellingen voor <strong>{{ 'ethernet' if pending.interface == 'eth0' else 'wifi' }}</strong>
    {% if pending.method == 'static' %}(statisch adres <strong>{{ pending.address }}</strong>){% else %}(DHCP){% endif %} zijn actief.
    Werkt de beheerinterface nog? Bevestig dan. Zonder bevestiging worden over
    <strong data-countdown>{{ pending.remaining }}</strong> seconden automatisch de vorige instellingen teruggezet.</p>
  {% if pending.method == 'static' %}
  <p class="muted">Is het adres veranderd? Open dan <code>{{ admin_scheme }}://{{ pending.address.split('/')[0] }}:{{ admin_port }}/network</code>, log in en bevestig daar.</p>
  {% endif %}
  <div class="actions-row">
    <form method="post" action="{{ url_for('ui.network_confirm') }}" class="inline-form">{{ csrf() }}<button class="btn btn-success btn-big">Bevestigen</button></form>
    <form method="post" action="{{ url_for('ui.network_rollback') }}" class="inline-form">{{ csrf() }}<button class="btn btn-secondary btn-big">Nu terugdraaien</button></form>
  </div>
</section>
{% endif %}

{% if not net.available %}
<div class="alert alert-error">NetworkManager (nmcli) is niet beschikbaar op dit systeem.</div>
{% endif %}

<div class="grid grid-2">
  {% for iface in ['eth0', 'wlan0'] %}
  {% set d = net.devices[iface] %}
  <section class="card">
    <h2>{{ 'Ethernet' if iface == 'eth0' else 'Wifi' }} <span class="muted small">({{ iface }})</span></h2>
    <dl class="kv">
      <dt>Status</dt><dd>{{ badge('ok' if d.connected else ('starting' if d.state == 'connecting' else 'stopped'), d.state_label) }}</dd>
      {% if d.connection %}<dt>Verbinding</dt><dd>{{ d.connection }}</dd>{% endif %}
      <dt>IP-adres</dt><dd>{{ d.addresses|join(', ') or '–' }}</dd>
      <dt>Gateway</dt><dd>{{ d.gateway or '–' }}</dd>
      <dt>DNS</dt><dd>{{ d.dns|join(', ') or '–' }}</dd>
      {% if d.hwaddr %}<dt>MAC</dt><dd><code>{{ d.hwaddr }}</code></dd>{% endif %}
    </dl>
  </section>
  {% endfor %}
</div>

<div class="grid grid-2">
  <section class="card">
    <h2>Ethernet instellen</h2>
    {% set p = net.devices.eth0.profile %}
    <form method="post" action="{{ url_for('ui.network_apply') }}" class="form" data-ipform
          data-confirm="De netwerkinstellingen worden gewijzigd. Bevestig daarna binnen {{ rollback_seconds // 60 }} minuten, anders worden ze teruggezet." data-confirm-title="Ethernet wijzigen">
      {{ csrf() }}
      <input type="hidden" name="interface" value="eth0">
      {% include "_ipv4_fields.html" %}
      <button type="submit" class="btn btn-primary">Toepassen</button>
    </form>
  </section>

  <section class="card">
    <h2>Wifi instellen</h2>
    {% set p = net.devices.wlan0.profile %}
    <form method="post" action="{{ url_for('ui.network_apply') }}" class="form" data-ipform
          data-confirm="De wifi-instellingen worden gewijzigd. Bevestig daarna binnen {{ rollback_seconds // 60 }} minuten, anders worden ze teruggezet." data-confirm-title="Wifi wijzigen">
      {{ csrf() }}
      <input type="hidden" name="interface" value="wlan0">
      <label>Netwerknaam (SSID)
        <span class="input-row">
          <input type="text" name="ssid" value="{{ p.ssid }}" required maxlength="32" list="wifi-networks" autocomplete="off" spellcheck="false">
          <button type="button" class="btn btn-secondary" data-wifi-scan="{{ url_for('ui.network_scan') }}">Scannen</button>
        </span>
        <datalist id="wifi-networks"></datalist>
      </label>
      <ul class="scan-results" data-scan-results hidden></ul>
      <label>Wachtwoord
        <input type="password" name="psk" minlength="8" maxlength="64" autocomplete="new-password" {% if p.exists %}placeholder="Leeg laten om het huidige wachtwoord te behouden"{% endif %}>
      </label>
      <label class="check"><input type="checkbox" name="open" value="1"> Open netwerk (zonder wachtwoord)</label>
      <label class="check"><input type="checkbox" name="hidden" value="1" {% if p.hidden %}checked{% endif %}> Verborgen netwerk</label>
      {% include "_ipv4_fields.html" %}
      <button type="submit" class="btn btn-primary">Toepassen</button>
    </form>

    <h2 class="mt">Wifi-land</h2>
    <form method="post" action="{{ url_for('ui.network_country') }}" class="form form-inline">
      {{ csrf() }}
      <label>Landcode
        <input type="text" name="country" value="{{ net.wifi_country or 'NL' }}" required maxlength="2" pattern="[A-Za-z]{2}" class="input-short">
      </label>
      <button type="submit" class="btn btn-secondary">Instellen</button>
    </form>
  </section>
</div>

<section class="card">
  <h2>Herstel bij een onbereikbare kiosk</h2>
  <ul class="plain">
    <li>Iedere wijziging wordt na {{ rollback_seconds // 60 }} minuten automatisch teruggedraaid als je hem niet bevestigt, ook als de stroom tussendoor uitvalt.</li>
    <li>Noodherstel: zet een leeg bestand <code>voxip-network-reset</code> op de bootpartitie van de SD-kaart en start de Pi. Alle VoxIP-netwerkprofielen worden dan verwijderd (terug naar DHCP).</li>
  </ul>
</section>
{% endblock %}