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

<template>
	<div>
		<div v-if="!loading">
			<nav class="navbar navbar-default navbar-fixed-top" id="nav">
				<div class="container">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" :href="data.baseURL"><img src='/images/mykopkb.png' border='0'
								width="150" height="auto" alt="MyKoPKB Logo"></a>
					</div>
					<div class="collapse navbar-collapse" id="myNavbar">

						<ul class="nav navbar-nav">

							<router-link :to="{ name: 'Voter Home' }" tag="li" exact>
								<a href="#"><b>LAMAN UTAMA</b></a>
							</router-link>

							<router-link :to="{ name: 'Mat' }" tag="li" exact>
								<a href="#"><b>MAT KE-28</b></a>
							</router-link>

							<router-link :to="{ name: 'Attendance' }" tag="li" exact>
								<a href="#"><b>DAFTAR MAT</b></a>
							</router-link>

							<router-link :to="{ name: 'Vote' }"
								v-if="data.election.status == 2 && data.user.saham >= 500 && !hasVoted() && data.user.kehadiran != 0"
								tag="li" exact>
								<a href="#"><b>UNDIAN</b></a>
							</router-link>

							<router-link :to="{ name: 'Zoom' }" v-if="data.user.kehadiran != 0" tag="li" exact>
								<a href="#"><b>PAUTAN MESYUARAT</b></a>
							</router-link>

							<router-link :to="{ name: 'penyata', params: { no_anggota: data.user.no_anggota } }" tag="li" exact>
								<a href="#"><b>PENYATA AHLI</b></a>
							</router-link>


						</ul>
						<ul class="nav navbar-right navbar-nav">
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
									aria-haspopup="true" aria-expanded="false">
									<span class="fa fa-user"></span> {{ data.user.name }} <span class="caret"></span>
								</a>
								<ul class="dropdown-menu">
									<li @click="logout()"><a>Log Keluar</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</nav>

			<router-view></router-view>
		</div>
		<div v-else class="container">
			<div class="jumbotron">
				<h1>Loading <i class="fa fa-refresh fa-spin"></i></h1>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data: () => ({
		loading: true
	}),

	created: function () {
		this.refreshInfo();
	},

	methods: {
		logout: function () {
			localStorage.clear();
			this.$router.push({ name: 'Voter Login' });
		},

		hasVoted: function () {
			return this.data.result.length > 0;
		},

		refreshInfo: function () {
			var vm = this;
			this.util.setAuthorization();
			axios.get(config.API + 'election/information')
				.then(response => {
					console.log(response);
					vm.loading = false;
					vm.data.election = response.data.election;
					vm.data.nominees = response.data.nominee;
					vm.data.partylists = response.data.partylist;
					vm.data.positions = response.data.position;
					vm.data.user = response.data.voter;
					vm.data.result = response.data.result;
				})
				.catch(error => {
					vm.loading = false;
					if (vm.util.showResult(error, 'error') == 401) {
						vm.$router.push({ name: 'Voter Login' });
					}
				});
		}
	}
}
</script>



<style scoped>
body {
	padding: 70px 5px;
}

/* Change navbar background color */
#nav.navbar {
	background-color: #021324;
	/* Dark blue/gray background */
	border: none;
}

/* Change navbar link text color */
#nav .nav>li>a,
#nav .navbar-brand,
#nav .navbar-toggle {
	color: #f39c12;
	/* Light gray text */
}

/* Hover effect */
#nav .nav>li>a:hover,
#nav .navbar-brand:hover {
	color: #f39c12;
	/* Gold/yellow on hover */
}

/* Dropdown text color */
#nav .dropdown-menu>li>a {
	color: #2c3e50;
	/* Dark text in dropdown */
}

/* Dropdown hover */
#nav .dropdown-menu>li>a:hover {
	background-color: #f39c12;
	color: white;
}

.navbar-brand img {
	background: transparent !important;
	box-shadow: none;
}
</style>