Skip to content
Snippets Groups Projects
Commit 1383c608 authored by Irene Edria Devina's avatar Irene Edria Devina
Browse files

char driver

parent 2e9b2650
No related merge requests found
Hide whitespace changes
Inline Side-by-side
TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/chat_driver.jsp
+ 28
− 31
View file @ 1383c608
<%@ include file="/component/header.html"%> <%@ include file="/component/header.html"%>
<%@ include file="/component/nav.html"%> <%@ include file="/component/nav.html"%>
<div class="container"> <div class = "container" ng-app="myApp">
<div class="wrapper row"> <div class="wrapper row">
<div> <div>
<div class="page-title row txt-center height-fit float-container"> <div class="page-title row txt-center height-fit float-container">
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="order-menu"> <div class="order-menu">
<ul class="order-ul"> <ul class="order-ul">
<li class="order-item"> <li class="order-item">
...@@ -30,14 +31,21 @@ ...@@ -30,14 +31,21 @@
</ul> </ul>
</div> </div>
<div id="scrollArea" ng-controller="ScrollController"> <div ng-controller="chatController as chatList">
<a ng-click="gotoBottom()"></a> <div id="scrollArea">
<a id="bottom"></a> <div ng-repeat="chat in chatList.chats">
</div> <p class="chat-bubble">{{chat.text}}</p>
<div class="chat-box"> </div>
<input class="text-input"> </div>
<button class= "send-button" ng-click="text=text">Kirim</button> <div class="chat-box">
<form class="form-chat-box" ng-submit="chatList.addChat()">
<input class="text-input" ng-model="chatList.chatText"
placeholder="Enter a message">
<input class="send-button" type="submit" value="Kirim">
</form>
</div>
</div> </div>
<div class="close-box"> <div class="close-box">
<form action="complete_order" class="chat-input" method="get"> <form action="complete_order" class="chat-input" method="get">
<input type="hidden" name="pickUp" value="${pickup}"> <input type="hidden" name="pickUp" value="${pickup}">
...@@ -46,37 +54,26 @@ ...@@ -46,37 +54,26 @@
<input type="submit" class="close-button" value="CLOSE"> <input type="submit" class="close-button" value="CLOSE">
</form> </form>
</div> </div>
</div> </div>
</div>
</div>
<%@ include file="/component/footer.html"%> <%@ include file="/component/footer.html"%>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script> <script>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
window.onload = toggleActive("nav-order"); window.onload = toggleActive("nav-order");
</script> </script>
<script> <script>
angular.module('anchorScrollExample', []) angular.module('myApp', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll', .controller('chatController', function() {
function($scope, $location, $anchorScroll) { var chatList = this;
$scope.gotoBottom = function() { chatList.chats = [];
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}]);
chat.controller( 'chat', ['Messages', '$scope', function( Messages, $scope) { chatList.addChat = function() {
$scope.messages = []; chatList.chats.push({text:chatList.chatText});
chatList.chatText = '';
};
Messages.receives(function(message) {
$scope.messages.push(message);
}); });
$scope.send = function() {
Messages.send({
data: $scope.textbox
});
};
}]);
</script> </script>
TugasBesar2_2017/WebApp/src/main/webapp/css/app.css
+ 22
− 1
View file @ 1383c608
...@@ -767,6 +767,14 @@ h3{ ...@@ -767,6 +767,14 @@ h3{
align-items: flex-end; align-items: flex-end;
} }
.form-chat-box {
display: flex;
width: 100%;
height: 8vh;
position: relative;
align-items: flex-end;
}
.text-input { .text-input {
height: 7vh; height: 7vh;
...@@ -780,6 +788,8 @@ h3{ ...@@ -780,6 +788,8 @@ h3{
font-size: 12px; font-size: 12px;
} }
.send-button { .send-button {
width: 100px; width: 100px;
height: 40px; height: 40px;
...@@ -821,4 +831,15 @@ h3{ ...@@ -821,4 +831,15 @@ h3{
#bottom { #bottom {
display: block; display: block;
margin-top: 500px; margin-top: 500px;
} }
\ No newline at end of file
.chat-bubble {
display: inline-block;
border: 1px solid #01173d;
border-radius: 8px;
background: #93bcff;
font-size: 1em;
margin: 10px;
outline: none;
padding: 5px;
}
TugasBesar2_2017/WebApp/src/main/webapp/test_chat.jsp 0 → 100644
+ 79
− 0
View file @ 1383c608
<%@ include file="/component/header.html"%>
<%@ include file="/component/nav.html"%>
<div class = "container" ng-app="myApp">
<div class="wrapper row">
<div>
<div class="page-title row txt-center height-fit float-container">
<div class="float-left">
<h1 class="inline-block">MAKE AN ORDER</h1>
</div>
</div>
</div>
<div class="order-menu">
<ul class="order-ul">
<li class="order-item">
<div class="order-number">1</div>
<div class="order-number-desc">Select Destination</div>
</li>
<li class="order-item">
<div class="order-number">2</div>
<div class="order-number-desc">Select a Driver</div>
</li>
<li class="order-item active">
<div class="order-number">3</div>
<div class="order-number-desc"><span>Chat Driver</div>
</li>
<li class="order-item">
<div class="order-number">4</div>
<div class="order-number-desc"><span>Complete your order</div>
</li>
</ul>
</div>
<div ng-controller="chatController as chatList">
<div id="scrollArea">
<div ng-repeat="chat in chatList.chats">
<p class="chat-bubble">{{chat.text}}</p>
</div>
</div>
<div class="chat-box">
<form class="form-chat-box" ng-submit="chatList.addChat()">
<input class="text-input" ng-model="chatList.chatText"
placeholder="Enter a message">
<input class="send-button" type="submit" value="Kirim">
</form>
</div>
</div>
<div class="close-box">
<form action="complete_order" class="chat-input" method="get">
<input type="hidden" name="pickUp" value="${pickup}">
<input type="hidden" name="destination" value="${destination}">
<input type="hidden" name="driverId" value="${driverProfile.getUsername()}">
<input type="submit" class="close-button" value="CLOSE">
</form>
</div>
</div>
</div>
<%@ include file="/component/footer.html"%>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
window.onload = toggleActive("nav-order");
</script>
<script>
angular.module('myApp', [])
.controller('chatController', function() {
var chatList = this;
chatList.chats = [];
chatList.addChat = function() {
chatList.chats.push({text:chatList.chatText});
chatList.chatText = '';
};
});
</script>
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