ISMAIL MASSERAN
317 lines
6.6 KiB
Vue
317 lines
6.6 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="!loading">
|
|
<nav class="navbar navbar-default navbar-fixed-top floating-header logo-header" id="nav">
|
|
<div class="container">
|
|
<div class="navbar-header logo-section">
|
|
<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>
|
|
|
|
<li>
|
|
<a :href="matLinkUrl" target="_blank" rel="noopener noreferrer">
|
|
<b>MAT KE-28</b> <i class="fa fa-external-link"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<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>
|
|
|
|
<div class="voter-main">
|
|
<router-view></router-view>
|
|
</div>
|
|
</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,
|
|
matLinkUrl: 'https://linktr.ee/kopkb'
|
|
}),
|
|
|
|
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>
|
|
.floating-header {
|
|
position: fixed !important;
|
|
top: 16px !important;
|
|
left: 16px !important;
|
|
right: 16px !important;
|
|
width: calc(100% - 32px) !important;
|
|
margin: 0;
|
|
border-radius: 16px !important;
|
|
z-index: 2000 !important;
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
|
|
.logo-header {
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 255, 255, 0.96) 0%,
|
|
rgb(8, 0, 126) 48%,
|
|
rgb(255, 0, 0) 100%) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.25) !important;
|
|
box-shadow:
|
|
0 8px 32px rgba(33, 150, 243, 0.35),
|
|
0 4px 16px rgba(2, 19, 36, 0.28) !important;
|
|
backdrop-filter: blur(12px) !important;
|
|
position: fixed;
|
|
overflow: visible;
|
|
}
|
|
|
|
.logo-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.logo-header>* {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.logo-section {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 24px;
|
|
margin-left: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#nav.navbar {
|
|
border: none;
|
|
min-height: 78px;
|
|
}
|
|
|
|
#nav .container {
|
|
width: 100%;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
overflow: visible;
|
|
}
|
|
|
|
#nav .navbar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
height: auto;
|
|
padding: 14px 0;
|
|
color: #1f2937;
|
|
font-weight: 700;
|
|
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.logo-title {
|
|
display: inline-block;
|
|
color: #1f2937 !important;
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
#nav .nav>li>a,
|
|
#nav .navbar-toggle {
|
|
color: #f8fbff;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
#nav .nav>li>a:hover,
|
|
#nav .nav>li.active>a,
|
|
#nav .nav>li.active>a:hover,
|
|
#nav .nav>li.active>a:focus,
|
|
#nav .navbar-brand:hover {
|
|
color: #fff;
|
|
background: rgba(204, 0, 0, 0.833);
|
|
}
|
|
|
|
#nav .nav>li>a {
|
|
border-radius: 10px;
|
|
margin-top: 18px;
|
|
margin-bottom: 18px;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
#nav .navbar-right {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
#nav .navbar-nav>li,
|
|
#nav .dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
#nav .dropdown-menu {
|
|
margin-top: 6px;
|
|
border: 0;
|
|
border-radius: 12px;
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
|
|
z-index: 2101;
|
|
}
|
|
|
|
#nav .dropdown-menu>li>a {
|
|
color: #2c3e50;
|
|
}
|
|
|
|
#nav .dropdown-menu>li>a:hover {
|
|
background-color: #f39c12;
|
|
color: white;
|
|
}
|
|
|
|
#nav .navbar-toggle {
|
|
margin-top: 20px;
|
|
margin-right: 18px;
|
|
border-color: rgba(255, 255, 255, 0.35);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
#nav .navbar-toggle .icon-bar {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.navbar-brand img {
|
|
background: transparent !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.voter-main {
|
|
padding-top: 112px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.floating-header {
|
|
top: 10px !important;
|
|
left: 10px !important;
|
|
right: 10px !important;
|
|
width: calc(100% - 20px) !important;
|
|
border-radius: 14px !important;
|
|
}
|
|
|
|
.logo-section {
|
|
margin-left: 16px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.logo-title {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
#nav .navbar-brand img {
|
|
width: 120px;
|
|
}
|
|
|
|
#nav .navbar-collapse {
|
|
border-top: 0;
|
|
box-shadow: none;
|
|
padding-bottom: 12px;
|
|
overflow: visible;
|
|
}
|
|
|
|
#nav .nav>li>a {
|
|
margin: 4px 10px;
|
|
}
|
|
|
|
.voter-main {
|
|
padding-top: 102px;
|
|
}
|
|
}
|
|
</style>
|