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

{% block css_include %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/datatables.min.css' %}">
{% endblock %}

{% block js_include %}
    <script src="{% static 'plugins/datatables/jquery.dataTables.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.js' %}"></script>
{% endblock %}


{% block content %}

  <section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-heading">
                    <div class="panel-control">
                      <a id="reload_all" class="btn btn-flat btn-primary"><i class="fa fa-sync">&nbsp;</i>{% translate "Reload all" %}</a>
                      <a class="btn btn-flat btn-primary" href="{% url 'applications.backend.edit' %}"><i class="fa fa-plus-circle">&nbsp;</i>{% translate "Add an entry" %}</a>
                    </div>
                    <h1 class="panel-title"><i class="fa fa-sitemap">&nbsp;</i>{% translate "Backends" %}</h1>
                </div>
                <div class="panel-body">
                  <table class="table table-bordered table-striped table-hover table-heading table-datatable" id="backend_list">
                  </table>
                </div>
            </div>
        </div>
    </div>
    <!--<i class="fa fa-fw fa-fighter-jet"></i>-->

  </section>

{% endblock %}

{% block jquery_code %}

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

  var datatableCanRedraw = true;

  var aoColumns = [
    {
      sTitle: "ID",
      name: "id",
      aTargets: [0],
      defaultContent: "",
      mData: "id",
      bVisible: false,
    },
    {
      sTitle: '{% translate "Status" %}',
      defaultContent: "",
      name: "status",
      mData: "status",
      aTargets: [1],
      bSearchable: false,
      mRender: function(data, type, row) {
        var cpt = 0;
        var result = "";
        $.each(data, 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 result;
      }
    },
    {
      sTitle: '{% translate "Name" %}',
      name: "name",
      aTargets: [2],
      defaultContent: "",
      mData: "name"
    },
    {
      sTitle: '{% translate "Tags" %}',
      name: "tags",
      aTargets: [3],
      defaultContent: "",
      mData: "tags"
    },
    {
      sTitle: '{% translate "Servers" %}',
      name: "servers",
      aTargets: [4],
      defaultContent: "",
      mData: "servers",
      mRender: function(data, type, row) {
        var result = "";
        for( l of data ) {
          result = result + l + "<br>";
        }
        return result;
      }
    },
    {
      sTitle: '{% translate "Mode" %}',
      name: "mode",
      aTargets: [5],
      defaultContent: "",
      mData: "mode"
    },
    {
      sTitle: '{% translate "Additional infos" %}',
      name: "additional_infos",
      aTargets: [6],
      defaultContent: "",
      mData: "additional_infos"
    },
    {
      sTitle: '{% translate "Action" %}',
      mData:"id",
      aTargets: [7],
      defaultContent: "",
      mRender: function(data, type, row) {
        var statuses = Object.values(row.status);
        result = '<a class="btn btn-flat btn-xs btn-primary" data-toggle="tooltip" data-placement="top" title="Copy" href="/apps/backend/clone/' + data + '"><span><i class="fa fa-copy"></i></span></a>' +
        '&nbsp;<a class="btn btn-flat btn-xs btn-danger" data-toggle="tooltip" data-placement="top" title="Delete" href="/apps/backend/delete/' + data + '"><span><i class="fas fa-trash-alt"></i></span></a>';
        if( statuses.indexOf("OPEN") >= 0 ) {
          result += '&nbsp;<button id="pause_'+data+'" type="button" data-toggle="tooltip" data-placement="top" title="Pause" class="btn btn-flat btn-xs btn-primary action pause"><i class="fa fa-pause"></i></button>';
        } else if( statuses.indexOf("STOP") >= 0 )
          result += '&nbsp;<button id="start_'+data+'" type="button" class="btn btn-flat btn-xs btn-success action start"><i class="fa fa-play"></i></button>';
        return result;
      }
    }
  ];

  var backends_table = $("#backend_list").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 (!data.status){
            notify('error', "{% translate 'Error' %}", data.error);
          } else {
            fnCallback(data);
          }
        }
      }) // /$.ajax
      .fail( function( jqXHR, textStatus ) {
        notify('error', "{% translate 'Error' %}", jqXHR.responseText);
      }) // /$.fail
      .done( function( data ) {
        if (!data.status){
          notify('error', "{% translate 'Error' %}", data.error);
        } else {
          fnCallback(data);
        }
      }); // /$.done
    }, // /fnServerData

    fnCreatedRow: function(nRow, aData, iDataIndex){

      /* Events binding to start a backend */
      $(nRow).on('click', '.action', function(e) {
        /* Request start of the selected backend */
        /* First, retrieve the action to do */
        var action = ($(this).hasClass('start') ? "start" : ($(this).hasClass('pause') ? "pause" : ($(this).hasClass('disable') ? "disable" : "")));
        $.ajax({
          type   : "GET",
          url    : "/services/backend/"+action+"/"+aData.id,
        }) // /$.ajax
        .fail( function( jqXHR, textStatus ) {
          new PNotify({
            title: 'Unknown error occurred',
            text: '<a style="color:white; text-decoration: underline; font-weight: bold;">'+jqXHR.responseText
                  +'</a>',
            type: 'error',
            styling: 'bootstrap3',
            width: '500px',
            buttons: {
                closer: true,
                sticker: false
            }
          });
        }) // /$.fail
        .done( function( msg ) {
          if( msg.status ) {
            new PNotify({
              title: "Success",
              text: '<a style="color:white; text-decoration: underline; font-weight: bold;">'+msg.message+'</a>',
              type: 'success',
              styling: 'bootstrap3',
              width: '500px',
              buttons: {
                  closer: true,
                  sticker: false
              }
            });
          } else {
            new PNotify({
              title: msg.error.split(':').join('</br>'), // Replace : by return for better view,
              text: '<a style="color:white; text-decoration: underline; font-weight: bold;">'+msg.error_details+'</a>',
              type: 'error',
              styling: 'bootstrap3',
              width: '500px',
              buttons: {
                  closer: true,
                  sticker: false
              }
            });
          }
        }); // /$.done
        e.stopPropagation();
      }); // /$(nRow).on('click', '.action'

      /* Events binding to edit a backend */
      $(nRow).on('click', 'td', function(e) {
        if (e.target.tagName !== "TD") return;
        const url = "{% url 'applications.backend.edit' %}" + aData.id
        /* Open a backend 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 backend 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 'applications.backend.edit' %}" + aData.id, '_blank');
        }
      }); // /$(nRow).on('mousedown', 'td'

      /* Events binding to print a backend conf
      $(nRow).on('mouseover', function(e) {
          $('#details_backend').html("");

          var conf = aData['conf'];
          $('#details_backend').append("<pre>"+conf+"</pre>");

          $('#details_backend').show();
        });
        $(nRow).on('mouseout', function(e){
          $('#details_backend').hide();
      }); // $(nRow).on('mouseover'
      */
    }, // fnCreatedRow: function

    fnDrawCallback: function(settings){
      datatableCanRedraw = true;
    }, // fnDrawCallback: function

  }); // var backends_table = $("#backend_list").dataTable

  /* Filter datatable only 1s after end of user input */
  $(".dataTables_filter input")
  .off("keyup.DT input.DT")
  .bind("input", (delay(function (e) {
    backends_table.fnFilter($(".dataTables_filter input").val());
  }, 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;
      backends_table.fnDraw(false);
    }
  }, 5000)

  /* Listener to reload haproxy service on all nodes */
  $('#reload_all').on('click', function(event) {
    $.ajax({
      type   : "GET",
      url    : "{% url 'services.haproxy.reload' %}",
    }) // /$.ajax
    .fail( function( jqXHR, textStatus ) {
      new PNotify({
        title: 'Unknown error occurred',
        text: '<a style="color:white; text-decoration: underline; font-weight: bold;">'+jqXHR.responseText
              +'</a>',
        type: 'error',
        styling: 'bootstrap3',
        width: '500px',
        buttons: {
            closer: true,
            sticker: false
        }
      });
    }) // /$.fail
    .done( function( msg ) {
      if( msg.status ) {
        new PNotify({
          title: "Success",
          text: '<a style="color:white; text-decoration: underline; font-weight: bold;">'+msg.message+'</a>',
          type: 'success',
          styling: 'bootstrap3',
          width: '500px',
          buttons: {
              closer: true,
              sticker: false
          }
        });
      } else {
        new PNotify({
          title: msg.error,
          text: '<a style="color:white; text-decoration: underline; font-weight: bold;">'+msg.error_details+'</a>',
          type: 'error',
          styling: 'bootstrap3',
          width: '500px',
          buttons: {
              closer: true,
              sticker: false
          }
        });
      }
    }); // /$.done
  }); // $('#reload_all').on('click'


{% endblock %}