{% extends 'yangsuite/base-cui.html' %}
{% load staticfiles %}
{% block javascript %}
<script src="{% static 'ysgrpctelemetry/js/grpctelemetry.js' %}"></script>
<script src="{% static 'ysnetconf/js/netconf.js' %}"></script>
<script src="{% static 'ysdevices/js/devices.js' %}"></script>
{% endblock javascript %}
{% block cui-css %}
<link rel="stylesheet" href="{% static 'yangsuite/css/cui-standard-1.3.3.min.css' %}"/>
{% endblock cui-css %}
{% block css %}
<link rel="stylesheet" href="{% static 'ysgrpctelemetry/css/grpctelemetry.css' %}"/>
{% endblock css %}
{% block breadcrumbs %}<li><span>gRPC Telemetry</span></li>{% endblock %}
{% block page-title %}gRPC Telemetry{% endblock %}
{% block help_url %}{% url 'help' section='ysgrpctelemetry' document='grpc'%}{% endblock %}
{% block body %}
<div class="content">
 <div class="container-fluid">
  <div class="row">
    <div class="col-3">
      <div class="form-group">
        <div class="form-group__text">
          <label for="ys-listen-ip">Listen at IP address</label>
          <input type="text" id="ys-listen-ip" placeholder="IP address">
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="form-group">
        <div class="form-group__text">
          <label for="ys-listen-port">Listen at port</label>
          <input type="number" min="1" max="65535" id="ys-listen-port" placeholder="TCP port">
        </div>
      </div>
    </div>
    <div class="col-auto">
      <button id="ys-listen-start" class="btn btn--small btn--primary" style="margin-top: 20px;">Start receiver</button>
    </div>
    <div id="ys-tls-div">
      <div class="form-group">
        <label class="checkbox" style="margin-top: 20px;">
          <input type="checkbox" id="ys-tls-device">
          <span class="checkbox__input"></span>
          <span class="checkbox__label">(Optional) TLS receiver</span>
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button id="ys-listen-stop" class="btn btn--small btn--primary" style="margin-top: 20px;">Manage receivers</button>
    </div>
    <div class="col-auto">
      <button id="ys-listen-clear" class="btn btn--small" style="margin-top: 20px;">Clear</button>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div id="ys-telemetry-output" class="telemetry-output"></div>
    </div>
  </div>
  <div id="ys-grpc-output" class="grpc-output"></div>
 </div>
</div>
<div id="ys-device-dialog"></div>
<div id="ys-servers-dialog"></div>
{% endblock body %}
{% block script %}
<script>
$(function() {
    grpctelemetry.checkServicers();
    $("#ys-device-dialog").dialog({autoOpen: false});
    $("#ys-servers-dialog").dialog({autoOpen: false});

    $("#ys-listen-start").click(function() {
      let address = $("#ys-listen-ip").val();
      let port = $("#ys-listen-port").val();
      grpctelemetry.startListening(port, address);
      $("#ys-listen-ip").val("");
      $("#ys-listen-port").val("");
    });

    $("#ys-listen-stop").click(function() {
      let servicerList = grpctelemetry.getServicers();
    });

    $("#ys-tls-device").click(function(event){
      if ($("#ys-tls-device").prop('checked') == false) {
        $("#ys-device-dialog").dialog("close");
        return;
      }

      $("#ys-device-dialog").dialog({
        title: "Choose device with certificate/key",
        width: 600,
        buttons: [{
          text: "Start TLS telemetry reciever",
          "class": "btn btn--medium btn--primary",
          click: function () {
            let device = $("#ys-device").val();
            let port = $("#ys-listen-port").val();
            let address = $("#ys-listen-ip").val();
            if (!device) {
              alert("Choose a device");
              return;
            }
            if (!address) {
              alert("Enter IP address");
              return;
            }
            grpctelemetry.startListening(port, address, secure=device);
            $("#ys-listen-ip").val("");
            $("#ys-listen-port").val("");
            $(this).dialog("close");
          },
        }],
        close: function() {
          $(this).dialog("close");
          $("#ys-tls-device").prop('checked', false)
        },
      }).html(
        '<div class="col-auto">\
         <div class="form-group label--inline">\
          <div class="form-group__text select">\
            <label for="ys-device">Select device with server certificate/key</label>\
              <select id="ys-device">\
                <option value="" selected>disabled</option>\
                {% for device in devices %}\
                <option value="{{ device.key }}" title="{{ device.description }}">{{ device.name }}</option>\
                {% endfor %}\
              </select>\
            </label>\
          </div>\
        </div>\
        </div>'
      ).dialog("open");
    });

    $("#ys-listen-clear").click(function() {
        $("#ys-grpc-output").empty();
    });
});
</script>
{% endblock script %}