Skip to content

E
esi-table-data
Commit 85446dc5 authored by Vasyl Bodnaruk's avatar Vasyl Bodnaruk
Browse files
Options

rebuild template job_list.html for new version Js

parent 0a18c718
Show whitespace changes
Inline Side-by-side
Showing with 380 additions and 301 deletions
esi/static/css/style.css
View file @ 85446dc5
/* Actions */
.actions {
display: flex;
......@@ -41,8 +42,11 @@
.btn {
cursor: pointer;
}
.btn-min {
padding: .2rem 1rem;
.btn-sm {
margin-right: 5px;
}
.btn-min:last-child {
margin-right: 0;
}
/* Table */
.table-header {
......@@ -89,5 +93,32 @@
height: 300px;
}
.container-max {
max-width: 1170px;
max-width: 1300px;
}
td[data-col="action"] {
display: flex;
justify-content: flex-end;
}
/* Loading */
.loading {
display: none;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
top: 0;
z-index: 9999;
}
.loading-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.loading i {
font-size: 1.5em;
color: #fff;
}
\ No newline at end of file
esi/static/js/tables.js
View file @ 85446dc5
;(function() {
var tablesTypes = {
var AJAX_URL = '/job/'
var tablesTypes = {
RUNNING: 'running',
PENDING: 'pending',
FINISHED: 'finished',
DELETED: 'deleted'
}
var actions = {
}
var actionsTypes = {
DELETE: 'delete',
CANCEL: 'cancel',
RESTART: 'restart',
OPTIONS: 'options',
EDIT: 'edit',
ACTIVATE: 'activate',
RUN: 'run'
}
var cols = {
JOB: 'job',
UUID: 'uuid',
CREATED_DATE: 'created-date',
START_DATE: 'start-date',
FINISHED_DATE: 'finished-date',
STATUS: 'status',
LOG: 'log',
ACTIONS: 'action',
}
}
var templetes = {
pending: function(data) {
return `
<tr id="${data.id}">
<td data-col="job">${data.name}</td>
<td data-col="uuid">${data.uuid}</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>
<button class="btn btn-sm btn-secondary" data-loading-text="<i class='fa fa-cog fa-spin' aria-hidden='true'></i>" data-action="edit" data-text="<i class='fa fa-cog' aria-hidden='true'></i>">
<i class="fa fa-cog" aria-hidden="true"></i>
</button>
</td>
</tr>
`
},
running: function(data) {
return `
<tr id="${data.id}">
<td data-col="job">${data.name}</td>
<td data-col="uuid">${data.uuid}</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"><button data-action="log" class="btn btn-sm btn-secondary" data-loading-text="Creating log..." data-text="Get log">Get log</button></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="uuid">${data.uuid}</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"><button data-action="log" class="btn btn-sm btn-secondary" data-loading-text="Creating log..." data-text="Get log">Get log</button></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="uuid">${data.uuid}</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"><button data-action="log" class="btn btn-sm btn-secondary" data-loading-text="Creating log..." data-text="Get log">Get log</button></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]",
var templetes = {
finishedDate (date) {
return "<td data-col='finished-date'>" + date + "</td>"
},
startDate (date) {
return "<td data-col='start-date'>" + date + "</td>"
},
log (log) {
return "<td data-col='log'>" + log + "</td>"
},
buttonRestart: "<button class='btn btn-min btn-primary' data-action='restart'>Restart</button>",
buttonActivate: "<button class='btn btn-min btn-success' data-action='activate'>Activate</button>",
buttonCancel: "<button class='btn btn-min btn-primary' data-action='cancel'>Cancel</button>",
buttonDelete: "<button class='btn btn-min btn-danger' data-action='delete'>Delete</button>",
buttonRun: "<button class='btn btn-min btn-primary' data-action='run'>Run</button>",
buttonOptions: "<button class='btn btn-min btn-secondary' data-action='options'><i class='fa fa-cog' aria-hidden='true'></i></button>"
}
// ------------------------------
// Instance
// ------------------------------
var tables = {
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',
init: function () {
var self = this;
$(document).on('click', this.btnCancel, function() {
self.onCancel(self, this)
});
$(document).on('click', this.btnDelete, function() {
self.onDelete(self, this)
});
$(document).on('click', this.btnRun, function() {
self.onRun(self, this)
});
$(document).on('click', this.btnRestart, function() {
self.onRestart(self, this)
$('#log-modal').on('hidden.bs.modal', function() {
$('body').css('padding-right', '0px');
});
$(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);
$(document).on('click', this.btnActivate, function() {
self.onActivate(self, this)
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);
});
},
onCancel: function(vm, button) {
var itemData = vm.getItemData(button)
$(button).button('loading');
actionLog: function(vm, button) {
var dataAjax = vm.getItemAjaxData(button);
vm.loadingOnSuccess();
vm.setLoadingButton(button);
vm.showLoading();
// ------------------------------
// AJAX SUCCESS
// AJAX
// ------------------------------
itemData.item.remove();
if(itemData.table === tablesTypes.RUNNING) {
// Format item
itemData.item.find('[data-action="cancel"]').remove();
itemData.item.find('[data-col="action"]').prepend(templetes.buttonRestart);
// Insert col
$(templetes.finishedDate(itemData.date)).insertAfter(itemData.item.find('td[data-col="' + cols.START_DATE + '"]'));
vm.moveItem(itemData.item.outerHTML(), tablesTypes.FINISHED)
}
vm.sendData(dataAjax, function(response) {
$('.modal-body').empty().html(response);
$('#log-modal').modal();
vm.setLoadingButton(button)
vm.hideLoading();
}, function(error) {
vm.loadingOnError(error);
});
},
onDelete: function(vm, button) {
var itemData = vm.getItemData(button)
$(button).button('loading');
actionEdit: function(vm, button) {
var dataAjax = vm.getItemAjaxData(button);
vm.setLoadingButton(button);
// ------------------------------
// AJAX SUCCESS
// AJAX
// ------------------------------
itemData.item.remove();
var response = {
created_date: '21.03.2012',
started_date: '21.03.2015',
finished_date: '21.03.2015'
vm.sendData(dataAjax, function(response) {
console.log(response);
}, function() {
vm.setNormalButton(button);
});
},
createItem (action, data) {
if (action === actionsTypes.ACTIVATE) {
return templetes.pending(data);
}
if(itemData.table === tablesTypes.RUNNING) {
// Format item
itemData.item.find('[data-col="action"]')
.empty()
.prepend(templetes.buttonActivate);
// Insert col
$(templetes.finishedDate(itemData.date)).insertAfter(itemData.item.find('td[data-col="' + cols.START_DATE + '"]'));
if (action === actionsTypes.RESTART || action === actionsTypes.RUN) {
return templetes.running(data);
}
if(itemData.table === tablesTypes.FINISHED) {
// Format item
itemData.item.find('[data-col="action"]')
.empty()
.prepend(templetes.buttonActivate);
if (action === actionsTypes.DELETE) {
return templetes.deleted(data);
}
if(itemData.table === tablesTypes.PENDING) {
// Format item
itemData.item.find('[data-col="action"]')
.empty()
.prepend(templetes.buttonActivate);
// Insert col
$(templetes.startDate(response.started_date)).insertAfter(itemData.item.find('td[data-col="' + cols.CREATED_DATE + '"]'));
$(templetes.finishedDate(itemData.date)).insertAfter(itemData.item.find('td[data-col="' + cols.START_DATE + '"]'));
$(templetes.log('-')).insertAfter(itemData.item.find('td[data-col="' + cols.STATUS + '"]'));
if (action === actionsTypes.CANCEL) {
return templetes.finished(data);
}
vm.moveItem(itemData.item.outerHTML(), tablesTypes.DELETED)
return "Sorry no have related types or actions..."
},
onRun: function(vm, button) {
var itemData = vm.getItemData(button)
$(button).button('loading');
// ------------------------------
// AJAX SUCCESS
// Additional functions
// ------------------------------
sendData: function(data, success, error) {
$.ajax({
method: "GET",
method: "POST",
url: AJAX_URL,
cache: false,
dataType: 'json',
url: '/job/',
contentType: "application/json; charset=utf-8",
data: {'action': 'run', 'id': 2},
error: function(error) {
console.log(error)
},
success: function(response) {
console.log(response)
itemData.item.remove();
if(itemData.table === tablesTypes.PENDING) {
// Format item
itemData.item.find('[data-col="action"]').empty()
itemData.item.find('[data-col="action"]')
.append(templetes.buttonCancel)
.append(templetes.buttonDelete);
// Insert col
$(templetes.startDate(response.start_time)).insertAfter(itemData.item.find('td[data-col="' + cols.CREATED_DATE + '"]'));
$(templetes.log('-')).insertAfter(itemData.item.find('td[data-col="' + cols.STATUS + '"]'));
}
vm.moveItem(itemData.item.outerHTML(), tablesTypes.RUNNING)
}
})
dataType: "json",
data: data,
success: success,
error: error
});
},
onActivate: function(vm, button) {
var itemData = vm.getItemData(button)
$(button).button('loading');
// ------------------------------
// AJAX SUCCESS
// ------------------------------
var response = {
created_date: '21.03.2012',
started_date: '21.03.2015',
finished_date: '21.03.2015'
}
itemData.item.remove();
if(itemData.table === tablesTypes.DELETED) {
// Format item
itemData.item.find('[data-col="' + cols.START_DATE + '"]').remove();
itemData.item.find('[data-col="' + cols.FINISHED_DATE + '"]').remove();
itemData.item.find('[data-col="' + cols.LOG + '"]').remove();
setNormalButton(button) {
$(button).each(function(index, item) {
$(item).html($(item).data('text'))
.prop('disabled', false)
.attr('aria-pressed', false);
});
itemData.item.find('[data-col="action"]').empty();
itemData.item.find('[data-col="action"]')
.append(templetes.buttonRun)
.append(templetes.buttonDelete)
.append(templetes.buttonOptions);
}
vm.moveItem(itemData.item.outerHTML(), tablesTypes.PENDING)
},
onRestart: function(vm, button) {
var itemData = vm.getItemData(button)
$(button).button('loading');
// ------------------------------
// AJAX SUCCESS
// ------------------------------
var response = {
created_date: '21.03.2012',
started_date: '21.03.2015',
finished_date: '21.03.2015'
}
itemData.item.remove();
if(itemData.table === tablesTypes.FINISHED) {
itemData.item.find('[data-col="' + cols.START_DATE + '"]').text(response.started_date);
itemData.item.find('[data-col="' + cols.FINISHED_DATE + '"]').remove();
itemData.item.find('[data-col="action"]').empty();
itemData.item.find('[data-col="action"]')
.append(templetes.buttonCancel)
.append(templetes.buttonDelete);
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);
}
vm.moveItem(itemData.item.outerHTML(), tablesTypes.RUNNING)
},
// ------------------------------
// Additional functions
// ------------------------------
getItemData(button) {
getItemAjaxData(button) {
return {
date: new Date().format("dd.mm.yyyy HH:MM"),
item: $(button).closest('tr'),
table: $(button).closest('.table').data('table').toLowerCase()
table: $(button).closest('.table').data('table'),
id: $(button).closest('tr').prop('id'),
action: $(button).data('action')
}
},
moveItem: function (item, table) {
......@@ -231,22 +226,29 @@ var tables = {
var $tbody = $table.find('tbody');
// Append item
$table.find('tbody').append(item);
},
tryAgain (vm) {
vm.hideLoading();
vm.setNormalButton(vm.btnAction);
},
showLoading() {
$('.loading').fadeIn('slow');
$('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>");
}
}
// ------------------------------
// Helpers
// ------------------------------
jQuery.fn.outerHTML = function(s) {
return s
? this.before(s).remove()
: jQuery("<p>").append(this.eq(0).clone()).html();
};
// ------------------------------
// Initialization
// ------------------------------
tables.init();
}
// ------------------------------
// Initialization
// ------------------------------
tables.init();
})();
esi/templates/job_list.html
View file @ 85446dc5
......@@ -14,6 +14,9 @@
{% endblock %}
{% block content %}
<div class="loading">
<div class="loading-content"><i class="fa fa-refresh fa-spin"></i></div>
</div>
<div class="container-fluid container-max">
<!-- START: Table pending -->
<div class="table-item">
......@@ -31,16 +34,23 @@
<th style="width: 250px">Actions</th>
</thead>
<tbody>
<!-- Line 1 -->
{% for i in jobs.pending %}
<tr id="{{ i.id }}">
<tr id="{{ i.pk }}">
<td data-col="job">{{ i.name }}</td>
<td data-col="uuid">{{ i.job_uuid }}</td>
<td data-col="created-date">{{ i.create_time }}</td>
<td data-col="status" class="text-success">{{ i.status }}</td>
<td data-col="action">
<button class="btn btn-min btn-primary" data-action="run">Run</button>
<button class="btn btn-min btn-danger" data-action="delete">Delete</button>
<button class="btn btn-min btn-secondary" data-action="options">
<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>
<button class="btn btn-sm btn-secondary"
data-loading-text="<i class='fa fa-cog fa-spin' aria-hidden='true'></i>"
data-action="edit" data-text="<i class='fa fa-cog' aria-hidden='true'></i>">
<i class="fa fa-cog" aria-hidden="true"></i>
</button>
</td>
......@@ -64,23 +74,28 @@
<th>Created date</th>
<th>Start date</th>
<th>Status</th>
<th style="width: 250px;">Log</th>
<th>Log</th>
<th style="width: 250px">Actions</th>
</thead>
<tbody>
<!-- Line 1 -->
{% for i in jobs.running %}
<tr id="running-{{ i.id }}">
<tr id="{{ i.pk }}">
<td data-col="job">{{ i.name }}</td>
<td data-col="uuid">{{ i.job_uuid }}</td>
<td data-col="created-date">{{ i.create_time }}</td>
<td data-col="start-date">{{ i.start_time }}</td>
<td data-col="status" class="text-success">{{ i.status }}</td>
<td data-col="log"><a href="https://v4-alpha.getbootstrap.com/components/alerts/">http://jsfiddle.net/itamark/uAKNx/asdasdas/asdasdasdas/dasdasdasd</a>
<td data-col="log">
<button data-action="log" class="btn btn-sm btn-secondary" data-text="Get log">Get log</button>
</td>
<td data-col="action">
<button class="btn btn-min btn-primary" data-action="cancel">Cancel</button>
<button class="btn btn-min btn-danger" data-action="delete">Delete</button>
<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>
{% endfor %}
......@@ -102,7 +117,7 @@
<th>Uuid</th>
<th>Created date</th>
<th>Started date</th>
<th style="width: 200px;">Finished date</th>
<th>Finished date</th>
<th>Status</th>
<th>Log</th>
<th style="width: 250px">Actions</th>
......@@ -110,18 +125,23 @@
<tbody>
<!-- Line 1 -->
{% for i in jobs.finished %}
<tr id="finished-{{ i.id }}">
<tr id="{{ i.pk }}">
<td data-col="job">{{ i.name }}</td>
<td data-col="uuid">{{ i.job_uuid }}</td>
<td data-col="created-date">{{ i.create_time }}</td>
<td data-col="start-date">{{ i.start_time }}</td>
<td data-col="finished-date">{{ i.end_time }}</td>
<td data-col="finished-date">{{ i.finish_time }}</td>
<td data-col="status" class="text-success">{{ i.status }}</td>
<td data-col="log"><a href="https://v4-alpha.getbootstrap.com/components/alerts/">http://jsfiddle.net/itamark/uAKNx/asdasdas/asdasdasdas/dasdasdasd</a>
<td data-col="log">
<button data-action="log" class="btn btn-sm btn-secondary" data-text="Get log">Get log</button>
</td>
<td data-col="action">
<button class="btn btn-min btn-primary" data-action="restart">Restart</button>
<button class="btn btn-min btn-danger" data-action="delete">Delete</button>
<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>
{% endfor %}
......@@ -150,17 +170,22 @@
<tbody>
<!-- Line 1 -->
{% for i in jobs.deleted %}
<tr id="deleted-1">
<tr id="{{ i.pk }}">
<td data-col="job">{{ i.name }}</td>
<td data-col="uuid">{{ i.job_uuid }}</td>
<td data-col="created-date">{{ i.create_time }}</td>
<td data-col="start-date">{{ i.start_time }}</td>
<td data-col="finished-date">{{ i.end_time }}</td>
<td data-col="finished-date">{{ i.finish_time }}</td>
<td data-col="status" class="text-success">{{ i.status }}</td>
<td data-col="log"><a href="https://v4-alpha.getbootstrap.com/components/alerts/">http://jsfiddle.net/itamark/uAKNx/asdasdas/asdasdasdas/dasdasdasd</a>
<td data-col="log">
<button data-action="log" class="btn btn-sm btn-secondary" data-loading-text="Creating log..."
data-text="Get log">Get log
</button>
</td>
<td data-col="action">
<button class="btn btn-min btn-success" data-action='activate'>Activate</button>
<button class="btn btn-sm btn-success" data-action='activate' data-loading-text="Activating..."
data-text="Activate">Activate
</button>
</td>
</tr>
{% endfor %}
......@@ -169,10 +194,31 @@
</div>
</div>
<!-- END: Table deleted -->
<div class="modal" id="log-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Log</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="{% static 'js/dateformat.js' %}"></script>
<script src="{% static 'js/tables.js' %}"></script>
{% endblock %}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment