DONE: enhance UI on admin and voter side, add docker config, fix delete button modal not showing
This commit is contained in:
ISMAIL MASSERAN
@@ -1,80 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div v-if="!loading">
|
||||
<nav class="navbar navbar-default navbar-fixed-top" id="nav">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<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='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>
|
||||
</button>
|
||||
<a class="navbar-brand" :href="data.baseURL"><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 :to="{name: 'Admin Home'}" tag="li" exact><a href="#">Laman Utama</a></router-link>
|
||||
<router-link :to="{name: 'Kemaskini Jawatan'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Jawatan</a>
|
||||
<router-link :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">
|
||||
<a href="#">Anggota Koperasi</a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Maklumat Calon'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Calon</a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Kehadiran Calon'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Kehadiran</a>
|
||||
|
||||
<router-link :to="{ name: 'Manage Voter' }" v-if="data.user.role == 1" tag="li">
|
||||
<a href="#"><b>Anggota Koperasi</b></a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Pembiayaan'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Pembiayaan Anggota </a>
|
||||
<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: 'Penyata Anggota'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Penyata Anggota</a>
|
||||
<router-link :to="{ name: 'Kehadiran Calon' }" v-if="data.user.role == 1" 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>
|
||||
|
||||
|
||||
</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">
|
||||
<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 :to="{name:'Update Account'}" tag="li" exact>
|
||||
|
||||
<router-link :to="{ name: 'Update Account' }" tag="li" exact>
|
||||
<a href="#">Kemaskini Akaun</a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Manage Account'}" tag="li" v-if="data.user.id==1">
|
||||
|
||||
<router-link :to="{ name: 'Manage Account' }" tag="li" v-if="data.user.id == 1">
|
||||
<a href="#">Pengurusan Akaun</a>
|
||||
</router-link>
|
||||
|
||||
|
||||
<li @click="logout()"><a>Log Keluar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<router-view></router-view>
|
||||
|
||||
<div class="admin-main">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading" class="container">
|
||||
<div class="jumbotron">
|
||||
@@ -82,52 +84,238 @@
|
||||
</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;
|
||||
vm.loading = false;
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
if (this.util.showResult(error) == 401) {
|
||||
vm.logout();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$router.push({name:'Admin Login'});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
logout: function () {
|
||||
localStorage.clear();
|
||||
this.$router.push({name: 'Admin Login'});
|
||||
}
|
||||
</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;
|
||||
vm.loading = false;
|
||||
})
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
if (this.util.showResult(error) == 401) {
|
||||
vm.logout();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$router.push({ name: 'Admin Login' });
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
logout: function () {
|
||||
localStorage.clear();
|
||||
this.$router.push({ name: 'Admin Login' });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body{
|
||||
padding: 70px 5px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user