83 lines
3.2 KiB
Cheetah
83 lines
3.2 KiB
Cheetah
{{ define "content" }}
|
|
<div id="layout" class="pure-g pure-u-1" x-data="popup()" x-init="fetch_data()">
|
|
<h2>Download started</h2>
|
|
<p>Fetching <tt>{{ .dl.Url }}</tt></p>
|
|
<form class="pure-form">
|
|
<table class="pure-table" >
|
|
<tr>
|
|
<th>profile</th>
|
|
<td>{{ .dl.DownloadProfile.Name }}</td>
|
|
</tr>
|
|
<tr><th>current filename</th><td x-text="filename"></td></tr>
|
|
<tr>
|
|
<th>option</th>
|
|
<td>
|
|
{{ if .dl.DownloadOption }} {{ .dl.DownloadOption.Name }} {{ else }} n/a {{ end }}
|
|
</td>
|
|
</tr>
|
|
<tr><th>state</th><td x-text="state"></td></tr>
|
|
<tr x-show="playlist_total > 0"><th>playlist progress</th><td x-text="playlist_current + '/' + playlist_total"></td></tr>
|
|
<tr><th>progress</th><td x-text="percent"></td></tr>
|
|
<tr><th>ETA</th><td x-text="eta"></td></tr>
|
|
|
|
</table>
|
|
<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>
|
|
{{ if .canStop }}
|
|
<button x-show="state=='Downloading'" class="button-small pure-button" @click="stop()">stop</button>
|
|
{{ end }}
|
|
</form>
|
|
<div>
|
|
<h4>Logs</h4>
|
|
<pre x-text="log" style="height: auto;">
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ define "js" }}
|
|
<script>
|
|
function popup() {
|
|
history.replaceState(null, '', ['/fetch/{{ .dl.Id }}'])
|
|
return {
|
|
eta: '', percent: 0.0, state: '??', filename: '', finished: false, log :'',
|
|
playlist_current: 0, playlist_total: 0,
|
|
stop() {
|
|
let op = {
|
|
method: 'POST',
|
|
body: JSON.stringify({action: 'stop'}),
|
|
headers: { 'Content-Type': 'application/json' }
|
|
};
|
|
fetch('/rest/fetch/{{ .dl.Id }}', op)
|
|
.then(response => response.json())
|
|
.then(info => {
|
|
console.log(info)
|
|
})
|
|
},
|
|
fetch_data() {
|
|
fetch('/rest/fetch/{{ .dl.Id }}')
|
|
.then(response => response.json())
|
|
.then(info => {
|
|
this.eta = info.eta;
|
|
this.percent = info.percent + "%";
|
|
this.state = info.state;
|
|
this.playlist_current = info.playlist_current;
|
|
this.playlist_total = info.playlist_total;
|
|
this.finished = info.finished;
|
|
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() }, 1000);
|
|
}
|
|
console.log('log', this.log);
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
{{ end }}
|
|
|