From ece4e6dd4d1ba0025032aeab50bb354835419ce5 Mon Sep 17 00:00:00 2001
From: Kendrick Chan <kc@jankstudio.com>
Date: Sat, 18 Jan 2020 22:45:40 +0800
Subject: [PATCH] Add MQTT subscribe functionality in main dashboard #299

---
 templates/home.html.twig           | 43 +++++++++++++++++++++++++-----
 templates/map/initOpenStreetMap.js |  2 ++
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/templates/home.html.twig b/templates/home.html.twig
index c6b95597..bd7f9746 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -10,13 +10,10 @@
     <!-- END: Subheader -->
 {% endblock %}
 
-{% block scripts %}
-{{ include('map/' ~ map_js_file) }}
-<script>
 
-{% if 'OpenStreet' in map_js_file %}
-    initMap();
-{% endif %} 
+{% block scripts %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
+<script>
 
 function initMap() {
     var default_lat = {% trans %}default_lat{% endtrans %};
@@ -25,6 +22,38 @@ function initMap() {
     var map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13);
 }
 
+{{ include('map/' ~ map_js_file) }}
+
+// TODO: put this in .env
+var mqtt;
+var timeout = 2000;
+var host = '192.168.56.4';
+var port = 8083;
+
+function onConnect() {
+    console.log('connected!');
+
+    mqtt.subscribe('test.channel');
+}
+
+function onMessage(msg) {
+    console.log(msg);
+}
+
+function mqttConnect() {
+    mqtt = new Paho.MQTT.Client(host, port, "clientjs");
+    var options = {
+        timeout: 3,
+        onSuccess: onConnect,
+    };
+
+    mqtt.onMessageArrived = onMessage;
+
+    console.log('connecting to mqtt server...');
+    mqtt.connect(options);
+}
+
+mqttConnect();
+
 </script>
 {% endblock %}
-
diff --git a/templates/map/initOpenStreetMap.js b/templates/map/initOpenStreetMap.js
index 59a8ebcf..a8917f2a 100644
--- a/templates/map/initOpenStreetMap.js
+++ b/templates/map/initOpenStreetMap.js
@@ -120,4 +120,6 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
     return map;
 }
 
+initMap();
+
 </script>