From 2293c97c2a7e836827aec789c9a0611b8bb07eaa Mon Sep 17 00:00:00 2001
From: aldrichvalentino <aldrich.vh97@gmail.com>
Date: Sat, 7 Oct 2017 08:30:36 +0700
Subject: [PATCH] dashboard splited into 3 pages, need refactoring in other
pages
---
css/dashboard.css | 10 ++---
js/dashboard.js | 27 +++++++++-----
view/header.php | 12 ++++++
view/history.php | 36 ++++++++++++++++++
view/order.php | 95 +++++++++++++++++++++++++++++------------------
view/profile.php | 47 +++++++++++++++++++++++
6 files changed, 175 insertions(+), 52 deletions(-)
create mode 100644 view/header.php
create mode 100644 view/history.php
create mode 100644 view/profile.php
diff --git a/css/dashboard.css b/css/dashboard.css
index 77c198d2..96bf8387 100644
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -7,7 +7,6 @@
display: inline-block;
vertical-align: top;
}
-
.logout-panel {
font-size: initial;
text-align: right;
@@ -17,7 +16,10 @@
width: 100%;
font-size: 0;
}
-
+.menu a {
+ color: #000;
+ text-decoration: none;
+}
.submenu {
background-color: #FFF;
padding: 15px;
@@ -54,10 +56,6 @@
color: #FFF;
}
-.order-wrapper, .history-wrapper {
- display: none;
-}
-
.sub-header {
font-size: 0;
margin: 20px 0;
diff --git a/js/dashboard.js b/js/dashboard.js
index f92b2bea..c173ab70 100644
--- a/js/dashboard.js
+++ b/js/dashboard.js
@@ -1,26 +1,17 @@
function order_clicked() {
document.getElementById('history').classList.remove('selected');
- document.getElementsByClassName('history-wrapper')[0].style.display = 'none';
document.getElementById('profile').classList.remove('selected');
- document.getElementsByClassName('profile-wrapper')[0].style.display = 'none';
document.getElementById('order').classList.add('selected');
- document.getElementsByClassName('order-wrapper')[0].style.display = 'block';
}
function history_clicked() {
document.getElementById('profile').classList.remove('selected');
- document.getElementsByClassName('profile-wrapper')[0].style.display = 'none';
document.getElementById('order').classList.remove('selected');
- document.getElementsByClassName('order-wrapper')[0].style.display = 'none';
document.getElementById('history').classList.add('selected');
- document.getElementsByClassName('history-wrapper')[0].style.display = 'block';
}
function profile_clicked() {
document.getElementById('history').classList.remove('selected');
- document.getElementsByClassName('history-wrapper')[0].style.display = 'none';
document.getElementById('order').classList.remove('selected');
- document.getElementsByClassName('order-wrapper')[0].style.display = 'none';
document.getElementById('profile').classList.add('selected');
- document.getElementsByClassName('profile-wrapper')[0].style.display = 'block';
}
function driverHistoryClicked() {
document.getElementById('previous-order').classList.remove('selected-order');
@@ -29,4 +20,20 @@ function driverHistoryClicked() {
function previousOrderClicked() {
document.getElementById('driver-history').classList.remove('selected-order');
document.getElementById('previous-order').classList.add('selected-order');
-}
\ No newline at end of file
+}
+function getUsername(){
+ var id = sessionid;
+ var xmlhttp = new XMLHttpRequest();
+ xmlhttp.onreadystatechange = function () {
+ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
+ var result = xmlhttp.responseXML;
+ //Get User's data
+ var name = result.getElementsByTagName('name')[0].childNodes[0].nodeValue;
+ document.getElementById('username').innerHTML = 'Hello, ' + name + '!';
+
+ }
+ };
+ xmlhttp.open('GET', '../controller/profile.php?id=' + id, true);
+ xmlhttp.send();
+}
+
diff --git a/view/header.php b/view/header.php
new file mode 100644
index 00000000..3efb0bab
--- /dev/null
+++ b/view/header.php
@@ -0,0 +1,12 @@
+<div class="header">
+ <div class="logo"><img src="../img/logo.png" /></div>
+ <div class="logout-panel">
+ <div id="username"></div>
+ <a href="index.php">Logout</a>
+ </div>
+</div>
+<div class="menu">
+ <a href="order.php?id=<?php echo $_GET['id']; ?>" class="submenu" id="order" onclick="order_clicked()">ORDER</a>
+ <a href="history.php?id=<?php echo $_GET['id']; ?>" class="submenu" id="history" onclick="history_clicked(); getAllTransaction(1)">HISTORY</a>
+ <a href="profile.php?id=<?php echo $_GET['id']; ?>" class="submenu selected" id="profile" onclick="getUserProfile(); profile_clicked();">PROFILE</a>
+</div>
\ No newline at end of file
diff --git a/view/history.php b/view/history.php
new file mode 100644
index 00000000..f70c5a88
--- /dev/null
+++ b/view/history.php
@@ -0,0 +1,36 @@
+<html>
+<head>
+ <title>User Dashboard</title>
+ <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']; ?>";
+ </script>
+ <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="getUsername(); history_clicked(); getAllTransaction(1);">
+<div class="container">
+ <?php include "header.php"; ?>
+
+ <section class="history-wrapper">
+ <div class="sub-header">
+ <div class="sub-header-heading"><h1>TRANSACTION HISTORY</h1></div>
+ </div>
+ <div class="menu">
+ <div class="submenu-two" id="previous-order" onclick="getAllTransaction(0); previousOrderClicked()">
+ MY PREVIOUS ORDER</div>
+ <div class="submenu-two selected-order" id="driver-history" onclick="getAllTransaction(1); driverHistoryClicked()">
+ DRIVER HISTORY</div>
+ </div>
+ <div class="driver-info" id="driver-info"></div>
+ </section>
+
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/view/order.php b/view/order.php
index 8d0a6cd2..1a7d6ffe 100644
--- a/view/order.php
+++ b/view/order.php
@@ -1,43 +1,66 @@
-<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" method="post">
- <div class="first-page">
- <div class="input-box">
- <label>Picking Point</label><input type="text" name="pickup" id="pickup" placeholder="Pickup Point"/>
- </div>
- <div class="input-box">
- <label>Destination</label><input type="text" name="destination" id="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>
+<html>
+<head>
+ <title>User Dashboard</title>
+ <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']; ?>";
+ </script>
+ <script src="../js/dashboard.js"></script>
+ <script src="../js/order.js"></script>
+</head>
+<body onpageshow="getUsername(); order_clicked();">
+<div class="container">
+ <?php include "header.php"; ?>
+
+ <section class="order-wrapper">
+ <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" method="post">
+ <div class="first-page">
+ <div class="input-box">
+ <label>Picking Point</label><input type="text" name="pickup" id="pickup" placeholder="Pickup Point"/>
+ </div>
+ <div class="input-box">
+ <label>Destination</label><input type="text" name="destination" id="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="next-page"><div id="next-page" onclick="nextPage(); getDriver();">NEXT</div></div>
- <div class="second-page"></div>
+ <div class="second-page"></div>
- <div class="third-page">
- <h1>HOW WAS IT?</h1>
- <div class="selected-driver" id="selected-driver"></div>
- <input type="hidden" id="driverId" name="driverId" />
- <input type="hidden" id="userId" name="userId" />
- <input type="radio" id="rating" name="rating" value="1" />1
- <input type="radio" id="rating" name="rating" value="2" />2
- <input type="radio" id="rating" name="rating" value="3" />3
- <input type="radio" id="rating" name="rating" value="4" />4
- <input type="radio" id="rating" name="rating" value="5" />5
- <textarea rows="3" placeholder="Leave your comment here!" name="comment" id="comment"></textarea>
- <div class="submit-button"><input type="submit" value="COMPLETE!" /></div>
+ <div class="third-page">
+ <h1>HOW WAS IT?</h1>
+ <div class="selected-driver" id="selected-driver"></div>
+ <input type="hidden" id="driverId" name="driverId" />
+ <input type="hidden" id="userId" name="userId" />
+ <input type="radio" id="rating" name="rating" value="1" />1
+ <input type="radio" id="rating" name="rating" value="2" />2
+ <input type="radio" id="rating" name="rating" value="3" />3
+ <input type="radio" id="rating" name="rating" value="4" />4
+ <input type="radio" id="rating" name="rating" value="5" />5
+ <textarea rows="3" placeholder="Leave your comment here!" name="comment" id="comment"></textarea>
+ <div class="submit-button"><input type="submit" value="COMPLETE!" /></div>
+ </div>
+ </form>
</div>
+ </section>
+</div>
+</body>
+</html>
- </form>
-</div>
\ No newline at end of file
diff --git a/view/profile.php b/view/profile.php
new file mode 100644
index 00000000..5834e5be
--- /dev/null
+++ b/view/profile.php
@@ -0,0 +1,47 @@
+<html>
+<head>
+ <title>User Dashboard</title>
+ <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']; ?>";
+ </script>
+ <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(); profile_clicked();">
+<div class="container">
+ <?php include "header.php"; ?>
+
+ <section class="profile-wrapper">
+ <div class="sub-header">
+ <div class="sub-header-heading"><h1>MY PROFILE</h1></div>
+ <div class="edit-icon">
+ <a href="../view/edit-profile.php?id=<?php echo $_GET['id'] ?>"><img src="../img/pencil.png" /></a>
+ </div>
+ </div>
+ <div class="user-profile">
+ <div id="user-image"></div>
+ <h1 id="profile-username"></h1>
+ <div id="name"></div>
+ <div id="driver"></div>
+ <div id="driver-stats"></div>
+ <img src="../img/mail.png" /><div id="email"></div><br />
+ <img src="../img/phone.png" /><div id="phone"></div><br />
+ </div>
+ <div class="sub-header" id="preferred-location">
+ <div class="sub-header-heading"><h1>PREFERRED LOCATION</h1></div>
+ <div class="edit-icon">
+ <a href="../view/edit-prefered-locations.php"><img src="../img/pencil.png" /></a>
+ </div>
+ </div>
+ <div class="user-location"><ul id="user-location"></ul></div>
+ </section>
+</div>
+</body>
+</html>
\ No newline at end of file
--
GitLab