106 lines
2.8 KiB
Twig
106 lines
2.8 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);
|
|
}
|
|
</script>
|
|
|
|
{{ include('map/' ~ map_js_file) }}
|
|
|
|
<script>
|
|
// 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('rider/+/location');
|
|
}
|
|
|
|
function onMessage(msg) {
|
|
// console.log(msg);
|
|
console.log('received message');
|
|
|
|
var channel = msg.destinationName;
|
|
var chan_split = channel.split('/');
|
|
var payload = msg.payloadString;
|
|
|
|
// handle different channels
|
|
switch (chan_split[0]) {
|
|
case "rider":
|
|
handleRider(chan_split, payload);
|
|
break;
|
|
}
|
|
}
|
|
|
|
function handleRider(chan_split, payload) {
|
|
console.log("rider message");
|
|
switch (chan_split[2]) {
|
|
case "location":
|
|
console.log("got location for rider " + chan_split[1] + " - " + payload);
|
|
pl_split = payload.split(':');
|
|
console.log(pl_split);
|
|
|
|
// check for correct format
|
|
if (pl_split.length != 2)
|
|
break;
|
|
|
|
var lat = parseFloat(pl_split[0]);
|
|
var lng = parseFloat(pl_split[1]);
|
|
|
|
// move marker
|
|
console.log(rider_markers[chan_split[1]]);
|
|
|
|
// check if marker exists
|
|
if (rider_markers.hasOwnProperty(chan_split[1])) {
|
|
// marker's there, move it
|
|
rider_markers[chan_split[1]].setLatLng(L.latLng(lat, lng));
|
|
} else {
|
|
// TODO: no marker, make one
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
function mqttConnect() {
|
|
var d = new Date();
|
|
var client_id = "dash-{{ app.user.getID }}-" + d.getMonth() + "-" + d.getDate() + "-" + d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds() + "-" + d.getMilliseconds();
|
|
console.log(client_id);
|
|
|
|
mqtt = new Paho.MQTT.Client(host, port, client_id);
|
|
var options = {
|
|
timeout: 3,
|
|
onSuccess: onConnect,
|
|
};
|
|
|
|
mqtt.onMessageArrived = onMessage;
|
|
|
|
console.log('connecting to mqtt server...');
|
|
mqtt.connect(options);
|
|
}
|
|
|
|
mqttConnect();
|
|
|
|
</script>
|
|
{% endblock %}
|