109 lines
3.5 KiB
Twig
109 lines
3.5 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%;z-index:2"></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 src="{{ asset('assets/js/dashboard_map.js') }}"></script>
|
|
<script src="{{ asset('assets/js/map_mqtt.js') }}"></script>
|
|
{% if dashboard_enable == 'true' %}
|
|
{{ include('map/' ~ map_js_file) }}
|
|
{% endif %}
|
|
<script>
|
|
|
|
function initMap(r_markers, c_markers, icons) {
|
|
var default_lat = {% trans %}default_lat{% endtrans %};
|
|
var default_lng = {% trans %}default_long{% endtrans %};
|
|
|
|
var options = {
|
|
'display_overlay': true,
|
|
'enable_popup': true,
|
|
'access_token': '{{ maptiler_api_key }}',
|
|
'div_id': 'dashboard_map',
|
|
'center_lat': default_lat,
|
|
'center_lng': default_lng,
|
|
'map_type': 'road',
|
|
'zoom': 13,
|
|
'rider_popup_url': '/riders/[id]/popup',
|
|
'cust_popup_url': '/job-order/[id]/popup',
|
|
'icons': icons,
|
|
'rider_availability_url': '{{ absolute_url('/riders/[id]/available')|raw }}'
|
|
};
|
|
|
|
var dashmap = new DashboardMap(options, r_markers, c_markers);
|
|
dashmap.initialize();
|
|
dashmap.loadLocations('{{ path('rider_locations') }}');
|
|
|
|
return dashmap;
|
|
}
|
|
|
|
function initEventHandler(dashmap, icons, ssl) {
|
|
var options = {
|
|
'track_jo': true,
|
|
'track_rider': true,
|
|
'channels': {
|
|
'rider_location': 'rider/+/location',
|
|
'rider_status': 'rider/+/status',
|
|
'jo_location': 'jo/+/location',
|
|
'jo_status': 'jo/+/status',
|
|
'jo_origin': 'jo/+/origin',
|
|
'rider_availability': 'rider/+/availability',
|
|
},
|
|
};
|
|
|
|
var event_handler = new MapEventHandler(options, dashmap, ssl);
|
|
event_handler.connect('{{ app.user.getID }}', '{{ mqtt_host }}', {{ mqtt_port }});
|
|
}
|
|
|
|
{% if dashboard_enable == 'true' %}
|
|
// create icons
|
|
var icons = {
|
|
'rider_active_jo': L.divIcon({
|
|
className: 'map-div-icon',
|
|
html: "<div style='background-color:#FF0000;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
|
|
iconSize: [39, 42],
|
|
iconAnchor: [15, 42]
|
|
}),
|
|
'rider_available': L.divIcon({
|
|
className: 'map-div-icon',
|
|
html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
|
|
iconSize: [39, 42],
|
|
iconAnchor: [15, 42]
|
|
}),
|
|
'customer': L.divIcon({
|
|
className: 'map-div-icon',
|
|
html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
|
|
iconSize: [39, 42],
|
|
iconAnchor: [15, 42]
|
|
}),
|
|
'mobile_customer': L.divIcon({
|
|
className: 'map-div-icon',
|
|
html: "<div style='background-color:#A200FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
|
|
iconSize: [39, 42],
|
|
iconAnchor: [15, 42]
|
|
})
|
|
};
|
|
|
|
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, ssl);
|
|
{% endif %}
|
|
|
|
</script>
|
|
{% endblock %}
|