ISMAIL MASSERAN
382 lines
9.2 KiB
Vue
382 lines
9.2 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="/admin"><img
|
|
src='https://i.postimg.cc/ZBDD0ZfQ/Whats-App-Image-2024-03-21-at-1-24-46-PM-2.jpg'
|
|
border='0' width="150" height="auto" alt="MyKoPKB Logo">
|
|
</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="myNavbar">
|
|
|
|
<ul class="nav navbar-nav">
|
|
<!-- {{ users }} -->
|
|
<router-link v-if="Number(data.user.role) !== 3" :to="{ name: 'Admin Home' }" tag="li"
|
|
exact><a href="#"><b>Laman
|
|
Utama</b></a></router-link>
|
|
<router-link :to="{ name: 'Kemaskini Jawatan' }" v-if="data.user.role == 1" tag="li">
|
|
<a href="#"><b>Jawatan</b></a>
|
|
</router-link>
|
|
|
|
<!-- <router-link :to="{name: 'Manage Partylist'}" v-if="data.user.role==1" tag="li">
|
|
<a href="#">Manage Partylist</a>
|
|
</router-link> -->
|
|
|
|
<router-link :to="{ name: 'Manage Voter' }" v-if="data.user.role == 1" tag="li" exact>
|
|
<a href="#"><b>Anggota Koperasi</b></a>
|
|
</router-link>
|
|
|
|
<router-link :to="{ name: 'Maklumat Calon' }" v-if="data.user.role == 1" tag="li">
|
|
<a href="#"><b>Calon</b></a>
|
|
</router-link>
|
|
|
|
<router-link :to="{ name: 'Kehadiran Calon' }"
|
|
v-if="data.user.role == 1 || Number(data.user.role) === 3" tag="li">
|
|
<a href="#"><b>Kehadiran</b></a>
|
|
</router-link>
|
|
|
|
<router-link :to="{ name: 'Pembiayaan' }" v-if="data.user.role == 1" tag="li">
|
|
<a href="#"><b>Pembiayaan Anggota</b></a>
|
|
</router-link>
|
|
|
|
<router-link :to="{ name: 'Penyata Anggota' }" v-if="data.user.role == 1" tag="li">
|
|
<a href="#"><b>Penyata Anggota</b></a>
|
|
</router-link>
|
|
|
|
<router-link :to="{ name: 'Activity Log' }" v-if="data.user.role == 1" tag="li">
|
|
<a href="#"><b>Log Aktiviti</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">
|
|
|
|
<router-link v-if="Number(data.user.role) !== 3" :to="{ name: 'Update Account' }"
|
|
tag="li" exact>
|
|
<a href="#">Kemaskini Akaun</a>
|
|
</router-link>
|
|
|
|
<li v-if="isImpersonating()" @click="leaveImpersonation()">
|
|
<a>Kembali Akaun Asal</a>
|
|
</li>
|
|
|
|
<router-link :to="{ name: 'Manage Account' }" tag="li" v-if="data.user.id == 1">
|
|
<a href="#">Pengurusan Akaun</a>
|
|
</router-link>
|
|
|
|
<li @click="isImpersonating() ? null : logout()"
|
|
:class="{ disabled: isImpersonating() }"
|
|
:style="isImpersonating() ? 'opacity:0.5; cursor:not-allowed; pointer-events:none;' : ''">
|
|
<a>Log Keluar</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="admin-main">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
<div v-if="loading" 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,
|
|
// users:{'roles' : 1},
|
|
// }),
|
|
|
|
created: function () {
|
|
this.util.setTitle('Voting System - Administrator');
|
|
var vm = this;
|
|
if (this.util.isLogin()) {
|
|
this.util.setAuthorization();
|
|
axios.get(config.API + 'admin/information')
|
|
.then(response => {
|
|
console.log(response);
|
|
vm.data.user = response.data.user;
|
|
vm.data.election = response.data.election;
|
|
vm.data.partylists = response.data.partylist;
|
|
vm.data.positions = response.data.position;
|
|
if (response.data.user && response.data.user.role !== undefined && response.data.user.role !== null) {
|
|
localStorage.setItem('admin_role', String(response.data.user.role));
|
|
}
|
|
if (Number(response.data.user.role) === 3 && vm.$route.name !== 'Kehadiran Calon') {
|
|
vm.$router.replace({ name: 'Kehadiran Calon' });
|
|
}
|
|
vm.loading = false;
|
|
})
|
|
.catch(error => {
|
|
$.notifyClose();
|
|
if (this.util.showResult(error) == 401) {
|
|
vm.logout();
|
|
}
|
|
})
|
|
} else {
|
|
this.$router.push({ name: 'Admin Login' });
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
isImpersonating: function () {
|
|
try {
|
|
return localStorage.getItem('is_impersonating') === '1';
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
},
|
|
|
|
leaveImpersonation: function () {
|
|
var vm = this;
|
|
vm.util.notify('Leaving impersonation', 'loading');
|
|
axios.post(config.API + 'admin/impersonate/leave')
|
|
.then(function (response) {
|
|
$.notifyClose();
|
|
if (!response || !response.data || response.data.status !== 'success') {
|
|
vm.util.showResult(response, 'error');
|
|
return;
|
|
}
|
|
if (response.data.token) {
|
|
localStorage['Access Token'] = 'Bearer ' + response.data.token;
|
|
if (vm.util && vm.util.setAuthorization) vm.util.setAuthorization();
|
|
}
|
|
localStorage.removeItem('is_impersonating');
|
|
if (response.data.user) {
|
|
vm.data.user = response.data.user;
|
|
if (response.data.user.role !== undefined && response.data.user.role !== null) {
|
|
localStorage.setItem('admin_role', String(response.data.user.role));
|
|
}
|
|
}
|
|
vm.util.notify('Berjaya kembali', 'success');
|
|
if (vm.$router) vm.$router.go(0);
|
|
})
|
|
.catch(function (error) {
|
|
$.notifyClose();
|
|
vm.util.showResult(error, 'error');
|
|
});
|
|
},
|
|
|
|
logout: function () {
|
|
localStorage.removeItem('admin_role');
|
|
localStorage.removeItem('is_impersonating');
|
|
localStorage.clear();
|
|
this.$router.push({ name: 'Admin 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;
|
|
}
|
|
|
|
.admin-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;
|
|
}
|
|
|
|
.admin-main {
|
|
padding-top: 102px;
|
|
}
|
|
}
|
|
</style> |