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
Expand all 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
This diff is collapsed.
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