fix chatservice

chatservice/app.js

@@ -4,6 +4,8 @@ const admin = require('firebase-admin');
 const serviceAccount = require('./wbd3-fap.json');
 const cookieParser = require('cookie-parser');
 const chat = require('./routes/chatRoutes');
+const driver = require('./routes/driverRoutes');
+const user = require('./routes/userRoutes');
 const bodyParser = require('body-parser');
 const mongoose = require('mongoose');
 const dbURL = 'mongodb://localhost:27017/wbd3fap';
@@ -14,6 +16,11 @@ const app = express();
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended : true}));
 app.use(cookieParser());
+app.use((req, res, next) => {
+  res.header("Access-Control-Allow-Origin", "*");
+  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+  next();
+});
 app.set('view engine', 'html');
 app.use(express.static(__dirname + '/public'));
 app.use(express.static(__dirname + '/views'));
@@ -22,6 +29,8 @@ app.get('/', (req, res) => {
 });
 
 app.use('/chat', chat);
+app.use('/driver', driver);
+app.use('/user', user);
 
 // app.listen(PORT, (err) => {
 //   if (err) return console.error(err);

chatservice/models/Chat.js

@@ -2,10 +2,10 @@ const mongoose = require('mongoose');
 
 const dbURL = 'mongodb://localhost:27017/wbd3fap';
 const chatSchema = new mongoose.Schema({
-  customer : { type : String, unique : true, required : true},
-  driver : { type : String, unique : true, required : true},
+  customer : { type : Number, unique : true, required : true},
+  driver : { type : Number, unique : true, required : true},
   content : [{
-    sender : { type : String, required : true},
+    sender : { type : Number, required : true},
     message : { type : String, required : true}
   }]
 });

chatservice/models/Driver.js

@@ -2,7 +2,7 @@ const mongoose = require('mongoose');
 
 const dbURL = 'mongodb://localhost:27017/wbd3fap';
 const driverSchema = new mongoose.Schema({
-  data : [{type : String}]
+  data : [{type : Number}]
 });
 
 const Driver = mongoose.model('Driver', driverSchema);

chatservice/models/User.js

 const mongoose = require('mongoose');
 
 const userSchema = new mongoose.Schema({
-  username : String,
-  token : String
+  userId : {type : Number, required : true, unique : true},
+  token : {type : String, required : true}
 });
 
 

chatservice/routes/chatRoutes.js

