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
Hide whitespace changes
Inline Side-by-side
Showing with 380 additions and 301 deletions
esi/static/css/style.css
View file @ 85446dc5
/* Actions */ /* Actions */
.actions { .actions {
display: flex; display: flex;
...@@ -41,8 +42,11 @@ ...@@ -41,8 +42,11 @@
.btn { .btn {
cursor: pointer; cursor: pointer;
} }
.btn-min { .btn-sm {
padding: .2rem 1rem; margin-right: 5px;
}
.btn-min:last-child {
margin-right: 0;
} }
/* Table */ /* Table */
.table-header { .table-header {
...@@ -89,5 +93,32 @@ ...@@ -89,5 +93,32 @@
height: 300px; height: 300px;
} }
.container-max { .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() { ;(function() {
var tablesTypes = { var AJAX_URL = '/job/'
RUNNING: 'running', var tablesTypes = {
PENDING: 'pending', RUNNING: 'running',
FINISHED: 'finished', PENDING: 'pending',
DELETED: 'deleted' FINISHED: 'finished',
} DELETED: 'deleted'
}
var actions = { var actionsTypes = {
DELETE: 'delete', DELETE: 'delete',
CANCEL: 'cancel', CANCEL: 'cancel',
RESTART: 'restart', RESTART: 'restart',
OPTIONS: 'options', EDIT: 'edit',
ACTIVATE: 'activate', ACTIVATE: 'activate',
RUN: 'run' RUN: 'run'
} }
var templetes = {
var cols = { pending: function(data) {
JOB: 'job', return `
UUID: 'uuid', <tr id="${data.id}">
CREATED_DATE: 'created-date', <td data-col="job">${data.name}</td>
START_DATE: 'start-date', <td data-col="uuid">${data.uuid}</td>
FINISHED_DATE: 'finished-date', <td data-col="created-date">${new Date(data.create_time).format('dd.mm.yyyy HH:MM')}</td>
STATUS: 'status', <td data-col="status" class="text-success">${data.status}</td>
LOG: 'log', <td data-col="action">
ACTIONS: '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>
var templetes = { </button>
finishedDate (date) { </td>
return "<td data-col='finished-date'>" + date + "</td>" </tr>
}, `
startDate (date) { },
return "<td data-col='start-date'>" + date + "</td>" running: function(data) {
}, return `
log (log) { <tr id="${data.id}">
return "<td data-col='log'>" + log + "</td>" <td data-col="job">${data.name}</td>
}, <td data-col="uuid">${data.uuid}</td>
buttonRestart: "<button class='btn btn-min btn-primary' data-action='restart'>Restart</button>", <td data-col="created-date">${data.create_time ? new Date(data.create_time).format('dd.mm.yyyy HH:MM') : 'No date'}</td>
buttonActivate: "<button class='btn btn-min btn-success' data-action='activate'>Activate</button>", <td data-col="start-date">${data.start_time ? new Date(data.start_time).format('dd.mm.yyyy HH:MM') : 'No date'}</td>
buttonCancel: "<button class='btn btn-min btn-primary' data-action='cancel'>Cancel</button>", <td data-col="status" class="text-success">${data.status}</td>
buttonDelete: "<button class='btn btn-min btn-danger' data-action='delete'>Delete</button>", <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>
buttonRun: "<button class='btn btn-min btn-primary' data-action='run'>Run</button>", <td data-col="action">
buttonOptions: "<button class='btn btn-min btn-secondary' data-action='options'><i class='fa fa-cog' aria-hidden='true'></i></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>
// Instance </tr>
// ------------------------------ `
var tables = { },
btnCancel: "button[data-action='cancel']", deleted: function(data) {
btnDelete: "button[data-action='delete']", return `
btnRun: "button[data-action='run']", <tr id="${data.id}">
btnRestart: "button[data-action='restart']", <td data-col="job">${data.name}</td>
btnActivate: "button[data-action='activate']", <td data-col="uuid">${data.uuid}</td>
init: function () { <td data-col="created-date">${data.create_time ? new Date(data.create_time).format('dd.mm.yyyy HH:MM') : 'No date'}</td>
var self = this; <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>
$(document).on('click', this.btnCancel, function() { <td data-col="status" class="text-danger">${data.status}</td>
self.onCancel(self, this) <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>
$(document).on('click', this.btnDelete, function() { </td>
self.onDelete(self, this) </tr>
}); `
},
$(document).on('click', this.btnRun, function() { finished: function(data) {
self.onRun(self, this) return `
}); <tr id="${data.id}">
<td data-col="job">${data.name}</td>
$(document).on('click', this.btnRestart, function() { <td data-col="uuid">${data.uuid}</td>
self.onRestart(self, this) <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>
$(document).on('click', this.btnActivate, function() { <td data-col="status" class="text-success">${data.status}</td>
self.onActivate(self, this) <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>
onCancel: function(vm, button) { <button class="btn btn-sm btn-danger" data-action="delete" data-loading-text="Deleting..." data-text="Delete">Delete</button>
var itemData = vm.getItemData(button) </td>
$(button).button('loading'); </tr>
// ------------------------------ `
// AJAX SUCCESS
// ------------------------------
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)
}
},
onDelete: function(vm, button) {
var itemData = vm.getItemData(button)
$(button).button('loading');
// ------------------------------
// AJAX SUCCESS
// ------------------------------
itemData.item.remove();
var response = {
created_date: '21.03.2012',
started_date: '21.03.2015',
finished_date: '21.03.2015'
}
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(itemData.table === tablesTypes.FINISHED) {
// Format item
itemData.item.find('[data-col="action"]')
.empty()
.prepend(templetes.buttonActivate);
}
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 + '"]'));
}
vm.moveItem(itemData.item.outerHTML(), tablesTypes.DELETED)
},
onRun: function(vm, button) {
var itemData = vm.getItemData(button)
$(button).button('loading');
// ------------------------------
// AJAX SUCCESS
// ------------------------------
$.ajax({
method: "GET",
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)
}
})
},
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();
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) { // Instance
var itemData = vm.getItemData(button) // ------------------------------
$(button).button('loading'); 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',
init: function () {
var 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);
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').empty().html(response);
$('#log-modal').modal();
vm.setLoadingButton(button)
vm.hideLoading();
}, 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..."
},
// ------------------------------ // ------------------------------
// AJAX SUCCESS // Additional functions
// ------------------------------ // ------------------------------
var response = { sendData: function(data, success, error) {
created_date: '21.03.2012', $.ajax({
started_date: '21.03.2015', method: "POST",
finished_date: '21.03.2015' url: AJAX_URL,
cache: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
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').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>");
} }
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);
}
vm.moveItem(itemData.item.outerHTML(), tablesTypes.RUNNING)
},
// ------------------------------ // ------------------------------
// Additional functions // Initialization
// ------------------------------ // ------------------------------
getItemData(button) { tables.init();
return {
date: new Date().format("dd.mm.yyyy HH:MM"),
item: $(button).closest('tr'),
table: $(button).closest('.table').data('table').toLowerCase()
}
},
moveItem: function (item, table) {
var $table = $("[data-table=" + table + "]");
var $tbody = $table.find('tbody');
// Append item
$table.find('tbody').append(item);
}
}
// ------------------------------
// Helpers
// ------------------------------
jQuery.fn.outerHTML = function(s) {
return s
? this.before(s).remove()
: jQuery("<p>").append(this.eq(0).clone()).html();
};
// ------------------------------
// Initialization
// ------------------------------
tables.init();
})(); })();
esi/templates/job_list.html
View file @ 85446dc5
...@@ -14,6 +14,9 @@ ...@@ -14,6 +14,9 @@
{% endblock %} {% endblock %}
{% block content %} {% 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"> <div class="container-fluid container-max">
<!-- START: Table pending --> <!-- START: Table pending -->
<div class="table-item"> <div class="table-item">
...@@ -31,20 +34,27 @@ ...@@ -31,20 +34,27 @@
<th style="width: 250px">Actions</th> <th style="width: 250px">Actions</th>
</thead> </thead>
<tbody> <tbody>
<!-- Line 1 -->
{% for i in jobs.pending %} {% for i in jobs.pending %}
<tr id="{{ i.id }}"> <tr id="{{ i.pk }}">
<td data-col="job">{{ i.name }}</td> <td data-col="job">{{ i.name }}</td>
<td data-col="uuid">{{ i.job_uuid }}</td> <td data-col="uuid">{{ i.job_uuid }}</td>
<td data-col="created-date">{{ i.create_time }}</td> <td data-col="created-date">{{ i.create_time }}</td>
<td data-col="status" class="text-success">{{ i.status }}</td> <td data-col="status" class="text-success">{{ i.status }}</td>
<td data-col="action"> <td data-col="action">
<button class="btn btn-min btn-primary" data-action="run">Run</button> <button class="btn btn-sm btn-primary" data-loading="loading" data-action="run"
<button class="btn btn-min btn-danger" data-action="delete">Delete</button> data-loading-text="Running..." data-text="Run">Run
<button class="btn btn-min btn-secondary" data-action="options"> </button>
<i class="fa fa-cog" aria-hidden="true"></i> <button class="btn btn-sm btn-danger" data-action="delete" data-loading-text="Deleting..."
</button> data-text="Delete">Delete
</td> </button>
</tr> <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>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
...@@ -64,25 +74,30 @@ ...@@ -64,25 +74,30 @@
<th>Created date</th> <th>Created date</th>
<th>Start date</th> <th>Start date</th>
<th>Status</th> <th>Status</th>
<th style="width: 250px;">Log</th> <th>Log</th>
<th style="width: 250px">Actions</th> <th style="width: 250px">Actions</th>
</thead> </thead>
<tbody> <tbody>
<!-- Line 1 --> <!-- Line 1 -->
{% for i in jobs.running %} {% for i in jobs.running %}
<tr id="running-{{ i.id }}"> <tr id="{{ i.pk }}">
<td data-col="job">{{ i.name }}</td> <td data-col="job">{{ i.name }}</td>
<td data-col="uuid">{{ i.job_uuid }}</td> <td data-col="uuid">{{ i.job_uuid }}</td>
<td data-col="created-date">{{ i.create_time }}</td> <td data-col="created-date">{{ i.create_time }}</td>
<td data-col="start-date">{{ i.start_time }}</td> <td data-col="start-date">{{ i.start_time }}</td>
<td data-col="status" class="text-success">{{ i.status }}</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">
</td> <button data-action="log" class="btn btn-sm btn-secondary" data-text="Get log">Get log</button>
<td data-col="action"> </td>
<button class="btn btn-min btn-primary" data-action="cancel">Cancel</button> <td data-col="action">
<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..."
</td> data-text="Cancel">Cancel
</tr> </button>
<button class="btn btn-sm btn-danger" data-action="delete" data-loading-text="Deleting..."
data-text="Delete">Delete
</button>
</td>
</tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
...@@ -102,7 +117,7 @@ ...@@ -102,7 +117,7 @@
<th>Uuid</th> <th>Uuid</th>
<th>Created date</th> <th>Created date</th>
<th>Started date</th> <th>Started date</th>
<th style="width: 200px;">Finished date</th> <th>Finished date</th>
<th>Status</th> <th>Status</th>
<th>Log</th> <th>Log</th>
<th style="width: 250px">Actions</th> <th style="width: 250px">Actions</th>
...@@ -110,20 +125,25 @@ ...@@ -110,20 +125,25 @@
<tbody> <tbody>
<!-- Line 1 --> <!-- Line 1 -->
{% for i in jobs.finished %} {% for i in jobs.finished %}
<tr id="finished-{{ i.id }}"> <tr id="{{ i.pk }}">
<td data-col="job">{{ i.name }}</td> <td data-col="job">{{ i.name }}</td>
<td data-col="uuid">{{ i.job_uuid }}</td> <td data-col="uuid">{{ i.job_uuid }}</td>
<td data-col="created-date">{{ i.create_time }}</td> <td data-col="created-date">{{ i.create_time }}</td>
<td data-col="start-date">{{ i.start_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="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">
</td> <button data-action="log" class="btn btn-sm btn-secondary" data-text="Get log">Get log</button>
<td data-col="action"> </td>
<button class="btn btn-min btn-primary" data-action="restart">Restart</button> <td data-col="action">
<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..."
</td> data-text="Restart">Restart
</tr> </button>
<button class="btn btn-sm btn-danger" data-action="delete" data-loading-text="Deleting..."
data-text="Delete">Delete
</button>
</td>
</tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
...@@ -150,29 +170,55 @@ ...@@ -150,29 +170,55 @@
<tbody> <tbody>
<!-- Line 1 --> <!-- Line 1 -->
{% for i in jobs.deleted %} {% for i in jobs.deleted %}
<tr id="deleted-1"> <tr id="{{ i.pk }}">
<td data-col="job">{{ i.name }}</td> <td data-col="job">{{ i.name }}</td>
<td data-col="uuid">{{ i.job_uuid }}</td> <td data-col="uuid">{{ i.job_uuid }}</td>
<td data-col="created-date">{{ i.create_time }}</td> <td data-col="created-date">{{ i.create_time }}</td>
<td data-col="start-date">{{ i.start_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="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">
</td> <button data-action="log" class="btn btn-sm btn-secondary" data-loading-text="Creating log..."
<td data-col="action"> data-text="Get log">Get log
<button class="btn btn-min btn-success" data-action='activate'>Activate</button> </button>
</td> </td>
</tr> <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>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<!-- END: Table deleted --> <!-- 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> </div>
{% endblock %} {% endblock %}
{% block script %} {% 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/dateformat.js' %}"></script>
<script src="{% static 'js/tables.js' %}"></script> <script src="{% static 'js/tables.js' %}"></script>
{% endblock %} {% 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