From 3af78fd49bb7cc4db824c2f8a6e12c42959ae4f0 Mon Sep 17 00:00:00 2001
From: Korina Cordero <cordero.korina@gmail.com>
Date: Thu, 30 Jul 2020 03:23:03 +0000
Subject: [PATCH] Add checking for SSL_ENABLE for Dashboard. #453

---
 .env.dist                    |  3 +++
 config/packages/twig.yaml    |  1 +
 public/assets/js/map_mqtt.js |  5 +++--
 templates/home.html.twig     | 11 ++++++++---
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/.env.dist b/.env.dist
index bd82f980..9fc0a002 100644
--- a/.env.dist
+++ b/.env.dist
@@ -74,3 +74,6 @@ MAPTILER_API_KEY=map_tiler_api_key
 
 # API version
 API_VERSION=insert_api_version_here
+
+#SSL_ENABLE for websockets
+SSL_ENABLE=set_to_true_or_false
diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
index 1c848030..ade96bcc 100644
--- a/config/packages/twig.yaml
+++ b/config/packages/twig.yaml
@@ -8,3 +8,4 @@ twig:
         mqtt_host: "%env(MQTT_WS_HOST)%"
         mqtt_port: "%env(MQTT_WS_PORT)%"
         dashboard_enable: "%env(DASHBOARD_ENABLE)%"
+        ssl_enable: "%env(SSL_ENABLE)%"
diff --git a/public/assets/js/map_mqtt.js b/public/assets/js/map_mqtt.js
index 0e6bdb31..250e00c6 100644
--- a/public/assets/js/map_mqtt.js
+++ b/public/assets/js/map_mqtt.js
@@ -1,7 +1,8 @@
 class MapEventHandler {
-    constructor(options, dashmap) {
+    constructor(options, dashmap, ssl) {
         this.options = options;
         this.dashmap = dashmap;
+        this.ssl = ssl;
     }
     
     connect(user_id, host, port) {
@@ -11,7 +12,7 @@ class MapEventHandler {
 
         this.mqtt = new Paho.MQTT.Client(host, port, client_id);
         var options = {
-            // useSSL: true,
+            useSSL: this.ssl,
             timeout: 3,
             invocationContext: this,
             onSuccess: this.onConnect.bind(this),
diff --git a/templates/home.html.twig b/templates/home.html.twig
index 69cb59c0..ebe8cff3 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -45,7 +45,7 @@ function initMap(r_markers, c_markers, icons) {
     return dashmap;
 }
 
-function initEventHandler(dashmap) {
+function initEventHandler(dashmap, icons, ssl) {
     var options = {
         'track_jo': true,
         'track_rider': true,
@@ -58,7 +58,7 @@ function initEventHandler(dashmap) {
         },
     };
 
-    var event_handler = new MapEventHandler(options, dashmap);
+    var event_handler = new MapEventHandler(options, dashmap, ssl);
     event_handler.connect('{{ app.user.getID }}', '{{ mqtt_host }}', {{ mqtt_port }});
 }
 
@@ -94,8 +94,13 @@ var icons = {
     var r_markers = {};
     var c_markers = {};
 
+    var ssl = false;
+    {% if ssl_enable == 'true' %}
+        ssl = true;
+    {% endif %}
+
     var dashmap = initMap(r_markers, c_markers, icons);
-    initEventHandler(dashmap, icons);
+    initEventHandler(dashmap, icons, ssl);
 {% endif %}
 
 </script>