Merge pull request #229 from lucastanger/dev

src/frontend/src/script/Chat.js

@@ -8,6 +8,7 @@ let data = "";
 let uuid = "";
 let stockTitle = "";
 let grades = {};
+let mapData;
 
 let weekday = new Array(7);
 weekday[0] = "Sun";
@@ -88,6 +89,11 @@ async function sendMessage(from) {
             createStockPlot(data, uuid, stockTitle);
         }
 
+        if (intentFunction === handleMapsIntent) {
+            drawMap(uuid);
+            calcRoute();
+        }
+
     });
 
 }
@@ -115,6 +121,8 @@ function identifyIntent(intent) {
             return handleStockIntent;
         case 'dualis-intent':
             return handleDualisIntent;
+        case 'maps-intent':
+            return handleMapsIntent;
         default:
             // If intent could not get identified
             return () => {return `${intent.dialogflow.query_result.intent.display_name} does not have a according intent function`}
@@ -199,6 +207,68 @@ function handleStockIntent(value) {
 
 }
 
+function handleMapsIntent(value) {
+
+    if (value.hasOwnProperty('response')) {
+
+        mapData = value.response;
+
+        return createAnswerElement("", uuid);
+
+    }
+}
+
+let mapOptions, directionsService, directionsRenderer, stuttgart;
+
+/**
+ * Callback function for Google API
+ */
+function initMap() {
+    directionsService = new google.maps.DirectionsService();
+    directionsRenderer = new google.maps.DirectionsRenderer();
+    stuttgart = new google.maps.LatLng(48.77172146103744, 9.16245106247243);
+    mapOptions = {
+        zoom:7,
+        center: stuttgart
+    }
+
+}
+
+/**
+ * Draws a Google map
+ * @param uuid
+ */
+function drawMap(uuid) {
+    let map = new google.maps.Map(document.getElementById(uuid), mapOptions);
+    directionsRenderer.setMap(map);
+}
+
+/**
+ * Calculates the requested route
+ */
+function calcRoute() {
+    let temp = {
+        "routes": mapData
+    }
+
+    function c() {
+        var start = mapData[0]["legs"][0].start_address;
+        var end = mapData[0]["legs"][0].end_address;
+        var request = {
+            origin: start,
+            destination: end,
+            travelMode: 'DRIVING'
+        };
+        directionsService.route(request, function(result, status) {
+            if (status == 'OK') {
+                directionsRenderer.setDirections(result);
+            }
+        });
+    }
+
+    c();
+}
+
 
 function handleDualisIntent(value) {
 

src/frontend/src/script/Google.js

@@ -34,3 +34,4 @@ function setHeader(xhr) {
     xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
     xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, DELETE');
 }
+

src/frontend/src/views/home.ejs

@@ -221,6 +221,7 @@
     <!-- end chat container -->
     <!-- history container -->
     <div id="history" class="bg-gradient-to-b dark:from-green-800 dark:to-gray-800 from-gray-100 to-gray-200 w-full relative p-14 hidden">
+        <div id="map" class="h-full w-full"></div>
     </div>
     <!-- end profile container -->
     <!-- settings container -->
@@ -230,6 +231,7 @@
     <!-- end content container -->
 </div>
 </body>
+
 <script src="script/home.js"></script>
 <script src="script/Time.js"></script>
 <script src="script/Chat.js" async></script>
@@ -238,6 +240,12 @@
 <script src="script/News.js"></script>
 <script src="script/Calendar.js"></script>
 <script src="script/Stock.js"></script>
+<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
+<script
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIKHuafeSxtEq8z5FSgF9dtVnRzMWNfHg&callback=initMap&libraries=&v=weekly"
+        async
+></script>
+
 </html>
 
 <!---->