Merge branch 'first' into 'main'
merge pertama kali 'first' to 'main' See merge request amirhassan/lelong-web-pembida!1
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
not ie 11
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
Generated
+17837
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "lelong-web-pembida",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vuelidate/core": "^2.0.0-alpha.41",
|
||||
"@vuelidate/validators": "^2.0.0-alpha.29",
|
||||
"autoprefixer": "^10",
|
||||
"axios": "^0.26.1",
|
||||
"bootstrap": "^5.1.3",
|
||||
"bootstrap-icons": "^1.8.1",
|
||||
"core-js": "^3.8.3",
|
||||
"postcss": "^8",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.14",
|
||||
"vuex": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
|
||||
<title>Lelong | Ar-Rahn</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<!-- <div class="list">
|
||||
|
||||
<router-link to="/login">Login</router-link><br />
|
||||
<router-link to="/register">Register</router-link><br />
|
||||
<router-link to="/">Home</router-link><br />
|
||||
|
||||
</div> -->
|
||||
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 30px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.list a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.list a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
<div class="container" style="height: 70vh">
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Kembali <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<h1>Rekod Bidaan <i class="bi bi-receipt"></i></h1>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<button @click="renderListBid" class="badge btn-secondary">
|
||||
Reload <i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
<ListBid :key="ListBidComponent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
// import BidDetail from "./bidhistory/BidDetail.vue";
|
||||
import ListBid from "./bidhistory/ListBid.vue";
|
||||
|
||||
export default {
|
||||
name: "BidHistory",
|
||||
data() {
|
||||
return {
|
||||
ListBidComponent: 0,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Navbar,
|
||||
Footer,
|
||||
ListBid,
|
||||
},
|
||||
methods: {
|
||||
renderListBid() {
|
||||
this.ListBidComponent += 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,702 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 70vh; display: grid; place-items: center"
|
||||
>
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="container">
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Kembali <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<h1>Troli <i class="bi bi-cart3"></i></h1>
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-sm-12" style="overflow-x: auto">
|
||||
<div class="ibox">
|
||||
<div class="table-responsive">
|
||||
<div class="accordion-body">
|
||||
<div class="ibox-content" style="padding-bottom: none">
|
||||
<table class="table shoping-cart-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Maklumat Marhun</td>
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Harga Asas
|
||||
</td>
|
||||
<td
|
||||
width="120"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Harga Bida
|
||||
</td>
|
||||
<td
|
||||
width="80"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Tindakan
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
class="ibox-content"
|
||||
v-for="senaraiCart in senaraiCarts.slice().reverse()"
|
||||
:key="senaraiCart.id"
|
||||
style="border-bottom: 1px solid #e7eaec"
|
||||
>
|
||||
<table class="table shoping-cart-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="desc">
|
||||
<h3 class="text-primary">
|
||||
{{ senaraiCart.datalelongbid.norujukan }}
|
||||
</h3>
|
||||
|
||||
<dl class="small m-b-none">
|
||||
<p>
|
||||
Marhun:
|
||||
{{ senaraiCart.datalelongbid.marhun }}
|
||||
</p>
|
||||
<p>
|
||||
Berat:
|
||||
{{ senaraiCart.datalelongbid.berat }}g
|
||||
</p>
|
||||
<p>
|
||||
Cawangan:
|
||||
{{
|
||||
senaraiCart.datalelongbid.cawangan.caw_name
|
||||
}}
|
||||
</p>
|
||||
</dl>
|
||||
|
||||
<div class="m-t-sm">
|
||||
<button
|
||||
class="btn btn-outline-danger"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#deleteModal"
|
||||
@click="deleteModal(senaraiCart)"
|
||||
>
|
||||
Hapus
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
RM{{ senaraiCart.datalelongbid.hargaasas }}
|
||||
</td>
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
<h4>RM{{ senaraiCart.hargabida }}</h4>
|
||||
</td>
|
||||
<td
|
||||
width="120"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-warning"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#editModal"
|
||||
@click="editModal(senaraiCart)"
|
||||
>
|
||||
Ubah
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="ibox" style="border: #e7eaec solid 1px">
|
||||
<div class="ibox-title" style="padding: 20px">
|
||||
<h5>Ringkasan Troli</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Jumlah Bilangan Surat</p>
|
||||
<p class="mb-0">{{ total_sag }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Jumlah Bidaan</p>
|
||||
<p class="mb-0">RM{{ total_bidaan }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<span> Yuran </span>
|
||||
<h2 class="font-bold">RM10.00</h2>
|
||||
<hr />
|
||||
<span class="text-muted small">
|
||||
<i
|
||||
>*Caj yuran akan dikenakan untuk membuat pendaftaran
|
||||
bidaan.</i
|
||||
>
|
||||
</span>
|
||||
<div class="m-t-sm">
|
||||
<div class="btn-group">
|
||||
<button
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#payModal"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Teruskan <i class="fa fa-shopping-cart"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button @click="feePayment()" class="btn btn-primary">
|
||||
try bavayar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal ubah bidaan -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="editModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="editModalLabel"
|
||||
aria-hidden="true"
|
||||
data-bs-backdrop="static"
|
||||
>
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editModalLabel">
|
||||
{{ test.norujukan }}
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
ref="ubahClose"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row m-2">
|
||||
<div class="col">
|
||||
<!-- <p>Marhun: {{ test.marhun }}</p> -->
|
||||
<p>Jumlah Berat: {{ test.berat }}g</p>
|
||||
<table class="table table-bordered">
|
||||
<tbody>
|
||||
<tr class="table-light">
|
||||
<th scope="col">No</th>
|
||||
<th scope="col">Jenis Marhun</th>
|
||||
<th scope="col">Karat</th>
|
||||
<th scope="col">Berat</th>
|
||||
<th scope="col">Nota</th>
|
||||
<th scope="col">Harga Asas</th>
|
||||
</tr>
|
||||
<tr v-for="(data, index) in test2" :key="index.id">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ data.marhun }}</td>
|
||||
<td>{{ data.karat }}</td>
|
||||
<td>{{ data.berat }}g</td>
|
||||
<td>{{ data.nota }}</td>
|
||||
<td>RM{{ data.hargaasas }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label text-end"
|
||||
>Jumlah Harga Asas</label
|
||||
>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<div
|
||||
style="background-color: #e9ecef; padding-bottom: 0px"
|
||||
class="form-control text-start justify-content-start"
|
||||
disabled
|
||||
>
|
||||
{{ test.hargaasas }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-3">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label">Tambahan Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
v-model="tambahan"
|
||||
type="text"
|
||||
id="tambahanbida"
|
||||
class="form-control"
|
||||
@change="calcTotal()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div
|
||||
style="font-size: 15px"
|
||||
class="fst-italic text-danger"
|
||||
v-if="v$.tambahan.$error"
|
||||
>
|
||||
<div class="text-end">
|
||||
*Minimum tambahan harga bida adalah RM1.
|
||||
</div>
|
||||
<div class="text-end">
|
||||
*Gandaan ringgit sahaja dibenarkan.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label">Jumlah Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="formEdit.hargabida"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-danger me-2"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit" class="btn btn-success" @click="updateItem()">
|
||||
Ubah
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal padam bidaan -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="deleteModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="deleteModalLabel"
|
||||
aria-hidden="true"
|
||||
data-bs-backdrop="static"
|
||||
data-bs-keyboard="false"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
ref="padamClose"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
|
||||
<h5>ADAKAH ANDA PASTI?</h5>
|
||||
<p>Padam item dalam troli.</p>
|
||||
|
||||
<table class="table table-bordered">
|
||||
<tbody>
|
||||
<tr class="bg-light">
|
||||
<th>SAG</th>
|
||||
<th>Harga Bida</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ test.norujukan }}</td>
|
||||
<td>RM{{ data.hargabida }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="text-danger text-sm mt-3">
|
||||
<i>*Tindakan ini tidak dapat dikembalikan</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-secondary me-2"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Kembali
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-danger"
|
||||
@click="deleteCart(data.id)"
|
||||
>
|
||||
Padam
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal bayar yuran -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="payModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="payModalLabel"
|
||||
aria-hidden="true"
|
||||
data-bs-backdrop="static"
|
||||
data-bs-keyboard="false"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editModalLabel">Daftar Bidaan</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
|
||||
<p>ADAKAH ANDA PASTI?</p>
|
||||
<h4 class="text-danger">
|
||||
<i
|
||||
>Caj yuran, RM10 akan dikenakan untuk setiap kali pendaftaran
|
||||
bidaan.</i
|
||||
>
|
||||
</h4>
|
||||
|
||||
<table class="table table-bordered">
|
||||
<tbody>
|
||||
<tr class="bg-light">
|
||||
<th>Jumlah Surat</th>
|
||||
<th>Jumlah Bidaan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ total_sag }}</td>
|
||||
<td>RM{{ total_bidaan }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-secondary me-2"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Kembali
|
||||
</button>
|
||||
<button type="submit" class="btn btn-success" @click="feePayment()">
|
||||
Bayar
|
||||
</button>
|
||||
<p
|
||||
class="fst-italic mt-3 fw-lighter"
|
||||
style="text-align: right; font-size: small"
|
||||
>
|
||||
*Pelayar akan dialihkan ke halaman pembayaran jika butang 'Bayar'
|
||||
ditekan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
import axios from "axios";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import { required, integer, numeric, minValue } from "@vuelidate/validators";
|
||||
|
||||
export default {
|
||||
name: "Cart",
|
||||
components: {
|
||||
Navbar,
|
||||
Footer,
|
||||
},
|
||||
// setup() {
|
||||
// return { };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
v$: useVuelidate(),
|
||||
loading: false,
|
||||
senaraiCarts: [],
|
||||
tambahan: "",
|
||||
test: "",
|
||||
test2: [],
|
||||
abc: "",
|
||||
data: "",
|
||||
formEdit: {
|
||||
id: "",
|
||||
hargabida: "",
|
||||
},
|
||||
formPayment: {
|
||||
email: "amirhamzan30@gmail.com",
|
||||
notel: "0198900990",
|
||||
name: "amir",
|
||||
user_id: "8",
|
||||
lelong_id: "3",
|
||||
},
|
||||
};
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
tambahan: { required, numeric, integer, minValue: minValue(1) },
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
total_sag() {
|
||||
return this.senaraiCarts.length;
|
||||
},
|
||||
total_bidaan() {
|
||||
let total = 0;
|
||||
this.senaraiCarts.forEach((val) => {
|
||||
total += parseFloat(val.hargabida);
|
||||
});
|
||||
return total.toFixed(2);
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
this.listCart();
|
||||
},
|
||||
methods: {
|
||||
trybayar() {
|
||||
axios
|
||||
.post("/feepayment", this.formPayment)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
listCart() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/cart/" + localStorage.getItem("id"))
|
||||
.then((response) => {
|
||||
this.senaraiCarts = response.data;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
calcTotal() {
|
||||
this.formEdit.hargabida =
|
||||
parseFloat(this.tambahan) + parseFloat(this.test.hargaasas);
|
||||
},
|
||||
editModal(data) {
|
||||
this.data = data;
|
||||
this.test = this.data.datalelongbid;
|
||||
this.test2 = this.data.datalelongbid.lelongbidmarhun;
|
||||
this.formEdit.id = this.data.id;
|
||||
this.tambahan = this.data.hargabida - this.test.hargaasas;
|
||||
this.formEdit.hargabida = this.data.hargabida;
|
||||
console.log(this.data.hargabida);
|
||||
},
|
||||
updateItem() {
|
||||
this.v$.$validate();
|
||||
if (!this.v$.$error) {
|
||||
axios
|
||||
.post("/updateItem", this.formEdit, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
this.$refs.ubahClose.click();
|
||||
location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
}
|
||||
},
|
||||
deleteModal(data) {
|
||||
this.data = data;
|
||||
this.test = this.data.datalelongbid;
|
||||
console.log(data.datalelongbid.norujukan);
|
||||
},
|
||||
deleteCart(id) {
|
||||
axios
|
||||
.get("/deleteItem/" + id, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
this.$refs.padamClose.click();
|
||||
location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
feePayment() {
|
||||
axios
|
||||
.post("/feepayment", this.formPayment)
|
||||
.then((response) => {
|
||||
window.open(
|
||||
response.data.message + '?auto_submit=true'
|
||||
);
|
||||
|
||||
// window.location.href = response.data.message + '?auto_submit=true';
|
||||
})
|
||||
.catch((error) => {
|
||||
// console.log("test");
|
||||
console.log(error);
|
||||
// console.log(this.formPayment);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style >
|
||||
body {
|
||||
margin-top: 20px;
|
||||
background: #eee;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
}
|
||||
.cart-product-imitation {
|
||||
text-align: center;
|
||||
padding-top: 30px;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
.product-imitation.xl {
|
||||
padding: 120px 0;
|
||||
}
|
||||
.product-desc {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ecommerce .tag-list {
|
||||
padding: 0;
|
||||
}
|
||||
.ecommerce .fa-star {
|
||||
color: #d1dade;
|
||||
}
|
||||
.ecommerce .fa-star.active {
|
||||
color: #f8ac59;
|
||||
}
|
||||
.ecommerce .note-editor {
|
||||
border: 1px solid #e7eaec;
|
||||
}
|
||||
table.shoping-cart-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
table.shoping-cart-table tr td {
|
||||
border: none;
|
||||
text-align: right;
|
||||
}
|
||||
table.shoping-cart-table tr td.desc,
|
||||
table.shoping-cart-table tr td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
table.shoping-cart-table tr td:last-child {
|
||||
width: 80px;
|
||||
}
|
||||
.ibox {
|
||||
clear: both;
|
||||
margin-bottom: 25px;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ibox.collapsed .ibox-content {
|
||||
display: none;
|
||||
}
|
||||
.ibox:after,
|
||||
.ibox:before {
|
||||
display: table;
|
||||
}
|
||||
.ibox-title {
|
||||
-moz-border-bottom-colors: none;
|
||||
-moz-border-left-colors: none;
|
||||
-moz-border-right-colors: none;
|
||||
-moz-border-top-colors: none;
|
||||
background-color: #ffffff;
|
||||
border-color: #e7eaec;
|
||||
border-image: none;
|
||||
border-style: solid solid none;
|
||||
border-width: 3px 0 0;
|
||||
color: inherit;
|
||||
margin-bottom: 0;
|
||||
padding: 14px 15px 7px;
|
||||
min-height: 48px;
|
||||
}
|
||||
.ibox-content {
|
||||
background-color: #ffffff;
|
||||
color: inherit;
|
||||
padding: 15px 20px 20px 20px;
|
||||
border-color: #e7eaec;
|
||||
border-image: none;
|
||||
border-style: solid solid none;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
.ibox-footer {
|
||||
color: inherit;
|
||||
border-top: 1px solid #e7eaec;
|
||||
font-size: 90%;
|
||||
background: #ffffff;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
<div class="container-fluid" style="margin-top: 100px">
|
||||
<!-- <div class="row justify-content-center">
|
||||
<div class="col-5 p-2 mb-5">
|
||||
<Result />
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="container mb-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1 class="text-capitalize text-start">
|
||||
Bersiap sedia untuk membida dengan
|
||||
<span class="text-primary">Sistem Lelong</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="col">
|
||||
<LelongToday />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-7">
|
||||
<LelongToday :key="componentKey"/>
|
||||
<h6><button class="badge mt-2 btn-secondary" @click="forceRerender">Reload Component <i class="bi bi-arrow-up"></i></button></h6>
|
||||
<LelongNext />
|
||||
</div>
|
||||
<div class="col-5 p-5 pt-0">
|
||||
<Karat />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <form @submit.prevent="validate">
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-bind:class="{ 'is-invalid': nameError }"
|
||||
id="name"
|
||||
placeholder="Your name"
|
||||
v-model="name"
|
||||
/>
|
||||
<div class="invalid-feedback" id="feedback-1" v-if="errors[0]">
|
||||
{{ errors[0].message }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-bind:class="{ 'is-invalid': nameError }"
|
||||
id="name"
|
||||
placeholder="Your name"
|
||||
v-model="name"
|
||||
/>
|
||||
<div class="invalid-feedback" id="feedback-1" v-if="errors[0]">
|
||||
{{ errors[0].message }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="comment"
|
||||
placeholder="Your comment"
|
||||
></textarea>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Validate</button>
|
||||
</form> -->
|
||||
</div>
|
||||
<!-- <Todos /> -->
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
import LelongToday from "./dashboard/LelongToday.vue";
|
||||
import LelongNext from "./dashboard/LelongNext.vue";
|
||||
import Accordion from "./dashboard/Accordion.vue";
|
||||
import Karat from "./dashboard/Karat.vue";
|
||||
import Result from "./dashboard/Result.vue";
|
||||
import Todos from "./dashboard/Todos.vue";
|
||||
export default {
|
||||
name: "Dashboard",
|
||||
|
||||
components: {
|
||||
Navbar,
|
||||
LelongToday,
|
||||
LelongNext,
|
||||
Footer,
|
||||
Accordion,
|
||||
Karat,
|
||||
Result,
|
||||
Todos,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
componentKey: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
forceRerender() {
|
||||
this.componentKey += 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="container-fluid bg-light " style="bottom: 0">
|
||||
<footer
|
||||
class="
|
||||
d-flex
|
||||
flex-wrap
|
||||
justify-content-between
|
||||
align-items-center
|
||||
py-3
|
||||
my-4
|
||||
border-top
|
||||
"
|
||||
>
|
||||
<p class="col-md-4 mb-0 text-muted justify-content-start">© 2022 Company, Inc</p>
|
||||
|
||||
<a
|
||||
href="/"
|
||||
class="
|
||||
col-md-4
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-center
|
||||
mb-3 mb-md-0
|
||||
me-md-auto
|
||||
link-dark
|
||||
text-decoration-none
|
||||
"
|
||||
>
|
||||
<svg class="bi me-2" width="40" height="32">
|
||||
<!-- <use xlink:href="#bootstrap" /> -->
|
||||
<i class="bi bi-spotify"></i>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<ul class="nav col-md-4 justify-content-center">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-muted">Permodalan Kelantan Berhad</a>
|
||||
</li>
|
||||
<!-- <li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-muted">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-muted">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-muted">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-muted">FAQs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-muted">About</a>
|
||||
</li> -->
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br />
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-cli documentation</a
|
||||
>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>babel</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
||||
>Forum</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
||||
>Community Chat</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
||||
>Twitter</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-router</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-devtools#vue-devtools"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>vue-devtools</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-loader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/awesome-vue"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>awesome-vue</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HelloWorld",
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
<h6><button class="badge m-2 btn-secondary" @click="forceRerender">Reload Component <i class="bi bi-arrow-down"></i></button></h6>
|
||||
<!-- <router-view {{Modal}}><button class="btn btn-primary">sdsd</button></router-view> -->
|
||||
<!-- <Modal /> -->
|
||||
<Senarai :key="componentKey"/>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
import Senarai from "./list/Senarai.vue";
|
||||
// import Modal from "./Modal.vue"
|
||||
import axios from "axios";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import { required, minLength, maxLength, between } from "@vuelidate/validators";
|
||||
// import Vue from 'vue';
|
||||
// Vue.forceUpdate();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
componentKey: 0,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Navbar,
|
||||
Footer,
|
||||
Senarai,
|
||||
// Modal,
|
||||
},
|
||||
methods: {
|
||||
forceRerender() {
|
||||
this.componentKey += 1;
|
||||
},
|
||||
},
|
||||
// data() {
|
||||
// return {
|
||||
// v$: useVuelidate(),
|
||||
// loading: false,
|
||||
// tambahabError: false,
|
||||
// errors: [],
|
||||
// cawangan: "1",
|
||||
// lelong_details: [],
|
||||
// sags: [],
|
||||
// norujukan: "",
|
||||
// marhuns: "",
|
||||
// form: {
|
||||
// user_id: localStorage.getItem("id"),
|
||||
// lelongbid_id: "",
|
||||
// test: "",
|
||||
// hargabida: "",
|
||||
// },
|
||||
// myModal: null,
|
||||
// cuba: "",
|
||||
// // hargabida2: 2 + " this.form.test",
|
||||
// };
|
||||
// },
|
||||
// validations: {
|
||||
// cuba: {
|
||||
// required,
|
||||
// minLength: minLength(3),
|
||||
// },
|
||||
// },
|
||||
// computed: {
|
||||
// numberSag() {
|
||||
// return this.sags.length;
|
||||
// },
|
||||
// },
|
||||
// mounted: function () {
|
||||
// this.liveData();
|
||||
// },
|
||||
// methods: {
|
||||
// liveData() {
|
||||
// this.loading = true;
|
||||
// axios
|
||||
// .get("/lelongDetails/cawangan", {
|
||||
// headers: {
|
||||
// Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
// },
|
||||
// params: {
|
||||
// caw_id: "3",
|
||||
// },
|
||||
// })
|
||||
// .then((response) => {
|
||||
// this.lelong_details = response.data[0];
|
||||
// // console.log(this.lelong_details);
|
||||
// this.response = response.data[0].lelongbid;
|
||||
// this.sags = this.response;
|
||||
// this.loading = false;
|
||||
// // this.form.hargabida = this.form.test + 1;
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log(error);
|
||||
// this.lelong_details = [null];
|
||||
// // this.loading = false;
|
||||
// });
|
||||
// },
|
||||
// clickModal(norujukan) {
|
||||
// this.norujukan = norujukan;
|
||||
// this.marhuns = this.norujukan.lelongbidmarhun;
|
||||
// this.form.lelongbid_id = this.norujukan.id;
|
||||
// this.form.test = 1;
|
||||
// this.form.hargabida =
|
||||
// parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
|
||||
// },
|
||||
// calcTotal() {
|
||||
// this.form.hargabida =
|
||||
// parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
|
||||
// // console.log(this.norujukan);
|
||||
// // console.log(value);
|
||||
// },
|
||||
|
||||
// addToCart() {
|
||||
// axios
|
||||
// .post("/addToCart", this.form, {
|
||||
// headers: {
|
||||
// Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
// },
|
||||
// })
|
||||
// .then((response) => {
|
||||
// console.log(response);
|
||||
// // this.$forceUpdate();
|
||||
// // location.reload();
|
||||
// // this.liveData();
|
||||
// // this.myModal._isShown == false;
|
||||
// // call Cart component to refresh
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log(error);
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<!-- <div class="row justify-content-md-center">
|
||||
<h1>Login</h1>
|
||||
<div class="col-6" style="border: 1px solid">
|
||||
<form @submit.prevent="submit">
|
||||
<div class="p-20">
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="username"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Username</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.username"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
placeholder="name@flowbite.com"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="password"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Password</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
v-model="form.password"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-start mb-6">
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
id="remember"
|
||||
aria-describedby="remember"
|
||||
type="checkbox"
|
||||
class="
|
||||
w-4
|
||||
h-4
|
||||
bg-gray-50
|
||||
rounded
|
||||
border border-gray-300
|
||||
focus:ring-3 focus:ring-blue-300
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:focus:ring-blue-600
|
||||
dark:ring-offset-gray-800
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label
|
||||
for="remember"
|
||||
class="font-medium text-gray-900 dark:text-gray-300"
|
||||
>Remember me</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="doLogin"
|
||||
type="submit"
|
||||
class="
|
||||
text-white
|
||||
bg-blue-700
|
||||
hover:bg-blue-800
|
||||
focus:ring-4 focus:outline-none focus:ring-blue-300
|
||||
font-medium
|
||||
rounded-lg
|
||||
text-sm
|
||||
w-full
|
||||
sm:w-auto
|
||||
px-5
|
||||
py-2.5
|
||||
text-center
|
||||
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
||||
"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<router-link to="/register">Register</router-link><br />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5 text-center m-5 p-5 border rounded">
|
||||
<form @submit.prevent="submit">
|
||||
<h1 class="mb-5 text-primary">Sistem Lelong</h1>
|
||||
<h4>Log Masuk</h4>
|
||||
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="form.username"
|
||||
placeholder="username sini"
|
||||
required
|
||||
/>
|
||||
<label for="floatingInput">Username</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
v-model="form.password"
|
||||
placeholder="Password"
|
||||
required
|
||||
/>
|
||||
<label for="floatingPassword">Password</label>
|
||||
</div>
|
||||
<button
|
||||
@click="doLogin"
|
||||
class="w-100 mt-4 mb-5 btn btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
Enter
|
||||
</button>
|
||||
</form>
|
||||
<router-link to="/register">Daftar Akaun</router-link><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRouter } from "vue-router";
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: "Login",
|
||||
|
||||
// ========api composition style===============
|
||||
// setup() {
|
||||
|
||||
// const router = useRouter();
|
||||
|
||||
// const submit = async e => {
|
||||
// const form = new FormData(e.target);
|
||||
|
||||
// const inputs = Object.fromEntries(form.entries());
|
||||
|
||||
// const {data} = await axios.post('user/login', inputs, {
|
||||
// withCredentials: false
|
||||
// });
|
||||
|
||||
// axios.defaults.headers.common['Authorization'] = 'Bearer ${data.token}';
|
||||
|
||||
// console.log(data);
|
||||
// await router.push('/');
|
||||
// }
|
||||
|
||||
// return {
|
||||
// submit
|
||||
// }
|
||||
// }
|
||||
|
||||
//=========api option style===================
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doLogin() {
|
||||
axios.post("/user/login", this.form).then((response) => {
|
||||
localStorage.setItem("token", response.data.token);
|
||||
localStorage.setItem("id", response.data.user.id);
|
||||
localStorage.setItem("nokp", response.data.user.nokp);
|
||||
this.$router.push("/");
|
||||
console.log(response);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,167 @@
|
||||
<template >
|
||||
<!-- component -->
|
||||
<div class="min-h-screen flex justify-center items-center bg-white">
|
||||
<div
|
||||
class="
|
||||
p-10
|
||||
border-[1px]
|
||||
-mt-10
|
||||
border-slate-200
|
||||
rounded-md
|
||||
flex flex-col
|
||||
items-center
|
||||
space-y-3
|
||||
"
|
||||
>
|
||||
<form>
|
||||
<div class="py-8">
|
||||
<!-- <img
|
||||
width="30"
|
||||
class="-mt-10"
|
||||
src="https://www.paypalobjects.com/images/shared/momgram@2x.png"
|
||||
/> -->
|
||||
<p class="font-bold text-[#0070ba]">Sistem Lelong</p>
|
||||
</div>
|
||||
<input
|
||||
class="p-3 border-[1px] border-slate-500 rounded-sm w-80"
|
||||
placeholder="E-Mail or Phone number"
|
||||
id="username"
|
||||
name="username"
|
||||
model="form.username"
|
||||
/>
|
||||
<!-- <form>
|
||||
<v-text-field
|
||||
label="Email"
|
||||
name="Login"
|
||||
type="text"
|
||||
class="p-3 border-[1px] border-slate-500 rounded-sm w-80"
|
||||
> </v-text-field>
|
||||
</form> -->
|
||||
<div class="flex flex-col space-y-1">
|
||||
<input
|
||||
class="p-3 border-[1px] border-slate-500 rounded-sm w-80"
|
||||
placeholder="Password"
|
||||
id="password"
|
||||
name="password"
|
||||
model="form.password"
|
||||
/>
|
||||
<p class="font-bold text-[#0070ba]">Forgot password?</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-col space-y-5 w-full">
|
||||
<button
|
||||
class="
|
||||
w-full
|
||||
bg-[#0070ba]
|
||||
rounded-3xl
|
||||
p-3
|
||||
text-white
|
||||
font-bold
|
||||
transition
|
||||
duration-200
|
||||
hover:bg-[#003087]
|
||||
"
|
||||
>
|
||||
Log in
|
||||
</button>
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
border-t-[1px] border-t-slate-300
|
||||
w-full
|
||||
relative
|
||||
"
|
||||
>
|
||||
<div class="-mt-1 font-bod bg-white px-5 absolute">Or</div>
|
||||
</div>
|
||||
<button
|
||||
class="
|
||||
w-full
|
||||
border-blue-900
|
||||
hover:border-[#003087] hover:border-[2px]
|
||||
border-[1px]
|
||||
rounded-3xl
|
||||
p-3
|
||||
text-[#0070ba]
|
||||
font-bold
|
||||
transition
|
||||
duration-200
|
||||
"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class="flex space-x-1 p-20 text-sm">
|
||||
<p class="hover:underline cursor-pointer">German</p>
|
||||
<div class="border-r-[1px] border-r-slate-300"></div>
|
||||
<p class="font-bold hover:underline cursor-pointer">English</p>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
class="
|
||||
absolute
|
||||
bottom-0
|
||||
w-full
|
||||
p-3
|
||||
bg-[#F7F9FA]
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
space-x-3
|
||||
text-[14px]
|
||||
font-medium
|
||||
text-[#666]
|
||||
"
|
||||
>
|
||||
<a
|
||||
href="https://www.paypal.com/us/smarthelp/contact-us"
|
||||
target="_blank"
|
||||
class="hover:underline underline-offset-1 cursor-pointer"
|
||||
>Contact Us</a
|
||||
>
|
||||
<a
|
||||
href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full"
|
||||
target="_blank"
|
||||
class="hover:underline underline-offset-1 cursor-pointer"
|
||||
>Privacy</a
|
||||
>
|
||||
<a
|
||||
href="https://www.paypal.com/de/webapps/mpp/ua/legalhub-full"
|
||||
target="_blank"
|
||||
class="hover:underline underline-offset-1 cursor-pointer"
|
||||
>Legal</a
|
||||
>
|
||||
<a
|
||||
href="https://www.paypal.com/de/webapps/mpp/ua/upcoming-policies-full"
|
||||
target="_blank"
|
||||
class="hover:underline underline-offset-1 cursor-pointer"
|
||||
>Policy
|
||||
</a>
|
||||
<a
|
||||
href="https://www.paypal.com/de/webapps/mpp/country-worldwide"
|
||||
target="_blank"
|
||||
class="hover:underline underline-offset-1 cursor-pointer"
|
||||
>Worldwide
|
||||
</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<!-- Button trigger modal -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-toggle="modal"
|
||||
data-target="#exampleModal"
|
||||
>
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="exampleModal"
|
||||
tabindex="-1"
|
||||
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">Modal title</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">...</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">
|
||||
Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand text-primary fw-bold" href="/">Sistem Lelong</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/">Home</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/list">Senarai</router-link>
|
||||
</li>
|
||||
<!-- <li class="nav-item">
|
||||
<router-link class="nav-link" to="/cart">Cart</router-link>
|
||||
</li> -->
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/bidhistory">Rekod Bidaan</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/pay">Bayar</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/profile">Profil</router-link>
|
||||
</li>
|
||||
<router-view />
|
||||
</ul>
|
||||
|
||||
<router-link class="btn btn-primary me-5" to="/cart"
|
||||
>Troli <i class="bi bi-cart3"></i
|
||||
><span class="span_cart">{{
|
||||
this.allCarts.length
|
||||
}}</span></router-link
|
||||
>
|
||||
<button
|
||||
class="btn btn-outline-secondary"
|
||||
type="submit"
|
||||
@click="doLogout"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Navbar",
|
||||
// props: {
|
||||
// cart: Number,
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
// cart: localStorage.getItem("cart"),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doLogout() {
|
||||
axios
|
||||
.post(
|
||||
"/user/logout",
|
||||
{},
|
||||
{
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("id");
|
||||
localStorage.removeItem("nokp");
|
||||
this.$router.push("/login");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
...mapActions(["fetchCarts"]),
|
||||
|
||||
},
|
||||
computed: { ...mapGetters(["allCarts"]), },
|
||||
created() {
|
||||
this.fetchCarts();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.span_cart {
|
||||
background-color: #06367D;
|
||||
margin-left: 8px;
|
||||
padding: 6px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
<div class="container">
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Kembali <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<h1>Bayar <i class="bi bi-credit-card-2-front"></i></h1>
|
||||
<div class="row">
|
||||
<div class="d-flex">
|
||||
<h3 class="text-start">Belum Selesai </h3>
|
||||
<h5>
|
||||
<button @click="renderToPay" class="badge btn-secondary">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<ToPay :key="toPayComponent" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="d-flex">
|
||||
<h3 class="text-start">Rekod Bayaran </h3>
|
||||
<h5>
|
||||
<button @click="renderPaymentHistory" class="badge btn-secondary">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
<PaymentHistory :key="paymentHistoryComponent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
import ToPay from "./result/ToPay.vue";
|
||||
import PaymentHistory from "./result/PaymentHistory.vue";
|
||||
|
||||
export default {
|
||||
name: "Pay",
|
||||
components: { Navbar, Footer, ToPay, PaymentHistory },
|
||||
data() {
|
||||
return {
|
||||
toPayComponent: 0,
|
||||
paymentHistoryComponent: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
renderToPay() {
|
||||
this.toPayComponent += 1;
|
||||
},
|
||||
renderPaymentHistory() {
|
||||
this.paymentHistoryComponent += 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 70vh; display: grid; place-items: center"
|
||||
>
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="container">
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Kembali <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<h1>Profil <i class="bi bi-person-video"></i></h1>
|
||||
<div class="card">
|
||||
<!-- <div class="card-header"><h4>Profil</h4></div> -->
|
||||
<div class="card-body">
|
||||
<img
|
||||
src="../assets/profile.png"
|
||||
alt="profile photo"
|
||||
style="width: 225px; height: 230px"
|
||||
/>
|
||||
<div>
|
||||
<div class="row justify-content-center mt-4 mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Nama
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.name }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Username
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.username }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
No Kad Pengenalan
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.nokp }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
No Tel Bimbit
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.notelbimbit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="card-footer">
|
||||
<p>*Sila hubungi *** jika terdapat masalah</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Navbar,
|
||||
Footer,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.profile();
|
||||
},
|
||||
methods: {
|
||||
profile() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/user/profile/" + localStorage.getItem("nokp"), {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.data = response.data[0];
|
||||
// this.total_hargabida = response.data[0].total_hargabida;
|
||||
console.log(response);
|
||||
this.loading=false;
|
||||
// this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text_border {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<!-- <div class="row justify-content-md-center">
|
||||
<h1>Register</h1>
|
||||
<div class="col-6" style="border: 1px solid">
|
||||
<form @submit.prevent="submit">
|
||||
<div class="p-20">
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="name"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Name</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.name"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
placeholder="Mustaqim Mustafar"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="username"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Username</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.username"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="nokp"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>No KP</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.nokp"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="password"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Password</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.password"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="email"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Email</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.email"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label
|
||||
for="notelbimbit"
|
||||
class="
|
||||
block
|
||||
mb-2
|
||||
text-sm
|
||||
font-medium
|
||||
text-gray-900
|
||||
dark:text-gray-300
|
||||
"
|
||||
>Nombor Telefon</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.notelbimbit"
|
||||
class="
|
||||
bg-gray-50
|
||||
border border-gray-300
|
||||
text-gray-900 text-sm
|
||||
rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500
|
||||
block
|
||||
w-full
|
||||
p-2.5
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:placeholder-gray-400
|
||||
dark:text-white
|
||||
dark:focus:ring-blue-500
|
||||
dark:focus:border-blue-500
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start mb-6">
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
id="register_agree"
|
||||
aria-describedby="register_agree"
|
||||
type="checkbox"
|
||||
value="1"
|
||||
v-model="form.register_agree"
|
||||
class="
|
||||
w-4
|
||||
h-4
|
||||
bg-gray-50
|
||||
rounded
|
||||
border border-gray-300
|
||||
focus:ring-3 focus:ring-blue-300
|
||||
dark:bg-gray-700
|
||||
dark:border-gray-600
|
||||
dark:focus:ring-blue-600
|
||||
dark:ring-offset-gray-800
|
||||
"
|
||||
required=""
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label
|
||||
for="register_agree"
|
||||
required=""
|
||||
class="font-medium text-gray-900 dark:text-gray-300"
|
||||
>Setuju dgn terma & syarat</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="doRegister"
|
||||
type="submit"
|
||||
class="
|
||||
text-white
|
||||
bg-blue-700
|
||||
hover:bg-blue-800
|
||||
focus:ring-4 focus:outline-none focus:ring-blue-300
|
||||
font-medium
|
||||
rounded-lg
|
||||
text-sm
|
||||
w-full
|
||||
sm:w-auto
|
||||
px-5
|
||||
py-2.5
|
||||
text-center
|
||||
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
|
||||
"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<router-link to="/login">Login</router-link><br />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5 text-center m-5 p-5 border rounded">
|
||||
<form @submit.prevent="submit">
|
||||
<h1 class="mb-5 text-primary">Sistem Lelong</h1>
|
||||
<h4>Daftar Akaun</h4>
|
||||
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" v-model="form.name" />
|
||||
<label>Nama</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" v-model="form.username" />
|
||||
<label>Username</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" v-model="form.nokp" />
|
||||
<label>No KP</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
v-model="form.password"
|
||||
/>
|
||||
<label>Password</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="email" class="form-control" v-model="form.email" />
|
||||
<label>E-mel</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="form.notelbimbit"
|
||||
/>
|
||||
<label>No. Telefon</label>
|
||||
</div>
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="1" id="register_agree" /> Setuju
|
||||
dengan terma & syarat
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
@click="doRegister"
|
||||
class="w-100 mt-4 mb-5 btn btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
Enter
|
||||
</button>
|
||||
</form>
|
||||
<router-link to="/login">Log Masuk</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: "Register",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: "",
|
||||
username: "",
|
||||
nokp: "",
|
||||
password: "",
|
||||
email: "",
|
||||
notelbimbit: "",
|
||||
register_agree: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doRegister() {
|
||||
axios
|
||||
.post("/register", this.form)
|
||||
.then((response) => {
|
||||
localStorage.setItem("token", response.data.token);
|
||||
this.$router.push("/login");
|
||||
console.log(response);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<!-- component -->
|
||||
<body class="font-mono bg-gray-400">
|
||||
<!-- Container -->
|
||||
<div class="container mx-auto">
|
||||
<div class="flex justify-center px-6 my-12">
|
||||
<!-- Row -->
|
||||
<div class="w-full xl:w-1/2 lg:w-11/12 flex border-[1px]">
|
||||
<!-- Col -->
|
||||
<!-- <div
|
||||
class="
|
||||
w-full
|
||||
h-auto
|
||||
bg-gray-400
|
||||
hidden
|
||||
lg:block lg:w-5/12
|
||||
bg-cover
|
||||
rounded-l-lg
|
||||
"
|
||||
style="
|
||||
background-image: url('https://source.unsplash.com/Mv9hjnEUHR4/600x800');
|
||||
"
|
||||
></div> -->
|
||||
<!-- Col -->
|
||||
<div class="w-full bg-white p-5 rounded-lg lg:rounded-l-none">
|
||||
<h3 class="pt-4 text-2xl text-center">Create an Account!</h3>
|
||||
<form class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
|
||||
<div class="mb-4 md:flex md:justify-between">
|
||||
<div class="mb-4 md:mr-2 md:mb-0">
|
||||
<label
|
||||
class="block mb-2 text-sm font-bold text-gray-700"
|
||||
for="firstName"
|
||||
>
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
class="
|
||||
w-full
|
||||
px-3
|
||||
py-2
|
||||
text-sm
|
||||
leading-tight
|
||||
text-gray-700
|
||||
border
|
||||
rounded
|
||||
shadow
|
||||
appearance-none
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
id="firstName"
|
||||
type="text"
|
||||
placeholder="First Name"
|
||||
/>
|
||||
</div>
|
||||
<div class="md:ml-2">
|
||||
<label
|
||||
class="block mb-2 text-sm font-bold text-gray-700"
|
||||
for="lastName"
|
||||
>
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
class="
|
||||
w-full
|
||||
px-3
|
||||
py-2
|
||||
text-sm
|
||||
leading-tight
|
||||
text-gray-700
|
||||
border
|
||||
rounded
|
||||
shadow
|
||||
appearance-none
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
id="lastName"
|
||||
type="text"
|
||||
placeholder="Last Name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label
|
||||
class="block mb-2 text-sm font-bold text-gray-700"
|
||||
for="email"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
class="
|
||||
w-full
|
||||
px-3
|
||||
py-2
|
||||
mb-3
|
||||
text-sm
|
||||
leading-tight
|
||||
text-gray-700
|
||||
border
|
||||
rounded
|
||||
shadow
|
||||
appearance-none
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4 md:flex md:justify-between">
|
||||
<div class="mb-4 md:mr-2 md:mb-0">
|
||||
<label
|
||||
class="block mb-2 text-sm font-bold text-gray-700"
|
||||
for="password"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
class="
|
||||
w-full
|
||||
px-3
|
||||
py-2
|
||||
mb-3
|
||||
text-sm
|
||||
leading-tight
|
||||
text-gray-700
|
||||
border border-red-500
|
||||
rounded
|
||||
shadow
|
||||
appearance-none
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="******************"
|
||||
/>
|
||||
<p class="text-xs italic text-red-500">
|
||||
Please choose a password.
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:ml-2">
|
||||
<label
|
||||
class="block mb-2 text-sm font-bold text-gray-700"
|
||||
for="c_password"
|
||||
>
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
class="
|
||||
w-full
|
||||
px-3
|
||||
py-2
|
||||
mb-3
|
||||
text-sm
|
||||
leading-tight
|
||||
text-gray-700
|
||||
border
|
||||
rounded
|
||||
shadow
|
||||
appearance-none
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
id="c_password"
|
||||
type="password"
|
||||
placeholder="******************"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6 text-center">
|
||||
<button
|
||||
class="
|
||||
w-full
|
||||
px-4
|
||||
py-2
|
||||
font-bold
|
||||
text-white
|
||||
bg-blue-500
|
||||
rounded-full
|
||||
hover:bg-blue-700
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
type="button"
|
||||
>
|
||||
Register Account
|
||||
</button>
|
||||
</div>
|
||||
<hr class="mb-6 border-t" />
|
||||
<div class="text-center">
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
text-sm text-blue-500
|
||||
align-baseline
|
||||
hover:text-blue-800
|
||||
"
|
||||
href="#"
|
||||
>
|
||||
Forgot Password?
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<!-- <a
|
||||
class="
|
||||
inline-block
|
||||
text-sm text-blue-500
|
||||
align-baseline
|
||||
hover:text-blue-800
|
||||
"
|
||||
href="./index.html"
|
||||
>
|
||||
Already have an account? Login!
|
||||
</a> -->
|
||||
<!-- <router-link to="/login">Login</router-link><br /> -->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</template>
|
||||
<script>
|
||||
// import Login from './Login.vue'
|
||||
|
||||
export default {
|
||||
name: "Register",
|
||||
// components: [
|
||||
// Login,
|
||||
// ]
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 70vh; display: grid; place-items: center"
|
||||
>
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="">
|
||||
<div class="container">
|
||||
<div v-for="data in listBid" :key="data.id">
|
||||
<div class="d-flex">
|
||||
<p>Lelong ID:</p>
|
||||
<p>{{ data.lelong_id }}</p>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<p>Tarikh Lelong:</p>
|
||||
<p>{{ data.t_lelong }}</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="card">{{ data.lelongbid.length }} surat</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "BidDetail",
|
||||
data() {
|
||||
return {
|
||||
listBid: [],
|
||||
loading : false
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.liveData();
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/bidder/listBidItembWeb/" + localStorage.getItem("id"), {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.listBid = response.data;
|
||||
console.log(response);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div id="accordion-collapse" data-accordion="collapse">
|
||||
<h2 id="accordion-collapse-heading-1">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
flex
|
||||
justify-between
|
||||
items-center
|
||||
p-5
|
||||
w-full
|
||||
font-medium
|
||||
text-left
|
||||
rounded-t-xl
|
||||
border border-b-0 border-gray-200
|
||||
focus:ring-4 focus:ring-gray-200
|
||||
dark:focus:ring-gray-800 dark:border-gray-700
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
bg-gray-100
|
||||
dark:bg-gray-800
|
||||
text-gray-900
|
||||
dark:text-white
|
||||
"
|
||||
data-accordion-target="#accordion-collapse-body-1"
|
||||
aria-expanded="true"
|
||||
aria-controls="accordion-collapse-body-1"
|
||||
>
|
||||
<span>What is Flowbite?</span>
|
||||
<svg
|
||||
data-accordion-icon=""
|
||||
class="w-6 h-6 rotate-180 shrink-0"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="accordion-collapse-body-1"
|
||||
class=""
|
||||
aria-labelledby="accordion-collapse-heading-1"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
p-5
|
||||
border border-b-0 border-gray-200
|
||||
dark:border-gray-700 dark:bg-gray-900
|
||||
"
|
||||
>
|
||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||
Flowbite is an open-source library of interactive components built on
|
||||
top of Tailwind CSS including buttons, dropdowns, modals, navbars, and
|
||||
more.
|
||||
</p>
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
Check out this guide to learn how to
|
||||
<a
|
||||
href="https://flowbite.com/docs/getting-started/introduction/"
|
||||
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>get started</a
|
||||
>
|
||||
and start developing websites even faster with components on top of
|
||||
Tailwind CSS.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="accordion-collapse-heading-2">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
flex
|
||||
justify-between
|
||||
items-center
|
||||
p-5
|
||||
w-full
|
||||
font-medium
|
||||
text-left text-gray-500
|
||||
border border-b-0 border-gray-200
|
||||
focus:ring-4 focus:ring-gray-200
|
||||
dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
data-accordion-target="#accordion-collapse-body-2"
|
||||
aria-expanded="false"
|
||||
aria-controls="accordion-collapse-body-2"
|
||||
>
|
||||
<span>Is there a Figma file available?</span>
|
||||
<svg
|
||||
data-accordion-icon=""
|
||||
class="w-6 h-6 shrink-0"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="accordion-collapse-body-2"
|
||||
class="hidden"
|
||||
aria-labelledby="accordion-collapse-heading-2"
|
||||
>
|
||||
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
|
||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||
Flowbite is first conceptualized and designed using the Figma software
|
||||
so everything you see in the library has a design equivalent in our
|
||||
Figma file.
|
||||
</p>
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
Check out the
|
||||
<a
|
||||
href="https://flowbite.com/figma/"
|
||||
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>Figma design system</a
|
||||
>
|
||||
based on the utility classes from Tailwind CSS and components from
|
||||
Flowbite.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="accordion-collapse-heading-3">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
flex
|
||||
justify-between
|
||||
items-center
|
||||
p-5
|
||||
w-full
|
||||
font-medium
|
||||
text-left text-gray-500
|
||||
border border-gray-200
|
||||
focus:ring-4 focus:ring-gray-200
|
||||
dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
data-accordion-target="#accordion-collapse-body-3"
|
||||
aria-expanded="false"
|
||||
aria-controls="accordion-collapse-body-3"
|
||||
>
|
||||
<span>What are the differences between Flowbite and Tailwind UI?</span>
|
||||
<svg
|
||||
data-accordion-icon=""
|
||||
class="w-6 h-6 shrink-0"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="accordion-collapse-body-3"
|
||||
class="hidden"
|
||||
aria-labelledby="accordion-collapse-heading-3"
|
||||
>
|
||||
<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
|
||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||
The main difference is that the core components from Flowbite are open
|
||||
source under the MIT license, whereas Tailwind UI is a paid product.
|
||||
Another difference is that Flowbite relies on smaller and standalone
|
||||
components, whereas Tailwind UI offers sections of pages.
|
||||
</p>
|
||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||
However, we actually recommend using both Flowbite, Flowbite Pro, and
|
||||
even Tailwind UI as there is no technical reason stopping you from
|
||||
using the best of two worlds.
|
||||
</p>
|
||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||
Learn more about these technologies:
|
||||
</p>
|
||||
<ul class="pl-5 list-disc text-gray-500 dark:text-gray-400">
|
||||
<li>
|
||||
<a
|
||||
href="https://flowbite.com/pro/"
|
||||
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>Flowbite Pro</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://tailwindui.com/"
|
||||
rel="nofollow"
|
||||
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>Tailwind UI</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="
|
||||
max-w-2xl
|
||||
mx-auto
|
||||
overflow-hidden
|
||||
bg-white
|
||||
rounded-lg
|
||||
shadow-md
|
||||
dark:bg-gray-800
|
||||
"
|
||||
>
|
||||
<img
|
||||
class="object-cover w-full h-64"
|
||||
src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
|
||||
alt="Article"
|
||||
/>
|
||||
|
||||
<div class="p-6">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-medium text-blue-600 uppercase dark:text-blue-400"
|
||||
>Product</span
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="
|
||||
block
|
||||
mt-2
|
||||
text-2xl
|
||||
font-semibold
|
||||
text-gray-800
|
||||
transition-colors
|
||||
duration-200
|
||||
transform
|
||||
dark:text-white
|
||||
hover:text-gray-600 hover:underline
|
||||
"
|
||||
>I Built A Successful Blog In One Year</a
|
||||
>
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie
|
||||
parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris
|
||||
egestas quam volutpat viverra. In pretium nec senectus erat. Et
|
||||
malesuada lobortis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
class="object-cover h-10 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60"
|
||||
alt="Avatar"
|
||||
/>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-2 font-semibold text-gray-700 dark:text-gray-200"
|
||||
>Jone Doe</a
|
||||
>
|
||||
</div>
|
||||
<span class="mx-1 text-xs text-gray-600 dark:text-gray-300"
|
||||
>21 SEP 2015</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="spinner-border" v-if="loading" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div v-else class="card text-center">
|
||||
<div class="card-header fw-bold text-uppercase">Karat Semasa</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>No.</th>
|
||||
<th>Karat</th>
|
||||
<th>Keterangan</th>
|
||||
<th>Harga</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-for="(karats, index) in karat" :key="karats.id">
|
||||
<tr>
|
||||
<td scope="row">{{ index + 1 }}</td>
|
||||
<td scope="row">{{ karats.karat }}</td>
|
||||
<td scope="row">{{ karats.keterangan }}</td>
|
||||
<td scope="row">RM{{ karats.harga }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "Karat",
|
||||
data() {
|
||||
return {
|
||||
karat: Array,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getKarat();
|
||||
},
|
||||
methods: {
|
||||
async getKarat() {
|
||||
this.loading = true;
|
||||
await axios
|
||||
.get("/karat", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.karat = response.data;
|
||||
this.loading = false;
|
||||
console.log(response);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="spinner-border" v-if="loading" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div v-else class="card text-center mt-5">
|
||||
<div class="card-header fw-bold text-uppercase">
|
||||
Lelongan Seterusnya
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bil</th>
|
||||
<th>Cawangan</th>
|
||||
<th>Tarikh</th>
|
||||
<th>Masa Mula</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>OneStop</td>
|
||||
<td>11/06/2022</td>
|
||||
<td>12:05:20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>OneStop</td>
|
||||
<td>11/06/2022</td>
|
||||
<td>12:05:20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>OneStop</td>
|
||||
<td>11/06/2022</td>
|
||||
<td>12:05:20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>OneStop</td>
|
||||
<td>11/06/2022</td>
|
||||
<td>12:05:20</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- <div class="card" v-for="item in response" :key="item.id">
|
||||
<p>Cawangan: {{ item.lelongbid[0].cawangan.caw_name }}</p>
|
||||
<p>Masa Mula Lelongan: {{ item.masamula_lelong }}</p>
|
||||
</div> -->
|
||||
<!-- <p>{{ msg }}</p>
|
||||
<p>{{ masa }}</p> -->
|
||||
<!-- <p id="demo"></p> -->
|
||||
<!-- <a href="#" class="btn btn-primary">Lihat Marhun</a> -->
|
||||
</div>
|
||||
<!-- <div class="card-footer text-muted">
|
||||
<router-link class="btn btn-primary" to="/list">Lihat Item</router-link>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "Card",
|
||||
props: {
|
||||
msg: String,
|
||||
masa: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
response: Array,
|
||||
cawangan: String,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
// this.liveData();
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/lelongDetails/today", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.response = response.data;
|
||||
console.log(response.data);
|
||||
// this.cawangan = response.data[0].lelongbid[0].cawangan.caw_dbname;
|
||||
// console.log(this.cawangan);
|
||||
|
||||
// let text = "";
|
||||
// const data = this.response;
|
||||
// data.forEach(myFunction);
|
||||
|
||||
// // document.getElementById("demo").innerHTML = text;
|
||||
// function myFunction(item) {
|
||||
// text +=
|
||||
// "Tarikh: " +
|
||||
// item.tarikh_lelong +
|
||||
// ", " +
|
||||
// item.lelongbid[0].cawangan.caw_dbname +
|
||||
// ", JBG: " +
|
||||
// item.jbg +
|
||||
// "<br>";
|
||||
// }
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 20vh; display: grid; place-items: center"
|
||||
>
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="card text-center">
|
||||
<div class="card-header fw-bold text-uppercase">
|
||||
Lelongan Hari Ini : {{ tarikh }}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bil</th>
|
||||
<th>Cawangan</th>
|
||||
<th>Masa Mula</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in response" :key="item.id">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.lelongbid[0].cawangan.caw_name }}</td>
|
||||
<td>{{ item.masamula_lelong }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- <div class="card" v-for="item in response" :key="item.id">
|
||||
<p>Cawangan: {{ item.lelongbid[0].cawangan.caw_name }}</p>
|
||||
<p>Masa Mula Lelongan: {{ item.masamula_lelong }}</p>
|
||||
</div> -->
|
||||
<!-- <p>{{ msg }}</p>
|
||||
<p>{{ masa }}</p> -->
|
||||
<!-- <p id="demo"></p> -->
|
||||
<!-- <a href="#" class="btn btn-primary">Lihat Marhun</a> -->
|
||||
</div>
|
||||
<div class="card-footer text-muted">
|
||||
<router-link class="btn btn-primary" to="/list"
|
||||
>Lihat Senarai</router-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "Card",
|
||||
props: {
|
||||
msg: String,
|
||||
masa: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
response: Array,
|
||||
cawangan: String,
|
||||
loading: false,
|
||||
tarikh: "",
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.liveData();
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
|
||||
var formatted_date = new Date().toJSON().slice(0, 10).replace(/-/g, "/");
|
||||
|
||||
this.tarikh = formatted_date;
|
||||
axios
|
||||
.get("/lelongDetails/today", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.response = response.data;
|
||||
console.log(response.data);
|
||||
// this.cawangan = response.data[0].lelongbid[0].cawangan.caw_dbname;
|
||||
// console.log(this.cawangan);
|
||||
|
||||
// let text = "";
|
||||
// const data = this.response;
|
||||
// data.forEach(myFunction);
|
||||
|
||||
// // document.getElementById("demo").innerHTML = text;
|
||||
// function myFunction(item) {
|
||||
// text +=
|
||||
// "Tarikh: " +
|
||||
// item.tarikh_lelong +
|
||||
// ", " +
|
||||
// item.lelongbid[0].cawangan.caw_dbname +
|
||||
// ", JBG: " +
|
||||
// item.jbg +
|
||||
// "<br>";
|
||||
// }
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="card text-center">
|
||||
<div class="card-header fw-bold text-uppercase">Keputusan Bidaan</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p>Tahniah! Bidaan anda menang.</p>
|
||||
<!-- <button class="btn btn-primary">Bayar Bidaan</button> -->
|
||||
<router-link class="btn btn-primary" to="/pay">Bayar</router-link>
|
||||
</div>
|
||||
|
||||
<!-- <div class="card-footer"></div> -->
|
||||
<div class="card-footer">Sila hubungi ******* untuk maklumat lanjut</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div v-for="todo in allTodos" :key="todo.id">
|
||||
<p>{{todo.masakemaskini_data}}</p>
|
||||
</div>
|
||||
<p>{{this.allTodos.length}}</p>
|
||||
<!-- <p>asd</p> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Todos",
|
||||
methods: {
|
||||
...mapActions(["fetchTodos"])
|
||||
},
|
||||
computed: mapGetters(["allTodos"]),
|
||||
created() {
|
||||
this.fetchTodos();
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 70vh; display: grid; place-items: center"
|
||||
>
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="container">
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Kembali <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<h1>Senarai <i class="bi bi-card-list"></i></h1>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="basic-addon3">Pilih Cawangan</span>
|
||||
<select class="form-select" v-model="cawangan">
|
||||
<option selected value="1">Ar-Rahn Kota Bharu 2</option>
|
||||
<!-- <option v-for="sag in sags" :key="sag.id" value="sag.id">Two</option> -->
|
||||
<!-- <option value="3">Three</option> -->
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary">Cari</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-9">
|
||||
<div class="container">
|
||||
<div class="d-flex">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Sort By</span>
|
||||
<button class="btn btn-outline-primary" checked>Default</button>
|
||||
<button class="btn btn-outline-primary">
|
||||
Ascending Harga Bida
|
||||
</button>
|
||||
<button class="btn btn-outline-primary">
|
||||
Descending Harga Bida
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row clearfix">
|
||||
<div
|
||||
v-for="sag in sags"
|
||||
:key="sag.id"
|
||||
class="col-lg-4 col-md-4 col-sm-12"
|
||||
style="margin: 10px 0px"
|
||||
>
|
||||
<div class="card product_item" style="padding: 15px">
|
||||
<div class="body">
|
||||
<div class="product_details">
|
||||
<h6 class="text-primary">
|
||||
{{ sag.norujukan }}
|
||||
</h6>
|
||||
<ul class="product_price list-unstyled">
|
||||
<li class="old_price">{{ sag.marhun }}</li>
|
||||
<li class="old_price">{{ sag.berat }}g</li>
|
||||
<li class="old_price">
|
||||
<b>RM{{ sag.hargaasas }}</b>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="cp_img">
|
||||
<div class="hover">
|
||||
<a
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#bidaModal"
|
||||
@click="clickModal(sag)"
|
||||
class="btn btn-primary btn-sm waves-effect"
|
||||
>Enter <i class="zmdi zmdi-shopping-cart"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<form>
|
||||
<div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-content">
|
||||
<p class="font-bold">Info</p>
|
||||
<hr />
|
||||
<div>
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Cawangan</p>
|
||||
<p class="mb-0">{{ lelong_details.lokasi }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Bilangan Lelongan</p>
|
||||
<p class="mb-0">{{ this.sags.length }} SAG</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Masa Mula</p>
|
||||
<p class="mb-0">{{ lelong_details.masamula_lelong }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Masa Tamat</p>
|
||||
<p class="mb-0">{{ lelong_details.masatamat_lelong }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal marhun -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="bidaModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="bidaModalLabel"
|
||||
aria-hidden="true"
|
||||
data-bs-backdrop="static"
|
||||
data-bs-keyboard="false"
|
||||
>
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="bidaModalLabel">
|
||||
{{ norujukan.norujukan }}
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
ref="tambahClose"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row m-2">
|
||||
<div class="col">
|
||||
<!-- <p>Marhun: {{ norujukan.marhun }}</p> -->
|
||||
<p>Jumlah Berat: {{ norujukan.berat }}g</p>
|
||||
<table class="table table-bordered">
|
||||
<tbody>
|
||||
<tr class="table-light">
|
||||
<th scope="col">No</th>
|
||||
<th scope="col">Jenis Marhun</th>
|
||||
<th scope="col">Karat</th>
|
||||
<th scope="col">Berat</th>
|
||||
<th scope="col">Nota</th>
|
||||
<th scope="col">Harga Asas</th>
|
||||
</tr>
|
||||
<tr v-for="(marhun, index) in marhuns" :key="marhun.id">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ marhun.marhun }}</td>
|
||||
<td>{{ marhun.karat }}</td>
|
||||
<td>{{ marhun.berat }}g</td>
|
||||
<td>{{ marhun.nota }}</td>
|
||||
<td>RM{{ marhun.hargaasas }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label text-end"
|
||||
>Jumlah Harga Asas</label
|
||||
>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<div
|
||||
style="background-color: #e9ecef"
|
||||
class="form-control text-start justify-content-start"
|
||||
disabled
|
||||
>
|
||||
{{ norujukan.hargaasas }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-3">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label">Tambahan Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
v-model="tambahan"
|
||||
type="text"
|
||||
id="tambahanbida"
|
||||
class="form-control"
|
||||
@change="calcTotal()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div
|
||||
style="font-size: 13px"
|
||||
class="fst-italic text-danger"
|
||||
v-if="v$.tambahan.$error"
|
||||
>
|
||||
<div class="text-end">
|
||||
*Minimum tambahan harga bida adalah RM1.
|
||||
</div>
|
||||
<div class="text-end">
|
||||
*Gandaan ringgit sahaja dibenarkan.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label">Jumlah Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="form.hargabida"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-danger me-2"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit" class="btn btn-success" @click="addToCart()">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </form> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import Senarai from "../list/Senarai.vue";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import { required, integer, numeric, minValue } from "@vuelidate/validators";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Senarai,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
v$: useVuelidate(),
|
||||
loading: false,
|
||||
tambahabError: false,
|
||||
errors: [],
|
||||
cawangan: "1",
|
||||
lelong_details: [],
|
||||
sags: [],
|
||||
norujukan: "",
|
||||
marhuns: "",
|
||||
componentKey: 0,
|
||||
tambahan: "",
|
||||
form: {
|
||||
user_id: localStorage.getItem("id"),
|
||||
lelongbid_id: "",
|
||||
hargabida: "",
|
||||
},
|
||||
myModal: null,
|
||||
cuba: "",
|
||||
};
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
tambahan: { required, numeric, integer, minValue: minValue(1) },
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
numberSag() {
|
||||
return this.sags.length;
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
this.liveData();
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/lelongDetails/cawangan", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
params: {
|
||||
caw_id: "4",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.lelong_details = response.data[0];
|
||||
this.response = response.data[0].lelongbid;
|
||||
this.sags = this.response;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
this.lelong_details = [null];
|
||||
});
|
||||
},
|
||||
clickModal(norujukan) {
|
||||
this.norujukan = norujukan;
|
||||
this.marhuns = this.norujukan.lelongbidmarhun;
|
||||
this.form.lelongbid_id = this.norujukan.id;
|
||||
this.tambahan = 1;
|
||||
this.form.hargabida =
|
||||
parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
|
||||
},
|
||||
calcTotal() {
|
||||
this.form.hargabida =
|
||||
parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
|
||||
},
|
||||
|
||||
addToCart() {
|
||||
this.v$.$validate();
|
||||
if (!this.v$.$error) {
|
||||
axios
|
||||
.post("/addToCart", this.form, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
this.$refs.tambahClose.click();
|
||||
|
||||
location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
// alert("Failed");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 70vh; display: grid; place-items: center"
|
||||
>
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<!-- <div class="card"> -->
|
||||
<!-- <div class="card-header">
|
||||
<table class="table"></table>
|
||||
</div> -->
|
||||
<div class="card-body mb-5">
|
||||
<table class="table table-bordered">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Tarikh Lelong</th>
|
||||
<th scope="col">Jumlah</th>
|
||||
<th scope="col">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(data, index) in paymentHistory" :key="data.id">
|
||||
<th scope="row">{{ index + 1 }}</th>
|
||||
<td>{{data.tarikh_lelong}}</td>
|
||||
<td>RM{{data.total}}</td>
|
||||
<td>{{data.status}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "HistoryResult",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
paymentHistory: [],
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.liveData();
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/history/" + localStorage.getItem("id"), {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.paymentHistory = response.data;
|
||||
console.log(this.paymentHistory);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<!-- <div class="top-0 fixed w-full">
|
||||
</div> -->
|
||||
|
||||
<!-- <Navbar /> -->
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 70vh; display: grid; place-items: center;"
|
||||
>
|
||||
<div
|
||||
class="spinner-border"
|
||||
role="status"
|
||||
>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="container">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-sm-12" style="overflow-x: auto">
|
||||
<div class="ibox">
|
||||
<!-- <div class="container">
|
||||
<div class="row justify-content-between">
|
||||
<span class="pull-right">(<strong>5</strong>) items</span>
|
||||
<h5>Items in your cart</h5>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="ibox-content">
|
||||
<div class="table-responsive">
|
||||
<table class="table shoping-cart-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Maklumat Marhun</td>
|
||||
|
||||
<td
|
||||
width="80"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Harga Bida
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content" v-for="sag in sags" :key="sag.id">
|
||||
<div class="table-responsive">
|
||||
<table class="table shoping-cart-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<!-- <td width="90">
|
||||
<div class="cart-product-imitation"></div>
|
||||
</td> -->
|
||||
<td class="desc">
|
||||
<h3 class="text-primary">
|
||||
{{ sag.norujukan }}
|
||||
</h3>
|
||||
</td>
|
||||
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
<h4>RM{{ sag.hargabida }}</h4>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="ibox-content">
|
||||
<div class="table-responsive">
|
||||
<table class="table shoping-cart-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="90">
|
||||
<div class="cart-product-imitation"></div>
|
||||
</td>
|
||||
<td class="desc">
|
||||
<h3>
|
||||
<a href="#"> Photo editor </a>
|
||||
</h3>
|
||||
<p class="small">
|
||||
Page when looking at its layout. The point of using
|
||||
Lorem Ipsum is
|
||||
</p>
|
||||
<dl class="small m-b-none">
|
||||
<dt>Description lists</dt>
|
||||
<dd>
|
||||
A description list is perfect for defining terms.
|
||||
</dd>
|
||||
</dl>
|
||||
<div class="m-t-sm">
|
||||
<a href="#" class="text-muted"
|
||||
><i class="fa fa-gift"></i> Add gift package</a
|
||||
>
|
||||
|
|
||||
<a href="#" class="text-muted"
|
||||
><i class="fa fa-trash"></i> Remove item</a
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td>$700,00</td>
|
||||
<td width="65">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="1"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h4>$70,00</h4>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="ibox-content">
|
||||
<!-- <button class="btn btn-primary pull-right">
|
||||
<i class="fa fa fa-shopping-cart"></i> Checkout
|
||||
</button>
|
||||
<button class="btn btn-white">
|
||||
<i class="fa fa-arrow-left"></i> Continue shopping
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-title" style="padding: 20px">
|
||||
<h5>Jumlah</h5>
|
||||
</div>
|
||||
|
||||
<div class="ibox-content">
|
||||
<!-- <span> Jumlah Bidaan </span> -->
|
||||
<h2 class="font-bold">RM{{ total_hargabida }}</h2>
|
||||
|
||||
<!-- <span class="text-muted small">
|
||||
<i
|
||||
>*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
|
||||
yang dimenanangi pembida.</i
|
||||
>
|
||||
</span> -->
|
||||
<!-- <hr />
|
||||
<span class="text-muted small">
|
||||
<i>*Caj RM10.00 akan dikenakan untuk membuat pendaftaran bidaan.
|
||||
Sila klik butang dibawah untuk meneruskan.</i>
|
||||
</span> -->
|
||||
<div class="m-t-sm">
|
||||
<div class="btn-group">
|
||||
<!-- <a href="#" class="btn btn-white btn-sm"> Batal</a> -->
|
||||
<a href="#" class="btn btn-primary">Bayar </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-title">
|
||||
<h5>Bayaran Pendaftaran</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<span> Jumlah Bidaan </span>
|
||||
<h2 class="font-bold">RM10.00</h2>
|
||||
|
||||
<hr />
|
||||
<span class="text-muted small">
|
||||
<i
|
||||
>*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
|
||||
yang dimenanangi pembida.</i
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-title">
|
||||
<h5>Support</h5>
|
||||
</div>
|
||||
<div class="ibox-content text-center">
|
||||
<h3><i class="fa fa-phone"></i> +43 100 783 001</h3>
|
||||
<span class="small">
|
||||
Please contact with us if you have any questions. We are
|
||||
avalible 24h.
|
||||
</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <HistoryResult /> -->
|
||||
<!-- <Footer /> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "../Navbar.vue";
|
||||
import Footer from "../Footer.vue";
|
||||
// import HistoryResult from "./HistoryResult.vue"
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "Cart",
|
||||
components: {
|
||||
Navbar,
|
||||
Footer,
|
||||
// HistoryResult,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sags: Array,
|
||||
total_hargabida: "",
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.resultBid();
|
||||
},
|
||||
methods: {
|
||||
resultBid() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/result/" + localStorage.getItem("id"), {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.sags = response.data[0].sag;
|
||||
this.total_hargabida = response.data[0].total_hargabida;
|
||||
console.log(response);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
// data() {
|
||||
// return {
|
||||
// countDown: 10,
|
||||
// };
|
||||
// },
|
||||
// method: {
|
||||
// countDownTimer() {
|
||||
// if (this.countDown > 0) {
|
||||
// setTimeout(() => {
|
||||
// this.countDown -= 1;
|
||||
// this.countDownTimer();
|
||||
// }, 1000);
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// created: this.countDownTimer(),
|
||||
};
|
||||
</script>
|
||||
|
||||
<style >
|
||||
body {
|
||||
margin-top: 20px;
|
||||
background: #eee;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
}
|
||||
.cart-product-imitation {
|
||||
text-align: center;
|
||||
padding-top: 30px;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
.product-imitation.xl {
|
||||
padding: 120px 0;
|
||||
}
|
||||
.product-desc {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ecommerce .tag-list {
|
||||
padding: 0;
|
||||
}
|
||||
.ecommerce .fa-star {
|
||||
color: #d1dade;
|
||||
}
|
||||
.ecommerce .fa-star.active {
|
||||
color: #f8ac59;
|
||||
}
|
||||
.ecommerce .note-editor {
|
||||
border: 1px solid #e7eaec;
|
||||
}
|
||||
table.shoping-cart-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
table.shoping-cart-table tr td {
|
||||
border: none;
|
||||
text-align: right;
|
||||
}
|
||||
table.shoping-cart-table tr td.desc,
|
||||
table.shoping-cart-table tr td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
table.shoping-cart-table tr td:last-child {
|
||||
width: 80px;
|
||||
}
|
||||
.ibox {
|
||||
clear: both;
|
||||
margin-bottom: 25px;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ibox.collapsed .ibox-content {
|
||||
display: none;
|
||||
}
|
||||
.ibox:after,
|
||||
.ibox:before {
|
||||
display: table;
|
||||
}
|
||||
.ibox-title {
|
||||
-moz-border-bottom-colors: none;
|
||||
-moz-border-left-colors: none;
|
||||
-moz-border-right-colors: none;
|
||||
-moz-border-top-colors: none;
|
||||
background-color: #ffffff;
|
||||
border-color: #e7eaec;
|
||||
border-image: none;
|
||||
border-style: solid solid none;
|
||||
border-width: 3px 0 0;
|
||||
color: inherit;
|
||||
margin-bottom: 0;
|
||||
padding: 14px 15px 7px;
|
||||
min-height: 48px;
|
||||
}
|
||||
.ibox-content {
|
||||
background-color: #ffffff;
|
||||
color: inherit;
|
||||
padding: 15px 20px 20px 20px;
|
||||
border-color: #e7eaec;
|
||||
border-image: none;
|
||||
border-style: solid solid none;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
.ibox-footer {
|
||||
color: inherit;
|
||||
border-top: 1px solid #e7eaec;
|
||||
font-size: 90%;
|
||||
background: #ffffff;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
import axios from "axios";
|
||||
|
||||
axios.defaults.baseURL = "http://lelong.test/api";
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
// import useVuelidate from '@vuelidate/core'
|
||||
import './interceptors/axios'
|
||||
import "bootstrap/dist/css/bootstrap.css"
|
||||
import "bootstrap/dist/js/bootstrap.js"
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css'
|
||||
|
||||
createApp(App).use(router).use(store).mount('#app')
|
||||
// createApp(App).use(router).use(store).use(useVuelidate).mount('#app')
|
||||
@@ -0,0 +1,103 @@
|
||||
import { createWebHistory, createRouter } from "vue-router";
|
||||
import Login from '../components/Login.vue';
|
||||
import Register from '../components/Register.vue';
|
||||
import Dashboard from './../components/Dashboard.vue';
|
||||
import Cart from './../components/Cart.vue';
|
||||
import List from './../components/List.vue'
|
||||
import Pay from '../components/Pay.vue'
|
||||
import Profile from './../components/Profile.vue'
|
||||
import BidHistory from '../components/BidHistory.vue'
|
||||
// import Modals from './../components/Modal.vue'
|
||||
// import { Modal } from "bootstrap";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: Login,
|
||||
// meta: { guest: true }
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'Register',
|
||||
component: Register,
|
||||
// meta: { guest: true }
|
||||
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'Dashboard',
|
||||
component: Dashboard,
|
||||
// meta: { requiresAuth: true }
|
||||
},
|
||||
|
||||
{
|
||||
path: '/cart',
|
||||
name: 'Cart',
|
||||
component: Cart,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
{
|
||||
path: '/list',
|
||||
name: 'List',
|
||||
component: List,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
{
|
||||
path: '/pay',
|
||||
name: 'Pay',
|
||||
component: Pay,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'Profile',
|
||||
component: Profile,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
{
|
||||
path: '/bidhistory',
|
||||
name: 'BidHistory',
|
||||
component: BidHistory,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
// {
|
||||
// name: 'Modal',
|
||||
// component: Modals,
|
||||
// }
|
||||
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes,
|
||||
})
|
||||
|
||||
// function loggedIn() {
|
||||
// return true;
|
||||
// }
|
||||
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// if (to.matched.some(record => record.meta.requiresAuth)) {
|
||||
// if (!loggedIn()) {
|
||||
// next({
|
||||
// // path: '/login',
|
||||
// // query: { redirect: to.fullPath },
|
||||
// })
|
||||
// }
|
||||
// else {
|
||||
// next()
|
||||
// }
|
||||
// } else if (to.matched.some(record => record.meta.guest)) {
|
||||
// next()
|
||||
// } else {
|
||||
// next()
|
||||
// }
|
||||
// })
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,13 @@
|
||||
import Vuex from 'vuex'
|
||||
// import Vue from 'vue'
|
||||
import cart from './modules/cart'
|
||||
|
||||
//Load vuex
|
||||
// Vue.use(Vuex);
|
||||
|
||||
//Create store
|
||||
export default new Vuex.Store({
|
||||
modules: {
|
||||
cart,
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,20 @@
|
||||
const state = {
|
||||
token:String,
|
||||
};
|
||||
|
||||
const getters = {};
|
||||
|
||||
const actions = {
|
||||
fetchProfile() {
|
||||
this.state.token = localStorage.getItem("token");
|
||||
},
|
||||
};
|
||||
|
||||
const mutations = {};
|
||||
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const state = {
|
||||
carts: [],
|
||||
};
|
||||
|
||||
const getters = {
|
||||
allCarts: state => state.carts,
|
||||
};
|
||||
|
||||
const actions = {
|
||||
async fetchCarts({ commit }) {
|
||||
const response = await axios.get("/cart/" + localStorage.getItem("id"));
|
||||
|
||||
// console.log(response.data);
|
||||
commit('setCarts', response.data);
|
||||
|
||||
},
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
setCarts: (state, carts) => (state.carts = carts),
|
||||
|
||||
};
|
||||
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
})
|
||||
Reference in New Issue
Block a user