github
/
crontab-ui
mirror of https://github.com/alseambusher/crontab-ui
1
0
Fork 0
Code Issues Releases Wiki Activity

Adds loading status indicator while job is running

pull/164/head
Sean Doyle 2021-07-09 12:23:28 -06:00
parent e24cfcac7b
commit a0644b9059
3 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
crontab.js
View File

@ -39,6 +39,7 @@ crontab = function(name, command, schedule, stopped, logging, mailing){
if (!mailing)
mailing = {};
data.mailing = mailing;
data.running = 0;
return data;
};
@ -98,14 +99,18 @@ exports.runjob = function(_id) {
crontab_job_string_command = add_env_vars(env_vars, crontab_job_string_command)
console.log("Running job")
console.log("ID: " + _id)
console.log("ID: " + _id)
console.log("Original command: " + res.command)
console.log("Executed command: " + crontab_job_string_command)
res.running = 1;
db.update({_id: _id},{$set: {running: res.running, saved: false}});
exec(crontab_job_string_command, function(error, stdout, stderr){
if (error) {
console.log(error)
}
res.running = 0;
db.update({_id: _id},{$set: {running: res.running, saved: false}});
});
});
};

1
public/js/script.js
View File

@ -60,7 +60,6 @@ function runJob(_id){
$.post(routes.run, {_id: _id}, function(){
location.reload();
});
});
}

36
views/index.ejs
View File

@ -19,6 +19,27 @@
$("#env_vars").val(`<%- env %>`);
})
</script>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
display: inline-block;
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #3498db; /* Blue */
border-radius: 50%;
width: 18px;
height: 18px;
animation: spin 2s linear infinite;
margin-left: 5em;
}
td {
vertical-align: middle !important;
}
</style>
</head>
<body>
<%- include('navbar.ejs') -%>
@ -83,9 +104,20 @@
</td>
<td><%= crontab.command %></td>
<td><span style="cursor:pointer" data-toggle="tooltip" data-placement="bottom" title="<%= crontab.next %>"><%= crontab.schedule %></span></td>
<td style="width:20%" title="<%= crontab.timestamp %>"><%= moment(new Date(crontab.timestamp)).fromNow() %></td>
<td style="width:16%" title="<%= crontab.timestamp %>"><%= moment(new Date(crontab.timestamp)).fromNow() %>
<% if (crontab.running == 1) {%>
<div class='spinner'></div>
<script type="text/javascript">
function waitForFinish() {
if (crontabs[<%= index %>-2].running == 1) {
return setTimeout(window.location.reload.bind(window.location),5000);
}
}
window.onload = waitForFinish;
</script>
<% } %>
</td>
<td>
<!-- controls based on crontab state -->
<% if (crontab.logging && crontab.logging != "false") {%>
<a class="btn btn-primary btn-danger" data-toggle="tooltip" data-placement="left" title="stderr" href="<%= JSON.parse(routes).logger + '?id=' + crontab._id %>" target="_blank"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span></a>