tables.js

;(function() {
  var AJAX_URL = '/job/'
  var tablesTypes = {
    RUNNING: 'running',
    PENDING: 'pending',
    FINISHED: 'finished',
    DELETED: 'deleted'
  }
  var actionsTypes = {
    DELETE: 'delete',
    CANCEL: 'cancel',
    RESTART: 'restart',
    EDIT: 'edit',
    ACTIVATE: 'activate',
    RUN: 'run'
  }
  var templetes = {
    pending: function(data) {
      return `
        <tr id="${data.id}">
          <td data-col="job">${data.name}</td>
          <td data-col="spider">${data.spider}</td>
          <td data-col="created-date">${new Date(data.create_time).format('dd.mm.yyyy HH:MM')}</td>
          <td data-col="status" class="text-success">${data.status}</td>
          <td data-col="action">
            <button class="btn btn-sm btn-primary" data-loading="loading" data-action="run" data-loading-text="Running..." data-text="Run">Run</button>
            <button class="btn btn-sm btn-danger" data-action="delete" data-loading-text="Deleting..." data-text="Delete">Delete</button>
            <a class="btn btn-sm btn-secondary" href='/edit_job/' + '${data.id}'>
              <i class="fa fa-cog" aria-hidden="true"></i>
            </a>
          </td>
        </tr>
      `
    },
    running: function(data) {
      return `
        <tr id="${data.id}">
          <td data-col="job">${data.name}</td>
          <td data-col="spider">${data.spider}</td>
          <td data-col="created-date">${data.create_time ? new Date(data.create_time).format('dd.mm.yyyy HH:MM') : 'No date'}</td>
          <td data-col="start-date">${data.start_time ? new Date(data.start_time).format('dd.mm.yyyy HH:MM') : 'No date'}</td>
          <td data-col="status" class="text-success">${data.status}</td>
          <td data-col="log"><a class="btn btn-sm btn-secondary" href="?action=log&id=${data.id}">Get log</a></td>
          <td data-col="action">
            <button class="btn btn-sm btn-primary" data-action="cancel" data-loading-text="Cancelling..." data-text="Cancel">Cancel</button>
            <button class="btn btn-sm btn-danger" data-action="delete" data-loading-text="Deleting..." data-text="Delete">Delete</button>
          </td>
        </tr>
      `
    },
    deleted: function(data) {
      return `
        <tr id="${data.id}">
          <td data-col="job">${data.name}</td>
          <td data-col="spider">${data.spider}</td>
          <td data-col="created-date">${data.create_time ? new Date(data.create_time).format('dd.mm.yyyy HH:MM') : 'No date'}</td>
          <td data-col="start-date">${data.start_time ? new Date(data.start_time).format('dd.mm.yyyy HH:MM') : 'No date'}</td>
          <td data-col="finished-date">${data.end_time ? new Date(data.end_time).format('dd.mm.yyyy HH:MM') : 'No date'}</td>
          <td data-col="status" class="text-danger">${data.status}</td>
          <td data-col="log"><a class="btn btn-sm btn-secondary" href="?action=log&id=${data.id}">Get log</a></td>
          <td data-col="action">
            <button class="btn btn-sm btn-success" data-action='activate' data-loading-text="Activating..." data-text="Activate">Activate</button>
          </td>
        </tr>
      `
    },
    finished: function(data) {
      return `
        <tr id="${data.id}">
          <td data-col="job">${data.name}</td>
          <td data-col="spider">${data.spider}</td>
          <td data-col="created-date">${new Date(data.create_time).format('dd.mm.yyyy HH:MM')}</td>
          <td data-col="start-date">${new Date(data.create_time).format('dd.mm.yyyy HH:MM')}</td>
          <td data-col="finished-date">${new Date(data.create_time).format('dd.mm.yyyy HH:MM')}</td>
          <td data-col="status" class="text-success">${data.status}</td>
          <td data-col="log"><a class="btn btn-sm btn-secondary" href="?action=log&id=${data.id}">Get log</a></td>
          <td data-col="action">
            <button class="btn btn-sm btn-primary" data-action="restart" data-loading-text="Restarting..." data-text="Restart">Restart</button>
            <button class="btn btn-sm btn-danger" data-action="delete" data-loading-text="Deleting..." data-text="Delete">Delete</button>
          </td>
        </tr>
      `
    }
  }
  // ------------------------------
  // Instance
  // ------------------------------
  var tables = {
    btnAction: "button[data-action]",

    btnCancel: "button[data-action='cancel']",
    btnDelete: "button[data-action='delete']",
    btnRun: "button[data-action='run']",
    btnRestart: "button[data-action='restart']",
    btnActivate: "button[data-action='activate']",
    btnOption: "button[data-action='edit']",
    btnLog: "button[data-action='log']",

    btnTryAgain: '.close-loading',
    updateHightlight: function() {

      $('code').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    },
    init: function () {
      hljs.initHighlightingOnLoad();
      var self = this;

      $('#log-modal').on('hidden.bs.modal', function() {
        $('body').css('padding-right', '0px');
        self.setNormalButton(self.btnAction);
      });
      $(document).on('click', this.btnTryAgain, function() { self.tryAgain(self) });
      $(document).on('click', this.btnDelete, function() {self.action(self, this, tablesTypes.DELETED)});
      $(document).on('click', this.btnRun, function() {self.action(self, this, tablesTypes.RUNNING)});
      $(document).on('click', this.btnRestart, function() {self.action(self, this, tablesTypes.RUNNING)});
      $(document).on('click', this.btnCancel, function() {self.action(self, this, tablesTypes.FINISHED)});
      $(document).on('click', this.btnActivate, function() {self.action(self, this, tablesTypes.PENDING)});
      $(document).on('click', this.btnOption, function() {self.actionEdit(self, this)});
      $(document).on('click', this.btnLog, function() {self.actionLog(self, this)});
    },
    action: function(vm, button, toTable) {
      var itemRoot = $(button).closest('tr');
      var dataAjax = vm.getItemAjaxData(button);

      vm.setLoadingButton(button);
      vm.showLoading();
      // ------------------------------
      // AJAX
      // ------------------------------
      vm.sendData(dataAjax, function(response) {
        vm.loadingOnSuccess();
        // Delete old row
        itemRoot.remove();
        // Create new row
        var item = vm.createItem(dataAjax.action, response);
        // Append new row
        vm.moveItem(item, toTable);
        // Hide loading
        vm.hideLoading();
      }, function(error) {
        vm.loadingOnError(error);
      });
    },
    actionLog: function(vm, button) {
      var dataAjax = vm.getItemAjaxData(button);
      vm.loadingOnSuccess();
      vm.setLoadingButton(button);
      vm.showLoading();
      // ------------------------------
      // AJAX
      // ------------------------------
      vm.sendData(dataAjax, function(response) {
        $('.modal-body .js').empty().html(response);
        $('#log-modal').modal();
        vm.setLoadingButton(button)
        vm.hideLoading();
        vm.updateHightlight();
        }, function(error) {
          vm.loadingOnError(error);
      });
    },
    actionEdit: function(vm, button) {
      var dataAjax = vm.getItemAjaxData(button);
      vm.setLoadingButton(button);
      // ------------------------------
      // AJAX
      // ------------------------------
      vm.sendData(dataAjax, function(response) {
        console.log(response);
      }, function() {
        vm.setNormalButton(button);
      });
    },

    createItem (action, data) {
      if (action === actionsTypes.ACTIVATE) {
        return templetes.pending(data);
      }
      if (action === actionsTypes.RESTART || action === actionsTypes.RUN) {
        return templetes.running(data);
      }
      if (action === actionsTypes.DELETE) {
        return templetes.deleted(data);
      }
      if (action === actionsTypes.CANCEL) {
        return templetes.finished(data);
      }
      return "Sorry no have related types or actions..."
    },
    // ------------------------------
    // Additional functions
    // ------------------------------
    sendData: function(data, success, error) {
      $.ajax({
        method: "POST",
        url: AJAX_URL,
        cache: false,
        headers: { 'X-CSRFToken': $.cookie('csrftoken') },
        data: data,
        success: success,
        error: error
      });
    },
    setNormalButton(button) {
      $(button).each(function(index, item) {
        $(item).html($(item).data('text'))
          .prop('disabled', false)
          .attr('aria-pressed', false);
      });

    },
    setLoadingButton(button) {
      if($(button).attr('aria-pressed') === false) {
        $(button).html($(button).data('text'))
          .prop('disabled', false)
          .attr('aria-pressed', true);
      } else {
        $(button).html($(button).data('loading-text'))
          .prop('disabled', true)
          .attr('aria-pressed', true);
      }
    },
    getItemAjaxData(button) {
      return {
        table: $(button).closest('.table').data('table'),
        id: $(button).closest('tr').prop('id'),
        action: $(button).data('action')
      }
    },
    moveItem: function (item, table) {
      var $table = $("[data-table=" + table + "]");
      var $tbody = $table.find('tbody');
      // Append item
      $table.find('tbody').append(item);
    },
    tryAgain (vm) {
      vm.hideLoading();
      vm.setNormalButton(vm.btnAction);
    },
    showLoading() {
      $('.loading').show();
      $('body').addClass('modal-open').css('padding-right', '17px');
    },
    hideLoading(vm) {
      $('.loading').hide();
      $('body').removeClass('modal-open').css('padding-right', '0px');
    },
    loadingOnSuccess() {
      $('.loading-content').empty().append("<i class='fa fa-refresh fa-spin'></i>");
    },
    loadingOnError(error) {
      $('.loading-content').empty().append("<code>Try again later... <br>  Error status: " + error.status + "<br> Error status text: " + error.statusText + "<br><button class='btn btn-sm mt-4 close-loading btn-secondary'>Try again</button></code>");
    }
  }
  // ------------------------------
  // Initialization
  // ------------------------------
  tables.init();

})();