forked from Tomas/webdl
54 lines
2.5 KiB
HTML
54 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="/style.css" />
|
|
<script src="/api.js"></script>
|
|
<script src="https://lesbian.ddns.net/Tomas/-/files/lib/web/alpine.js" defer></script>
|
|
<title>WebDL</title>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div id="menu" x-data="{errs: API.getErrors(), dls: API.getDownloads(), que: API.getQueue()}">
|
|
<div id="errors" class="section" x-init="setInterval(async ()=>{errs = await API.getErrors();}, 500);">
|
|
<template x-for="(err, id) in errs">
|
|
<div class="entry">
|
|
<div>
|
|
<span x-text="(err.filename || err.url) + ' - ' + err.reason"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<hr>
|
|
<div id="downloads" class="section" x-init="setInterval(async ()=>{dls = await API.getDownloads();}, 500);">
|
|
<template x-for="(dl, id) in dls">
|
|
<div class="entry">
|
|
<template x-if="dl.finished">
|
|
<div>
|
|
<a x-bind:href="'/api/data/'+id" x-text="dl.filename || dl.url"></a>
|
|
</div>
|
|
</template>
|
|
<template x-if="!dl.finished">
|
|
<div>
|
|
<span style="flex:1" x-text="dl.filename || dl.url"></span>
|
|
<progress style="flex:1" x-bind:max="dl.total" x-bind:value="dl.received"></progress>
|
|
<span class="progress-text" x-text="`${(dl.received/dl.total*100).toFixed(1)}%`"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<hr>
|
|
<div id="queue" class="section" x-init="setInterval(async ()=>{que = await API.getQueue();}, 500);">
|
|
<template x-for="qu in que">
|
|
<div class="entry">
|
|
<div>
|
|
<span x-text="qu.filename || qu.url"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|