{% extends "layout2.html" %}
{% load i18n %}
{% load static %}

{% block css_include %}


{% endblock %}

{% block js_include %}

{% endblock %}


{% block content %}

  <section class="content">
    <div class="row">
      <div class="col-md-12">
        {# If there is save/configuration errors #}
        <div class="panel">
          <div class="panel-heading">
              <div class="panel-control">
                <a class="btn btn-flat btn-primary" href="{% url 'workflow.edit' %}"><i class="fa fa-plus-circle">&nbsp;</i>{% translate "Add an entry" %}</a>
              </div>
              <h1 class="panel-title"><i class="fab fa-hubspot">&nbsp;</i>{% translate "Workflow" %}</h1>
          </div>
          <div class="panel-body">
            <table class="table table-bordered table-striped table-hover table-heading table-datatable" id="workflow_table">
                  </table>
          </div>
        </div>
      </div>
    </div>
  </section>

{% endblock %}

{% block jquery_code %}

  $(function(){
    $('[data-toggle="tooltip"]').tooltip();

    var datatableCanRedraw = true;

    var aoColumns = [
      {
        sTitle: '{% translate "Enabled" %}',
        name: "enabeld",
        aTargets: [0],
        defaultContent: "",
        sWidth: 5,
        mData: "enabled",
        mRender: function(data, type, row){
          if (data)
            return "<i class='fa fa-check'></i>";
          return "<i class='fa fa-times'></i>";
        }
      },
      {
        sTitle: '{% translate "Name" %}',
        name: "name",
        aTargets: [1],
        defaultContent: "",
        mData: "name"
      },
      {
        sTitle: '{% translate "Frontend" %}',
        name: "frontend",
        aTargets: [2],
        defaultContent: "",
        sWidth: "20%",
        mData: "frontend",
        mRender: function(data, type, row){
          var cpt = 0;
          var result = "";
          $.each(row.frontend_status, function(key, value) {
            if( cpt > 0 )
              result += "</br>";
            switch( value ) {
              case "OPEN":
                result += '<img width="16" height="16" src="{% static 'img/status_green.png' %}" class="img_responsive"/>&nbsp;';
                break;
              case "STOP":
                result += '<img width="16" height="16" src="{% static 'img/status_grey.png' %}" class="img_responsive"/>&nbsp;';
                break;
              case "UNKNOWN":
                result += '<i class="icon fa fa-question-circle"></i>&nbsp;';
                break;
              case "ERROR":
                result += '<img width="16" height="16" src="{% static 'img/status_red.png' %}" class="img_responsive"/>&nbsp;';
                break;
              case "DISABLED":
                result += '<i class="icon fa fa-toggle-off"></i>&nbsp;';
                break;
              case "WAITING":
                result += '<i class="icon fa fa-spinner fa-spin"></i>&nbsp;';
                break;
            }
            result += key+':<font size="-2">'+value+'</font>';
            cpt++;
          });
          return data + "&nbsp;&nbsp;<span class='pull-right'>" + result + "</span>";
        }
      },
      {
        sTitle: '{% translate "Backend" %}',
        name: "backend",
        aTargets: [3],
        defaultContent: "",
        mData: "backend",
        sWidth: "20%",
        mRender: function(data, type, row){
          var cpt = 0;
          var result = "";
          $.each(row.backend_status, function(key, value) {
            if( cpt > 0 )
              result += "</br>";
            switch( value ) {
              case "UP":
                result += '<img width="16" height="16" src="{% static 'img/status_green.png' %}" class="img_responsive"/>&nbsp;';
                break;
              case "DOWN":
                result += '<img width="16" height="16" src="{% static 'img/status_grey.png' %}" class="img_responsive"/>&nbsp;';
                break;
              case "UNKNOWN":
                result += '<i class="icon fa fa-question-circle"></i>&nbsp;';
                break;
              case "ERROR":
                result += '<img width="16" height="16" src="{% static 'img/status_red.png' %}" class="img_responsive"/>&nbsp;';
                break;
              case "DISABLED":
                result += '<i class="icon fa fa-toggle-off"></i>&nbsp;';
                break;
              case "WAITING":
                result += '<i class="icon fa fa-spinner fa-spin"></i>&nbsp;';
                break;
            }
            result += key+':<font size="-2">'+value+'</font>';
            cpt++;
          });
          return data + "&nbsp;&nbsp;<span class='pull-right'>" + result + "</span>";
        }
      },
      {
        sTitle: '{% translate "FQDN" %}',
        name: "fqdn",
        aTargets: [4],
        defaultContent: "",
        mData: "fqdn"
      },
      {
        sTitle: '{% translate "Public Directory" %}',
        name: "public_dir",
        aTargets: [5],
        defaultContent: "",
        mData: "public_dir"
      },{
        sTitle: '{% translate "Authentication" %}',
        name: "authentication",
        aTargets: [6],
        defaultContent: "",
        mData: "authentication",
        mRender: function(data, type, row){
          if (data === "None")
            return "<i class='fa fa-ban'></i>";
          return data;
        }
      },
      {
        sTitle: '{% translate "ACLs" %}',
        name: "acls",
        aTargets: [7],
        defaultContent: "",
        mData: "acls"
      },
      {
        sTitle: '{% translate "Action" %}',
        mData:"id",
        aTargets: [8],
        sWidth: "5%",
        defaultContent: "",
        mRender: function(data, type, row) {
          return '<a class="btn btn-flat btn-xs btn-danger btn-delete" data-toggle="tooltip" data-placement="top" href="/workflow/delete/' + data + '" title="{% translate 'Delete' %}"><span><i class="fas fa-trash-alt"></i></span></a>';
        }
      }
    ];

    var workflow_table = $("#workflow_table").dataTable({
      bServerSide   : true,
      order         : [[1, 'desc']],
      iDisplayLength: 10,
      bProcessing   : true,
      bSort         : true,
      sAjaxSource   : '',
      sServerMethod : 'POST',
      aoColumnDefs  : aoColumns,
      language      : language_datatable,
      fnServerData  : function(sSource, aoData, fnCallback){

        var columns = [];
        for (var i in aoColumns){
          if( aoColumns[i].bSearchable !== false && aoColumns[i].mData !== null )
            columns.push(aoColumns[i].mData);
        }

        aoData.push({
          name: 'columns',
          value: JSON.stringify(columns)
        });

        $.ajax({
          type   : "POST",
          url    : sSource,
          data   : aoData,
          success: function(data, callback){
            if (check_json_error(data)){
              fnCallback(data);
            }
          }
        }) // /$.ajax
        .fail( function( jqXHR, textStatus, data) {
          check_json_error(data)
        }) // /$.fail
        .done( function( data ) {
          if (!data.status){
            check_json_error(data);
          } else {
            fnCallback(data);
          }
        }); // /$.done
      }, // /fnServerData

      fnCreatedRow: function(nRow, aData, iDataIndex){
        /* Events binding to edit a workflow */
        $(nRow).on('click', 'td', function(e) {
          if (e.target.tagName !== "TD") return;
          const url = "{% url 'workflow.edit' %}" + aData.id
          /* Open a workflow edition in a new tab with ctrl click */
          if (e.ctrlKey || e.metaKey) {
            window.open(url, '_blank');
          } else {
            window.location.href = url;
          }
        }); // /$(nRow).on('click', 'td'

        /* Open a workflow edition in a new tab with middle click */
        $(nRow).on('mousedown', 'td', function(e){
          if (e.target.tagName === "TD" && e.button === 1) {
            window.open("{% url 'workflow.edit' %}" + aData.id, '_blank');
          }
        }); // /$(nRow).on('mousedown', 'td'
      }, // fnCreatedRow: function

      fnDrawCallback: function(settings){
        datatableCanRedraw = true;
      }, // fnDrawCallback: function
    }); // var workflow_table = $("#workflow_table").dataTable

    /* Filter datatable only 1s after end of user input */
    $(".dataTables_filter input")
    .off("keyup.DT input.DT")
    .bind("input", (delay(function (e) {
      workflow_table.fnFilter($(".dataTables_filter input").val());
      //$("#workflow_table").DataTable().search($(this).val()).draw(false); // for datatable 1.10
    }, 1000)));

    function delay(callback, ms) {
      var timer = 0;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
          callback.apply(this, arguments);
        }, ms || 0);
      };
    }

    /* Reload table data every 5 seconds if previous one answered */
    setInterval(function(){
      if(datatableCanRedraw == true) {
        datatableCanRedraw = false;
        workflow_table.fnDraw(false);
      }
    }, 5000)
  });

{% endblock %}