59 lines
1.4 KiB
Twig
59 lines
1.4 KiB
Twig
{% 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 %}
|