DONE: enhance UI on admin and voter side, add docker config, fix delete button modal not showing
This commit is contained in:
ISMAIL MASSERAN
@@ -0,0 +1,11 @@
|
||||
.git
|
||||
node_modules
|
||||
vendor
|
||||
storage/logs
|
||||
storage/framework/cache
|
||||
storage/framework/sessions
|
||||
storage/framework/views
|
||||
storage/debugbar
|
||||
npm-debug.log
|
||||
Dockerfile
|
||||
docker-compose.yml
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
CLOUDINARY_ENABLED=
|
||||
CLOUDINARY_FOLDER=""
|
||||
CLOUDINARY_IMAGE_ERROR=
|
||||
CLOUDINARY_IMAGE_DEFAULT=
|
||||
CLOUDINARY_CLOUD_NAME=
|
||||
CLOUDINARY_API_KEY=
|
||||
CLOUDINARY_API_SECRET=
|
||||
|
||||
APP_NAME=Laravel
|
||||
APP_ENV=local
|
||||
APP_KEY=base64:GQjuMDkTaLnqx3nyWezVjxs0QjoWamzyWGMhzqw3ZPM=
|
||||
APP_DEBUG=true
|
||||
APP_LOG_LEVEL=debug
|
||||
LOG_CHANNEL=stack
|
||||
APP_URL=http://localhost
|
||||
|
||||
USER_NAME="Lenard Mangay-ayam"
|
||||
USER_EMAIL="lenard.mangayayam@voting-system.com"
|
||||
USER_PASS="admin"
|
||||
|
||||
DB_CONNECTION=mysql
|
||||
DB_HOST=mysql
|
||||
DB_PORT=3306
|
||||
DB_DATABASE=voting
|
||||
DB_USERNAME=voteuser
|
||||
DB_PASSWORD=password
|
||||
|
||||
BROADCAST_DRIVER=log
|
||||
CACHE_DRIVER=file
|
||||
SESSION_DRIVER=file
|
||||
QUEUE_DRIVER=sync
|
||||
|
||||
REDIS_HOST=127.0.0.1
|
||||
REDIS_PASSWORD=null
|
||||
REDIS_PORT=6379
|
||||
|
||||
MAIL_DRIVER=smtp
|
||||
MAIL_HOST=smtp.mailtrap.io
|
||||
MAIL_PORT=2525
|
||||
MAIL_USERNAME=null
|
||||
MAIL_PASSWORD=null
|
||||
MAIL_ENCRYPTION=null
|
||||
|
||||
PUSHER_APP_ID=
|
||||
PUSHER_APP_KEY=
|
||||
PUSHER_APP_SECRET=
|
||||
@@ -11,6 +11,7 @@ APP_ENV=local
|
||||
APP_KEY=
|
||||
APP_DEBUG=true
|
||||
APP_LOG_LEVEL=debug
|
||||
LOG_CHANNEL=stack
|
||||
APP_URL=http://localhost
|
||||
|
||||
USER_NAME="Lenard Mangay-ayam"
|
||||
|
||||
@@ -11,3 +11,4 @@ npm-debug.log
|
||||
yarn-error.log
|
||||
.env
|
||||
*sublime*
|
||||
/.vscode
|
||||
@@ -48,13 +48,18 @@ class LoginController extends Controller
|
||||
$user_otp->expired_at = $expired_at;
|
||||
$user_otp->save();
|
||||
|
||||
return response()->json([
|
||||
$response = [
|
||||
'status' => 'success',
|
||||
'message' => 'generated SMS Token',
|
||||
'notel' => $voter->telefon,
|
||||
'nokp' => $voter->no_kp,
|
||||
];
|
||||
|
||||
]);
|
||||
if (app()->environment(['local', 'development'])) {
|
||||
$response['debug_otp'] = $sms_token;
|
||||
}
|
||||
|
||||
return response()->json($response);
|
||||
|
||||
}else{
|
||||
return response()->json([
|
||||
@@ -111,7 +116,7 @@ class LoginController extends Controller
|
||||
} else {
|
||||
return response()->json([
|
||||
'status' => 'failed',
|
||||
'message' => 'Invalid ID.'
|
||||
'message' => 'No. KP tidak wujud. Atau sesi mengundi telah tamat'
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@@ -12,7 +12,11 @@ class PenyataController extends Controller
|
||||
// GET PENYATA BERDASARKAN NO ANGGOTA
|
||||
public function getPenyata($no_anggota)
|
||||
{
|
||||
return Voter::where('no_anggota', $no_anggota)->firstOrFail();
|
||||
$voter = Voter::where('no_anggota', $no_anggota)->firstOrFail();
|
||||
|
||||
return response()->json([
|
||||
'user' => $voter,
|
||||
]);
|
||||
}
|
||||
|
||||
// SAHKAN PENYATA BERDASARKAN NO ANGGOTA
|
||||
@@ -20,7 +24,8 @@ class PenyataController extends Controller
|
||||
{
|
||||
$request->validate([
|
||||
'persetujuan' => 'required|in:Bersetuju,Tidak Bersetuju',
|
||||
'no_kp' => 'nullable'
|
||||
'no_kp' => 'nullable',
|
||||
'nokp' => 'nullable',
|
||||
]);
|
||||
|
||||
|
||||
@@ -38,18 +43,21 @@ class PenyataController extends Controller
|
||||
], 409); // Conflict
|
||||
}
|
||||
|
||||
$noKp = $request->input('no_kp', $request->input('nokp'));
|
||||
|
||||
$voter->update([
|
||||
'persetujuan' => $request->persetujuan,
|
||||
'status_penyata' => $request->persetujuan === 'Bersetuju'
|
||||
? 'DISAHKAN'
|
||||
: 'PERLU_SEMAK',
|
||||
'no_kp' => $request->nokp,
|
||||
'no_kp' => $noKp,
|
||||
'tarikh_sah' => now()
|
||||
]);
|
||||
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'status' => $voter->status_penyata
|
||||
'status' => $voter->status_penyata,
|
||||
'user' => $voter->fresh(),
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
services:
|
||||
app:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: docker/php/Dockerfile
|
||||
working_dir: /var/www/html
|
||||
volumes:
|
||||
- ./:/var/www/html:cached
|
||||
environment:
|
||||
APP_ENV: local
|
||||
APP_DEBUG: "true"
|
||||
depends_on:
|
||||
- mysql
|
||||
|
||||
web:
|
||||
image: nginx:1.25-alpine
|
||||
ports:
|
||||
- "8080:80"
|
||||
volumes:
|
||||
- ./:/var/www/html:cached
|
||||
- ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
|
||||
depends_on:
|
||||
- app
|
||||
|
||||
mysql:
|
||||
image: mysql:8.0
|
||||
command: --default-authentication-plugin=mysql_native_password
|
||||
ports:
|
||||
- "3307:3306"
|
||||
environment:
|
||||
MYSQL_DATABASE: voting
|
||||
MYSQL_USER: voteuser
|
||||
MYSQL_PASSWORD: password
|
||||
MYSQL_ROOT_PASSWORD: root
|
||||
volumes:
|
||||
- mysql_data:/var/lib/mysql
|
||||
|
||||
volumes:
|
||||
mysql_data:
|
||||
@@ -0,0 +1,26 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /var/www/html/public;
|
||||
index index.php index.html;
|
||||
|
||||
charset utf-8;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.php?$query_string;
|
||||
}
|
||||
|
||||
location ~ \.php$ {
|
||||
include fastcgi_params;
|
||||
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
|
||||
fastcgi_param PATH_INFO $fastcgi_path_info;
|
||||
fastcgi_pass app:9000;
|
||||
fastcgi_index index.php;
|
||||
}
|
||||
|
||||
location ~ /\.(?!well-known).* {
|
||||
deny all;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
FROM php:7.4-fpm
|
||||
|
||||
WORKDIR /var/www/html
|
||||
|
||||
RUN apt-get update \
|
||||
&& apt-get install -y --no-install-recommends \
|
||||
git \
|
||||
pkg-config \
|
||||
unzip \
|
||||
libonig-dev \
|
||||
libzip-dev \
|
||||
libpng-dev \
|
||||
libjpeg62-turbo-dev \
|
||||
libfreetype6-dev \
|
||||
&& docker-php-ext-configure gd --with-freetype --with-jpeg \
|
||||
&& docker-php-ext-install -j"$(nproc)" \
|
||||
pdo_mysql \
|
||||
mbstring \
|
||||
bcmath \
|
||||
zip \
|
||||
exif \
|
||||
gd \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
COPY --from=composer:2 /usr/bin/composer /usr/local/bin/composer
|
||||
|
||||
COPY docker/php/php.ini /usr/local/etc/php/conf.d/app.ini
|
||||
|
||||
RUN usermod -u 1000 www-data && groupmod -g 1000 www-data
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
memory_limit=512M
|
||||
upload_max_filesize=50M
|
||||
post_max_size=50M
|
||||
max_execution_time=120
|
||||
@@ -0,0 +1,2 @@
|
||||
### Glossary
|
||||
- The dropdown is no longer clipped by the floating header.
|
||||
@@ -1 +0,0 @@
|
||||
<h2>Under development</h2>
|
||||
Generated
+1
-1
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "voting",
|
||||
"name": "voting-dev",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
||||
Vendored
+712
-456
File diff suppressed because one or more lines are too long
@@ -86,6 +86,40 @@ php artisan serve
|
||||
# You can now view the system on http://localhost:8000
|
||||
```
|
||||
|
||||
## Docker
|
||||
|
||||
This runs the app in **PHP 7.4** + **MySQL 8.0** without changing your Mac's PHP.
|
||||
|
||||
```shell
|
||||
# Start containers (web at http://localhost:8080)
|
||||
docker compose up -d --build
|
||||
|
||||
# Create .env if you haven't yet
|
||||
cp .env.example .env
|
||||
|
||||
# Update these values in .env for Docker:
|
||||
# DB_HOST=mysql
|
||||
# DB_PORT=3306
|
||||
# DB_DATABASE=voting
|
||||
# DB_USERNAME=voting
|
||||
# DB_PASSWORD=voting
|
||||
|
||||
# Install PHP dependencies
|
||||
docker compose exec app composer install
|
||||
|
||||
# Generate app key
|
||||
docker compose exec app php artisan key:generate
|
||||
|
||||
# Link storage (optional)
|
||||
docker compose exec app php artisan storage:link
|
||||
|
||||
# Migrate + seed
|
||||
docker compose exec app php artisan migrate:fresh --seed
|
||||
|
||||
# Passport keys (if you use Passport)
|
||||
docker compose exec app php artisan passport:install
|
||||
```
|
||||
|
||||
### Note
|
||||
|
||||
The Default user for admin is:
|
||||
|
||||
@@ -1,68 +1,68 @@
|
||||
<template>
|
||||
<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>
|
||||
<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 :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: 'Maklumat Calon'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Calon</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: 'Kehadiran Calon'}" v-if="data.user.role==1" tag="li">
|
||||
<a href="#">Kehadiran</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="#">Pembiayaan Anggota </a>
|
||||
<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="#">Penyata Anggota</a>
|
||||
<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>
|
||||
|
||||
@@ -74,18 +74,20 @@
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
<script>
|
||||
export default {
|
||||
|
||||
// data: () =>({
|
||||
// loading: true,
|
||||
@@ -97,8 +99,8 @@
|
||||
var vm = this;
|
||||
if (this.util.isLogin()) {
|
||||
this.util.setAuthorization();
|
||||
axios.get(config.API+'admin/information')
|
||||
.then(response=>{
|
||||
axios.get(config.API + 'admin/information')
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
vm.data.user = response.data.user;
|
||||
vm.data.election = response.data.election;
|
||||
@@ -106,28 +108,214 @@
|
||||
vm.data.positions = response.data.position;
|
||||
vm.loading = false;
|
||||
})
|
||||
.catch(error=>{
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
if (this.util.showResult(error) == 401) {
|
||||
vm.logout();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$router.push({name:'Admin Login'});
|
||||
this.$router.push({ name: 'Admin Login' });
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
logout: function () {
|
||||
localStorage.clear();
|
||||
this.$router.push({name: 'Admin Login'});
|
||||
this.$router.push({ name: 'Admin Login' });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body{
|
||||
padding: 70px 5px;
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
|
||||
.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>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="col-md-5 col-md-offset-3">
|
||||
<div class="col-md-5 col-md-offset-3">
|
||||
<div class="panel panel-default">
|
||||
<div class="text-center">
|
||||
<img id="logo-admin" alt="Logo-admin">
|
||||
@@ -12,50 +12,45 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">E-mail</label>
|
||||
<input type="email" name="email" class="form-control" required/>
|
||||
<input type="email" name="email" class="form-control" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Kata laluan </label>
|
||||
<input type="password" name="password" class="form-control" id="password" required/>
|
||||
<input type="password" name="password" class="form-control" id="password" required />
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="visibility"
|
||||
onclick=" $(this)[0].checked ?
|
||||
<input type="checkbox" id="visibility" onclick=" $(this)[0].checked ?
|
||||
$('#password').attr('type','text'):
|
||||
$('#password').attr('type','password')"/> Show Password
|
||||
$('#password').attr('type','password')" /> Show Password
|
||||
</label>
|
||||
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="submit"
|
||||
class="btn btn-info form-control"
|
||||
:class="{'disabled': loading.isLoading}"
|
||||
:value="loading.value"/>
|
||||
<input type="submit" class="btn btn-info form-control"
|
||||
:class="{ 'disabled': loading.isLoading }" :value="loading.value" />
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// JavaScript to set the image source
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// JavaScript to set the image source
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Select the image element by its ID
|
||||
var logoImage = document.getElementById('logo-admin');
|
||||
// Set the source of the image dynamically
|
||||
logoImage.src = window.location.origin + '/images/login-admin.jpeg?' + new Date().getTime(); // Replace this URL with your desired image URL
|
||||
});
|
||||
console.log(logoImage.src);
|
||||
});
|
||||
|
||||
export default{
|
||||
export default {
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
@@ -68,7 +63,7 @@ export default{
|
||||
|
||||
created: function () {
|
||||
if (this.util.isLogin())
|
||||
return this.$router.push({name:'Admin Home'})
|
||||
return this.$router.push({ name: 'Admin Home' })
|
||||
this.util.setTitle('Log Masuk Admin ');
|
||||
},
|
||||
|
||||
@@ -80,13 +75,13 @@ export default{
|
||||
|
||||
this.startLoading();
|
||||
|
||||
axios.post(config.API+'admin/login', $('#login_form').serialize())
|
||||
axios.post(config.API + 'admin/login', $('#login_form').serialize())
|
||||
.then(response => {
|
||||
vm.stopLoading();
|
||||
if (this.util.showResult(response, 'success')) {
|
||||
localStorage['Access Token'] = `Bearer ${response.data.token}`;
|
||||
this.util.setAuthorization();
|
||||
vm.$router.push({name: 'Admin Home'});
|
||||
vm.$router.push({ name: 'Admin Home' });
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
@@ -124,7 +119,7 @@ body {
|
||||
.logo-admin {
|
||||
width: 30px;
|
||||
/* Adjust width as needed */
|
||||
height:50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
|
||||
}
|
||||
@@ -137,10 +132,9 @@ body {
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background-color: #c2ccc8;/* Change background color on hover */
|
||||
color: #f3f6f8; /* Change text color on hover */
|
||||
background-color: #c2ccc8;
|
||||
/* Change background color on hover */
|
||||
color: #f3f6f8;
|
||||
/* Change text color on hover */
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -62,7 +62,7 @@
|
||||
class="btn btn-primary">
|
||||
<i class="fa fa-edit"></i>Kemaskini
|
||||
</router-link>
|
||||
<button class="btn btn-danger" @click="util.showModal(nominee.id)" id=nominee.id>
|
||||
<button class="btn btn-danger" @click="openDeleteModal(nominee)">
|
||||
<i class="fa fa-trash"></i>Padam
|
||||
</button>
|
||||
|
||||
@@ -107,7 +107,13 @@ export default {
|
||||
|
||||
methods: {
|
||||
|
||||
deleteNominee(nomineeId) {
|
||||
openDeleteModal: function (nominee) {
|
||||
this.id = nominee.id;
|
||||
this.util.showModal('#delete-nominee-modal');
|
||||
},
|
||||
|
||||
deleteNominee() {
|
||||
const nomineeId = this.id;
|
||||
this.util.hideModal('#delete-nominee-modal'); // Hide modal
|
||||
this.util.notify('Deleting nominee', 'loading'); // Show loading notification
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="form-group">
|
||||
<router-link class="btn btn-success" :to="{name:'Tambah Jawatan'}">
|
||||
<router-link class="btn btn-success" :to="{ name: 'Tambah Jawatan' }">
|
||||
<i class="fa fa-plus"></i> Tambah Jawatan
|
||||
</router-link>
|
||||
<button class="btn btn-default" @click="refreshPosition()">
|
||||
@@ -23,16 +23,14 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(position,i) in data.positions">
|
||||
<tr v-for="(position, i) in data.positions">
|
||||
<td>{{ position.id }}</td>
|
||||
<td>{{ position.name }}</td>
|
||||
<td>
|
||||
<button class="btn btn-info" @click="edit(i)">
|
||||
<i class="fa fa-edit"></i> Edit
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="util.showModal('#delete-position-modal');id=position.id">
|
||||
<button class="btn btn-danger" @click="util.showModal('#delete-position-modal'); id = position.id">
|
||||
<i class="fa fa-trash"></i> Padam
|
||||
</button>
|
||||
</td>
|
||||
@@ -44,9 +42,9 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal id="delete-position-modal">
|
||||
<modal id="delete-position-modal">
|
||||
<modal-header>Padam Jawatan</modal-header>
|
||||
<modal-body>
|
||||
<h2>Are you sure to delete Position?</h2>
|
||||
@@ -55,13 +53,13 @@
|
||||
<button class="btn btn-danger" @click="deletePosition()">Padam</button>
|
||||
<button class="btn btn-default" @click="util.hideModal('#delete-position-modal')">Cancel</button>
|
||||
</modal-footer>
|
||||
</modal>
|
||||
</modal>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
id: 0
|
||||
@@ -71,7 +69,7 @@ export default{
|
||||
created: function () {
|
||||
if (this.$route.query.refresh) {
|
||||
this.refreshPosition();
|
||||
this.$router.replace({name: 'Kemaskini Jawatan'})
|
||||
this.$router.replace({ name: 'Kemaskini Jawatan' })
|
||||
}
|
||||
},
|
||||
|
||||
@@ -79,13 +77,13 @@ export default{
|
||||
refreshPosition: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing Position', 'loading');
|
||||
axios.get(config.API+'position')
|
||||
.then(response=>{
|
||||
axios.get(config.API + 'position')
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
$.notifyClose();
|
||||
vm.data.positions = response.data;
|
||||
})
|
||||
.catch(error=>{
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
@@ -105,19 +103,19 @@ export default{
|
||||
edit: function (i) {
|
||||
var vm = this;
|
||||
this.data.position = this.data.positions[i];
|
||||
this.$router.push({name: 'Edit Position', params:{id:vm.data.position.id}})
|
||||
this.$router.push({ name: 'Edit Position', params: { id: vm.data.position.id } })
|
||||
},
|
||||
|
||||
deletePosition: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Deleting position', 'loading');
|
||||
this.util.hideModal('#delete-position-modal');
|
||||
axios.delete(config.API+'position/'+this.id)
|
||||
.then(response=>{
|
||||
axios.delete(config.API + 'position/' + this.id)
|
||||
.then(response => {
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) vm.refreshPosition();
|
||||
})
|
||||
.catch(error=>{
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="form-group">
|
||||
<router-link class="btn btn-success" :to="{name:'Tambah Pengundi'}">
|
||||
<router-link class="btn btn-success" :to="{ name: 'Tambah Pengundi' }">
|
||||
<i class="fa fa-plus"></i> Tambah Pengundi
|
||||
</router-link>
|
||||
<button class="btn btn-default" @click="refreshVoter()">
|
||||
<i class="fa fa-refresh"></i> Kemaskini Pengundi
|
||||
</button>
|
||||
<router-link class="btn btn-info" :to="{name:'History Senarai Anggota '}">
|
||||
<router-link class="btn btn-info" :to="{ name: 'Penyata Anggota' }">
|
||||
<i class="fa fa-list"></i> Database Anggota
|
||||
</router-link>
|
||||
</div>
|
||||
@@ -30,7 +30,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(voter,i) in data.voters.data">
|
||||
<tr v-for="(voter, i) in data.voters.data">
|
||||
<td>{{ i + 1 }}</td>
|
||||
<td>{{ voter.name }}</td>
|
||||
<td>{{ voter.no_kp }}</td>
|
||||
@@ -42,9 +42,8 @@
|
||||
<button class="btn btn-info" @click="edit(i)">
|
||||
<i class="fa fa-edit"></i> Set semula
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="util.showModal('#delete-voter-modal');id=voter.id">
|
||||
<button class="btn btn-danger"
|
||||
@click="util.showModal('#delete-voter-modal'); id = voter.id">
|
||||
<i class="fa fa-trash"></i> Padam
|
||||
</button>
|
||||
</td>
|
||||
@@ -57,21 +56,17 @@
|
||||
</div>
|
||||
|
||||
<ul class="pagination" v-if="pages.length > 1">
|
||||
<router-link
|
||||
tag="li"
|
||||
v-for="page in pages"
|
||||
:key="page['pages']"
|
||||
:to="{query:{page:page['page']}}"
|
||||
:class="{'active':current_page==page['page']}"
|
||||
<router-link tag="li" v-for="page in pages" :key="page['pages']"
|
||||
:to="{ query: { page: page['page'] } }" :class="{ 'active': current_page == page['page'] }"
|
||||
exact>
|
||||
<a href="#">{{ page['page'] }}</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal id="delete-voter-modal">
|
||||
<modal id="delete-voter-modal">
|
||||
<modal-header>Delete Voter</modal-header>
|
||||
<modal-body>
|
||||
<h2>Are you sure to delete voter?</h2>
|
||||
@@ -80,13 +75,13 @@
|
||||
<button class="btn btn-danger" @click="deleteVoter()">Delete</button>
|
||||
<button class="btn btn-default" @click="util.hideModal('#delete-voter-modal')">Cancel</button>
|
||||
</modal-footer>
|
||||
</modal>
|
||||
</modal>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
id: 0
|
||||
@@ -105,13 +100,13 @@ export default{
|
||||
refreshVoter: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing Voter', 'loading');
|
||||
axios.get(config.API+'voter?page='+this.current_page)
|
||||
.then(response=>{
|
||||
axios.get(config.API + 'voter?page=' + this.current_page)
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
$.notifyClose();
|
||||
vm.data.voters = response.data;
|
||||
})
|
||||
.catch(error=>{
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
@@ -120,19 +115,19 @@ export default{
|
||||
edit: function (i) {
|
||||
var vm = this;
|
||||
this.data.voter = this.data.voters.data[i];
|
||||
this.$router.push({name: 'Edit Voter', params:{id:vm.data.voter.id}})
|
||||
this.$router.push({ name: 'Edit Voter', params: { id: vm.data.voter.id } })
|
||||
},
|
||||
|
||||
deleteVoter: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Deleting voter', 'loading');
|
||||
this.util.hideModal('#delete-voter-modal');
|
||||
axios.delete(config.API+'voter/'+this.id)
|
||||
.then(response=>{
|
||||
axios.delete(config.API + 'voter/' + this.id)
|
||||
.then(response => {
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) vm.refreshVoter();
|
||||
})
|
||||
.catch(error=>{
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
@@ -150,7 +145,7 @@ export default{
|
||||
pages: function () {
|
||||
var pages = [];
|
||||
if (this.data.voters.last_page)
|
||||
for (var i = 1; i <= this.data.voters.last_page;i++) {
|
||||
for (var i = 1; i <= this.data.voters.last_page; i++) {
|
||||
let x = {};
|
||||
x['page'] = i;
|
||||
pages.push(x);
|
||||
|
||||
@@ -1,53 +1,65 @@
|
||||
<template>
|
||||
<div class="row col-md-10 col-md-offset-1">
|
||||
<div class="attendance-page row col-md-10 col-md-offset-1">
|
||||
<div class="col-md-12">
|
||||
|
||||
<h4 class="text-center fw-bold">PENGESAHAN KEHADIRAN</h4>
|
||||
<hr />
|
||||
|
||||
<h5 class="text-center">
|
||||
<div class="attendance-hero">
|
||||
<div class="attendance-section-kicker">Pengesahan Kehadiran</div>
|
||||
<h4 class="attendance-page-title">Sahkan Kehadiran Mesyuarat Agung</h4>
|
||||
<p class="attendance-page-subtitle">
|
||||
Sila semak maklumat anda, pilih kaedah kehadiran, dan sahkan penyertaan sebelum meneruskan.
|
||||
</p>
|
||||
<a href="https://drive.google.com/uc?export=download&id=1O5DVDIbGy-w0bejV6RqtJGIty-_5LJD8"
|
||||
target="_blank"
|
||||
style="font-weight: bold; text-decoration: none; padding: 10px 20px; border: 2px solid #007bff; color: #007bff; border-radius: 5px; display: inline-block;">
|
||||
⬇ Muat Turun Etika Mesyuarat Agung
|
||||
target="_blank" class="attendance-download-button">
|
||||
Muat Turun Etika Mesyuarat Agung
|
||||
</a>
|
||||
</h5>
|
||||
|
||||
<form @submit.prevent="edit()" id="edit_form">
|
||||
<div class="form-group">
|
||||
<label for="name">Nama : </label>
|
||||
<input type="text" name="name" class="form-control" readonly :value="data.user.name" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="no_kp">No. Kad Pengenalan :</label>
|
||||
<input type="text" name="no_kp" class="form-control" readonly :value="data.user.no_kp" required />
|
||||
<form @submit.prevent="edit()" id="edit_form" class="attendance-card">
|
||||
<div class="attendance-card-header">
|
||||
<div>
|
||||
<div class="attendance-section-kicker">Maklumat Anggota</div>
|
||||
<h5 class="attendance-card-title">Butiran Kehadiran</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="no_anggota">No. Anggota : </label>
|
||||
<input type="text" name="no_anggota" class="form-control" readonly :value="data.user.no_anggota"
|
||||
required />
|
||||
<div class="attendance-info-grid">
|
||||
<div class="form-group attendance-field">
|
||||
<label for="name">Nama</label>
|
||||
<input type="text" name="name" class="form-control attendance-input" readonly
|
||||
:value="data.user.name" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="no_anggota">Unit : </label>
|
||||
<input type="text" name="unit" class="form-control" readonly :value="data.user.unit" required />
|
||||
<div class="form-group attendance-field">
|
||||
<label for="no_kp">No. Kad Pengenalan</label>
|
||||
<input type="text" name="no_kp" class="form-control attendance-input" readonly
|
||||
:value="data.user.no_kp" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group red-border">
|
||||
<label for="kehadiran">Kehadiran :</label>
|
||||
<select class="form-control" id="kehadiran" name="kehadiran" required>
|
||||
<div class="form-group attendance-field">
|
||||
<label for="no_anggota">No. Anggota</label>
|
||||
<input type="text" name="no_anggota" class="form-control attendance-input" readonly
|
||||
:value="data.user.no_anggota" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group attendance-field">
|
||||
<label for="unit">Unit</label>
|
||||
<input type="text" name="unit" class="form-control attendance-input" readonly
|
||||
:value="data.user.unit" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group attendance-choice-box">
|
||||
<label for="kehadiran">Kehadiran</label>
|
||||
<select class="form-control attendance-select" id="kehadiran" name="kehadiran" required>
|
||||
<option value="0">Sila Pilih :</option>
|
||||
<option value="1">Fizikal</option>
|
||||
<option value="2">Maya</option>
|
||||
</select>
|
||||
<small class="form-text text-muted">
|
||||
<em>Sila pilih kehadiran (Maya/Fizikal) kemudian klik “✅ SAYA TERIMA”</em>
|
||||
<small class="form-text text-muted attendance-helper-text">
|
||||
Sila pilih kehadiran (Maya/Fizikal) kemudian klik “SAYA TERIMA”.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mt-4 small">
|
||||
<div class="alert alert-info mt-4 small attendance-info-notice">
|
||||
<p><strong>*</strong> Pendaftaran akan dibuka dari <strong>jam 7.00 pagi hingga 10.00 pagi (25 April
|
||||
2025)</strong>.</p>
|
||||
<p>
|
||||
@@ -58,28 +70,22 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<!-- If already confirmed attendance -->
|
||||
<div v-if="data.user.kehadiran != 0" class="alert alert-success fw-bold text-center py-4">
|
||||
<p class="mb-2">KEHADIRAN ANDA TELAH DISAHKAN SECARA</p>
|
||||
<h5 class="text-uppercase mb-3">
|
||||
<strong class="fw-bold">
|
||||
<div class="text-center mt-4 attendance-action-area">
|
||||
<div v-if="data.user.kehadiran != 0" class="attendance-success-card">
|
||||
<div class="attendance-success-kicker">Kehadiran Disahkan</div>
|
||||
<p class="attendance-success-text">Kehadiran anda telah disahkan secara</p>
|
||||
<h5 class="attendance-success-mode">
|
||||
{{ data.user.kehadiran == 1 ? 'FIZIKAL' : 'MAYA' }}
|
||||
</strong>
|
||||
</h5>
|
||||
|
||||
<router-link :to="{ name: 'Vote' }"
|
||||
class="btn btn-warning px-4 py-2 fw-bold rounded-pill shadow-sm">
|
||||
🗳️ Undi Sekarang
|
||||
<router-link :to="{ name: 'Vote' }" class="btn btn-warning attendance-vote-button">
|
||||
Undi Sekarang
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- If not yet confirmed attendance -->
|
||||
<button type="submit" class="btn btn-lg btn-success px-5" v-else-if="data.election.status == 2">
|
||||
✅ SAYA TERIMA
|
||||
<button type="submit" class="btn btn-lg btn-success attendance-submit-button"
|
||||
v-else-if="data.election.status == 2">
|
||||
SAYA TERIMA
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -89,14 +95,186 @@
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.form-group.red-border {
|
||||
border: 2px solid red;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
.attendance-page {
|
||||
margin-top: 18px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.form-group.red-border label {
|
||||
color: rgb(0, 0, 0);
|
||||
.attendance-hero {
|
||||
margin-bottom: 22px;
|
||||
padding: 26px 28px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
|
||||
border: 1px solid #e2ebf5;
|
||||
box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.attendance-section-kicker {
|
||||
margin-bottom: 8px;
|
||||
color: #2f80ed;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.attendance-page-title,
|
||||
.attendance-card-title {
|
||||
margin: 0 0 8px;
|
||||
color: #17324d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.attendance-page-subtitle {
|
||||
max-width: 700px;
|
||||
margin: 0 auto 18px;
|
||||
color: #5f7388;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.attendance-download-button {
|
||||
display: inline-block;
|
||||
padding: 12px 20px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #cfe2ff;
|
||||
background: #fff;
|
||||
color: #0d6efd;
|
||||
font-weight: 700;
|
||||
text-decoration: none !important;
|
||||
box-shadow: 0 10px 24px rgba(13, 110, 253, 0.12);
|
||||
}
|
||||
|
||||
.attendance-card {
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2ebf5;
|
||||
box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
|
||||
}
|
||||
|
||||
.attendance-card-header {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.attendance-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.attendance-field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.attendance-field label,
|
||||
.attendance-choice-box label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #45617b;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.attendance-input,
|
||||
.attendance-select {
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #d8e3f0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.attendance-input[readonly] {
|
||||
background: #f8fbff;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.attendance-choice-box {
|
||||
margin-top: 20px;
|
||||
padding: 18px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #ffd9a8;
|
||||
background: linear-gradient(180deg, #fffaf2 0%, #fff4df 100%);
|
||||
box-shadow: 0 10px 24px rgba(255, 193, 7, 0.08);
|
||||
}
|
||||
|
||||
.attendance-helper-text {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.attendance-info-notice {
|
||||
margin-bottom: 0;
|
||||
padding: 16px 18px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #cde3ff;
|
||||
box-shadow: 0 10px 24px rgba(13, 110, 253, 0.08);
|
||||
}
|
||||
|
||||
.attendance-info-notice p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.attendance-action-area {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.attendance-success-card {
|
||||
padding: 24px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #effaf2 0%, #ffffff 100%);
|
||||
border: 1px solid #ccebd7;
|
||||
box-shadow: 0 14px 28px rgba(40, 167, 69, 0.12);
|
||||
}
|
||||
|
||||
.attendance-success-kicker {
|
||||
margin-bottom: 8px;
|
||||
color: #1f8b47;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.attendance-success-text {
|
||||
margin-bottom: 8px;
|
||||
color: #43617a;
|
||||
}
|
||||
|
||||
.attendance-success-mode {
|
||||
margin: 0 0 18px;
|
||||
color: #0f5132;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.attendance-submit-button,
|
||||
.attendance-vote-button {
|
||||
min-width: 220px;
|
||||
padding: 12px 24px;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
box-shadow: 0 12px 24px rgba(35, 64, 97, 0.14);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.attendance-hero,
|
||||
.attendance-card {
|
||||
padding: 18px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.attendance-info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.attendance-submit-button,
|
||||
.attendance-vote-button {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,53 +1,55 @@
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
<div class="row col-md-10 col-md-offset-1">
|
||||
<div class="voter-home-page row col-md-10 col-md-offset-1">
|
||||
<!-- Banner -->
|
||||
<div class="text-center mb-4">
|
||||
<img src="/images/banner-mat28-new.jpg" alt="Banner" class="img-fluid"
|
||||
style="width: 100%; max-height: 400px; object-fit: cover;">
|
||||
<div class="col-xs-12">
|
||||
<div class="hero-banner">
|
||||
<img src="/images/banner-mat28-new.jpg" alt="Banner" class="hero-banner-image">
|
||||
</div>
|
||||
<div class="hero-banner-caption">
|
||||
<div class="hero-banner-kicker">Portal Pengundian</div>
|
||||
<h1 class="hero-banner-title">Maklumat Anggota dan Calon</h1>
|
||||
<p class="hero-banner-subtitle">Semak butiran keahlian anda dan tekan gambar calon untuk melihat profil penuh.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Member Info -->
|
||||
<div class="col-md-4">
|
||||
<div class="p-2 mb-3 text-center"
|
||||
style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
|
||||
Maklumat Anggota
|
||||
</div>
|
||||
<hr />
|
||||
<ul class="list-group" style="font-weight: bold;">
|
||||
<li class="list-group-item">
|
||||
<div class="col-md-4 page-column">
|
||||
<div class="page-section-heading">Maklumat Anggota</div>
|
||||
<div class="member-info-card">
|
||||
<ul class="list-group member-info-list">
|
||||
<li class="list-group-item member-info-item">
|
||||
<span class="info-label">NAMA</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">{{ data.user.name }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<li class="list-group-item member-info-item">
|
||||
<span class="info-label">NO KAD PENGENALAN</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">{{ data.user.no_kp }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<li class="list-group-item member-info-item">
|
||||
<span class="info-label">NO ANGGOTA</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">{{ data.user.no_anggota }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<li class="list-group-item member-info-item">
|
||||
<span class="info-label">UNIT</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">{{ data.user.unit }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<li class="list-group-item member-info-item">
|
||||
<span class="info-label">SAHAM</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">RM {{ data.user.saham | formatNumberWithCommas }}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<li class="list-group-item member-info-item">
|
||||
<span class="info-label">YURAN</span>
|
||||
<span class="info-separator">:</span>
|
||||
<span class="info-value">RM {{ data.user.yuran | formatNumberWithCommas }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Membership Card -->
|
||||
|
||||
@@ -101,18 +103,19 @@
|
||||
</div>
|
||||
|
||||
<!-- Nominee Info Section -->
|
||||
<div class="col-md-8">
|
||||
<div class="p-2 mb-3 text-center"
|
||||
style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
|
||||
Maklumat Calon
|
||||
<div class="col-md-8 page-column">
|
||||
<div class="page-section-heading">Maklumat Calon</div>
|
||||
<div class="nominee-page-intro">
|
||||
Tekan gambar atau baris calon untuk melihat maklumat penuh.
|
||||
</div>
|
||||
<hr />
|
||||
<small>Tekan gambar untuk maklumat calon</small>
|
||||
|
||||
<div class="panel panel-primary" v-for="position in data.positions" :key="position.id">
|
||||
<div class="panel-heading">{{ position.name }}</div>
|
||||
<div class="panel-body table-responsive">
|
||||
<table class="table table-hover">
|
||||
<div class="panel panel-primary nominee-panel" v-for="position in data.positions" :key="position.id">
|
||||
<div class="panel-heading nominee-panel-heading">
|
||||
<span>{{ position.name }}</span>
|
||||
<span class="nominee-panel-badge">Senarai Calon</span>
|
||||
</div>
|
||||
<div class="panel-body table-responsive nominee-panel-body">
|
||||
<table class="table table-hover nominee-table" id="table-nominee">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
@@ -124,15 +127,18 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(nominee, i) in data.nominees" :key="nominee.id" v-if="nominee.position_id == position.id"
|
||||
@click="viewNomineeDetails(nominee)">
|
||||
class="nominee-row" @click="viewNomineeDetails(nominee)">
|
||||
<td>
|
||||
<img :src="createBase64ImageUrl(nominee.photo)" class="thumbnail" style="height: 60px; width: 60px;">
|
||||
<img :src="createBase64ImageUrl(nominee.photo)" class="thumbnail nominee-thumb">
|
||||
</td>
|
||||
<td>{{ nominee.no_calon }}</td>
|
||||
<td>{{ nominee.name }}</td>
|
||||
<td>{{ nominee.no_anggota }}</td>
|
||||
<td>{{ nominee.unit }}</td>
|
||||
</tr>
|
||||
<tr v-if="!data.nominees.some(nominee => nominee.position_id == position.id)">
|
||||
<td colspan="5" class="nominee-empty-state">Tiada calon untuk jawatan ini.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -140,32 +146,61 @@
|
||||
</div>
|
||||
|
||||
<!-- Nominee Modal -->
|
||||
<div v-if="showNomineeModal" class="modal-backdrop">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div v-if="showNomineeModal" class="modal-backdrop nominee-modal-backdrop" @click.self="closeNomineeModal">
|
||||
<div class="modal-dialog" id="view-nominee-modal">
|
||||
<div class="modal-content nominee-modal-content">
|
||||
<div class="modal-header">
|
||||
<div>
|
||||
<h5 class="modal-title">Maklumat Calon</h5>
|
||||
<button type="button" class="close" @click="closeNomineeModal">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
<div class="modal-body nominee-modal-body">
|
||||
<div class="photo-section">
|
||||
<div class="nominee-photo-card">
|
||||
<img :src="nomineeViewed.photo" class="thumbnail nominee-viewed-photo" />
|
||||
<div class="nominee-photo-meta">
|
||||
<div class="nominee-name">{{ nomineeViewed.name }}</div>
|
||||
<div class="nominee-subtitle">
|
||||
Calon No. {{ nomineeViewed.no_calon || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<p><b>Nama:</b> {{ nomineeViewed.name }}</p>
|
||||
<p><b>Unit:</b> {{ nomineeViewed.unit }}</p>
|
||||
<p><b>Umur:</b> {{ nomineeViewed.umur }}</p>
|
||||
<p><b>Jawatan Sekarang:</b> {{ nomineeViewed.jawatan_sekarang }}</p>
|
||||
<p><b>Taraf Pendidikan:</b></p>
|
||||
<ol>
|
||||
<div class="nominee-summary-grid">
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Nama</span>
|
||||
<span class="summary-value">{{ nomineeViewed.name || '-' }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Unit</span>
|
||||
<span class="summary-value">{{ nomineeViewed.unit || '-' }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Umur</span>
|
||||
<span class="summary-value">{{ nomineeViewed.umur || '-' }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Jawatan Sekarang</span>
|
||||
<span class="summary-value">{{ nomineeViewed.jawatan_sekarang || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nominee-section-card">
|
||||
<div class="section-title">Taraf Pendidikan</div>
|
||||
<ol v-if="nomineeViewed.education && nomineeViewed.education.length" class="detail-list">
|
||||
<li v-for="(item, index) in nomineeViewed.education" :key="index">{{ item }}</li>
|
||||
</ol>
|
||||
<p><b>Pengalaman Kerja:</b></p>
|
||||
<ol>
|
||||
<p v-else class="detail-empty">Tiada maklumat pendidikan.</p>
|
||||
</div>
|
||||
|
||||
<div class="nominee-section-card">
|
||||
<div class="section-title">Pengalaman Kerja</div>
|
||||
<ol v-if="nomineeViewed.experience && nomineeViewed.experience.length" class="detail-list">
|
||||
<li v-for="(item, index) in nomineeViewed.experience" :key="index">{{ item }}</li>
|
||||
</ol>
|
||||
<p v-else class="detail-empty">Tiada maklumat pengalaman kerja.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@@ -237,98 +272,394 @@ export default {
|
||||
|
||||
|
||||
<style>
|
||||
#view-nominee-modal .modal-dialog {
|
||||
max-width: 850px;
|
||||
/* Set a maximum width */
|
||||
.voter-home-page {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.page-column {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero-banner {
|
||||
position: relative;
|
||||
margin-bottom: 28px;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 18px 40px rgba(11, 39, 79, 0.18);
|
||||
background: #f4f8fd;
|
||||
}
|
||||
|
||||
.hero-banner-image {
|
||||
width: 100%;
|
||||
/* Ensure full width on smaller screens */
|
||||
}
|
||||
|
||||
#view-nominee-modal .nominee-viewed-photo {
|
||||
width: 100%;
|
||||
/* Ensure the photo fills the container */
|
||||
height: auto;
|
||||
/* Maintain aspect ratio */
|
||||
}
|
||||
|
||||
#view-nominee-modal .content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* Allow content to wrap on smaller screens */
|
||||
}
|
||||
|
||||
#view-nominee-modal .photo-section {
|
||||
flex: 0 0 40%;
|
||||
/* Set a flexible width for the photo section */
|
||||
max-width: 300px;
|
||||
/* Set a maximum width */
|
||||
margin-right: 20px;
|
||||
/* Add space between photo and details */
|
||||
}
|
||||
|
||||
#view-nominee-modal .detail-section {
|
||||
flex: 1;
|
||||
/* Take remaining space */
|
||||
}
|
||||
|
||||
#view-nominee-modal span {
|
||||
max-height: 360px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.hero-banner-caption {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 6px;
|
||||
padding: 18px 20px;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5ebf3;
|
||||
box-shadow: 0 12px 26px rgba(35, 64, 97, 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
#view-nominee-modal .modal-dialog {
|
||||
max-width: none;
|
||||
padding-left: 10px;
|
||||
padding-right: 20px;
|
||||
margin-bottom: 50px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
.hero-banner-kicker {
|
||||
margin-bottom: 8px;
|
||||
color: #2f80ed;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-banner-title {
|
||||
margin: 0 0 8px;
|
||||
color: #17324d;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-banner-subtitle {
|
||||
max-width: 680px;
|
||||
margin: 0;
|
||||
color: #4f6479;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#view-nominee-modal .photo-section {
|
||||
flex: 0 0 100%;
|
||||
/* Set photo section to full width */
|
||||
max-width: none;
|
||||
/* Remove max-width */
|
||||
margin-right: 0;
|
||||
/* Remove right margin */
|
||||
.page-section-heading {
|
||||
margin-bottom: 14px;
|
||||
padding: 14px 18px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #0d6efd, #2f80ed);
|
||||
color: #fff;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
box-shadow: 0 12px 28px rgba(13, 110, 253, 0.2);
|
||||
}
|
||||
|
||||
.member-info-card {
|
||||
margin-bottom: 18px;
|
||||
padding: 6px;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5ebf3;
|
||||
box-shadow: 0 12px 26px rgba(35, 64, 97, 0.08);
|
||||
}
|
||||
|
||||
.member-info-list {
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.member-info-item {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.member-info-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.nominee-page-intro {
|
||||
margin-bottom: 18px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
background: #eef5ff;
|
||||
border: 1px solid #dbe8ff;
|
||||
color: #36506b;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.nominee-panel {
|
||||
margin-bottom: 20px;
|
||||
/* Add space between photo and details */
|
||||
}
|
||||
|
||||
#view-nominee-modal .detail-section {
|
||||
flex: 0 0 100%;
|
||||
/* Set detail section to full width */
|
||||
}
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 14px 28px rgba(35, 64, 97, 0.1);
|
||||
}
|
||||
|
||||
#table-nominee tbody tr {
|
||||
.nominee-panel-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(135deg, #1d4e89, #2563eb);
|
||||
color: #fff;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nominee-panel-badge {
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nominee-panel-body {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.nominee-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nominee-table thead {
|
||||
background: #f4f8fd;
|
||||
}
|
||||
|
||||
.nominee-table thead th {
|
||||
border-bottom: 1px solid #dce7f5;
|
||||
color: #48627e;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.nominee-table tbody td {
|
||||
vertical-align: middle;
|
||||
border-top: 1px solid #edf2f7;
|
||||
color: #22384f;
|
||||
}
|
||||
|
||||
.nominee-row {
|
||||
cursor: pointer;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
|
||||
}
|
||||
|
||||
@keyframes pulseBackground {
|
||||
0% {
|
||||
background-color: #FFFFBF;
|
||||
}
|
||||
|
||||
/* Start color */
|
||||
50% {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Middle color (white) */
|
||||
100% {
|
||||
background-color: #FFFFBF;
|
||||
}
|
||||
|
||||
.nominee-row:hover {
|
||||
background: #f8fbff;
|
||||
box-shadow: inset 4px 0 0 #2f80ed;
|
||||
}
|
||||
|
||||
#table-nominee tbody tr:hover {
|
||||
animation: pulseBackground 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
|
||||
.nominee-thumb {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 0;
|
||||
border: 2px solid #dbe8ff;
|
||||
border-radius: 16px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 8px 18px rgba(47, 128, 237, 0.12);
|
||||
}
|
||||
|
||||
.nominee-empty-state {
|
||||
padding: 18px !important;
|
||||
text-align: center;
|
||||
color: #6f8193;
|
||||
}
|
||||
|
||||
.nominee-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1050;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px 16px;
|
||||
background: rgba(7, 25, 48, 0.72);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
#view-nominee-modal.modal-dialog {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nominee-modal-content {
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.nominee-modal-content .modal-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px 16px;
|
||||
border-bottom: 1px solid #e7edf5;
|
||||
background: linear-gradient(135deg, #0d6efd, #2f80ed);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nominee-modal-content .modal-title {
|
||||
margin: 4px 0 0;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nominee-modal-content .modal-header .close {
|
||||
margin-top: -4px;
|
||||
color: #fff;
|
||||
opacity: 0.9;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.nominee-modal-kicker {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.nominee-modal-body {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
background: #f5f8fc;
|
||||
}
|
||||
|
||||
.photo-section {
|
||||
flex: 0 0 300px;
|
||||
}
|
||||
|
||||
.nominee-photo-card {
|
||||
padding: 18px;
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5ebf3;
|
||||
box-shadow: 0 10px 24px rgba(35, 64, 97, 0.08);
|
||||
}
|
||||
|
||||
.nominee-viewed-photo {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
object-fit: cover;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
margin: 0 0 16px;
|
||||
background: #eef3f8;
|
||||
}
|
||||
|
||||
.nominee-photo-meta {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nominee-name {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #17324d;
|
||||
}
|
||||
|
||||
.nominee-subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 1.4rem;
|
||||
color: #5f7388;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nominee-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5ebf3;
|
||||
box-shadow: 0 8px 22px rgba(35, 64, 97, 0.06);
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #6f8193;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: #17324d;
|
||||
}
|
||||
|
||||
.nominee-section-card {
|
||||
margin-bottom: 16px;
|
||||
padding: 18px 20px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5ebf3;
|
||||
box-shadow: 0 8px 22px rgba(35, 64, 97, 0.06);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #17324d;
|
||||
}
|
||||
|
||||
.detail-list {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
color: #30475f;
|
||||
}
|
||||
|
||||
.detail-list li {
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.detail-empty {
|
||||
margin: 0;
|
||||
color: #6f8193;
|
||||
}
|
||||
|
||||
.nominee-modal-content .modal-footer {
|
||||
padding: 16px 24px 22px;
|
||||
border-top: 1px solid #e7edf5;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.nominee-modal-backdrop {
|
||||
align-items: flex-start;
|
||||
overflow-y: auto;
|
||||
padding: 16px 10px;
|
||||
}
|
||||
|
||||
.nominee-modal-body {
|
||||
flex-direction: column;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.photo-section {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.nominee-viewed-photo {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.nominee-summary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.info-label {
|
||||
@@ -425,7 +756,7 @@ export default {
|
||||
text-orientation: mixed;
|
||||
/* normal letters upright */
|
||||
font-weight: bold;
|
||||
font-size:1.5rem;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 2px;
|
||||
/* space between letters */
|
||||
padding: 5px;
|
||||
@@ -549,4 +880,58 @@ export default {
|
||||
/* icon size */
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.voter-home-page {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.hero-banner-image {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.hero-banner-title {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hero-banner {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.hero-banner-image {
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.hero-banner-caption {
|
||||
padding: 16px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.hero-banner-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-banner-subtitle {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.page-section-heading {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.nominee-panel-heading {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nominee-table thead th:nth-child(4),
|
||||
.nominee-table tbody td:nth-child(4),
|
||||
.nominee-table thead th:nth-child(5),
|
||||
.nominee-table tbody td:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -102,7 +102,8 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="mt-4">Sukacita dapat tuan/puan untuk mengesahkan baki tersebut dengan memasukkan No K/P anggota dan menekan butang SAHKAN
|
||||
<p class="mt-4">Sukacita dapat tuan/puan untuk mengesahkan baki tersebut dengan memasukkan No K/P anggota dan
|
||||
menekan butang SAHKAN
|
||||
untuk tujuan audit tahunan koperasi sebelum <b>12-03-2026</b>.</p>
|
||||
|
||||
<p class="mt-4">Dimaklumkan juga bahawa sekiranya kami tidak menerima pengesahan tuan/puan ke atas penyata ini
|
||||
|
||||
@@ -1,37 +1,51 @@
|
||||
<template>
|
||||
<div class="row col-md-10 col-md-offset-1">
|
||||
<div class="col-md-4">
|
||||
<h4>UNDIAN CALON ANGGOTA LEMBAGA</h4>
|
||||
<hr />
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item" v-for="position in data.positions">
|
||||
<b>{{ position.name }} : </b>
|
||||
</li>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item" v-for="nominee_id in selected[0].nominee_id">
|
||||
<b> - [{{ getNomineeNo(nominee_id) }}] {{ getSelectedNomineeName(nominee_id) }}</b>
|
||||
<div class="vote-page row col-md-10 col-md-offset-1">
|
||||
<div class="col-md-4 vote-sidebar-column">
|
||||
<div class="vote-summary-card">
|
||||
<div class="vote-section-kicker">Ringkasan Undian</div>
|
||||
<h4 class="vote-page-title">UNDIAN CALON ANGGOTA LEMBAGA</h4>
|
||||
<p class="vote-page-subtitle">Semak calon yang telah dipilih sebelum menghantar undi anda.</p>
|
||||
<div class="vote-limit-pill">
|
||||
Anda hanya boleh memilih <b>satu (1) orang calon</b> sahaja.
|
||||
</div>
|
||||
|
||||
<ul class="list-group vote-summary-list">
|
||||
<li class="list-group-item vote-summary-item">
|
||||
<div class="vote-position-name">Calon Dipilih</div>
|
||||
<div v-if="selected[0] && selected[0].nominee_id.length" class="vote-selected-list">
|
||||
<div class="vote-selected-item" v-for="nominee_id in selected[0].nominee_id" :key="nominee_id">
|
||||
<span class="vote-selected-badge">#{{ getNomineeNo(nominee_id) }}</span>
|
||||
<span>{{ getSelectedNomineeName(nominee_id) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="vote-empty-selection">
|
||||
Belum ada calon dipilih.
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<li class="list-group-item">
|
||||
<center>
|
||||
<button class="btn btn-success" @click="checkUndi()">UNDI</button>
|
||||
<!-- <button class="btn btn-default" @click="reset()">Reset</button> -->
|
||||
</center>
|
||||
<li class="list-group-item vote-summary-action">
|
||||
<button class="btn btn-success btn-block vote-submit-button" @click="checkUndi()">UNDI</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h4>Senarai Calon</h4>
|
||||
<div class="alert alert-warning " role="alert">
|
||||
Anda hanya boleh memilih <b> satu (1) orang calon</b> sahaja.
|
||||
</div>
|
||||
<hr />
|
||||
<div class="panel panel-info" v-for="position in data.positions">
|
||||
<div class="panel-heading">{{ position.name }}</div>
|
||||
<div class="panel-body table-responsive">
|
||||
<table class="table table-hover">
|
||||
<div class="col-md-8 vote-content-column">
|
||||
<div class="vote-content-header">
|
||||
<div>
|
||||
<div class="vote-section-kicker">Senarai Calon</div>
|
||||
<h4 class="vote-content-title">Pilih Calon Anda</h4>
|
||||
</div>
|
||||
<div class="alert alert-warning vote-alert" role="alert">
|
||||
Anda hanya boleh memilih <b>satu (1) orang calon</b> sahaja.
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-info vote-panel" v-for="position in data.positions" :key="position.id">
|
||||
<div class="panel-heading vote-panel-heading">
|
||||
<span>{{ position.name }}</span>
|
||||
<span class="vote-panel-badge">Calon Aktif</span>
|
||||
</div>
|
||||
<div class="panel-body table-responsive vote-panel-body">
|
||||
<table class="table table-hover vote-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
@@ -43,13 +57,12 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(nominee, index) in data.nominees" v-if="nominee.position_id == position.id"
|
||||
:key="nominee.id">
|
||||
<td><input type="checkbox" :id="nominee.id" :disabled="disabledCheckboxes[index]"
|
||||
:key="nominee.id" class="vote-row">
|
||||
<td class="vote-checkbox-cell"><input type="checkbox" :id="nominee.id" :disabled="disabledCheckboxes[index]"
|
||||
@change="vote(position.id, nominee.id)" />
|
||||
</td>
|
||||
<td>{{ nominee.no_calon }}</td>
|
||||
<td><img @click="view(i)" :src="createBase64ImageUrl(nominee.photo)" class="thumbnail"
|
||||
style="height: 60px;width: 60px;" />
|
||||
<td><img @click="view(i)" :src="createBase64ImageUrl(nominee.photo)" class="thumbnail vote-nominee-photo" />
|
||||
</td>
|
||||
<td>{{ nominee.name }}</td>
|
||||
<td>{{ nominee.unit }}</td>
|
||||
@@ -60,20 +73,30 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="vote-modal" tabindex="-2" role="dialog" aria-labelledby="exampleModalLabel"
|
||||
<div class="modal vote-confirm-modal" id="vote-modal" tabindex="-2" role="dialog" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel"></h5>
|
||||
<div class="modal-content vote-modal-content">
|
||||
<div class="modal-header vote-modal-header">
|
||||
<div>
|
||||
<div class="vote-section-kicker">Pengesahan</div>
|
||||
<h5 class="modal-title vote-modal-title" id="exampleModalLabel">Sahkan Undian Anda</h5>
|
||||
</div>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h5>Nota: Sila pastikan anda telah membuat undian dengan betul.</h5>
|
||||
<div class="modal-body vote-modal-body">
|
||||
<h5 class="vote-modal-note">Nota: Sila pastikan anda telah membuat undian dengan betul.</h5>
|
||||
<div class="vote-modal-selection" v-if="selected[0] && selected[0].nominee_id.length">
|
||||
<div class="vote-modal-selection-title">Calon dipilih</div>
|
||||
<div class="vote-selected-item" v-for="nominee_id in selected[0].nominee_id" :key="nominee_id">
|
||||
<span class="vote-selected-badge">#{{ getNomineeNo(nominee_id) }}</span>
|
||||
<span>{{ getSelectedNomineeName(nominee_id) }}</span>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer vote-modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
|
||||
<button type="button" class="btn btn-primary" @click="submit()">Hantar</button>
|
||||
</div>
|
||||
@@ -261,3 +284,299 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vote-page {
|
||||
margin-top: 18px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.vote-sidebar-column,
|
||||
.vote-content-column {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.vote-summary-card {
|
||||
padding: 22px 20px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
|
||||
border: 1px solid #e2ebf5;
|
||||
box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
|
||||
position: sticky;
|
||||
top: 120px;
|
||||
}
|
||||
|
||||
.vote-section-kicker {
|
||||
margin-bottom: 8px;
|
||||
color: #2f80ed;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.vote-page-title,
|
||||
.vote-content-title {
|
||||
margin: 0 0 8px;
|
||||
color: #17324d;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vote-page-subtitle {
|
||||
margin-bottom: 16px;
|
||||
color: #5f7388;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.vote-limit-pill {
|
||||
margin-bottom: 18px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
background: #eef5ff;
|
||||
border: 1px solid #d7e7ff;
|
||||
color: #31506f;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.vote-summary-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.vote-summary-item,
|
||||
.vote-summary-action {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
padding: 14px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.vote-summary-list .vote-summary-item:last-of-type {
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.vote-position-name {
|
||||
margin-bottom: 10px;
|
||||
color: #17324d;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vote-selected-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.vote-selected-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #e6edf5;
|
||||
color: #30475f;
|
||||
}
|
||||
|
||||
.vote-selected-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 48px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
background: #dcecff;
|
||||
color: #1e5fbf;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vote-empty-selection {
|
||||
color: #7a8ea3;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.vote-summary-action {
|
||||
padding-top: 18px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.vote-submit-button {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
box-shadow: 0 12px 24px rgba(40, 167, 69, 0.24);
|
||||
}
|
||||
|
||||
.vote-content-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.vote-alert {
|
||||
margin-bottom: 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 24px rgba(255, 193, 7, 0.15);
|
||||
}
|
||||
|
||||
.vote-panel {
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 16px 34px rgba(35, 64, 97, 0.1);
|
||||
}
|
||||
|
||||
.vote-panel-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(135deg, #1d4e89, #2f80ed);
|
||||
color: #fff !important;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vote-panel-badge {
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vote-panel-body {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.vote-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.vote-table thead {
|
||||
background: #f4f8fd;
|
||||
}
|
||||
|
||||
.vote-table thead th {
|
||||
border-bottom: 1px solid #dce7f5;
|
||||
color: #48627e;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.vote-table tbody td {
|
||||
vertical-align: middle;
|
||||
border-top: 1px solid #edf2f7;
|
||||
color: #22384f;
|
||||
}
|
||||
|
||||
.vote-row {
|
||||
transition: background-color 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.vote-row:hover {
|
||||
background: #f8fbff;
|
||||
box-shadow: inset 4px 0 0 #2f80ed;
|
||||
}
|
||||
|
||||
.vote-checkbox-cell input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vote-nominee-photo {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 0;
|
||||
border-radius: 16px;
|
||||
border: 2px solid #dbe8ff;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 8px 18px rgba(47, 128, 237, 0.12);
|
||||
}
|
||||
|
||||
.vote-modal-content {
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.vote-modal-header {
|
||||
padding: 18px 22px;
|
||||
background: linear-gradient(135deg, #0d6efd, #2f80ed);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.vote-modal-title {
|
||||
margin: 4px 0 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vote-modal-header .close {
|
||||
color: #fff;
|
||||
opacity: 0.9;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.vote-modal-body {
|
||||
padding: 22px;
|
||||
background: #f7fbff;
|
||||
}
|
||||
|
||||
.vote-modal-note {
|
||||
margin-top: 0;
|
||||
margin-bottom: 14px;
|
||||
color: #17324d;
|
||||
}
|
||||
|
||||
.vote-modal-selection-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #17324d;
|
||||
}
|
||||
|
||||
.vote-modal-footer {
|
||||
padding: 16px 22px 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.vote-summary-card {
|
||||
position: static;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.vote-content-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.vote-page {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.vote-panel-heading {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vote-table thead th:nth-child(5),
|
||||
.vote-table tbody td:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,144 +1,247 @@
|
||||
<template>
|
||||
<div class="row col-md-10 col-md-offset-1">
|
||||
<div class="row col-md-10 col-md-offset-1 zoom-page">
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="centered-container">
|
||||
<!-- <h6 class="text-center">Pautan Zoom</h6> -->
|
||||
<div class="image-container">
|
||||
<img :src="imageUrl" alt="meeting apps" />
|
||||
<div class="zoom-hero-card">
|
||||
<div class="zoom-section-kicker">Pautan Mesyuarat</div>
|
||||
<h3 class="zoom-title">SELAMAT DATANG KE MESYUARAT AGUNG TAHUNAN</h3>
|
||||
<p class="zoom-subtitle">
|
||||
Sertai Mesyuarat Agung Tahunan KoPKB kali ke-28/2024 melalui pautan rasmi di bawah.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="centered-container">
|
||||
<h3>SELAMAT DATANG KE MESYUARAT AGUNG TAHUNAN
|
||||
<br> KoPKB <br>KALI KE-28/2024
|
||||
</h3>
|
||||
<div class="zoom-main-card">
|
||||
<div class="centered-container zoom-image-section">
|
||||
<div class="image-container zoom-image-card">
|
||||
<img :src="imageUrl" alt="meeting apps" class="zoom-image" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="centered-button">
|
||||
<button class="btn-interactive" @click="navigateToURL" target="_blank">
|
||||
Klik pada pautan berikut
|
||||
<div class="centered-container zoom-content-section">
|
||||
<div class="zoom-meeting-badge">
|
||||
KoPKB KALI KE-28/2024
|
||||
</div>
|
||||
<h4 class="zoom-content-title">Google Meet Rasmi</h4>
|
||||
<p class="zoom-content-text">
|
||||
Pastikan anda telah mendaftar kehadiran dan bersedia dengan sambungan internet yang stabil sebelum menyertai
|
||||
mesyuarat.
|
||||
</p>
|
||||
|
||||
<div class="zoom-action-panel">
|
||||
<button class="btn-interactive" @click="navigateToURL" type="button">
|
||||
<i class="fa fa-video-camera"></i> Klik pada pautan berikut
|
||||
</button>
|
||||
<div class="zoom-link-note">
|
||||
Pautan akan dibuka terus ke sesi mesyuarat rasmi.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div>
|
||||
<button class="centered-button" @click="handleClick">Klik pada pautan berikut >> </button>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageUrl: 'https://th.bing.com/th/id/OIP.TGLvYXfe4xq5MTZe4UnTDgHaEy?w=255&h=180&c=7&r=0&o=5&dpr=1.8&pid=1.7',
|
||||
meetingUrl: 'https://meet.google.com/paa-tpck-ssq'
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
navigateToURL() {
|
||||
// Navigate to the desired URL
|
||||
window.location.href = 'https://meet.google.com/paa-tpck-ssq';
|
||||
window.open(this.meetingUrl, '_blank');
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
//console.log(this)
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
x: {}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
header: function () {
|
||||
return this.x.name + ' for ' + this.getPosition(this.x.position_id);
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
imageUrl: 'https://th.bing.com/th/id/OIP.TGLvYXfe4xq5MTZe4UnTDgHaEy?w=255&h=180&c=7&r=0&o=5&dpr=1.8&pid=1.7'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// CustomButton {
|
||||
// }
|
||||
// methods: {
|
||||
// goToDestination() {
|
||||
// // Replace 'destinationURL' with the URL you want to navigate to
|
||||
// window.location.href = 'https://us06web.zoom.us/j/87138156396?pwd=JEakXmAZjRnPeXbPN7K8ajnbL0X77a.1';
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
/* Ensure the page takes the full height of the viewport */
|
||||
html, {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
<style scoped>
|
||||
.zoom-page {
|
||||
font-family: Arial, sans-serif;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.zoom-hero-card {
|
||||
margin-bottom: 22px;
|
||||
padding: 26px 28px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
|
||||
border: 1px solid #e2ebf5;
|
||||
box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zoom-section-kicker {
|
||||
margin-bottom: 8px;
|
||||
color: #2f80ed;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.zoom-title {
|
||||
margin: 0 0 10px;
|
||||
color: #17324d;
|
||||
font-size: 2.8rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.zoom-subtitle {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
color: #5f7388;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.zoom-main-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
border-radius: 22px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2ebf5;
|
||||
box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
|
||||
}
|
||||
|
||||
.centered-container {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Arial, sans-serif; /* Optional: for a cleaner font */
|
||||
}
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
/* Center the container */
|
||||
.centered-container {
|
||||
text-align: center; /* Center the text horizontally */
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack the elements vertically */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%; /* Full viewport height */
|
||||
}
|
||||
.zoom-image-card {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #dbe7f3;
|
||||
background: #f4f8fd;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* Styling for the heading */
|
||||
h3 {
|
||||
font-size: 24px; /* Optional: set a specific font size */
|
||||
font-weight: bold; /* Optional: make the heading bold */
|
||||
margin-bottom: 20px; /* Optional: space between heading and button */
|
||||
}
|
||||
.zoom-image {
|
||||
width: 100%;
|
||||
max-height: 420px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Styling for the button */
|
||||
.btn-interactive {
|
||||
padding: 12px 25px;
|
||||
background-color: #007bff; /* Blue background color */
|
||||
.zoom-content-section {
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.zoom-meeting-badge {
|
||||
margin-bottom: 12px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
background: #e8f1ff;
|
||||
color: #215db8;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.zoom-content-title {
|
||||
margin: 0 0 10px;
|
||||
color: #17324d;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.zoom-content-text {
|
||||
margin-bottom: 18px;
|
||||
color: #5f7388;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.zoom-action-panel {
|
||||
width: 100%;
|
||||
padding: 18px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
|
||||
border: 1px solid #d9e8fb;
|
||||
box-shadow: 0 12px 28px rgba(35, 64, 97, 0.07);
|
||||
}
|
||||
|
||||
.btn-interactive {
|
||||
padding: 14px 26px;
|
||||
background: linear-gradient(135deg, #0d6efd, #2f80ed);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px; /* Rounded corners */
|
||||
border-radius: 999px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
outline: none; /* Remove outline */
|
||||
}
|
||||
|
||||
/* Hover effect for the button */
|
||||
.btn-interactive:hover {
|
||||
background-color: #0056b3; /* Darker blue background on hover */
|
||||
transform: scale(1.05); /* Slightly enlarge the button on hover */
|
||||
}
|
||||
|
||||
/* Active effect for when the button is clicked */
|
||||
.btn-interactive:active {
|
||||
background-color: #004085; /* Even darker blue when clicked */
|
||||
transform: scale(0.98); /* Slightly shrink the button when clicked */
|
||||
}
|
||||
|
||||
/* Focus effect (when tabbing through elements) */
|
||||
.btn-interactive:focus {
|
||||
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
outline: none;
|
||||
box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.5); /* Blue glow on focus */
|
||||
box-shadow: 0 12px 24px rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
.btn-interactive:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 16px 28px rgba(13, 110, 253, 0.3);
|
||||
}
|
||||
|
||||
.btn-interactive:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-interactive:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.5);
|
||||
}
|
||||
|
||||
.zoom-link-note {
|
||||
margin-top: 12px;
|
||||
color: #5f7388;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.zoom-main-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.zoom-content-section {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.zoom-hero-card,
|
||||
.zoom-main-card {
|
||||
padding: 18px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.zoom-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.zoom-subtitle,
|
||||
.zoom-content-text {
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.zoom-content-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.btn-interactive {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="!loading">
|
||||
<nav class="navbar navbar-default navbar-fixed-top" id="nav">
|
||||
<nav class="navbar navbar-default navbar-fixed-top floating-header logo-header" id="nav">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<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>
|
||||
<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">
|
||||
|
||||
@@ -20,9 +21,11 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -38,7 +41,8 @@
|
||||
<a href="#"><b>PAUTAN MESYUARAT</b></a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{ name: 'penyata', params: { no_anggota: data.user.no_anggota } }" tag="li" exact>
|
||||
<router-link :to="{ name: 'penyata', params: { no_anggota: data.user.no_anggota } }"
|
||||
tag="li" exact>
|
||||
<a href="#"><b>PENYATA AHLI</b></a>
|
||||
</router-link>
|
||||
|
||||
@@ -59,8 +63,10 @@
|
||||
</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>
|
||||
@@ -72,7 +78,8 @@
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
loading: true
|
||||
loading: true,
|
||||
matLinkUrl: 'https://linktr.ee/kopkb'
|
||||
}),
|
||||
|
||||
created: function () {
|
||||
@@ -117,46 +124,193 @@ export default {
|
||||
|
||||
|
||||
<style scoped>
|
||||
body {
|
||||
padding: 70px 5px;
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Change navbar background color */
|
||||
#nav.navbar {
|
||||
background-color: #021324;
|
||||
/* Dark blue/gray background */
|
||||
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);
|
||||
}
|
||||
|
||||
/* Change navbar link text color */
|
||||
#nav .nav>li>a,
|
||||
#nav .navbar-brand,
|
||||
#nav .navbar-toggle {
|
||||
color: #f39c12;
|
||||
/* Light gray text */
|
||||
color: #f8fbff;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* Hover effect */
|
||||
#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: #f39c12;
|
||||
/* Gold/yellow on 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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
#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>
|
||||
|
||||
@@ -49,7 +49,14 @@
|
||||
.then(response => {
|
||||
this.stopLoading();
|
||||
if (this.util.showResult(response, 'success')) {
|
||||
this.$router.push({ name: 'Voter Verify', params: { 'nokp': response.data.nokp, 'notel': response.data.notel } });
|
||||
this.$router.push({
|
||||
name: 'Voter Verify',
|
||||
params: {
|
||||
'nokp': response.data.nokp,
|
||||
'notel': response.data.notel,
|
||||
'debug_otp': response.data.debug_otp || null
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
@@ -13,6 +13,14 @@
|
||||
<br>-<b>+6 {{ $route.params.notel }}</b>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="showDebugOtp"
|
||||
class="alert alert-info"
|
||||
style="margin-bottom:20px;"
|
||||
>
|
||||
OTP local development: <b>{{ $route.params.debug_otp }}</b>
|
||||
</div>
|
||||
|
||||
<div class="justify-content-center d-flex" style="margin-top:20px;margin-bottom:20px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
|
||||
<v-otp-input
|
||||
ref="otpInput"
|
||||
@@ -58,6 +66,11 @@ export default {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showDebugOtp: function () {
|
||||
return process.env.NODE_ENV !== 'production' && !!this.$route.params.debug_otp;
|
||||
}
|
||||
},
|
||||
|
||||
created: function(){
|
||||
console.log(this.$route.params.notel);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="modal fade" v-bind:id="id" role="dialog">
|
||||
<div class="modal fade app-modal" v-bind:id="id" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content" :class="aClass">
|
||||
<slot></slot>
|
||||
@@ -15,6 +15,18 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.app-modal{
|
||||
z-index: 2200;
|
||||
}
|
||||
|
||||
.app-modal .modal-dialog{
|
||||
margin-top: 110px;
|
||||
}
|
||||
|
||||
.modal-backdrop{
|
||||
z-index: 2190 !important;
|
||||
}
|
||||
|
||||
.primary{
|
||||
background-color: #337ab7;
|
||||
color: #fff;
|
||||
|
||||
+11
-6
@@ -1,7 +1,12 @@
|
||||
//Global Components
|
||||
Vue.component('modal', require('./components/mycomponents/modal/modal.vue'))
|
||||
Vue.component('modal-header', require('./components/mycomponents/modal/header.vue'));
|
||||
Vue.component('modal-body', require('./components/mycomponents/modal/body.vue'));
|
||||
Vue.component('modal-footer', require('./components/mycomponents/modal/footer.vue'));
|
||||
// Global components compiled by webpack may expose the Vue component under
|
||||
// `.default`, so normalize both CommonJS and ES module shapes here.
|
||||
const resolveComponent = function (component) {
|
||||
return component.default || component;
|
||||
}
|
||||
|
||||
Vue.component('uploader', require('./components/mycomponents/uploader.vue'));
|
||||
Vue.component('modal', resolveComponent(require('./components/mycomponents/modal/modal.vue')));
|
||||
Vue.component('modal-header', resolveComponent(require('./components/mycomponents/modal/header.vue')));
|
||||
Vue.component('modal-body', resolveComponent(require('./components/mycomponents/modal/body.vue')));
|
||||
Vue.component('modal-footer', resolveComponent(require('./components/mycomponents/modal/footer.vue')));
|
||||
|
||||
Vue.component('uploader', resolveComponent(require('./components/mycomponents/uploader.vue')));
|
||||
|
||||
@@ -21,8 +21,6 @@
|
||||
|
||||
<div id="error"></div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
window.config = {
|
||||
"API": "/api/v1/", //URL OF YOUR API LOCATED
|
||||
@@ -50,25 +48,35 @@
|
||||
<script src="/js/app.js"></script>
|
||||
<!-- Bootstrap CSS -->
|
||||
|
||||
</body>
|
||||
<footer class="bg-body-tertiary text-center text-lg-start">
|
||||
<!-- Copyright -->
|
||||
<div class="text-center py-4" style="background-color: rgba(0, 0, 0, 0.05);">
|
||||
<b>Koperasi Permodalan Kelantan Berhad © 2026 All Right Reserved</b>
|
||||
<footer class="bg-body-tertiary text-center text-lg-start">
|
||||
<div class="text-muted">
|
||||
<b>Koperasi Permodalan Kelantan Berhad © {{ date('Y') }} All Right Reserved</b>
|
||||
<a class="text-body" href="https://koppkb.com"></a>
|
||||
</div>
|
||||
<!-- Copyright -->
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
<style>
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
/* padding: 40px 0; */
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#app {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user