<!DOCTYPE html>
<html>
  <head>
    <title>Skia Push Server</title>

    {{template "header.html" .}}

    <style is="custom-style" type="text/css" media="screen">
      :root {
        --default-primary-color: #1f78b4;
        paper-input {
          --paper-input-container-color: white;
          --paper-input-container-input-color: white;
        }
      }
    </style>

    <style type="text/css" media="screen">
      body {
        font-family: Arial, sans-serif;
        font-size: 11px;
      }

      login-sk {
        margin-left: auto;
      }

      login-sk a {
        color: white;
      }

      a {
        color: #1f78b4;
        font-weight: bold;
      }

      #mainContainer {
        background: white;
        padding: 2em 1em;
      }

      paper-toast {
        margin: 2em;
      }

      html, body {
        height: 100%;
        margin: 0;
      }

      paper-header-panel {
        height: 100%;
      }

      #refresh,
      #spinner {
        display: inline-block;
      }

    </style>
  </head>
  <body class="fullbleed layout vertical">
    <paper-header-panel fixed="true">
      <paper-toolbar>
        <div>Skia Push</div>
        <div>
          <button id="refresh" on-tap="refreshPackages">Refresh Packages</button>
          <paper-spinner id="spinner"></paper-spinner>
        </div>
        <div>
          <paper-input label="Filter servers/apps" id="filter-servers"></paper-input>
        </div>
        <login-sk></login-sk>
      </paper-toolbar>

      <push-server-sk></push-server-sk>
      <paper-toast></paper-toast>
      <error-toast-sk></error-toast-sk>
    </paper-header-panel>

    <script type="text/javascript" charset="utf-8">
      (function(){
        var UPDATE_MS = 5000;

        sk.get("/_/state").then(JSON.parse).then(function(json) {
          $$$('push-server-sk').setConfig(json.servers, json.packages, json.ip);
          Object.keys(json.status).forEach(function(service) {
            sk.Mailbox.send(service, json.status[service]);
          });
        }).catch(sk.errorMessage);

        function updateStatus() {
          sk.get("/_/status").then(JSON.parse).then(function(json) {
            Object.keys(json).forEach(function(service) {
              sk.Mailbox.send(service, json[service]);
            });
            window.setTimeout(updateStatus, UPDATE_MS);
          }).catch(function(err) {
            sk.errorMessage(err);
            window.setTimeout(updateStatus, UPDATE_MS);
          });
        };
        window.setTimeout(updateStatus, UPDATE_MS);

        $$$('push-server-sk').addEventListener('change-package', function(e) {
          var body = {
            Name: e.detail.name,
            Server: e.detail.server
          };
          sk.post("/_/state", JSON.stringify(body)).then(JSON.parse).then(function(json) {
            $$$('push-server-sk').setConfig(json.servers, json.packages, json.ip);
          }).catch(sk.errorMessage);
        });

        $$$('push-server-sk').addEventListener('unit-action', function(e) {
          sk.post("/_/change?" + sk.query.fromObject(e.detail), "").then(JSON.parse).then(function(json) {
            $$$('paper-toast').text = json.result;
            $$$('paper-toast').show();
          }).catch(sk.errorMessage);
        });

        $$$('#refresh').addEventListener('click', function() {
          $$$('#spinner').active = true;
          sk.get("/_/state?refresh=true").then(JSON.parse).then(function(json) {
            $$$('push-server-sk').setConfig(json.servers, json.packages, json.ip);
            Object.keys(json.status).forEach(function(service) {
              sk.Mailbox.send(service, json.status[service]);
            });
            $$$('#spinner').active = false;
          }).catch(function(msg) {
            sk.errorMessage(msg);
            $$$('#spinner').active = false;
          });
        });

        $$$('#filter-servers').addEventListener('input', function() {
          $$$('push-server-sk').filterText = $$$('#filter-servers').value;
        });

        // Check to see if filter param was specified.
        var params = sk.query.toParamSet(window.location.search.substring(1));
        if (params['filter']) {
          $$$('#filter-servers').value = params['filter'][0];
          $$$('push-server-sk').filterText = params['filter'][0];
        }
      })();
    </script>
  </body>
</html>