minot ui changes
This commit is contained in:
Afrina Alimi
Generated
+60
-16
@@ -5383,6 +5383,11 @@
|
||||
"integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/es6-promise": {
|
||||
"version": "4.2.8",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
|
||||
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
|
||||
},
|
||||
"node_modules/escalade": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
|
||||
@@ -10178,15 +10183,6 @@
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/terser/node_modules/source-map": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
|
||||
"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/text-segmentation": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
|
||||
@@ -10532,6 +10528,29 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/verror": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
|
||||
"integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
|
||||
"engines": [
|
||||
"node >=0.6.0"
|
||||
],
|
||||
"dependencies": {
|
||||
"assert-plus": "^1.0.0",
|
||||
"core-util-is": "1.0.2",
|
||||
"extsprintf": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/verror/node_modules/core-util-is": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
|
||||
"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
|
||||
},
|
||||
"node_modules/viewerjs": {
|
||||
"version": "1.11.2",
|
||||
"resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.2.tgz",
|
||||
"integrity": "sha512-z7N9R91ORhtLvOUxN7GoIl+MFVVMbtWNB1T2UmTKuMlzc4EevS+/bletZcIwDf8RIUzk2CFMdleQzcsjsfLl+A=="
|
||||
},
|
||||
"node_modules/vue": {
|
||||
"version": "3.2.45",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
|
||||
@@ -14205,9 +14224,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"bootstrap": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
|
||||
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
|
||||
"version": "5.2.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
|
||||
"integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ=="
|
||||
},
|
||||
"bootstrap-icons": {
|
||||
"version": "1.8.1",
|
||||
@@ -15394,6 +15413,11 @@
|
||||
"integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
|
||||
"dev": true
|
||||
},
|
||||
"es6-promise": {
|
||||
"version": "4.2.8",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
|
||||
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
|
||||
},
|
||||
"escalade": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
|
||||
@@ -17577,16 +17601,14 @@
|
||||
"vue-demi": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
|
||||
"requires": {}
|
||||
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"pinia-plugin-persistedstate": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.0.2.tgz",
|
||||
"integrity": "sha512-84vPyUhPA/8Pr+1mT1ioNb2d8z4tvdgYRqMQf8xyauOVBKjo0ZcRBwPQBV7ZAJG43Kwar43nXG2jU+ZMvAFFRQ==",
|
||||
"requires": {}
|
||||
"integrity": "sha512-84vPyUhPA/8Pr+1mT1ioNb2d8z4tvdgYRqMQf8xyauOVBKjo0ZcRBwPQBV7ZAJG43Kwar43nXG2jU+ZMvAFFRQ=="
|
||||
},
|
||||
"pkg-dir": {
|
||||
"version": "4.2.0",
|
||||
@@ -19192,6 +19214,28 @@
|
||||
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
|
||||
"dev": true
|
||||
},
|
||||
"verror": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
|
||||
"integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
|
||||
"requires": {
|
||||
"assert-plus": "^1.0.0",
|
||||
"core-util-is": "1.0.2",
|
||||
"extsprintf": "^1.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
|
||||
"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"viewerjs": {
|
||||
"version": "1.11.2",
|
||||
"resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.2.tgz",
|
||||
"integrity": "sha512-z7N9R91ORhtLvOUxN7GoIl+MFVVMbtWNB1T2UmTKuMlzc4EevS+/bletZcIwDf8RIUzk2CFMdleQzcsjsfLl+A=="
|
||||
},
|
||||
"vue": {
|
||||
"version": "3.2.45",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
|
||||
|
||||
@@ -1,15 +1,7 @@
|
||||
<template>
|
||||
<Card style="margin-bottom: 1em">
|
||||
<template #title
|
||||
><div
|
||||
class="
|
||||
flex
|
||||
justify-content-center
|
||||
flex-wrap
|
||||
card-container
|
||||
purple-container
|
||||
"
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex justify-content-center flex-wrap card-container purple-container">
|
||||
<div class="font-normal">Lelongan Seterusnya</div>
|
||||
<Button
|
||||
class="button-standard p-button-rounded p-button-outlined"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Card style="margin-bottom: 1em">
|
||||
<template #title>
|
||||
<div class="flex justify-content-between flex-wrap card-container">
|
||||
<div class="flex justify-content-center flex-wrap card-container">
|
||||
<div class="font-semibold">Lelongan Hari Ini : <span class="white-space-nowrap">{{ date }}</span></div>
|
||||
<Button
|
||||
class="button-standard p-button-rounded p-button-outlined"
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="col-12">
|
||||
<item-in-cart-notification></item-in-cart-notification>
|
||||
</div>
|
||||
<div class="col-12 lg:col-7">
|
||||
<div class="col-12 lg:col-12">
|
||||
<lelong-today></lelong-today>
|
||||
<lelong-next></lelong-next>
|
||||
<current-karat></current-karat>
|
||||
|
||||
@@ -0,0 +1,494 @@
|
||||
<template>
|
||||
<!-- Navbar for laptop screen size (width>992px) -->
|
||||
<Toast :breakpoints="{ '500px': { width: '100%', right: '0', left: '0' } }" />
|
||||
<div class="card sticky-top lg:flex hidden border-none">
|
||||
<div
|
||||
class="flex justify-content-between px-3 md:px-6 h-3rem flex-wrap main-color"
|
||||
>
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<!-- <div class="company-title" type="button" v-on:click="toHome()"> -->
|
||||
<!-- <img class="logo-img mr-2" src="img/e-rahn-lelong.png" alt="arrahn-logo" /> -->
|
||||
<Button
|
||||
icon="pi pi-th-large"
|
||||
@click="visibleLeft = true"
|
||||
/>
|
||||
|
||||
<div class="logo-title mr-2">Menu</div>
|
||||
|
||||
<img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()"/>
|
||||
<!-- <div class="logo-title">E-Rahn Lelong</div> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<!-- <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()"/> -->
|
||||
<!-- <nav class="main-nav">
|
||||
<router-link class="nav-button" v-bind:to="{ name: 'home' }"
|
||||
>Utama</router-link
|
||||
>
|
||||
<router-link class="nav-button" v-bind:to="{ name: 'list' }"
|
||||
>Senarai</router-link
|
||||
>
|
||||
<router-link class="nav-button" v-bind:to="{ name: 'cart' }"
|
||||
>Troli</router-link
|
||||
>
|
||||
<router-link class="nav-button" v-bind:to="{ name: 'bid-record' }"
|
||||
>Rekod</router-link
|
||||
>
|
||||
<router-link class="nav-button" v-bind:to="{ name: 'result' }"
|
||||
>Keputusan</router-link
|
||||
>
|
||||
<router-link class="nav-button" v-bind:to="{ name: 'login' }"
|
||||
>Login</router-link
|
||||
>
|
||||
</nav> -->
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<div class="profile-title hidden lg:flex">
|
||||
<div class="dropdown">
|
||||
<div
|
||||
class="dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="bi bi-person-circle me-1"></i>{{ username }}
|
||||
</div>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<div
|
||||
type="button"
|
||||
class="dropdown-item"
|
||||
v-on:click="toProfile()"
|
||||
>
|
||||
Profil <i class="bi bi-person-workspace"></i>
|
||||
</div>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<div
|
||||
type="button"
|
||||
v-on:click="doLogout()"
|
||||
class="dropdown-item"
|
||||
>
|
||||
Log Keluar <i class="bi bi-box-arrow-right"></i>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navbar for phone, tab screen size (width<992px) -->
|
||||
<div class="card sticky-top lg:hidden md:flex border-none">
|
||||
<div
|
||||
class="flex justify-content-between px-3 md:px-6 h-3rem flex-wrap main-color"
|
||||
>
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
|
||||
<Button
|
||||
icon="pi pi-th-large"
|
||||
@click="visibleLeft = true"
|
||||
class="mr-2"
|
||||
/>
|
||||
|
||||
<!-- <div class="logo-title ml-4 mr-5">Menu</div> -->
|
||||
|
||||
<img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
|
||||
<!-- <div class="company-title" type="button" v-on:click="toHome()">
|
||||
<div class="logo-title">E-Rahn Lelong</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<i
|
||||
class="pi pi-bars text-white lg:hidden"
|
||||
@click="visibleRight = true"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<div class="flex justify-content-center h-2rem bg-red-500">
|
||||
Countdown 00:00:00
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <Sidebar v-model:visible="visibleRight" position="right">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="text-center">
|
||||
<i class="bi bi-person-circle me-1"></i> {{ username }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'home' }"
|
||||
>Utama</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'list' }"
|
||||
>Senarai</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'cart' }"
|
||||
>Troli</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'bid-record' }"
|
||||
>Rekod</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'result' }"
|
||||
>Keputusan</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'profile' }"
|
||||
>Profil</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'login' }"
|
||||
>Login</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<a
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-on:click="doLogout()"
|
||||
href="#"
|
||||
><i class="bi bi-box-arrow-right me-1"></i> Log Keluar</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</Sidebar> -->
|
||||
|
||||
<Sidebar :visible.sync="visibleLeft" autoZIndex>
|
||||
<div class="grid">
|
||||
<!-- <div class="col-12">
|
||||
<div class="text-center">
|
||||
<i class="bi bi-person-circle me-1"></i> {{ username }}
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="col-12">
|
||||
<div class="text-center">
|
||||
<img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'home' }"
|
||||
>Utama</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'list' }"
|
||||
>Senarai</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'cart' }"
|
||||
>Troli</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'bid-record' }"
|
||||
>Rekod</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'result' }"
|
||||
>Keputusan</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'profile' }"
|
||||
>Profil</router-link
|
||||
>
|
||||
</div>
|
||||
<!-- <div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'login' }"
|
||||
>Login</router-link
|
||||
>
|
||||
</div> -->
|
||||
<div class="col-12">
|
||||
<a
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-on:click="doLogout()"
|
||||
href="#"
|
||||
><i class="bi bi-box-arrow-right me-1"></i> Log Keluar</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</Sidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: localStorage.getItem("username"),
|
||||
visibleLeft: false,
|
||||
lelongOnline: "",
|
||||
};
|
||||
},
|
||||
setup() {
|
||||
const authenticationStore = useAuthenticationUserStore()
|
||||
|
||||
return { authenticationStore }
|
||||
},
|
||||
mounted: function () {
|
||||
this.getLelongOnline();
|
||||
},
|
||||
methods: {
|
||||
doLogout() {
|
||||
axios
|
||||
.post(
|
||||
"/user/logout",
|
||||
{},
|
||||
{
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
localStorage.clear();
|
||||
this.authenticationStore.$reset();
|
||||
this.$router.push({ name: "login" });
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
localStorage.clear();
|
||||
this.$router.push({ name: "login" });
|
||||
},
|
||||
toHome() {
|
||||
this.$router.push({ name: "home" });
|
||||
},
|
||||
toProfile() {
|
||||
this.$router.push({ name: "profile" });
|
||||
},
|
||||
getLelongOnline() {
|
||||
axios
|
||||
.get("/lelongOnline", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
if (response.data.success === true) {
|
||||
this.lelongOnline = response.data.lelong.masatamat_lelong;
|
||||
this.$toast.add({
|
||||
severity: "info",
|
||||
summary: "Informasi",
|
||||
detail: "Lelong akan tamat pada " + this.lelongOnline,
|
||||
});
|
||||
} else {
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// const { createApp, ref } = Vue;
|
||||
|
||||
// const App = {
|
||||
// setup() {
|
||||
// const visibleLeft = ref(false);
|
||||
|
||||
// return {
|
||||
// visibleLeft,
|
||||
// };
|
||||
// },
|
||||
// components: {
|
||||
// "p-sidebar": primevue.sidebar,
|
||||
// "p-button": primevue.button,
|
||||
// },
|
||||
// };
|
||||
|
||||
// createApp(App).use(primevue.config.default).mount("#app");
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*
|
||||
|
||||
========== 01 TYPOGRAPHY ==========
|
||||
-Font sizes(px)
|
||||
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
|
||||
|
||||
========== 02 COLORS ==========
|
||||
-Primary: #1d3461
|
||||
-Shades: #142444
|
||||
-Tints: #bbc2d0 #d2d6df
|
||||
-Accents:
|
||||
-Greys:
|
||||
#555
|
||||
#333
|
||||
|
||||
-Tints KIV: #617190
|
||||
-Accents KIV: #E9C439
|
||||
|
||||
========== 07 WHITESPACE ==========
|
||||
|
||||
-Spacing system(px)
|
||||
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
|
||||
|
||||
*/
|
||||
|
||||
/* .nav-link:hover {
|
||||
color: blue !important;
|
||||
}
|
||||
|
||||
router-link:hover {
|
||||
color: blue;
|
||||
} */
|
||||
|
||||
.main-color {
|
||||
background-color: #008f96;
|
||||
}
|
||||
|
||||
.border-none {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #eeeeee;
|
||||
height: 3.2rem;
|
||||
padding: 0 6.4rem;
|
||||
}
|
||||
|
||||
.company-title {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #f9fafc;
|
||||
font-size: 1.0rem;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
height: 1.6rem;
|
||||
}
|
||||
|
||||
/* .main-nav {
|
||||
background-color: #cb3d3d;
|
||||
} */
|
||||
|
||||
.main-nav-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 3.2rem;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-nav-link:link,
|
||||
.main-nav-link {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.4rem;
|
||||
color: #2c2d2e;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.main-nav-link:hover {
|
||||
color:#fec234;
|
||||
}
|
||||
|
||||
.main-nav-link-sidebar:hover {
|
||||
background: #fec234;
|
||||
border-radius: 10px;
|
||||
padding: 7px 20px;
|
||||
color: #1e417b !important;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
text-decoration: none;
|
||||
margin: 0 1.5rem;
|
||||
color: #eaf0f9;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
color: #fec234;
|
||||
}
|
||||
|
||||
a.router-link-exact-active {
|
||||
background: #fec234;
|
||||
color: #000000;
|
||||
border-radius: 10px;
|
||||
padding: 7px 20px;
|
||||
}
|
||||
|
||||
a.router-link-exact-active:hover {
|
||||
background: #fec234;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.profile-title {
|
||||
color: #eaf0f9;
|
||||
}
|
||||
|
||||
.arrow-logo {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.p-component-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,28 +1,17 @@
|
||||
<template>
|
||||
<!-- Navbar for laptop screen size (width>992px) -->
|
||||
<Toast :breakpoints="{ '500px': { width: '100%', right: '0', left: '0' } }" />
|
||||
<div class="card sticky-top lg:flex hidden border-none">
|
||||
<div
|
||||
class="flex justify-content-between px-3 md:px-6 h-3rem flex-wrap main-color"
|
||||
>
|
||||
<Toast :breakpoints="{ '992px': { display: 'none' }, }"/>
|
||||
<div class="flex justify-content-between px-3 md:px-6 h-3rem flex-wrap main-color">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<!-- <div class="company-title" type="button" v-on:click="toHome()"> -->
|
||||
<!-- <img class="logo-img mr-2" src="img/e-rahn-lelong.png" alt="arrahn-logo" /> -->
|
||||
<Button
|
||||
icon="pi pi-th-large"
|
||||
@click="visibleLeft = true"
|
||||
/>
|
||||
|
||||
<div class="logo-title mr-2">Menu</div>
|
||||
|
||||
<div class="company-title" type="button" v-on:click="toHome()">
|
||||
<!-- <div class="logo-title">E-Rahn Lelong</div> -->
|
||||
<!-- <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" /> -->
|
||||
<img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()"/>
|
||||
<!-- <div class="logo-title">E-Rahn Lelong</div> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<!-- <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()"/> -->
|
||||
<!-- <nav class="main-nav">
|
||||
<nav class="main-nav">
|
||||
<router-link class="nav-button" v-bind:to="{ name: 'home' }"
|
||||
>Utama</router-link
|
||||
>
|
||||
@@ -38,10 +27,10 @@
|
||||
<router-link class="nav-button" v-bind:to="{ name: 'result' }"
|
||||
>Keputusan</router-link
|
||||
>
|
||||
<router-link class="nav-button" v-bind:to="{ name: 'login' }"
|
||||
>Login</router-link
|
||||
<router-link class="nav-button" v-bind:to="{ name: 'policy' }"
|
||||
>Polisi</router-link
|
||||
>
|
||||
</nav> -->
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<div class="profile-title hidden lg:flex">
|
||||
@@ -83,114 +72,67 @@
|
||||
<!-- Navbar for phone, tab screen size (width<992px) -->
|
||||
<div class="card sticky-top lg:hidden md:flex border-none">
|
||||
<div
|
||||
class="flex justify-content-between px-3 md:px-6 h-3rem flex-wrap main-color"
|
||||
class="
|
||||
flex
|
||||
justify-content-between
|
||||
px-3
|
||||
md:px-6
|
||||
h-3rem
|
||||
flex-wrap
|
||||
main-color
|
||||
"
|
||||
>
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
|
||||
<Button
|
||||
icon="pi pi-th-large"
|
||||
@click="visibleLeft = true"
|
||||
class="mr-2"
|
||||
/>
|
||||
|
||||
<!-- <div class="logo-title ml-4 mr-5">Menu</div> -->
|
||||
|
||||
<img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
|
||||
<!-- <div class="company-title" type="button" v-on:click="toHome()">
|
||||
<i
|
||||
class="pi pi-bars text-white lg:hidden mr-3"
|
||||
style="cursor: pointer"
|
||||
@click="visibleRight = true"
|
||||
></i>
|
||||
<div class="company-title" type="button" v-on:click="toHome()">
|
||||
<div class="logo-title">E-Rahn Lelong</div>
|
||||
</div> -->
|
||||
<img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<i
|
||||
class="pi pi-bars text-white lg:hidden"
|
||||
<!-- <i
|
||||
class="pi pi-shopping-cart text-white lg:hidden"
|
||||
style="cursor: pointer"
|
||||
@click="visibleRight = true"
|
||||
></i> -->
|
||||
<!-- <i
|
||||
class="pi pi-shopping-cart mr-1 p-text-primary"
|
||||
style="font-size: 1.5rem; color: #eaf0f9"
|
||||
v-badge.success="itemInCart"
|
||||
v-on:click="toCart()"
|
||||
v-if="isSuccessCart"
|
||||
></i> -->
|
||||
<i
|
||||
class="pi pi-shopping-cart mr-1 p-text-primary"
|
||||
style="font-size: 1.5rem; color: #eaf0f9"
|
||||
v-on:click="toCart()"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<div class="flex justify-content-center h-2rem bg-red-500">
|
||||
Countdown 00:00:00
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <Sidebar v-model:visible="visibleRight" position="right">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="text-center">
|
||||
<i class="bi bi-person-circle me-1"></i> {{ username }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'home' }"
|
||||
>Utama</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'list' }"
|
||||
>Senarai</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'cart' }"
|
||||
>Troli</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'bid-record' }"
|
||||
>Rekod</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'result' }"
|
||||
>Keputusan</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'profile' }"
|
||||
>Profil</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'login' }"
|
||||
>Login</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<a
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-on:click="doLogout()"
|
||||
href="#"
|
||||
><i class="bi bi-box-arrow-right me-1"></i> Log Keluar</a
|
||||
>
|
||||
<div v-if="lelongOnline != ''">
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
align-items-center
|
||||
justify-content-center
|
||||
notification-mobile
|
||||
"
|
||||
>
|
||||
<i class="blink pi pi-info-circle mr-2"></i> Lelongan akan tamat pada
|
||||
{{ lelongOnline }}
|
||||
</div>
|
||||
</div>
|
||||
</Sidebar> -->
|
||||
|
||||
<Sidebar :visible.sync="visibleLeft" autoZIndex>
|
||||
</div>
|
||||
<Sidebar v-model:visible="visibleRight" position="left">
|
||||
<div class="grid">
|
||||
<!-- <div class="col-12">
|
||||
<div class="text-center">
|
||||
<i class="bi bi-person-circle me-1"></i> {{ username }}
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="col-12">
|
||||
<div class="text-center">
|
||||
<img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
|
||||
<i class="bi bi-person-circle me-1"></i> {{ username }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
@@ -228,6 +170,13 @@
|
||||
>Keputusan</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'policy' }"
|
||||
>Polisi</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
@@ -235,13 +184,13 @@
|
||||
>Profil</router-link
|
||||
>
|
||||
</div>
|
||||
<!-- <div class="col-12">
|
||||
<router-link
|
||||
<div class="col-12">
|
||||
<!-- <router-link
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
v-bind:to="{ name: 'login' }"
|
||||
>Login</router-link
|
||||
>
|
||||
</div> -->
|
||||
> -->
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<a
|
||||
class="main-nav-link main-nav-link-sidebar"
|
||||
@@ -256,13 +205,16 @@
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import { useAuthenticationUserStore } from "@/store/modules/authentication"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: localStorage.getItem("username"),
|
||||
visibleLeft: false,
|
||||
visibleRight: false,
|
||||
lelongOnline: "",
|
||||
isSuccessCart: false,
|
||||
itemInCart: 0,
|
||||
};
|
||||
},
|
||||
setup() {
|
||||
@@ -272,6 +224,7 @@ export default {
|
||||
},
|
||||
mounted: function () {
|
||||
this.getLelongOnline();
|
||||
// this.getItemInCart();
|
||||
},
|
||||
methods: {
|
||||
doLogout() {
|
||||
@@ -302,6 +255,9 @@ export default {
|
||||
toProfile() {
|
||||
this.$router.push({ name: "profile" });
|
||||
},
|
||||
toCart() {
|
||||
this.$router.push({ name: "cart" });
|
||||
},
|
||||
getLelongOnline() {
|
||||
axios
|
||||
.get("/lelongOnline", {
|
||||
@@ -311,13 +267,13 @@ export default {
|
||||
})
|
||||
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
// console.log('getLelongOnline', response);
|
||||
if (response.data.success === true) {
|
||||
this.lelongOnline = response.data.lelong.masatamat_lelong;
|
||||
this.$toast.add({
|
||||
severity: "info",
|
||||
summary: "Informasi",
|
||||
detail: "Lelong akan tamat pada " + this.lelongOnline,
|
||||
detail: "Lelongan akan tamat pada " + this.lelongOnline,
|
||||
});
|
||||
} else {
|
||||
}
|
||||
@@ -326,26 +282,33 @@ export default {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
getItemInCart() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/itemInCart", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
params: {
|
||||
user_id: localStorage.getItem("id"),
|
||||
},
|
||||
})
|
||||
|
||||
.then((response) => {
|
||||
// console.log('getItemInCart', response);
|
||||
if (response.data.success === true) {
|
||||
this.isSuccessCart = true;
|
||||
this.itemInCart = response.data.cart;
|
||||
} else {
|
||||
this.isSuccessCart = false;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// const { createApp, ref } = Vue;
|
||||
|
||||
// const App = {
|
||||
// setup() {
|
||||
// const visibleLeft = ref(false);
|
||||
|
||||
// return {
|
||||
// visibleLeft,
|
||||
// };
|
||||
// },
|
||||
// components: {
|
||||
// "p-sidebar": primevue.sidebar,
|
||||
// "p-button": primevue.button,
|
||||
// },
|
||||
// };
|
||||
|
||||
// createApp(App).use(primevue.config.default).mount("#app");
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -381,9 +344,14 @@ export default {
|
||||
router-link:hover {
|
||||
color: blue;
|
||||
} */
|
||||
|
||||
.notification-mobile {
|
||||
background: #e9e9ff;
|
||||
color: #696cff;
|
||||
height: 2.5rem;
|
||||
padding: 25px 10px;
|
||||
}
|
||||
.main-color {
|
||||
background-color: #008f96;
|
||||
background-color: #0D908B;
|
||||
}
|
||||
|
||||
.border-none {
|
||||
@@ -394,7 +362,8 @@ router-link:hover {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #eeeeee;
|
||||
background-color: #0D908B;
|
||||
|
||||
height: 3.2rem;
|
||||
padding: 0 6.4rem;
|
||||
}
|
||||
@@ -408,19 +377,15 @@ router-link:hover {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #f9fafc;
|
||||
font-size: 1.0rem;
|
||||
font-weight: 200;
|
||||
color: #eaf0f9;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
height: 1.6rem;
|
||||
}
|
||||
|
||||
/* .main-nav {
|
||||
background-color: #cb3d3d;
|
||||
} */
|
||||
|
||||
.main-nav-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
@@ -436,43 +401,39 @@ router-link:hover {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.4rem;
|
||||
color: #2c2d2e;
|
||||
color: #82a4dc;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.main-nav-link:hover {
|
||||
color:#fec234;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-nav-link-sidebar:hover {
|
||||
background: #fec234;
|
||||
border-radius: 10px;
|
||||
padding: 7px 20px;
|
||||
color: #1e417b !important;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
text-decoration: none;
|
||||
margin: 0 1.5rem;
|
||||
color: #eaf0f9;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
color: #fec234;
|
||||
color: #eaf0f9;
|
||||
}
|
||||
|
||||
a.router-link-exact-active {
|
||||
background: #fec234;
|
||||
background: #FAE79A;
|
||||
color: #000000;
|
||||
border-radius: 10px;
|
||||
padding: 7px 20px;
|
||||
}
|
||||
|
||||
a.router-link-exact-active:hover {
|
||||
background: #fec234;
|
||||
color: #000000;
|
||||
color: #132a4f;
|
||||
}
|
||||
|
||||
.profile-title {
|
||||
@@ -482,12 +443,4 @@ a.router-link-exact-active:hover {
|
||||
.arrow-logo {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.p-component-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -7,9 +7,9 @@
|
||||
</template>
|
||||
<template #content>
|
||||
<TabView>
|
||||
<TabPanel :header="'Panduan ArrahnBid'">
|
||||
<TabPanel :header="'Panduan E-Rahn Lelong'">
|
||||
<p>
|
||||
Berikut merupakan video panduan untuk penggunaan ArrahnBid. Sila
|
||||
Berikut merupakan video panduan untuk penggunaan E-Rahn Lelong. Sila
|
||||
tonton
|
||||
<a
|
||||
class="font-bold"
|
||||
|
||||
Reference in New Issue
Block a user