118 lines
4.1 KiB
Twig
118 lines
4.1 KiB
Twig
{% extends 'base_minimal.html.twig' %}
|
|
|
|
{% block body %}
|
|
<div id="tracker_map" style="height:100%;"></div>
|
|
<div class="map-info">
|
|
<div class="m-portlet m-portlet--mobile">
|
|
<div class="m-portlet__body">
|
|
<div class="row">
|
|
<div class="col-12 d-flex flex-row justify-content-start">
|
|
<img class="mr-2 rider-image" src="{{ asset(rider.getImageFile ? "uploads/" . rider.getImageFile : "assets/images/user.gif") }}" alt="">
|
|
<div class="flex-grow-1">
|
|
<div><strong>Order #{{ jo.getID }}</strong></div>
|
|
<div>{{ rider.getFullName }}</div>
|
|
<div class="m-badge m-badge--brand m-badge--wide">{{ service_type }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% 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>
|
|
{{ include('map/' ~ map_js_file) }}
|
|
<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': false,
|
|
'enable_popup': false,
|
|
'access_token': 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw',
|
|
'div_id': 'tracker_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
|
|
};
|
|
|
|
var dashmap = new DashboardMap(options, r_markers, c_markers);
|
|
dashmap.initialize();
|
|
// dashmap.loadLocations('{{ path('rider_locations') }}');
|
|
|
|
return dashmap;
|
|
}
|
|
|
|
function initEventHandler(dashmap) {
|
|
var options = {
|
|
'track_jo': false,
|
|
'track_rider': true,
|
|
'channels': {
|
|
'rider_location': 'rider/{{ rider.getID }}/location',
|
|
'jo_location': 'none',
|
|
'jo_status': 'none'
|
|
},
|
|
};
|
|
|
|
var event_handler = new MapEventHandler(options, dashmap);
|
|
event_handler.connect('tracker', '{{ mqtt_host }}', {{ mqtt_port }});
|
|
}
|
|
|
|
// 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]
|
|
}),
|
|
'hub': L.divIcon({
|
|
className: 'map-div-icon',
|
|
html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-home awesome'>",
|
|
iconSize: [39, 42],
|
|
iconAnchor: [15, 42]
|
|
})
|
|
};
|
|
|
|
var r_markers = {};
|
|
var c_markers = {};
|
|
var h_markers = {};
|
|
|
|
{% set hub = jo.getHub %}
|
|
var dashmap = initMap(r_markers, c_markers, icons);
|
|
dashmap.putCustomerMarker({{ jo.getID }}, {{ jo.getCoordinates.getLatitude }}, {{ jo.getCoordinates.getLongitude }});
|
|
dashmap.putRiderActiveJOMarker({{ rider.getID }}, {{ rider_pos.getLatitude }}, {{ rider_pos.getLongitude }});
|
|
dashmap.putMarker(
|
|
{{ hub.getID }},
|
|
{{ hub.getCoordinates.getLatitude }},
|
|
{{ hub.getCoordinates.getLongitude }},
|
|
h_markers,
|
|
icons['hub'],
|
|
dashmap.map,
|
|
'/'
|
|
);
|
|
initEventHandler(dashmap, icons);
|
|
|
|
</script>
|
|
{% endblock %}
|