<template>
	<div>
		<ul class="list-group">
			<li v-for="pdf in pdfs" class="list-group-item">
				<div class="row">
					<div class="col-lg-11 col-12">
						<div class="row">
							<div class="col-12 text-center">
								{{ pdf.title }}
							</div>
							<div class="col-12">
								<a class="btn w-100 text-start" :href="pdf.url" target="_blank">{{ pdf.url }}</a>
							</div>
						</div>
					</div>
					<div class="btn-group col-lg-1 col-12 text-center">
						<button :disabled="busy" @click="reject(pdf)" class="btn btn-danger"><i class="fa fa-close"></i></button>
						<button :disabled="busy" @click="accept(pdf)" class="btn btn-success"><i class="fa fa-check"></i></button>
					</div>
				</div>
			</li>


			<li class="list-group-item">
				<div class="row">
					<div class="col-lg-11 col-12 text-center">
						<a class="btn w-100" target="_blank">Entire List</a>
					</div>
					<div class="btn-group col-lg-1 col-12">
						<button :disabled="busy" @click="reject_all" class="btn btn-danger"><i class="fa fa-close"></i></button>
						<button :disabled="busy" @click="accept_all" class="btn btn-success"><i class="fa fa-check"></i></button>
					</div>
				</div>
			</li>
		</ul>

	</div>
</template>

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

export default {
	props: [
	],

	setup() {
		return {
			pdfs: ref([]),
			busy: ref(false),
		}
	},

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

		got_update(data) {
			this.pdfs = data;
			this.busy = false;
		},

		accept(pdf) {
			if (this.busy) return;
			this.busy = true;
			$.ajax({
				url: '/api/spider/pdf/' + pdf.id,
				method: "PUT"
			}).done(this.got_update);
		},

		reject(pdf) {
			if (this.busy) return;
			this.busy = true;
			$.ajax({
				url: '/api/spider/pdf/' + pdf.id,
				method: "DELETE"
			}).done(this.got_update);
		},

		accept_all() {
			if (this.busy) return;
			this.busy = true;

			var l = [];
			for (var i = 0; i < this.pdfs.length; i++) {
				l.push(this.pdfs[i].id);
			}
			$.ajax({
				url: '/api/spider/pdf/' + l.join(","),
				method: "PUT"
			}).done(this.got_update);
		},

		reject_all() {
			if (this.busy) return;
			this.busy = true;

			var l = [];
			for (var i = 0; i < this.pdfs.length; i++) {
				l.push(this.pdfs[i].id);
			}
			$.ajax({
				url: '/api/spider/pdf/' + l.join(","),
				method: "DELETE"
			}).done(this.got_update);
		},
	},

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