diff --git a/PrOjek/webapp/src/main/webapp/views/order_view.jsp b/PrOjek/webapp/src/main/webapp/views/order_view.jsp
index 283d9b52c99e8a464c48950a169ac06d5e6860b4..53b505e584cbff555afa828b05b710d4cb027bb5 100644
--- a/PrOjek/webapp/src/main/webapp/views/order_view.jsp
+++ b/PrOjek/webapp/src/main/webapp/views/order_view.jsp
@@ -6,6 +6,7 @@
UserService userService = (UserService) request.getAttribute("userService");
User user = userService.getUser(accessToken);
%>
+
<% if (!(user.getDriver() != null && user.getDriver())) { %>
<div id="make-order">
<div>
@@ -13,21 +14,27 @@
<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>
+ <div class="circle-numbering col-3">1</div>
+ Select Destination
+ </button>
</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>
+ <div class="circle-numbering col-3">2</div>
+ Select a Driver
+ </button>
</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>
- Complete your order
- </button>
+ <div class="circle-numbering col-3">3</div>
+ Chat Driver
+ </button>
+ </li>
+ <li class="col-3">
+ <button id="tab-complete-order" class="taborder button button-plain row button-disable" disabled>
+ <div class="circle-numbering col-3">4</div>
+ Complete your order
+ </button>
</li>
</ul>
</div>
@@ -43,6 +50,7 @@
type="text" size="30" list="suggest-pickingpoint">
<datalist id="suggest-pickingpoint"></datalist>
</label>
+
</div>
<div class="row">
<div class="col-5">
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