Skip to content
Snippets Groups Projects
Commit 69397e60 authored by Fadhil Imam Kurnia's avatar Fadhil Imam Kurnia
Browse files

Add script to handle multiple page in order

parent aec3f780
Branches
1 merge request!4Order
Hide whitespace changes
Inline Side-by-side
public/order.js 0 → 100644
+ 42
− 0
View file @ 69397e60
// Hide other page section
(function() {
showLocationPage();
})();
function showLocationPage() {
var finishPage = document.getElementById('order-page-finish');
finishPage.style.display = 'none';
var driverPage = document.getElementById('order-page-driver');
driverPage.style.display = 'none';
var locationPage = document.getElementById('order-page-location');
locationPage.style.display = 'block';
document.getElementById('page-tab-driver').classList.remove("selected");
document.getElementById('page-tab-finish').classList.remove("selected");
document.getElementById('page-tab-location').classList.add("selected");
}
function showDriverPage() {
var locationPage = document.getElementById('order-page-location');
locationPage.style.display = 'none';
var finishPage = document.getElementById('order-page-finish');
finishPage.style.display = 'none';
var driverPage = document.getElementById('order-page-driver');
driverPage.style.display = 'block';
document.getElementById('page-tab-driver').classList.add("selected");
document.getElementById('page-tab-finish').classList.remove("selected");
document.getElementById('page-tab-location').classList.remove("selected");
}
function showFinishPage() {
var locationPage = document.getElementById('order-page-location');
locationPage.style.display = 'none';
var driverPage = document.getElementById('order-page-driver');
driverPage.style.display = 'none';
var finishPage = document.getElementById('order-page-finish');
finishPage.style.display = 'block';
document.getElementById('page-tab-driver').classList.remove("selected");
document.getElementById('page-tab-finish').classList.add("selected");
document.getElementById('page-tab-location').classList.remove("selected");
}
\ No newline at end of file
public/style.css
+ 1
− 1
View file @ 69397e60
......@@ -276,4 +276,4 @@ table, th, td {
display: flex;
flex-direction: column;
justify-content: center;
}
\ No newline at end of file
}
src/view/order.php
+ 83
− 8
View file @ 69397e60
......@@ -24,7 +24,7 @@
</div>
<div class="row">
<div class="col-2">
<div class="page-tab selected">
<div id="page-tab-location" class="page-tab selected" onclick="showLocationPage()">
<div class="page-tab-image">
<div class="circle">1</div>
</div>
......@@ -34,7 +34,7 @@
</div>
</div>
<div class="col-2">
<div class="page-tab">
<div id="page-tab-driver" class="page-tab" onclick="showDriverPage()">
<div class="page-tab-image">
<div class="circle">2</div>
</div>
......@@ -44,7 +44,7 @@
</div>
</div>
<div class="col-2">
<div class="page-tab">
<div id="page-tab-finish" class="page-tab" onclick="showFinishPage()">
<div class="page-tab-image">
<div class="circle">3</div>
</div>
......@@ -55,14 +55,89 @@
</div>
</div>
<br>
<div>
Ini konten order
<br>
<div id="order-page-location">
<div class="row">
<div class="col-2" style="line-height: 40px">
<span style="padding-left: 30%;">Picking Point</span> <br>
</div>
<div class="col-4" style="line-height: 30px">
<input style="width: 80%;height: 30px;padding-left: 5px;font-size: medium" type="text" name="picking_point" placeholder="Pick up point">
</div>
</div>
<div class="row">
<div class="col-2" style="line-height: 40px">
<span style="padding-left: 30%">Destination</span> <br>
</div>
<div class="col-4" style="line-height: 30px">
<input style="width: 80%; height: 30px;padding-left: 5px;font-size: medium" type="text" name="destination" placeholder="Destination">
</div>
</div>
<div class="row">
<div class="col-2" style="line-height: 40px">
<span style="padding-left: 30%">Preferred Driver</span>
</div>
<div class="col-4">
<input style="width: 80%;height: 30px;padding-left: 5px;font-size: medium" type="text" name="driver" placeholder="(optional)"><br>
</div>
</div>
<br>
<br>
<br>
<div class="row text-center">
<a href="#" class="btn green" style="font-size: 2em" onclick="showDriverPage()">Next</a>
</div>
</div>
<div id="order-page-driver">
<div style="width: 100%; border: 1px solid black; border-radius: 10px;">
<h2 style="margin-left: 10px; margin-top: 0px">PREFERRED DRIVERS: </h2>
<div class="text-center" style="font-size: large; color: #989898; margin: 30px">
Nothing to display :(
</div>
</div>
<br>
<div style="width: 100%; border: 1px solid black; border-radius: 10px;">
<h2 style="margin-left: 10px; margin-top: 0px">OTHER DRIVERS: </h2>
<div style="margin: 0 30px 30px 30px">
<div class="row">
<img src="/img/profile/VGdWZUZ2dlJlUkM5eWpjVDcyQXJoZz09" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">
<p style="font-size: 1.4em; margin:20px 10px 3px 10px">Pokemon Kuning Unyu</p>
<p style="margin-top: 0"><span class="text-orange"><b><i class="icon icon-star"></i> 4.3</b></span> (1002 votes)</p>
<a href="#" class="btn green" style="float: right; margin: 10px">I CHOOSE YOU!</a>
</div>
<div class="row">
<img src="/img/profile/VGdWZUZ2dlJlUkM5eWpjVDcyQXJoZz09" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">
<p style="font-size: 1.4em; margin:20px 10px 3px 10px">Pokemon Kuning Unyu</p>
<p style="margin-top: 0"><span class="text-orange"><b><i class="icon icon-star"></i> 4.3</b></span> (1002 votes)</p>
<a href="#" class="btn green" style="float: right; margin: 10px">I CHOOSE YOU!</a>
</div>
</div>
</div>
</div>
<div id="order-page-finish" style="width: 100%;">
<h2 style="margin-left: 10px; margin-top: 0px">HOW WAS IT? </h2>
<div class="text-center profil" style="padding-bottom: 60px">
<img class="img-circle" src="<?=$user->photo?>"/><br>
<h2>@bombarattata</h2>
<p>Fadhil Imam Kurnia</p>
<i class="icon icon-star"></i>
<i class="icon icon-star"></i>
<i class="icon icon-star"></i>
<i class="icon icon-star"></i>
<i class="icon icon-star"></i>
<br>
<br>
<br>
<textarea style="width: 100%; height: 100px; padding: 10px; resize: none" placeholder="Your comment..." ></textarea>
<a class="btn green" style="float: right; margin: 10px">COMPLETE<br>ORDER</a>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div>
<script type="text/javascript" src="/order.js"></script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment