Show logs during download because why not.

This commit is contained in:
Justin Hawkins 2021-09-21 19:20:48 +09:30
parent 58c6242fdc
commit 39ff963843
2 changed files with 18 additions and 5 deletions

View File

@ -7,6 +7,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css">
<style>
pre { font-size: 70%; }
</style>
</head>
<body style="margin:4; padding:4">
{{ template "content" . }}

View File

@ -1,20 +1,26 @@
{{ define "content" }}
<div id="layout" class="pure-g pure-u-1">
<div id="layout" class="pure-g pure-u-1" x-data="popup()" x-init="fetch_data()">
<h2>Download started</h2>
<p>Fetching <tt>{{ .Url }}</tt></p>
<table class="pure-table" x-data="popup()" x-init="fetch_data()">
<table class="pure-table" >
<tr><th>current filename</th><td x-text="filename"></td></tr>
<tr><th>state</th><td x-text="state"></td></tr>
<tr><th>progress</th><td x-text="percent"></td></tr>
<tr><th>ETA</th><td x-text="eta"></td></tr>
</table>
<p><a href="/" target="_gropple_status">Status page</a> </p>
<p>You can close this window and your download will continue. Check the <a href="/" target="_gropple_status">Status page</a> to see all downloads in progress.</p>
<div>
<h4>Logs</h4>
<pre x-text="log">
</pre>
</div>
</div>
{{ end }}
{{ define "js" }}
<script>
function popup() {
return {
eta: '', percent: 0.0, state: '??', filename: '', finished: false,
eta: '', percent: 0.0, state: '??', filename: '', finished: false, log :'',
fetch_data() {
fetch('/fetch/info/{{ .Id }}')
.then(response => response.json())
@ -26,10 +32,14 @@
if (info.files && info.files.length > 0) {
this.filename = info.files[info.files.length - 1];
}
if (info.log && info.log.length > 0) {
this.log = info.log.join("\n");
}
console.log('finish?', this.finished);
if (! this.finished) {
setTimeout(() => { this.fetch_data() }, 100);
setTimeout(() => { this.fetch_data() }, 1000);
}
console.log('log', this.log);
});
},
}