swizzin_dashboard/templates/macros.html

{% macro build_sidebar(pages) %}
<div class="bg-dark" id="sidebar-wrapper">
    <div class="sidebar-heading"><img class="logo" src="{{ url_for('static', filename='img/logo-dark.png') }}" /></div>
    <div class="list-group list-group-flush">
    {% for page in pages|sort(attribute="pretty_name") if page.url %}
        <a href="{{page.url}}" target="_blank" class="list-group-item list-group-item-action bg-dark"><img src="{{ url_for('static', filename='img/apps/'+page.name+'.png') }}" class="app-icon rounded-circle">{{page.pretty_name}}</a>
    {% endfor %}
    </div>
</div>
{% endmacro %}

{% macro build_nav(user, apps) %}
<div id="page-content-wrapper">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <button class="btn btn-primary" id="menu-toggle">«</button>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
          <li class="nav-item {{ 'active' if request.endpoint == 'index' else '' }}">
              <a class="nav-link" href="{{ url_for('index') }}">Home <span class="sr-only">(current)</span></a>
          </li>
          {% if ('deluge' in apps|map(attribute="name") or 'rtorrent' in apps|map(attribute="name")) %}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Downloads
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
              {% if 'rtorrent' in apps|map(attribute="name") %}
              <a class="dropdown-item" href="/rtorrent.downloads">rTorrent</a>
              {% endif %}
              {% if 'deluge' in apps|map(attribute="name") %}
              <a class="dropdown-item" href="/deluge.downloads">Deluge</a>
              {% endif %}
            </div>
          </li>
          {% endif %}
          {% if config.ADMIN_USER == user %}
          <li class="nav-item {{ 'active' if request.endpoint == 'stats' else '' }}">
              <a class="nav-link" href="{{ url_for('stats') }}">Stats</a>
          </li>
          {% endif %}
          <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{ user }}
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="https://github.com/liaralabs/swizzin">Github</a>
                <a class="dropdown-item" href="https://discord.gg/sKjs9UM">Discord</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://docs.swizzin.ltd">Documentation</a>
              </div>
          </li>
        </ul>
      </div>
  </nav>
{% endmacro %}

{% macro build_nav_shared(user, apps) %}
<div id="page-content-wrapper">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <button class="btn btn-primary" id="menu-toggle">«</button>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
          <li class="nav-item {{ 'active' if request.endpoint == 'index' else '' }}">
              <a class="nav-link" href="{{ url_for('index') }}">Home <span class="sr-only">(current)</span></a>
          </li>
          {% if ('deluge' in apps|map(attribute="name") or 'rtorrent' in apps|map(attribute="name")) %}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Downloads
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
              {% if 'rtorrent' in apps|map(attribute="name") %}
              <a class="dropdown-item" href="/rtorrent.downloads">rTorrent</a>
              {% endif %}
              {% if 'deluge' in apps|map(attribute="name") %}
              <a class="dropdown-item" href="/deluge.downloads">Deluge</a>
              {% endif %}
            </div>
          </li>
          {% endif %}
          {% if config.ADMIN_USER == user %}
          <li class="nav-item {{ 'active' if request.endpoint == 'stats' else '' }}">
              <a class="nav-link" href="{{ url_for('stats') }}">Stats</a>
          </li>
          {% endif %}
          <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{ user }}
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="https://clients.swizzin.net">Support</a>
                <a class="dropdown-item" href="https://discord.gg/sKjs9UM">Discord</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://docs.swizzin.net">Documentation</a>
              </div>
          </li>
        </ul>
      </div>
  </nav>
{% endmacro %}

{% macro build_app_table(apps) %}
<div class="card border-dark mt-3">
  <div class="card-header">Service Info</div>
  <div class="card-body">
    <table class="table table-borderless table-hover table-sm table-dark">
        <tbody>
            <colgroup>
              <col style="width: 32%;">
              <col style="width: 30%;">
              <col style="width: 8%;">
              <col style="width: 30%;">
            </colgroup>
            {% for app in apps|sort(attribute="pretty_name") if app.systemd %}
            <tr>
                <td class="align-middle"><span class="align-middle">{{ app.pretty_name }}</span></td>
                <td class="align-middle text-center"><a post="true" phref="{{ url_for('service') }}" pdata='{"user": "{{ user }}", "function": "restart", "application": "{{ app.name }}"}' class="btn btn-xs btn-secondary"><i class="fa fa-refresh"></i>Restart</a></td>
                <td class="align-middle text-center"><span id="status_{{ app.name }}" class="indicator"></span></td>
                <td class="align-middle text-center"><input data-toggle="toggle" post="true" phref="{{ url_for('service') }}" pdata='{"application": "{{ app.name }}"}' type="checkbox" data-size="xs" data-on="Enabled" data-off="Disabled" data-onstyle="outline-success" data-offstyle="outline-danger" id="enabled_{{ app.name }}"></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
  </div>
</div>
{% endmacro %}

{% macro build_widget_js() %}
function appstatus(){
  $.get("{{ url_for('app_status') }}", function(data){
  for (var apps in data) {
    var name = data[apps]["name"];
    var enabled = data[apps]["enabled"];
    var active = data[apps]["active"];
    if (active == true) {
      $("#status_"+name+".indicator").addClass("bg-success").removeClass("bg-danger");
    } else {
      $("#status_"+name+".indicator").addClass("bg-danger").removeClass("bg-success");
    }
    if (enabled == true) {
      $('#enabled_'+name).data('bs.toggle').on(true);
    } else {
      $('#enabled_'+name).data('bs.toggle').off(true);  
    }
  }
  timer = setTimeout(function(){appstatus()}, 60000);
  }
)
};
appstatus();

