diff --git a/controller/orderController.php b/controller/orderController.php
new file mode 100644
index 0000000000000000000000000000000000000000..8196bd572c5539fdbcc6d690d27ffa849e1f73b3
--- /dev/null
+++ b/controller/orderController.php
@@ -0,0 +1,36 @@
+<?php
+
+include "../model/user.php";
+
+if(isset($_GET['drivername']) && isset($_GET['id'])){
+ $userId = $_GET['id'];
+ $driverName = $_GET['drivername'];
+ $user = new User();
+ $result = $user->getDriver($userId);
+ $txt = '<div class="driver-box"><h1>PREFERRED DRIVERS</h1>';
+ //Process to find the driver
+ while($row = mysqli_fetch_array($result)){
+ if($row['name'] == $driverName){
+ $txt = $txt . '<div class="single-driver"><img src="../img/'. $row['image'] .'" /><div class="driver-bio">
+ <h2 class="driver-name">'. $row['name'].'</h2><div class="driver-rating"></div></div>
+ <div class="button-choose"><div onclick="chooseDriver('. $row['id'] .')">I CHOOSE YOU!</div></div></div>';
+ }
+ }
+ //Process if driver name is not found
+ if(strlen($txt) == 50){
+ $txt = $txt . '<div class="error-message">Nothing To Display :(</div>';
+ }
+ $txt = $txt . '</div>';
+ $txt = $txt . '<div class="driver-box"><h1>OTHER DRIVERS</h1>';
+ //Process other drivers
+ $result = $user->getDriver($userId);
+ while($row = mysqli_fetch_array($result)){
+ if($row['name'] !== $driverName){
+ $txt = $txt . '<div class="single-driver"><img src="../img/'. $row['image'] .'" /><div class="driver-bio">
+ <h2 class="driver-name">'. $row['name'].'</h2><div class="driver-rating"></div></div>
+ <div class="button-choose"><div onclick="chooseDriver('. $row['id'] .')">I CHOOSE YOU!</div></div></div>';
+ }
+ }
+ $txt = $txt . '</div>';
+ echo $txt;
+}
diff --git a/css/order.css b/css/order.css
new file mode 100644
index 0000000000000000000000000000000000000000..fe6cde32e953b23ee5e164a3d7ed5fb0803166ec
--- /dev/null
+++ b/css/order.css
@@ -0,0 +1,109 @@
+.order-progress {
+ text-align: center;
+}
+.select-destination, .select-driver, .complete-order {
+ display: inline-block;
+ width: 30%;
+ border: 1px solid #000;
+ height: auto;
+ margin: 0 8px;
+ padding: 10px;
+ box-sizing: border-box;
+}
+.counter {
+ margin-right: 15px;
+ display: inline-block;
+ border-radius: 1000px;
+ background-color: #DDDDDD;
+ height: 20px;
+ width: 20px;
+ padding: 8px;
+ vertical-align: middle;
+}
+.order-count {
+ background-color: yellow;
+}
+.first-page {
+ text-align: center;
+ margin: 20px 0 50px 0;
+ font-size: 1.2rem;
+}
+.input-box {
+ display: inline-block;
+ text-align: initial;
+ width: 80%;
+ font-weight: bold;
+ margin: 10px 0;
+}
+.input-box label {
+ width: 50%;
+ display: inline-block;
+}
+.input-box input {
+ width: 50%;
+ font-size: 1.2rem;
+}
+.next-page {
+ width: 100%;
+ text-align: center;
+}
+.next-page div {
+ display: inline-block;
+ background-color: #82D800;
+ padding: 8px 30px;
+ font-size: 2rem;
+ border-radius: 10px;
+ border: 1px solid #000;
+ cursor: pointer;
+}
+.second-page, .third-page {
+ display: none;
+}
+.driver-box {
+ margin: 15px 0;
+ padding: 10px;
+ border: 1px solid #000;
+ border-radius: 15px;
+}
+.driver-box h1 {
+ margin: 8px 0;
+}
+.error-message {
+ margin: 20px 0;
+ width: 100%;
+ text-align: center;
+ font-size: 1.5rem;
+ color: #999999;
+}
+.single-driver {
+ margin: 20px 0;
+ box-sizing: border-box;
+}
+.single-driver img {
+ display: inline-block;
+ width: 20%;
+ vertical-align: top;
+}
+.driver-bio {
+ display: inline-block;
+ width: 49%;
+ box-sizing: border-box;
+ padding: 10px;
+}
+.driver-name {
+ display: inline-block;
+ margin: 0;
+}
+.button-choose {
+ vertical-align: bottom;
+ display: inline-block;
+ width: 30%;
+}
+.button-choose div{
+ cursor: pointer;
+ padding: 5px 20px;
+ float: right;
+ border: 1px solid #000;
+ background-color: #82D800;
+ border-radius: 8px;
+}
\ No newline at end of file
diff --git a/js/order.js b/js/order.js
new file mode 100644
index 0000000000000000000000000000000000000000..c4aa4177d1e864edfd0fc2bc572b138b706272b0
--- /dev/null
+++ b/js/order.js
@@ -0,0 +1,37 @@
+function nextPage () {
+ document.getElementsByClassName('first-page')[0].style.display = 'none';
+ document.getElementsByClassName('second-page')[0].style.display = 'block';
+ document.getElementsByClassName('select-destination')[0].classList.remove('order-count');
+ document.getElementsByClassName('select-driver')[0].classList.add('order-count');
+ document.getElementsByClassName('next-page')[0].style.display = 'none';
+}
+function renderSingleDriver (image,name,rating) {
+ var imageElement = document.createElement('img');
+ imageElement.setAttribute('src','../img/'+'image');
+
+ var nameElement = document.createElement('div');
+ nameElement.classList.add('driver-name');
+ nameElement.innerHTML = name;
+
+ var result = document.createElement('div');
+ result.appendChild(imageElement);
+ result.appendChild(nameElement);
+ return result;
+}
+function getDriver() {
+ var id = sessionid;
+ var xmlhttp = new XMLHttpRequest();
+ //Check if user inserted preferred driver's name
+ var drivername = (document.getElementById('preferred-driver').value) ? document.getElementById('preferred-driver').value : null;
+ xmlhttp.onreadystatechange = function () {
+ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
+ var drivers = this.responseText;
+ document.getElementsByClassName('second-page')[0].innerHTML = drivers;
+ }
+ };
+ xmlhttp.open('GET','../controller/orderController.php?drivername='+drivername+'&id='+sessionid,true);
+ xmlhttp.send();
+}
+function chooseDriver(id){
+ console.log(id);
+}
\ No newline at end of file
diff --git a/model/user.php b/model/user.php
index 8bae331a751143a121677e5e1f7c2c9606f24bd5..37aa15614152d38108725537a76c95dfb8e64e11 100644
--- a/model/user.php
+++ b/model/user.php
@@ -75,11 +75,14 @@ class User {
mysqli_close($con);
return $result;
}
-
- function getDriver(){
+ /**
+ get drivers whose id is not the user's id
+ * prevent order with self
+ */
+ function getDriver($id){
$con = mysqli_connect('localhost','root','','projekers');
mysqli_select_db($con,'projekers');
- $query = "SELECT id,name,image FROM user WHERE isDriver=1";
+ $query = "SELECT id,name,image FROM user WHERE isDriver=1 AND not id=" . $id;
$result = mysqli_query($con,$query);
mysqli_close($con);
return $result;
diff --git a/view/dashboard.php b/view/dashboard.php
index 83f1f977c0d8a54a56720b3fa9d0c854ff927cf9..5e84fa02fab91437c1a53065e75a58e818f9c0a8 100644
--- a/view/dashboard.php
+++ b/view/dashboard.php
@@ -10,6 +10,7 @@
<link href="../css/primary.css" type="text/css" rel="stylesheet" />
<link href="../css/dashboard.css" type="text/css" rel="stylesheet" />
<link href="../css/history.css" type="text/css" rel="stylesheet" />
+ <link href="../css/order.css" type="text/css" rel="stylesheet" />
<script>
//send session id to JS files
var sessionid = "<?php echo $_GET['id']; ?>";
@@ -17,6 +18,7 @@
<script src="../js/dashboard.js"></script>
<script src="../js/profile.js"></script>
<script src="../js/history.js"></script>
+ <script src="../js/order.js"></script>
</head>
<body onpageshow="getUserProfile()">
<div class="container">
@@ -34,10 +36,10 @@
</div>
<section class="order-wrapper">
+ <?php include "order.php"; ?>
</section>
<section class="history-wrapper">
- <div id="content"></div>
<div class="sub-header">
<div class="sub-header-heading"><h1>TRANSACTION HISTORY</h1></div>
</div>
diff --git a/view/order.php b/view/order.php
new file mode 100644
index 0000000000000000000000000000000000000000..4f03adc1078f4a1245252df5ce4ec44d0de4412f
--- /dev/null
+++ b/view/order.php
@@ -0,0 +1,37 @@
+<div class="sub-header">
+ <div class="sub-header-heading"><h1>MAKE AN ORDER</h1></div>
+</div>
+<div class="order-progress">
+ <div class="select-destination order-count"><div class="counter">1</div>Select Destination</div>
+ <div class="select-driver"><div class="counter">2</div>Select Driver</div>
+ <div class="complete-order"><div class="counter">3</div>Complete Order</div>
+</div>
+<div>
+ <form action="../controller/orderController.php">
+ <div class="first-page">
+ <div class="input-box">
+ <label>Picking Point</label><input type="text" name="pickup" placeholder="Pickup Point"/>
+ </div>
+ <div class="input-box">
+ <label>Destination</label><input type="text" name="destination" placeholder="Destination Point"/>
+ </div>
+ <div class="input-box">
+ <label>Preferred Driver</label><input type="text" name="preferred-driver" id="preferred-driver" placeholder="(optional)" value=""/>
+ </div>
+ </div>
+
+ <div class="next-page"><div id="next-page" onclick="nextPage(); getDriver();">NEXT</div></div>
+
+ <div class="second-page">
+
+ </div>
+
+ <div class="third-page">
+ <h1>HOW WAS IT?</h1>
+ <input type="radio" />
+ <input type="text" />
+ </div>
+
+
+ </form>
+</div>
\ No newline at end of file