E-Vote/resources/assets/js/components/demo/admin/home/index.vue

<template>
	<div class="panel panel-default">
		<div class="panel-body">
			<h4>Undian Terkini</h4>
			<div class="form-group">
				<button class="btn btn-success" v-if="data.election.status == 1 && data.user.role == 1"
					@click="util.showModal('#start-election-modal')">Mula Undian</button>

				<router-link :to="{ name: 'Current Result' }" class="btn btn-info" v-if="data.election.status == 2">
					Papar Keputusan
				</router-link>

				<button class="btn btn-danger" v-if="data.election.status == 2"
					@click="util.showModal('#stop-election-modal')">Tamat Undian</button>

				<label v-if="data.election.status == 2">Undian bermula {{ start_date }}</label>

			</div>

			<div class="table-responsive">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>ID</th>
							<th>Nama Undian</th>
							<th>Undian Mula</th>
							<th>Undian Tamat</th>
							<th>Papar</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="election in data.elections">
							<td>{{ election.id }}</td>
							<td>{{ election.name }}</td>
							<td>{{ election.start }}</td>
							<td>{{ election.end }}</td>
							<td>
								<router-link :to="{ name: 'Election Result', params: { election_id: election.id } }"
									class="btn btn-info">Keputusan Undian</router-link>

								<a class="btn btn-warning" :href="getPDFurl(election.id)">Muat Turun PDF</a>
								
							</td>
						</tr>
						<tr v-if="data.elections.length < 1">
							<td colspan="5">No elections yet</td>
						</tr>
					</tbody>
				</table>
			</div>

			<form @submit.prevent="start" id="start_form">
				<div class="modal fade" id="start-election-modal" tabindex="-1" role="dialog"
					aria-labelledby="start-election-modal" aria-hidden="true">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="exampleModalLabel">Mulakan Undian</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<div class="form-group">
									<label for="name">Nama Undian</label>
									<input type="text" name="name" autocomplete="on" class="form-control"
										placeholder="(Optional)" />
								</div>

								<div class="form-group">
									<label for="password">Kata Laluan</label>
									<input type="password" name="password" class="form-control" required />
								</div>
							</div>
							<div class="modal-footer">
								<input type="submit" class="btn btn-info" value="Start" />
								<input type="button" data-dismiss="modal" class="btn btn-default" value="Cancel" />
							</div>
						</div>
					</div>
				</div>
			</form>

			<form @submit.prevent="stop" id="stop_form">
				<div class="modal fade" id="stop-election-modal" tabindex="-1" role="dialog"
					aria-labelledby="stop-election-modal" aria-hidden="true">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="exampleModalLabel">Tamat Undian</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<div class="form-group">
									<label for="name">Nama Undian</label>
									<input type="text" name="name" :value="data.election.name" autocomplete="on"
										class="form-control" placeholder="(Optional)" />
								</div>

								<div class="form-group">
									<label for="password">Kata Laluan</label>
									<input type="password" name="password" autocomplete="on" class="form-control"
										required />
								</div>
							</div>
							<div class="modal-footer">
								<input type="submit" class="btn btn-info" value="Stop Election" />
								<input type="button" data-dismiss="modal" class="btn btn-default" value="Cancel" />
							</div>
						</div>
					</div>
				</div>
			</form>

		</div>
	</div>
</template>

<style>
    .center-header {
        text-align: center;
    }
</style>

<script>
export default {
	data: () => ({
		start_date: null
	}),
	created: function () {
		this.refreshElection();
		var vm = this;
		setInterval(() => {
			vm.start_date = moment(vm.data.election.start).fromNow();
		}, 1000);
	},

	methods: {

		stop: function () {
			var vm = this;
			// this.util.hideModal('#stop-election-modal');
			this.util.notify('Stopping Election', 'loading');
			axios.post(config.API + 'election/stop', $('#stop_form').serialize())
				.then(response => {
					$.notifyClose();
					if (vm.util.showResult(response, 'success')) {
						vm.refreshElection();
						vm.data.election = response.data.election;
						vm.data.positions = [];
						vm.data.partylists = [];
						vm.data.voters = [];
						vm.data.nominees = [];
						vm.data.results = [];
					}
				})
				.catch(error => {
					$.notifyClose();
					vm.util.showResult(error, 'error');
				})
		},

		start: function () {
			var vm = this;
			// this.util.hideModal('#start-election-modal');
			console.log('this');
			this.util.notify('Loading please wait', 'loading');
			axios.post(config.API + 'election/start', $('#start_form').serialize())
				.then(response => {
					$.notifyClose();
					if (vm.util.showResult(response, 'success')) {
						vm.refreshElection();
						vm.data.election = response.data.election;
					}
				})
				.catch(error => {
					$.notifyClose();
					vm.util.showResult(error, 'error');
				})
		},

		refreshElection: function () {
			this.util.notify('Refreshing Election', 'loading');
			var vm = this;
			axios.get(config.API + 'election')
				.then(response => {
					$.notifyClose();
					vm.data.elections = response.data;
				})
				.catch(error => {
					$.notifyClose();
					vm.util.showResult(error, 'error');
				})
		},


		getPDFurl(Id) {
			// Construct and return the URL based on the item ID
			return `/result/${Id}`;
		}
	}
}
</script>