@@ -11,7 +11,7 @@ const User = require('../models/User');
 
 
 chatRouter.route('/').get((req, res) => {
-  res.setHeader('Allow-Control-Access-Origin', '*');
+  // res.setHeader('Allow-Control-Access-Origin', '*');
   const uCustomer = req.query.customer;
   const uDriver = req.query.driver;
   console.log("masuk");
@@ -27,13 +27,13 @@ chatRouter.route('/').get((req, res) => {
 });
 
 chatRouter.route('/send').post((req, res) => {
-  res.setHeader('Allow-Control-Access-Origin', '*');
+  // res.setHeader('Allow-Control-Access-Origin', '*');
   const data = {};
   console.log(req.body);
-  data.uCustomer = req.body.customer;
-  data.uDriver = req.body.driver;
+  data.uCustomer = parseInt(req.body.customer);
+  data.uDriver = parseInt(req.body.driver);
   data.chat = {
-    sender : req.body.chat.sender,
+    sender : parseInt(req.body.chat.sender),
     message : req.body.chat.message
   }
   const recvUser = req.body.chat.sender == data.uCustomer ? data.uDriver : data.uCustomer;
@@ -41,75 +41,95 @@ chatRouter.route('/send').post((req, res) => {
   // console.log(recvToken);
   const payload = {
     "notification" : {
-     "title": "Notif Masuk",
+     "title": req.body.chat.title,
      "body": req.body.chat.message,
    }
   }
-  console.log(recvUser);
+  console.log(typeof(recvUser));
 
-  User.findOne({ username : recvUser }, (err, result) => {
+  User.findOne({ userId : recvUser }, (err, result) => {
     if (err) return console.error(err);
-    console.log(result);
+    console.log("hasil query" + result);
     const recvToken = result.token;
     console.log(recvToken);
-    messaging.sendToDevice(recvToken, payload)
-      .then((response) => {
-        console.log(response);
-        async.waterfall([
-          (flowCallback) => {
-            Chat.find({ customer : data.uCustomer, driver : data.uDriver}, (err, result) => {
-              if (err) return flowCallback(err);
-              result.length > 0 ? data.exist = 1 : data.exist = 0;
-              return flowCallback();
-            });
-          },
-          (flowCallback) => {
-            if (data.exist == 1) {
-              Chat.update({ customer : data.uCustomer, driver : data.uDriver},
-              { '$push' : { content : data.chat}}, (err, result) => {
+    if (req.body.chat.title == "order" || req.body.chat.title == "complete") {
+      messaging.sendToDevice(recvToken, payload)
+        .then((res) => {
+          console.log("order terkirim");
+          return res.json({
+            url : '/chat/save',
+            desc : 'send chat',
+            status : 200,
+            data : {}
+          });
+        }).catch((err) => {
+          return res.json({
+            url : '/chat/save',
+            desc : 'send chat',
+            status : 500,
+            data : err
+          });
+        })
+    } else {
+      messaging.sendToDevice(recvToken, payload)
+        .then((response) => {
+          console.log(response);
+          async.waterfall([
+            (flowCallback) => {
+              Chat.find({ customer : data.uCustomer, driver : data.uDriver}, (err, result) => {
                 if (err) return flowCallback(err);
+                result.length > 0 ? data.exist = 1 : data.exist = 0;
                 return flowCallback();
               });
+            },
+            (flowCallback) => {
+              if (data.exist == 1) {
+                Chat.update({ customer : data.uCustomer, driver : data.uDriver},
+                { '$push' : { content : data.chat}}, (err, result) => {
+                  if (err) return flowCallback(err);
+                  return flowCallback();
+                });
+              } else {
+                Chat.create({
+                  customer : data.uCustomer,
+                  driver : data.uDriver,
+                  content : [data.chat]
+                }, (err, result) => {
+                  if (err) return flowCallback(err);
+                  return flowCallback();
+                });
+              }
+            }
+          ], (err, result) => {
+            if (err) {
+              console.error(err);
+              return res.json({
+                url : '/chat/save',
+                desc : 'save chat history',
+                status : 500,
+                data : {}
+              });
             } else {
-              Chat.create({
-                customer : data.uCustomer,
-                driver : data.uDriver,
-                content : [data.chat]
-              }, (err, result) => {
-                if (err) return flowCallback(err);
-                return flowCallback();
+              return res.json({
+                url : '/chat/save',
+                desc : 'save chat history',
+                status : 200,
+                data : 'OK'
               });
             }
-          }
-        ], (err, result) => {
-          if (err) {
-            console.error(err);
-            return res.json({
-              url : '/chat/save',
-              desc : 'save chat history',
-              status : 500,
-              data : {}
-            });
-          } else {
-            return res.json({
-              url : '/chat/save',
-              desc : 'save chat history',
-              status : 200,
-              data : 'OK'
-            });
-          }
+          });
+        })
+        .catch((err) => {
+          console.error(err);
+          return res.json({
+            url : '/chat/save',
+            desc : 'send chat',
+            status : 500,
+            data : {}
+          });
         });
-      })
-      .catch((err) => {
-        console.error(err);
-        return res.json({
-          url : '/chat/save',
-          desc : 'send chat',
-          status : 500,
-          data : {}
-        });
-      });
-  });
+      }
+    });
 
 });
 

chatservice/routes/driverRoutes.js

 const express = require('express');
 const driverRouter = express.Router();
+const Driver = require('../models/Driver');
 
 driverRouter.route('/available').get((req, res) => {
   Driver.find({}, (err, result) => {
@@ -16,14 +17,38 @@ driverRouter.route('/available').get((req, res) => {
         url : '/driver/available',
         desc : 'get available driver',
         status : 200,
-        data : result.data
+        data : result[0].data
       });
     }
   });
 });
 
+driverRouter.route('/delete').post((req, res) => {
+  // res.setHeader('Allow-Control-Access-Origin', '*');
+  console.log(req.body.userId);
+  Driver.update({},{'$pull' : { data : parseInt(req.body.userId)}}, (err, result) => {
+    if (err) {
+      console.error(err);
+      return res.json({
+        url : '/driver/delete',
+        desc : 'delete available driver',
+        status : 500,
+        data : {}
+      });
+    } else {
+      return res.json({
+        url : '/driver/delete',
+        desc : 'delete available driver',
+        status : 200,
+        data : {}
+      });
+    }
+  })
+})
+
 driverRouter.route('/available').post((req, res) => {
-  Driver.findOneAndUpdate({},{'$push' : { data : req.body.username}}, (err, result) => {
+  // res.setHeader('Allow-Control-Access-Origin', '*');
+  Driver.findOneAndUpdate({},{'$push' : { data : parseInt(req.body.userId)}}, (err, result) => {
     if (err) {
       console.error(err);
       return res.json({

chatservice/routes/userRoutes.js

@@ -3,32 +3,11 @@ const User = require('../models/User');
 const userRouter = express.Router();
 
 
-userRouter.route('/save').post((req, res) => {
-  const user = req.body.username;
-  const token = req.body.token;
-
-  User.create({username : user, token : token}, (err, result) =>{
-    if (err) {
-      return res.json({
-        url : '/user/save',
-        desc : 'save user token',
-        status : 500,
-        data : {}
-      });
-    } else {
-      return res.json({
-        url : '/user/save',
-        desc : 'save user token',
-        status : 200,
-        data : {}
-      });
-    }
-  });
-});
 
 userRouter.route('/delete').post((req, res) => {
-  const user = req.body.username;
-  User.findOneAndRemove({ username : user}, (err, result) => {
+  // res.setHeader('Allow-Control-Access-Origin', '*');
+  const user = parseInt(req.body.userId);
+  User.findOneAndRemove({ userId : user}, (err, result) => {
     if (err) {
       return res.json({
         url : '/user/delete',
@@ -46,26 +25,59 @@ userRouter.route('/delete').post((req, res) => {
     }
   });
 });
-userRouter.route('/update').post((req, res) => {
-  const user = req.body.username;
+userRouter.route('/save').post((req, res) => {
+  // res.setHeader('Allow-Control-Access-Origin', '*');
+  const user = req.body.userId;
   const token = req.body.token;
-  User.findOneAndUpdate({ username : user},{ username : user, token : token} (err, result) => {
-    if (err) {
-      return res.json({
-        url : '/user/update',
-        desc : 'update user token',
-        status : 500,
-        data : {}
+  console.log("yang mau diinsert" + user);
+  options = { upsert: true, new: true, setDefaultsOnInsert: true };
+  User.findOne({ userId : user}, (err, result) => {
+    if (err) return console.log(err);
+    console.log(result);
+    if (result == null){
+      console.log("mau create");
+      User.create({userId : user, token : token}, (error, results) => {
+        if (error) {
+            console.log(error);
+            return res.json({
+              url : '/user/save',
+              desc : 'update user token',
+              status : 500,
+              data : err
+            });
+        } else {
+          console.log("create");
+          return res.json({
+            url : '/user/save',
+            desc : 'update user token',
+            status : 200,
+            data : {}
+          });
+        }
       });
     } else {
-      return res.json({
-        url : '/user/update',
-        desc : 'update user token',
-        status : 200,
-        data : {}
+      User.update({userId : user},{ userId : user, token : token},
+          (err, result) => {
+        if (err) {
+          return res.json({
+            url : '/user/save',
+            desc : 'update user token',
+            status : 500,
+            data : err
+          });
+        } else {
+          console.log(result);
+          return res.json({
+            url : '/user/save',
+            desc : 'update user token',
+            status : 200,
+            data : {}
+          });
+        }
       });
     }
   });
+
 });
 
 module.exports = userRouter;

web/chatdriver.jsp → out/artifacts/WBDRAss_war_exploded/chatcustomer.jsp

@@ -7,25 +7,13 @@
 --%>
 <%@ page import="utility.CookieChecker" %>
 <%@ page import="java.util.Map" %>
+<%@ page import="utility.CookiesMap" %>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <%
     if (!CookieChecker.check(request.getCookies())) {
         response.sendRedirect("index.jsp");
     } else {
-
-        String username = "";
-        Cookie[] cookies = null;
-        cookies = request.getCookies();
-        if (cookies != null) {
-            for (Cookie cooky : cookies) {
-                String cookieName = cooky.getName();
-                String cookieValue = cooky.getValue();
-                if (cookieName.equals("uname")) {
-                    username = cookieValue;
-                }
-            }
-        }
-
+        Map<String, String> cook = CookiesMap.getCookiesMap(request.getCookies());
         Map<String, String> driver_data_account = (Map<String, String>) request.getAttribute("driver_data_account");
 %>
 <html ng-app="app">
@@ -39,8 +27,8 @@
     <script src="js/angular.min.js"></script>
     <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
     <script >
-        var driver = <%=driver_data_account.get("uname")%>;
-        var customer = <%=username%>;
+        var driverId = <%=request.getParameter("driver_id")%>;
+        var userId = <%=cook.get("id")%>;
     </script>
     <script src="js/main.js"></script>
     <script src="js/chat.js" charset="utf-8"></script>
@@ -84,9 +72,15 @@
             <button type="submit" class="green-button" data-ng-click="submit(cht); cht = '';" name="send">SEND</button>
         </form>
     </div>
-
+    <div>
+        <form method="get" action="/order3">
+            <input type="hidden" name="pick" value="<%=request.getParameter("pick")%>"/>
+            <input type="hidden" name="dest" value="<%=request.getParameter("dest")%>"/>
+            <button class="red-button" name="driver_id" type="submit" value="<%=request.getParameter("driver_id")%>">CLOSE</button>
+        </form>
+    </div>
 </div>
 </body>
 
 </html>
-<% } %>
+<% } %>
\ No newline at end of file

out/artifacts/WBDRAss_war_exploded/findorder.jsp

-<%--
+<%@ page import="utility.CookieChecker" %>
+<%@ page import="utility.CookiesMap" %>
+<%@ page import="java.util.Map" %><%--
   Created by IntelliJ IDEA.
   User: fajar
   Date: 23/11/17
@@ -6,25 +8,192 @@
   To change this template use File | Settings | File Templates.
 --%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
-<html>
+<%
+    if (!CookieChecker.check(request.getCookies())) {
+        response.sendRedirect("index.jsp");
+    }
+    Map<String, String> cook = CookiesMap.getCookiesMap(request.getCookies());
+
+%>
+<html ng-app="app">
 <head>
     <title>Find Order</title>
     <link rel="stylesheet" href="css/master.css">
     <link rel="icon" href="img/gojek.png">
     <script src="js/master.js"></script>
     <script src="js/angular.min.js"></script>
+    <script src="js/chatfordriver.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
+    <script>
+
+    </script>
 </head>
-<body>
+<body ng-controller="maincontrol">
     <div class="order">
         <%@ include file = "navbar.jsp" %>
         <script type="text/javascript">chooseNavbar(0);</script>
         <h1>LOOKING FOR AN ORDER</h1>
         <br/><br/><br/><br/>
-        <div class="btn-wrapper">
-            <button class="green-button" onclick="findOrder();">Find Order</button>
+        <div class="btn-wrapper" ng-hide="find">
+            <button class="green-button" data-ng-click="findOrder();">FIND ORDER</button>
+        </div>
+        <div class="btn-wrapper" ng-show="cancelFind">
+            <h5>Finding Order....</h5>
+            <br>
+            <br>
+            <button class="red-button" data-ng-click="cancelFindOrder();">CANCEL</button>
+        </div>
+        <div ng-show="chat" >
+            <div class="chat-box" >
+                <div ng-repeat="msg in msgs" class="{{msg.pos}}">
+                    {{msg.text}}
+                </div>
+            </div>
+            <div class="chat-form">
+                <form class="" id="chat-text-input">
+                    <input type="text" class="chat-input" ng-model="cht" name="chatmessage" placeholder="message"/>
+                    <button type="submit" class="green-button" data-ng-click="submit(cht); cht = '';" name="send">SEND</button>
+                </form>
+            </div>
         </div>
 
+
     </div>
 
 </body>
+<script>
+    var app = angular.module("app", []);
+    app.controller("maincontrol", ($scope, $http, $window) => {
+        $scope.msgs = [];
+        $scope.find = false;
+        $scope.cancelFind = false;
+        $scope.chat = false;
+        $scope.custId = null;
+        $scope.userId = <%=cook.get("id")%>;
+
+        $http.get("http://localhost:3000/driver/available").then((response) => {
+            console.log(response);
+            if (response.data.data.indexOf($scope.userId) != -1) {
+                enableChat();
+                $scope.find = true;
+                $scope.cancelFind = true;
+        }
+        }).catch((err) => {
+        console.log(err);
+        });
+
+        $scope.submit = (cht) =>{
+            if (cht.length != 0) {
+
+
+                var config = {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                }
+                var body = {
+                    customer: $scope.custId,
+                    driver: $scope.userId,
+                    chat: {
+                        sender: $scope.userId,
+                        title : "pesan",
+                        message: cht
+                    }
+                }
+                $http.post('http://localhost:3000/chat/send', body, config)
+                    .then((success) => {
+                    $scope.msgs.push({pos: "bubble-right", text: cht});
+                 })
+                .catch((err) => {
+                    console.log(err);
+               });
+            }
+        }
+        $scope.findOrder = () => {
+            var config = {
+                headers : {
+                    "Content-Type" : "application/json"
+                }
+            }
+            var body = {
+                userId : $scope.userId
+            }
+
+            $http.post("http://localhost:3000/driver/available", body, config).then((res) => {
+                if (res.data.status == 200){
+                    enableChat();
+                    $scope.find = true;
+                    $scope.cancelFind = true;
+                } else {
+                     console.log("cant add to available driver");
+                }
+            })
+            .catch((err) => {
+                console.log(err);
+            })
+
+        }
+        $scope.inOrder = () => {
+            $scope.chat =
+            $http.get('http://localhost:3000/chat?customer='+$scope.custId+'&driver='+$scope.userId).then( (res) => {
+                for(var i = 0;i < res.data.content.length;i++){
+                    if (res.data.content[i].sender == res.data.customer) {
+                        $scope.msgs.push({pos: "bubble-right", msg: res.data.content[i].message});
+                    } else {
+                        $scope.msgs.push({pos: "bubble-left", msg: res.data.content[i].message});
+                    }
+                }
+
+             }, (err) =>{
+                console.error(err);
+            });
+        }
+
+        $scope.cancelFindOrder = () => {
+            var config = {
+                headers :{
+                    "Content-Type" : "application/json"
+                }
+            }
+            var body = {
+                "userId" : $scope.userId
+            }
+            $http.post("http://localhost:3000/driver/delete", body, config).then((res) => {
+                console.log(res);
+                if (res.data.status == 200) {
+                    $scope.find = false;
+                    $scope.cancelFind = false;
+                } else {
+                    alert("error");
+                 }
+            })
+        }
+        $scope.sendTokenToServer = (utoken) => {
+            var config = {
+                headers : {
+                    "Content-Type" : "application/json"
+                }
+            }
+            var body ={
+                userId : parseInt($scope.userId),
+                token : utoken
+            }
+            $http.post("http://localhost:3000/user/save", body, config).then((response) => {
+                if (response.status == 200){
+                    console.log("Send Token Success");
+                } else {
+                    console.log("Send Token Error");
+                }
+            }, (err) => {
+                console.log(err);
+        })
+
+        }
+
+        $scope.insertMsg = (payload) => {
+            $scope.msgs.push({pos : "bubble-left", text : payload.notification.body});
+            console.log("HEHEH");
+        }
+    })
+</script>
 </html>

out/artifacts/WBDRAss_war_exploded/js/chat.js

@@ -23,6 +23,9 @@ messaging.requestPermission()
   messaging.getToken()
   .then(function(currentToken) {
     if (currentToken) {
+        var scope = angular.element(document.getElementsByTagName("body")).scope();
+        scope.sendTokenToServer(currentToken);
+        scope.$apply();
       // sendRegistrationToServer(currentToken);
       // updateUIForPushEnabled(currentToken);
       console.log(currentToken);
@@ -30,14 +33,14 @@ messaging.requestPermission()
       // Show permission request.
       console.log('No Instance ID token available. Request permission to generate one.');
       // Show permission UI.
-      updateUIForPushPermissionRequired();
-      setTokenSentToServer(false);
+      // updateUIForPushPermissionRequired();
+      // setTokenSentToServer(false);
     }
   })
   .catch(function(err) {
     console.log('An error occurred while retrieving token. ', err);
-    showToken('Error retrieving Instance ID token. ', err);
-    setTokenSentToServer(false);
+    // showToken('Error retrieving Instance ID token. ', err);
+    // setTokenSentToServer(false);
   });
 
   // Callback fired if Instance ID token is updated.
@@ -46,6 +49,9 @@ messaging.onTokenRefresh(function() {
   .then(function(refreshedToken) {
     console.log('Token refreshed.');
     console.log(refreshedToken);
+      var scope = angular.element(document.getElementsByTagName("body")).scope();
+      scope.sendTokenToServer(currentToken);
+      scope.$apply();
     // Indicate that the new Instance ID token has not yet been sent to the
     // app server.
     // setTokenSentToServer(false);
@@ -56,6 +62,7 @@ messaging.onTokenRefresh(function() {
   .catch(function(err) {
     console.log('Unable to retrieve refreshed token ', err);
     // showToken('Unable to retrieve refreshed token ', err);
+
   });
 });
 

out/artifacts/WBDRAss_war_exploded/js/chatfordriver.js

+function enableChat() {
+    // initialize Firebase
+    var config = {
+        apiKey: "AIzaSyDnQLFM5Hib9_5AZIapEIVO4NSFTnRYs5E",
+        authDomain: "wbd3-fap.firebaseapp.com",
+        databaseURL: "https://wbd3-fap.firebaseio.com",
+        storageBucket: "wbd3-fap.appspot.com",
+        messagingSenderId: "655114709739",
+    };
+    firebase.initializeApp(config);
+
+    const messaging = firebase.messaging();
+
+    messaging.requestPermission()
+        .then(() => {
+        console.log("Permission Granted");
+    })
+    .catch(function(err) {
+        console.log('Unable to get permission to notify.', err);
+    });
+
+    // Get Instance ID token. Initially this makes a network call, once retrieved
+    // subsequent calls to getToken will return from cache.
+    messaging.getToken()
+        .then(function(currentToken) {
+            if (currentToken) {
+                var scope = angular.element(document.getElementsByTagName("body")).scope();
+                scope.sendTokenToServer(currentToken);
+                scope.$apply();
+                // sendRegistrationToServer(currentToken);
+                // updateUIForPushEnabled(currentToken);
+                console.log(currentToken);
+
+            } else {
+                // Show permission request.
+                console.log('No Instance ID token available. Request permission to generate one.');
+                // Show permission UI.
+
+            }
+        })
+        .catch(function(err) {
+            console.log('An error occurred while retrieving token. ', err);
+
+        });
+
+    // Callback fired if Instance ID token is updated.
+    messaging.onTokenRefresh(function() {
+        messaging.getToken()
+            .then(function(refreshedToken) {
+                console.log('Token refreshed.');
+                console.log(refreshedToken);
+                var scope = angular.element(document.getElementsByTagName("body")).scope();
+                scope.sendTokenToServer(refreshedToken);
+                scope.$apply();
+                // Indicate that the new Instance ID token has not yet been sent to the
+                // app server.
+                // setTokenSentToServer(false);
+                // Send Instance ID token to app server.
+                // sendTokenToServer(refreshedToken);
+                // ...
+            })
+            .catch(function(err) {
+                console.log('Unable to retrieve refreshed token ', err);
+                // showToken('Unable to retrieve refreshed token ', err);
+            });
+    });
+
+    messaging.onMessage(function(payload) {
+        console.log("Message received. ", payload);
+        var scope = angular.element(document.getElementsByTagName("body")).scope();
+        if (payload.notification.title == "order"){
+            scope.custId = payload.notification.body;
+            scope.chat = true;
+            scope.cancelFind = false;
+            scope.$apply();
+        } else if (payload.notification.title == "complete"){
+            scope.find = false;
+            scope.cancelFind = true;
+            scope.chat = false;
+            scope.$apply();
+            scope.inOrder();
+            scope.$apply();
+        } else {
+            scope.insertMsg(payload);
+            scope.$apply();
+        }
+        // ...
+    });
+
+}
\ No newline at end of file

out/artifacts/WBDRAss_war_exploded/js/main.js

+var app = angular.module('app', []);
+app.controller("maincontrol",function($scope, $http, $window) {
+    $scope.msgs = [];
+    $scope.custId = $window.userId;
+    $scope.driverId = $window.driverId;
+    const config = {
+        headers : {
+            'Cookie' : document.cookie
+        }
+    };
+    $http.get('http://localhost:3000/chat?customer='+$scope.custId+'&driver='+$scope.driverId).then( (res) => {
+        for (var i= 0; i < res.data.data.content.length; i++){
+            if (res.data.data.content[i].sender == res.data.data.customer){
+                $scope.msgs.push({pos : "bubble-right", msg : res.data.data.content[i].message});
+            } else {
+                $scope.msgs.push({pos : "bubble-left", msg : res.data.data.content[i].message});
+            }
+        }
+    }, (err) =>{
+        console.error(err);
+    });
+
+    $scope.insertMsg = (payload) => {
+        $scope.msgs.push({pos : "bubble-left", text : payload.notification.body});
+        console.log("HEHEH");
+    }
+    $scope.submit = (cht) => {
+        if (cht.length != 0) {
+
+
+            var config = {
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }
+            var body = {
+                customer: $scope.custId,
+                driver: $scope.driverId,
+                chat: {
+                    sender: $scope.custId,
+                    title : "pesan",
+                    message: cht
+                }
+            }
+            $http.post('http://localhost:3000/chat/send', body, config)
+                .then((success) => {
+                $scope.msgs.push({pos: "bubble-right", text: cht});
+            })
+            .catch((err) => {
+               console.log(err);
+            });
+        }
+    }
+
+    $scope.finishOrder = () =>
+    {
+        var config = {
+            headers : {
+                "Content-Type" : "application/json"
+            }
+        }
+        var body = {
+            customer : $window.userId,
+            driver : $window.driverId,
+            chat : {
+                sender : $window.custId,
+                title : "complete",
+                message : "Pesanan Udah"
+            }
+        }
+
+        $http.post("http://localhost:3000/chat/send", body, config).then((res) => {
+            if (res.data.status == 200) {
+                console.log("Pesanan OK");
+            }
+
+
+         })
+        .catch ((err) => {
+            console.log(err);
+        })
+    }
+
+
+        $scope.sendTokenToServer = (utoken) =>
+    {
+        console.log("aku dipanggil");
+        var config = {
+            headers: {
+                "Content-Type": "application/json"
+            }
+        }
+        var body = {
+            userId: parseInt($window.userId),
+            token: utoken
+        }
+        $http.post("http://localhost:3000/user/save", body, config).then((response) => {
+            if(response.status == 200
+    )
+        {
+            console.log("Send Token Success");
+        }
+    else
+        {
+            console.log("Send Token Error");
+        }
+    })
+    .
+        catch((err) => {
+            console.log(err);
+    })
+    }
+
+});
\ No newline at end of file

out/artifacts/WBDRAss_war_exploded/order2.jsp

@@ -9,9 +9,11 @@
 <%@ page import="utility.CookieChecker" %>
 <%@ page import="java.util.Map" %>
 <%@ page import="java.util.List" %>
+<%@ page import="utility.CookiesMap" %>
 
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <%
+    Map<String, String> cook = CookiesMap.getCookiesMap(request.getCookies());
     if (request.getAttribute("preferred_driver") == null)
         request.getRequestDispatcher("/order2").forward(request, response);
     List<Map<String, String>> preferred_driver = (List<Map<String, String>>) request.getAttribute("preferred_driver");
@@ -22,16 +24,21 @@
     List<Map<String, String>> driver_destination = (List<Map<String, String>>) request.getAttribute("driver_destination");
 %>
 <!DOCTYPE html>
-<html>
+<html ng-app="app">
 <head>
     <title>Select driver</title>
     <link rel="stylesheet" type="text/css" href="css/master.css">
     <link rel="icon" href="img/gojek.png">
+    <script type="text/javascript">
+      var prefDriver = [];
+      var otherDriver = []
+    </script>
 </head>
-<body>
+<body ng-controller="maincontrol">
 <div class="order">
     <%@ include file = "navbar.jsp" %>
     <script src="js/master.js"></script>
+    <script src="js/angular.min.js" charset="utf-8"></script>
     <script type="text/javascript">chooseNavbar(0);</script>
     <div class="order-title">
         <div class="font-bebas">
@@ -57,61 +64,131 @@
             <header class="font-bebas">
                 <h2>Preferred drivers</h2>
             </header>
-            <%if (preferred_driver.size() == 0) { %>
-            <p class="no-driver">
-                Nothing to display :(
-            </p>
-            <% } else {
+            <%if (preferred_driver.size() != 0) {
+
+
                 for (Map<String, String> pref_driver : preferred_driver){
             %>
-            <div class="driver-item">
+              <script type="text/javascript">
+                prefDriver.push({
+                  userId : <%=pref_driver.get("user_id")%>,
+                  name : "<%=pref_driver.get("name")%>",
+                  rating : <%=(double) Math.round(Float.parseFloat(pref_driver.get("rating")) * 10) / 10%>,
+                  votes : <%=pref_driver.get("votes")%>,
+                  pick : "<%=request.getParameter("pick")%>",
+                  dest : "<%=request.getParameter("dest")%>"
+                });
+              </script>
+              <% }
+              } %>
+              <p class="no-driver" ng-hide="prefdriver.length != 0">
+                  Nothing to display :(
+              </p>
+            <div class="driver-item" ng-repeat="pd in prefdriver">
                 <img class="floatleft edit-pic-icon" src="data:image/jpeg;base64,<%----%>" onerror="putDefaultImage(this);">
-                <div class="font-rockwell"><%=pref_driver.get("name")%></div>
+                <div class="font-rockwell">{{pd.name}}</div>
                 <div class="font-rockwell">
                     <img src="img/star.png" class="small-icon">
-                    <span class="color-rating"><%=(double) Math.round(Float.parseFloat(pref_driver.get("rating")) * 10) / 10%></span> (<%=pref_driver.get("votes")%> votes)
+                    <span class="color-rating">{{pd.rating}}</span> ({{pd.votes}} votes)
                 </div>
-                <form method="get" action="order3">
-                    <input type="hidden" name="pick" value="<%=request.getParameter("pick")%>">
-                    <input type="hidden" name="dest" value="<%=request.getParameter("dest")%>">
-                    <button class="pos-choose-button green-button" name="driver_id" type="submit" value="<%=pref_driver.get("user_id")%>">I CHOOSE YOU!</button>
+                <form method="get" action="/chatcustomer.jsp">
+                    <input type="hidden" name="pick" value="pd.pick">
+                    <input type="hidden" name="dest" value="pd.dest">
+                    <button class="pos-choose-button green-button" name="driver_id" type="submit" data-ng-click="makeOrder(pd.userId);" value="{{pd.userId}}">I CHOOSE YOU!</button>
                 </form>
             </div>
-            <% }
-            } %>
-
-
 
         </div>
         <div class="driver-list">
             <header class="font-bebas">
                 <h2>Other drivers</h2>
             </header>
-            <%if (driver_destination.size() == 0) { %>
-            <p class="no-driver">
-                Nothing to display :(
-            </p>
-            <% } else {
+            <%if (driver_destination.size() != 0) {
+
                 for (Map<String, String> dest_driver : driver_destination){
             %>
-            <div class="driver-item">
+            <script type="text/javascript">
+              otherDriver.push({
+                userId : <%=dest_driver.get("user_id")%>,
+                name : "<%=dest_driver.get("name")%>",
+                rating : <%=(double) Math.round(Float.parseFloat(dest_driver.get("rating")) * 10) / 10%>,
+                votes : <%=dest_driver.get("votes")%>,
+                pick : "<%=request.getParameter("pick")%>",
+                dest : "<%=request.getParameter("dest")%>"
+              });
+            </script>
+            <% }
+            } %>
+            <p class="no-driver" ng-hide="destdriver.length != 0">
+                Nothing to display :(
+            </p>
+            <div class="driver-item" ng-repeat="dd in destdriver">
                 <img class="floatleft edit-pic-icon" src="data:image/jpeg;base64,<%----%>" onerror="putDefaultImage(this);">
-                <div class="font-rockwell"><%=dest_driver.get("name")%></div>
+                <div class="font-rockwell">{{dd.name}}</div>
                 <div class="font-rockwell">
                     <img src="img/star.png" class="small-icon">
-                    <span class="color-rating"><%=(double) Math.round(Float.parseFloat(dest_driver.get("rating")) * 10) / 10%></span> (<%=dest_driver.get("votes")%> votes)
+                    <span class="color-rating">{{dd.rating}}</span> ({{dd.votes}} votes)
                 </div>
-                <form method="get" action="order3">
+                <form method="get" action="/chatcustomer.jsp">
 
-                    <input type="hidden" name="pick" value="<%=request.getParameter("pick")%>">
-                    <input type="hidden" name="dest" value="<%=request.getParameter("dest")%>">
-                    <button class="pos-choose-button green-button" name="driver_id" type="submit" value="<%=dest_driver.get("user_id")%>">I CHOOSE YOU!</button>
+                    <input type="hidden" name="pick" value="dd.pick">
+                    <input type="hidden" name="dest" value="dd.dest">
+                    <button class="pos-choose-button green-button" name="driver_id" type="submit" data-ng-click="makeOrder(dd.userId);" value="{{dd.userId}}">I CHOOSE YOU!</button>
                 </form>
             </div>
-            <% }
-            } %>
+
         </div>
     </div>
 </div>
+<script type="text/javascript">
+  var app = angular.module('app', []);
+  app.controller("maincontrol", ($scope, $http, $window) => {
+      $scope.userId = <%=cook.get("id")%>;
+    $scope.prefdriver = [];
+    $scope.destdriver = [];
+    $http.get('http://localhost:3000/driver/available').then((response) => {
+      $scope.avdriver = response.data.data;
+      $window.prefDriver.forEach((pd) => {
+        if ($scope.avdriver.indexOf(pd.userId) != -1){
+          $scope.prefDriver.push(pd);
+        }
+      });
+      $window.otherDriver.forEach((od) => {
+        if ($scope.avdriver.indexOf(od.userId)){
+          $scope.destdriver.push(od);
+        }
+      });
+    });
+
+    $scope.makeOrder = (driverId) => {
+      var config = {
+          headers : {
+              "Content-Type" : "application/json"
+          }
+      }
+      var body = {
+          customer : $scope.userId,
+          driver : driverId,
+          chat : {
+              sender : $scope.userId,
+              title : "order",
+              message : String($scope.userId)
+          }
+      }
+
+      $http.post("http://localhost:3000/chat/send", body, config).then((res) => {
+          if (res.data.status == 200) {
+          console.log("Pesanan OK");
+      }
+
+
+  })
+  .catch ((err) => {
+          console.log(err);
+  })
+    }
+  })
+
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file