diff --git a/PrOjek/webapp/src/main/webapp/views/order_view.jsp b/PrOjek/webapp/src/main/webapp/views/order_view.jsp
index 6869c50370c2ce203bed3f7ab3f1fdb14a3eb1b2..eaa1b69598b93dff21bf9cabc3f555cf2a232a3d 100644
--- a/PrOjek/webapp/src/main/webapp/views/order_view.jsp
+++ b/PrOjek/webapp/src/main/webapp/views/order_view.jsp
@@ -1,28 +1,29 @@
<%@ page import="java.util.Date" %>
-<%@ page import="com.jauharteam.ojek.ojek.UserService" %>
-<%@ page import="com.ojek.common.User" %>
-<%
+ <%@ page import="com.jauharteam.ojek.ojek.UserService" %>
+ <%@ page import="com.ojek.common.User" %>
+ <%
String accessToken = (String) request.getAttribute("accessToken");
UserService userService = (UserService) request.getAttribute("userService");
User user = userService.getUser(accessToken);
%>
- <div>
- <h3>MAKE AN ORDER</h3>
- <ul class="row">
- <li class="col-3">
- <button id="tab-select-destination" class="taborder button button-progress-now row button-disable" disabled>
+ <div id="make-order">
+ <div>
+ <h3>MAKE AN ORDER</h3>
+ <ul class="row">
+ <li class="col-4">
+ <button id="tab-select-destination" class="taborder button button-progress-now row button-disable" disabled>
<div class="circle-numbering col-3">1</div>
Select Destination
</button>
- </li>
- <li class="col-3">
- <button id="tab-select-driver" class="taborder button button-plain row button-disable" disabled>
+ </li>
+ <li class="col-4">
+ <button id="tab-select-driver" class="taborder button button-plain row button-disable" disabled>
<div class="circle-numbering col-3">2</div>
Select a Driver
</button>
- </li>
- <li class="col-3">
- <button id="tab-chat-with-driver" class="taborder button button-plain row button-disable" disabled>
+ </li>
+ <li class="col-4">
+ <button id="tab-complete-order" class="taborder button button-plain row button-disable" disabled>
<div class="circle-numbering col-3">3</div>
Chat Driver
</button>
@@ -32,139 +33,161 @@
<div class="circle-numbering col-3">4</div>
Complete your order
</button>
- </li>
- </ul>
- </div>
- <form action="" method="post" accept-charset="utf-8">
- <div class="container" id="select-destination" style="display: block">
- <div class="form-order-default">
- <div class="row">
- <div class="col-5">
- Picking Point
- </div>
- <label>
+ </li>
+ </ul>
+ </div>
+ <form action="" method="post" accept-charset="utf-8">
+ <div class="container" id="select-destination" style="display: block">
+ <div class="form-order-default">
+ <div class="row">
+ <div class="col-5">
+ Picking Point
+ </div>
+ <label>
<input class="col-7 input-standard" autocorrect="off" autocomplete="off" name="pickingpoint" placeholder="Fill A Place"
id="pickingpoint" type="text" size="30" list="suggest-pickingpoint">
<datalist id="suggest-pickingpoint"></datalist>
</label>
- </div>
- <div class="row">
- <div class="col-5">
- Destination
- </div>
- <label>
+ </div>
+ <div class="row">
+ <div class="col-5">
+ Destination
+ </div>
+ <label>
<input class="col-7 input-standard" autocorrect="off" autocomplete="off" name="destination" placeholder="Fill A Place"
id="destination" type="text" size="30" list="suggest-destination">
<datalist id="suggest-destination"></datalist>
</label>
- </div>
- <div class="row">
- <div class="col-5">
- Preferred Driver
- </div>
- <input class="col-7 input-standard" name="preferreddriver" placeholder="(optional)"
- id="preferreddriver" type="text" size="30">
- </div>
- <div style="text-align: center; margin: 15px 0px;">
- <div class="button button-success" onclick="grabDriver()">NEXT!</div>
- </div>
- <div class="row warning-box" id="warning-msg-loc" style='display: none;'>
- </div>
- </div>
- </div>
- <div class="form-order" id="select-driver" style="display: none">
- <div class="container rounded-border" id="thereprefdriver">
- <h2>PREFERRED DRIVERS:</h2>
- <div id="prefer-driver">
- <!-- display preferred driver after button next clicked-->
- </div>
- </div>
- <div class="container rounded-border">
- <h2>OTHER DRIVERS:</h2>
- <div id="other-driver">
- <!-- display drivers w/ our picking point as preferred loc after button next clicked-->
+ </div>
+ <div class="row">
+ <div class="col-5">
+ Preferred Driver
+ </div>
+ <input class="col-7 input-standard" name="preferreddriver" placeholder="(optional)" id="preferreddriver" type="text" size="30">
+ </div>
+ <div style="text-align: center; margin: 15px 0px;">
+ <div class="button button-success" onclick="grabDriver()">NEXT!</div>
+ </div>
+ <div class="row warning-box" id="warning-msg-loc" style='display: none;'>
+ </div>
+ </div>
</div>
- </div>
- <div id="modalverifyorder" class="modalview">
- <!-- Modal content -->
- <div class="modal-content">
- <div class="modal-text">Are you sure?</div>
- <div class="modal-options">
- <a class="button button-fail" id="no-order">NO</a>
- <a class="button button-success" id="yes-order">YES</a>
- </div>
- </div>
- </div>
- </div>
-
- <div class="form-order" id="chat-with-driver" style="display: none">
-
- </div>
-
- <div class="form-order" id="complete-order" style="display: none">
- <h3>HOW WAS IT?</h3>
- <div class="row">
- <div class="col-4">
+ <div class="form-order" id="select-driver" style="display: none">
+ <div class="container rounded-border" id="thereprefdriver">
+ <h2>PREFERRED DRIVERS:</h2>
+ <div id="prefer-driver">
+ <!-- display preferred driver after button next clicked-->
+ </div>
+ </div>
+ <div class="container rounded-border">
+ <h2>OTHER DRIVERS:</h2>
+ <div id="other-driver">
+ <!-- display drivers w/ our picking point as preferred loc after button next clicked-->
+ </div>
+ </div>
+ <div id="modalverifyorder" class="modalview">
+ <!-- Modal content -->
+ <div class="modal-content">
+ <div class="modal-text">Are you sure?</div>
+ <div class="modal-options">
+ <a class="button button-fail" id="no-order">NO</a>
+ <a class="button button-success" id="yes-order">YES</a>
+ </div>
+ </div>
+ </div>
</div>
- <div class="col-4">
+ <div class="form-order" id="complete-order" style="display: none">
+ <h3>HOW WAS IT?</h3>
<div class="row">
- <div class="picture center profile-picture" id="driver-pict">
- <img src="assets/images/pikachu.png" alt="Pikachuu">
+ <div class="col-4">
+ </div>
+ <div class="col-4">
+ <div class="row">
+ <div class="picture center profile-picture" id="driver-pict">
+ <img src="assets/images/pikachu.png" alt="Pikachuu">
+ </div>
+ </div>
+ </div>
+ <div class="col-4">
</div>
</div>
- </div>
- <div class="col-4">
- </div>
- </div>
- <div class="row profile-info">
- <div class="row">
- <span class="username" id="driver-username">
+ <div class="row profile-info">
+ <div class="row">
+ <span class="username" id="driver-username">
boom
</span>
- </div>
- <div class="row">
- <span class="full-name" id="driver-fullname">
+ </div>
+ <div class="row">
+ <span class="full-name" id="driver-fullname">
boom
</span>
- </div>
- </div>
- <div class="container">
- <div class="container">
- <ul class="rating-list row">
- <li class="rating-element" id="rating-1" onmouseover="changeTo(this)" onmouseout="changeBack()" onclick="rateThis(this)"><i class="material-icons">star_rate</i></li>
- <li class="rating-element" id="rating-2" onmouseover="changeTo(this)" onmouseout="changeBack()" onclick="rateThis(this)"><i class="material-icons">star_rate</i></li>
- <li class="rating-element" id="rating-3" onmouseover="changeTo(this)" onmouseout="changeBack()" onclick="rateThis(this)"><i class="material-icons">star_rate</i></li>
- <li class="rating-element" id="rating-4" onmouseover="changeTo(this)" onmouseout="changeBack()" onclick="rateThis(this)"><i class="material-icons">star_rate</i></li>
- <li class="rating-element" id="rating-5" onmouseover="changeTo(this)" onmouseout="changeBack()" onclick="rateThis(this)"><i class="material-icons">star_rate</i></li>
- </ul>
+ </div>
+ </div>
+ <div class="container">
+ <div class="container">
+ <ul class="rating-list row">
+ <li class="rating-element" id="rating-1" onmouseover="changeTo(this)" onmouseout="changeBack()" onclick="rateThis(this)"><i class="material-icons">star_rate</i></li>
+ <li class="rating-element" id="rating-2" onmouseover="changeTo(this)" onmouseout="changeBack()" onclick="rateThis(this)"><i class="material-icons">star_rate</i></li>
+ <li class="rating-element" id="rating-3" onmouseover="changeTo(this)" onmouseout="changeBack()" onclick="rateThis(this)"><i class="material-icons">star_rate</i></li>
+ <li class="rating-element" id="rating-4" onmouseover="changeTo(this)" onmouseout="changeBack()" onclick="rateThis(this)"><i class="material-icons">star_rate</i></li>
+ <li class="rating-element" id="rating-5" onmouseover="changeTo(this)" onmouseout="changeBack()" onclick="rateThis(this)"><i class="material-icons">star_rate</i></li>
+ </ul>
+ </div>
+ <div class="container">
+ <textarea rows="4" cols="50" id="comment-area" placeholder="Your comment..."></textarea>
+ </div>
+ <div class="container row">
+ <a class="button button-success" id="submit-order" type="submit" name="submit" style="float: right;">COMPLETE ORDER</a>
+ </div>
+ <div class="row warning-box" id="warning-msg-submit" style='display: none;'>
+ </div>
+ </div>
+ </div>
+ </form>
+ <div id="modalsubmit" class="modalview">
+ <!-- Modal content -->
+ <div class="modal-content">
+ <div class="modal-text">ORDER SUCCESS!!!! YEAY!!!!</div>
+ <div class="modal-options">
+ <a class="button button-success" id="verifysubmit">OK</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="find-order">
+ <h3>LOOKING FOR AN ORDER</h3>
+ <!-- page 1-->
+ <div class="row">
+ <div class="col-4"></div>
+ <div class="col-4 button button-success">FIND ORDER</div>
+ <div class="col-4"></div>
+ </div>
+ <!-- page 2-->
+ <div class="row">
+ <div class="row align-center">
+ <h4>Finding Order<span id="dot-loading">...</span></h4>
</div>
- <div class="container">
- <textarea rows="4" cols="50" id="comment-area" placeholder="Your comment..."></textarea>
- </div>
- <div class="container row">
- <a class="button button-success" id="submit-order" type="submit" name="submit" style="float: right;">COMPLETE ORDER</a>
- </div>
- <div class="row warning-box" id="warning-msg-submit" style='display: none;'>
+ <div class="col-4"></div>
+ <div class="col-4 button button-fail">CANCEL</div>
+ <div class="col-4"></div>
+ </div>
+ <!-- page 3-->
+ <div class="row">
+ <div class="row align-center">
+ <h4>Got an Order</h4>
+ </div>
+ <div class="row align-center">
+ <h5>Name here</h5>
</div>
- </div>
+ </div>
</div>
- </form>
- <div id="modalsubmit" class="modalview">
- <!-- Modal content -->
- <div class="modal-content">
- <div class="modal-text">ORDER SUCCESS!!!! YEAY!!!!</div>
- <div class="modal-options">
- <a class="button button-success" id="verifysubmit" >OK</a>
- </div>
- </div>
- </div>
- <script>
- var idCustomer = <%= user.getId() %>
- </script>
- <% long ts = (new Date()).getTime(); //Used to prevent JS/CSS caching %>
- <script type="text/javascript" src="./resources/js/order.js?<%=ts%>"></script>
- <script type="text/javascript" src="./resources/js/ajax.js?<%= ts %>"></script>
+ <script>
+ var idCustomer = <%= user.getId() %>
+ </script>
+ <% long ts = (new Date()).getTime(); //Used to prevent JS/CSS caching %>
+ <script type="text/javascript" src="./resources/js/order.js?<%=ts%>"></script>
+ <script type="text/javascript" src="./resources/js/ajax.js?<%= ts %>"></script>
- <%--<script type="text/javascript" src="assets/js/ajax.js"></script>--%>
- <%--<script type="text/javascript" src="assets/js/order.js"></script>--%>
\ No newline at end of file
+ <%--<script type="text/javascript" src="assets/js/ajax.js"></script>--%>
+ <%--<script type="text/javascript" src="assets/js/order.js"></script>--%>
\ No newline at end of file
diff --git a/views/chat.html b/views/chat.html
new file mode 100644
index 0000000000000000000000000000000000000000..fd7fdb8c47b095f62329d2593fe2e57d546eee30
--- /dev/null
+++ b/views/chat.html
@@ -0,0 +1,52 @@
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="chatstyle.css">
+<script src="//cdn.bootcss.com/angular.js/1.4.3/angular.min.js"></script>
+<div class="container">
+ <div class="row">
+
+ <div class="col-sm-8">
+ <div class="chatbody">
+ <div class="panel panel-primary">
+ <div class="panel-body msg_container_base">
+
+ <div class="row msg_container base_sent">
+ <div class="col-md-10 col-xs-10">
+ <div class="messages msg_sent">
+ <p>that mongodb thing looks good, huh?
+ tiny master db, and huge document store</p>
+ <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
+ </div>
+ </div>
+ <div class="col-md-2 col-xs-2 avatar">
+ <!-- <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> -->
+ </div>
+ </div>
+
+ <div class="row msg_container base_receive">
+ <div class="col-md-2 col-xs-2 avatar">
+ <!-- <img src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive "> -->
+ </div>
+ <div class="col-md-10 col-xs-10">
+ <div class="messages msg_receive">
+ <p>that mongodb thing looks good, huh?
+ tiny master db, and huge document store</p>
+ <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="panel-footer">
+ <div class="input-group">
+ <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." style="width:85%" />
+ <span class="input-group-btn">
+ <button class="btn btn-primary btn-sm" id="btn-chat"><i class="fa fa-send fa-1x" aria-hidden="true"></i></button>
+ </span>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/views/chatstyle.css b/views/chatstyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..809d5d07dd09c8cb23759c77dc2e24f236b12171
--- /dev/null
+++ b/views/chatstyle.css
@@ -0,0 +1,165 @@
+.chatperson{
+ display: block;
+ border-bottom: 1px solid #eee;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ overflow: hidden;
+ margin-bottom: 15px;
+ padding: 4px;
+}
+.chatperson:hover{
+ text-decoration: none;
+ border-bottom: 1px solid orange;
+}
+.namechat {
+ display: inline-block;
+ vertical-align: middle;
+}
+.chatperson .chatimg img{
+ width: 40px;
+ height: 40px;
+ background-image: url('http://i.imgur.com/JqEuJ6t.png');
+}
+.chatperson .pname{
+ font-size: 18px;
+ padding-left: 5px;
+}
+.chatperson .lastmsg{
+ font-size: 12px;
+ padding-left: 5px;
+ color: #ccc;
+}
+
+body{
+ height:400px;
+ position: fixed;
+ bottom: 0;
+}
+.col-md-2, .col-md-10{
+ padding:0;
+}
+.panel{
+ margin-bottom: 0px;
+}
+.chat-window{
+ bottom:0;
+ position:fixed;
+ float:right;
+ margin-left:10px;
+}
+.chat-window > div > .panel{
+ border-radius: 5px 5px 0 0;
+}
+.icon_minim{
+ padding:2px 10px;
+}
+.msg_container_base{
+ background: #e5e5e5;
+ margin: 0;
+ padding: 0 10px 10px;
+ max-height:300px;
+ overflow-x:hidden;
+}
+.top-bar {
+ background: #666;
+ color: white;
+ padding: 10px;
+ position: relative;
+ overflow: hidden;
+}
+.msg_receive{
+ padding-left:0;
+ margin-left:0;
+}
+.msg_sent{
+ padding-bottom:20px !important;
+ margin-right:0;
+}
+.messages {
+ background: white;
+ padding: 10px;
+ border-radius: 2px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+ max-width:100%;
+}
+.messages > p {
+ font-size: 13px;
+ margin: 0 0 0.2rem 0;
+ }
+.messages > time {
+ font-size: 11px;
+ color: #ccc;
+}
+.msg_container {
+ padding: 10px;
+ overflow: hidden;
+ display: flex;
+}
+img {
+ display: block;
+ width: 100%;
+}
+.avatar {
+ position: relative;
+ width:50px;
+}
+.base_receive > .avatar:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 0;
+ height: 0;
+ border: 5px solid #FFF;
+ border-left-color: rgba(0, 0, 0, 0);
+ border-bottom-color: rgba(0, 0, 0, 0);
+}
+
+.base_sent {
+ justify-content: flex-end;
+ align-items: flex-end;
+}
+.base_sent > .avatar:after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ border: 5px solid white;
+ border-right-color: transparent;
+ border-top-color: transparent;
+ box-shadow: 1px 1px 2px rgba(black, 0.2); // not quite perfect but close
+}
+
+.msg_sent > time{
+ float: right;
+}
+
+
+
+.msg_container_base::-webkit-scrollbar-track
+{
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ background-color: #F5F5F5;
+}
+
+.msg_container_base::-webkit-scrollbar
+{
+ width: 12px;
+ background-color: #F5F5F5;
+}
+
+.msg_container_base::-webkit-scrollbar-thumb
+{
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+ background-color: #555;
+}
+
+.btn-group.dropup{
+ position:fixed;
+ left:0px;
+ bottom:0;
+}
\ No newline at end of file