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>

			<admin-data-table :headers="electionTableHeaders" :items="data.elections" :loading="electionLoading"
				:items-per-page="10" :show-pagination="true" empty-text="Tiada undian" :exportable="true"
				export-file-name="undian">
				<template v-slot:item-actions="{ item }">
					<router-link :to="{ name: 'Election Result', params: { election_id: item.id } }"
						class="btn btn-info">
						Keputusan Undian
					</router-link>
					<a class="btn btn-warning" :href="getPDFurl(item.id)">Muat Turun PDF</a>
				</template>
			</admin-data-table>

			<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;
}

/* Ensure Bootstrap modals appear above the admin floating header (z-index: 2000). */
.modal {
	z-index: 2200;
}

.modal-backdrop {
	z-index: 2190 !important;
}
</style>

<script>
export default {
	data: () => ({
		start_date: null,
		electionLoading: false,
		electionTableHeaders: [
			{ title: 'Nama Undian', key: 'name', sortable: true },
			{ title: 'Undian Mula', key: 'start', sortable: true },
			{ title: 'Undian Tamat', key: 'end', sortable: true },
			{ title: 'Papar', key: 'actions', sortable: false }
		]
	}),
	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;
			this.electionLoading = true;
			axios.get(config.API + 'election')
				.then(response => {
					$.notifyClose();
					vm.data.elections = response.data;
				})
				.catch(error => {
					$.notifyClose();
					vm.util.showResult(error, 'error');
				})
				.finally(function () {
					vm.electionLoading = false;
				})
		},


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