<template>
	<div>
		<div class="input-group">
			<span class="input-group-text">Download PDF URL:</span>
			<input type="text" class="form-control" v-model="url">
			<button class="btn btn-primary" @click="add_download">Download</button>
		</div>

		<ul v-for="download in downloads" class="list-group">
			<li class="list-group-item">
				<div class="row">
					<div class="col-12 text-truncate">
						{{ download.url }}
					</div>
					<div class="col-3">
						<download :jobid="download.id"></download>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
import { ref } from 'vue/dist/vue.esm-bundler';

export default {
	props: [
	],

	setup() {
		return {
			downloads: ref([]),
			busy: ref(false),
			url: ref(""),
		}
	},

	methods: {
		init() {
			this.update();
		},

		update() {
			this.busy = true;
			$.ajax({
				url: "/api/downloads",
				method: "GET"
			}).done(this.got_update);
		},

		add_download() {
			this.busy = true;
			$.ajax({
				url: "/api/downloads",
				method: "PUT",
				data: {
					url: this.url
				}
			}).done(this.got_update);
		},

		got_update(data) {
			this.downloads = data;
			this.busy = false;

			setTimeout(this.update, 10000);
		},

	},

	mounted() {
		this.init();
	}
}
</script>
