Merge branch 'first' into 'main'

merge pertama kali 'first' to 'main'

See merge request amirhassan/lelong-web-pembida!1
This commit is contained in:
Muhamad Amir Hassan Hamzan
2022-05-31 06:29:05 +00:00
43 changed files with 22134 additions and 0 deletions
+4
View File
@@ -0,0 +1,4 @@
> 1%
last 2 versions
not dead
not ie 11
+23
View File
@@ -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?
+5
View File
@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
+19
View File
@@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
+17837
View File
File diff suppressed because it is too large Load Diff
+26
View File
@@ -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"
}
}
+5
View File
@@ -0,0 +1,5 @@
module.exports = {
plugins: {
autoprefixer: {}
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

+18
View File
@@ -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
View File
@@ -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

+48
View File
@@ -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>
+702
View File
@@ -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>
+110
View File
@@ -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>
+61
View File
@@ -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">&copy; 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>
+106
View File
@@ -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>
+136
View File
@@ -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>
+225
View File
@@ -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>
+167
View File
@@ -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>
+48
View File
@@ -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">&times;</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>
+110
View File
@@ -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>
+66
View File
@@ -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>
+119
View File
@@ -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>
+368
View File
@@ -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>
+230
View File
@@ -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>
+63
View File
@@ -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>
+280
View File
@@ -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>
+64
View File
@@ -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>
+118
View File
@@ -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>
+110
View File
@@ -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>
+18
View File
@@ -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>
+23
View File
@@ -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>
+367
View File
@@ -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>
+74
View File
@@ -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>
+354
View File
@@ -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>
+3
View File
@@ -0,0 +1,3 @@
import axios from "axios";
axios.defaults.baseURL = "http://lelong.test/api";
+12
View File
@@ -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')
+103
View File
@@ -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
+13
View File
@@ -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,
}
})
+20
View File
@@ -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
}
+31
View File
@@ -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
}
+4
View File
@@ -0,0 +1,4 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})