(function loadavg() {
    $.get('{{ url_for('loadavg') }}', function(data) {
      $("#load1m").html(data['1m']);
      $("#load5m").html(data['5m']);
      $("#load15m").html(data['15m']);
      $("#loadpercent").html(data['perutil']);
      if (Number(data['perutil']) > 90) {
        $("#loadindicator.systemindicator").addClass("bg-danger").removeClass("bg-success bg-warning");
      } else if (Number(data['perutil']) > 75) {
        $("#loadindicator.systemindicator").addClass("bg-warning").removeClass("bg-success bg-danger");
      } else {
        $("#loadindicator.systemindicator").addClass("bg-success").removeClass("bg-warning bg-danger");
      }
      setTimeout(function(){loadavg()}, 60000);
      }
    );
})();

(function diskusage() {
    $.get('{{ url_for('disk_free') }}', function(data) {
      var percent = Math.trunc(data['perutil']);
      $("#diskfree").html(data['diskfree']);
      $("#diskused").html(data['diskused']);
      $("#disktotal").html(data['disktotal']);
      $("#diskpercent").html(data['perutil']);
      if (Number(data['perutil']) > 90) {
        $("#diskindicator.systemindicator").addClass("bg-danger").removeClass("bg-success bg-warning");
        $("#diskprogress").css("width", percent + "%").attr("aria-valuenow", percent).addClass("bg-danger").removeClass("bg-success bg-warning");
      } else if (Number(data['perutil']) > 75) {
        $("#diskindicator.systemindicator").addClass("bg-warning").removeClass("bg-success bg-danger");
        $("#diskprogress").css("width", percent + "%").attr("aria-valuenow", percent).addClass("bg-warning").removeClass("bg-success bg-danger");
      } else {
        $("#diskindicator.systemindicator").addClass("bg-success").removeClass("bg-warning bg-danger");
        $("#diskprogress").css("width", percent + "%").attr("aria-valuenow", percent).addClass("bg-success").removeClass("bg-danger bg-warning");
      }
      setTimeout(function(){diskusage()}, 60000);
      }
    );
})();

(function ramusage() {
    $.get('{{ url_for('ram_stats') }}', function(data) {
      var percent = Math.trunc(data['perutil']);
      $("#ramfree").html(data['ramfree']);
      $("#ramused").html(data['ramused']);
      $("#ramtotal").html(data['ramtotal']);
      $("#rampercent").html(data['perutil']);
      if (Number(data['perutil']) > 90) {
        $("#ramindicator.systemindicator").addClass("bg-danger").removeClass("bg-success bg-warning");
        $("#ramprogress").css("width", percent + "%").attr("aria-valuenow", percent).addClass("bg-danger").removeClass("bg-success bg-warning");
      } else if (Number(data['perutil']) > 75) {
        $("#ramindicator.systemindicator").addClass("bg-warning").removeClass("bg-success bg-danger");
        $("#ramprogress").css("width", percent + "%").attr("aria-valuenow", percent).addClass("bg-warning").removeClass("bg-success bg-danger");
      } else {
        $("#ramindicator.systemindicator").addClass("bg-success").removeClass("bg-warning bg-danger");
        $("#ramprogress").css("width", percent + "%").attr("aria-valuenow", percent).addClass("bg-success").removeClass("bg-danger bg-warning");
      }
      setTimeout(function(){ramusage()}, 60000);
      }
    );
})();

(function vnstat_top10() {
    $.get('{{ url_for('vnstat') }}', function(data) {
      $("#top10").html(data);
      setTimeout(function(){vnstat_top10()}, 600000);
      }
    );
  })();
{% endmacro %}

{% macro build_widget_js_shared() %}
(function netusage() {
  $.get('{{ url_for('network_quota') }}', function(data) {
    var percent = Math.trunc(data['perutil']);
    $("#netfree").html(data['netfree']);
    $("#netused").html(data['netused']);
    $("#nettotal").html(data['nettotal']);
    $("#netpercent").html(data['perutil']);
    if (Number(data['perutil']) > 90) {
      $("#netindicator.systemindicator").addClass("bg-danger").removeClass("bg-success bg-warning");
      $("#netprogress").css("width", percent + "%").attr("aria-valuenow", percent).addClass("bg-danger").removeClass("bg-success bg-warning");
    } else if (Number(data['perutil']) > 75) {
      $("#netindicator.systemindicator").addClass("bg-warning").removeClass("bg-success bg-danger");
      $("#netprogress").css("width", percent + "%").attr("aria-valuenow", percent).addClass("bg-warning").removeClass("bg-success bg-danger");
    } else {
      $("#netindicator.systemindicator").addClass("bg-success").removeClass("bg-warning bg-danger");
      $("#netprogress").css("width", percent + "%").attr("aria-valuenow", percent).addClass("bg-success").removeClass("bg-danger bg-warning");
    }
    setTimeout(function(){netusage()}, 60000);
    }
  );
})();
{% endmacro %}