ISMAIL MASSERAN
397 lines
7.8 KiB
Vue
397 lines
7.8 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 voter-nav-main">
|
|
</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">
|
|
<div class="voter-breadcrumb-wrap">
|
|
<div class="container-fluid">
|
|
<ol class="breadcrumb voter-breadcrumb">
|
|
<li v-for="(crumb, idx) in breadcrumbs" :key="idx" :class="{ active: crumb.active }">
|
|
<router-link v-if="crumb.to" :to="crumb.to">{{ crumb.label }}</router-link>
|
|
<span v-else>{{ crumb.label }}</span>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<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
|
|
}),
|
|
|
|
created: function () {
|
|
this.refreshInfo();
|
|
},
|
|
|
|
computed: {
|
|
breadcrumbs: function () {
|
|
var routeName = this.$route.name;
|
|
var labels = {
|
|
'Voter Home': 'Laman Utama',
|
|
'Voter Calon': 'Maklumat Calon',
|
|
'Mat': 'MAT',
|
|
'Vote': 'Undian',
|
|
'Result': 'Keputusan',
|
|
'Attendance': 'Daftar MAT',
|
|
'Zoom': 'Pautan Mesyuarat',
|
|
'penyata': 'Penyata Ahli'
|
|
};
|
|
var current = labels[routeName] || routeName || 'Halaman';
|
|
if (routeName === 'Voter Home') {
|
|
return [{ label: 'Laman Utama', to: null, active: true }];
|
|
}
|
|
return [
|
|
{ label: 'Laman Utama', to: { name: 'Voter Home' }, active: false },
|
|
{ label: current, to: null, active: true }
|
|
];
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
logout: function () {
|
|
var vm = this;
|
|
this.util.setAuthorization();
|
|
axios.post(config.API + 'voter/logout')
|
|
.catch(function () { })
|
|
.finally(function () {
|
|
localStorage.clear();
|
|
vm.$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;
|
|
}
|
|
|
|
.voter-breadcrumb-wrap {
|
|
margin: 0 16px 8px;
|
|
padding: 0;
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
.voter-breadcrumb-wrap .container-fluid {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
.voter-breadcrumb {
|
|
margin-bottom: 16px;
|
|
padding: 14px 20px;
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border: 1px solid #e5ebf3;
|
|
box-shadow: 0 8px 22px rgba(35, 64, 97, 0.1);
|
|
font-size: 1.7rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.voter-breadcrumb>li {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.voter-breadcrumb>li+li:before {
|
|
color: #94a3b8;
|
|
padding: 0 12px;
|
|
font-size: 1.35rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.voter-breadcrumb>li>a {
|
|
color: #2563eb;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.voter-breadcrumb>li>a:hover {
|
|
color: #1d4ed8;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.voter-breadcrumb>li.active {
|
|
color: #17324d;
|
|
font-weight: 700;
|
|
font-size: 1.7rem;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
.voter-breadcrumb-wrap {
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.voter-breadcrumb {
|
|
font-size: 1.4rem;
|
|
line-height: 1.4;
|
|
padding: 12px 16px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.voter-breadcrumb>li.active {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.voter-breadcrumb>li+li:before {
|
|
padding: 0 8px;
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
</style>
|