{% extends 'base.html.twig' %}

{% block stylesheets %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
{% endblock %}

{% block body %}
    <div id="dashboard_map" style="height:100%;"></div>
    <!-- BEGIN: Subheader -->
    <!-- END: Subheader -->
{% endblock %}


{% 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 %};
    var default_lng = {% trans %}default_long{% endtrans %};

    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 %}