108 lines
3.7 KiB
Cheetah
108 lines
3.7 KiB
Cheetah
{{ define "content" }}
|
|
|
|
{{ template "menu.tmpl" . }}
|
|
|
|
<div x-data="index()" x-init="fetch_data(); fetch_version()">
|
|
|
|
<p x-cloak x-show="version && version.upgrade_available">
|
|
<a href="https://github.com/tardisx/gropple/releases">Upgrade is available</a> -
|
|
you have
|
|
<span x-text="version.current_version"></span> and
|
|
<span x-text="version.github_version"></span>
|
|
is available.</p>
|
|
|
|
<div>
|
|
<p>
|
|
Drag this bookmarklet: <a href="{{ .BookmarkletURL }}">Gropple</a> to your bookmark bar, and click it
|
|
on any page you want to grab the video from.
|
|
</p>
|
|
<p>
|
|
Please note that some adblockers may prevent the bookmarklet from opening the popup window.
|
|
</p>
|
|
</div>
|
|
|
|
<table class="pure-table">
|
|
<thead>
|
|
<tr>
|
|
<th>id</th>
|
|
<th>filename</th>
|
|
<th>url</th>
|
|
<th>state</th>
|
|
<th>percent</th>
|
|
<th>eta</th>
|
|
<th>finished</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template x-for="item in items">
|
|
<tr>
|
|
<td>
|
|
<a class="int-link" @click="show_popup(item)" href="#">
|
|
<span x-text="item.id">
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span x-show="item.files && item.files.length > 0">
|
|
<ul>
|
|
<template x-for="file in item.files">
|
|
<li x-text="file"></li>
|
|
</template>
|
|
</ul>
|
|
</span>
|
|
<span x-show="! item.files || item.files.length == 0"
|
|
x-text="item.url">
|
|
</span>
|
|
</td>
|
|
<td><a class="int-link" x-bind:href="item.url">🔗</a></td>
|
|
<td :class="'state-'+item.state" x-text="item.state"></td>
|
|
<td x-text="item.percent"></td>
|
|
<td x-text="item.eta"></td>
|
|
<td x-text="item.finished ? '✔' : '-'"></td>
|
|
</tr>
|
|
|
|
</template>
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ define "js" }}
|
|
<script>
|
|
function index() {
|
|
return {
|
|
items: [], version: {}, popups: {},
|
|
fetch_version() {
|
|
fetch('/rest/version')
|
|
.then(response => response.json())
|
|
.then(info => {
|
|
this.version = info;
|
|
setTimeout(() => { this.fetch_version() }, 1000 * 60 );
|
|
})
|
|
.catch(error => {
|
|
console.log('failed to fetch version info - will retry');
|
|
setTimeout(() => { this.fetch_version() }, 1000 );
|
|
});
|
|
},
|
|
fetch_data() {
|
|
fetch('/rest/fetch')
|
|
.then(response => response.json())
|
|
.then(info => {
|
|
// will be null if no downloads yet
|
|
if (info) {
|
|
this.items = info;
|
|
}
|
|
setTimeout(() => { this.fetch_data() }, 1000);
|
|
})
|
|
},
|
|
show_popup(item) {
|
|
// allegedly you can use the reference to pop the window to the front on subsequent
|
|
// clicks, but I can't seem to find a reliable way to do so.
|
|
this.popups[item.id] = window.open(item.popup_url, item.id, "width={{ .Config.UI.PopupWidth }},height={{ .Config.UI.PopupHeight }}");
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
{{ end }}
|