aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/app/Application.js4
-rw-r--r--web/app/DeviceImages.js88
-rw-r--r--web/app/Style.js11
-rw-r--r--web/app/store/DeviceImages.js93
-rw-r--r--web/app/view/DeviceDialog.js16
-rw-r--r--web/app/view/DevicesController.js1
-rw-r--r--web/app/view/MapController.js96
-rw-r--r--web/app/view/ReportController.js2
-rw-r--r--web/images/arrow.svg1
-rw-r--r--web/images/bicycle.svg68
-rw-r--r--web/images/bus.svg68
-rw-r--r--web/images/car.svg68
-rw-r--r--web/images/default.svg69
-rw-r--r--web/images/motorcycle.svg68
-rw-r--r--web/images/person.svg68
-rw-r--r--web/images/plane.svg68
-rw-r--r--web/images/ship.svg68
-rw-r--r--web/images/truck.svg68
-rw-r--r--web/l10n/en.json13
-rw-r--r--web/load.js42
20 files changed, 911 insertions, 69 deletions
diff --git a/web/app/Application.js b/web/app/Application.js
index fc6ff5e7..702a75a9 100644
--- a/web/app/Application.js
+++ b/web/app/Application.js
@@ -69,7 +69,8 @@ Ext.define('Traccar.Application', {
'ReportSummary',
'ReportTypes',
'ReportEventTypes',
- 'Statistics'
+ 'Statistics',
+ 'DeviceImages'
],
controllers: [
@@ -126,7 +127,6 @@ Ext.define('Traccar.Application', {
},
showError: function (response) {
- var data;
if (Ext.isString(response)) {
Ext.Msg.alert(Strings.errorTitle, response);
} else if (response.responseText) {
diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js
new file mode 100644
index 00000000..fac16a57
--- /dev/null
+++ b/web/app/DeviceImages.js
@@ -0,0 +1,88 @@
+/*
+ * Copyright 2016 Anton Tananaev (anton@traccar.org)
+ * Copyright 2016 Andrey Kunitsyn (andrey@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Ext.define('Traccar.DeviceImages', {
+ singleton: true,
+
+ getImageSvg: function (color, zoom, angle, category) {
+ var i, device, svg, width, height, rotateTransform, scaleTransform, fill;
+
+ if (category) {
+ device = Ext.getStore('DeviceImages').findRecord('key', category, 0, false, false, true);
+ }
+ if (!device) {
+ device = Ext.getStore('DeviceImages').findRecord('key', 'default', 0, false, false, true);
+ }
+ svg = Ext.clone(device.get('svg'));
+
+ width = parseFloat(svg.documentElement.getAttribute('width'));
+ height = parseFloat(svg.documentElement.getAttribute('height'));
+
+ fill = device.get('fillId');
+ if (!Ext.isArray(fill)) {
+ fill = [fill];
+ }
+ for (i = 0; i < fill.length; i++) {
+ svg.getElementById(fill[i]).style.fill = color;
+ }
+
+ rotateTransform = 'rotate(' + angle + ' ' + (width / 2) + ' ' + (height / 2) + ')';
+ svg.getElementById(device.get('rotateId')).setAttribute('transform', rotateTransform);
+
+ if (zoom) {
+ width *= Traccar.Style.mapScaleSelected;
+ height *= Traccar.Style.mapScaleSelected;
+ scaleTransform = 'scale(' + Traccar.Style.mapScaleSelected + ') ';
+ } else {
+ width *= Traccar.Style.mapScaleNormal;
+ height *= Traccar.Style.mapScaleNormal;
+ scaleTransform = 'scale(' + Traccar.Style.mapScaleNormal + ') ';
+ }
+
+ if (device.get('scaleId') !== device.get('rotateId')) {
+ svg.getElementById(device.get('scaleId')).setAttribute('transform', scaleTransform);
+ } else {
+ svg.getElementById(device.get('scaleId')).setAttribute('transform', scaleTransform + ' ' + rotateTransform);
+ }
+
+ svg.documentElement.setAttribute('width', width);
+ svg.documentElement.setAttribute('height', height);
+ svg.documentElement.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
+
+ return svg;
+ },
+
+ getImageIcon: function (color, zoom, angle, category) {
+ var image, svg, width, height;
+
+ svg = this.getImageSvg(color, zoom, angle, category);
+ width = parseFloat(svg.documentElement.getAttribute('width'));
+ height = parseFloat(svg.documentElement.getAttribute('height'));
+
+ image = new ol.style.Icon({
+ imgSize: [width, height],
+ src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(svg.documentElement))
+ });
+ image.fill = color;
+ image.zoom = zoom;
+ image.angle = angle;
+ image.category = category;
+
+ return image;
+ }
+});
diff --git a/web/app/Style.js b/web/app/Style.js
index 8db8667e..4960aefa 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -51,21 +51,18 @@ Ext.define('Traccar.Style', {
],
mapRouteWidth: 5,
- mapArrowStrokeColor: 'rgba(50, 50, 50, 1.0)',
- mapArrowStrokeWidth: 2,
-
mapTextColor: 'rgba(50, 50, 50, 1.0)',
mapTextStrokeColor: 'rgba(255, 255, 255, 1.0)',
mapTextStrokeWidth: 2,
- mapTextOffset: 10,
+ mapTextOffset: 2,
mapTextFont: 'bold 12px sans-serif',
mapColorOnline: 'rgba(77, 250, 144, 1.0)',
mapColorUnknown: 'rgba(250, 190, 77, 1.0)',
- mapColorOffline: 'rgba(255, 84, 104, 1.0)',
+ mapColorOffline: 'rgba(255, 162, 173, 1.0)',
- mapRadiusNormal: 9,
- mapRadiusSelected: 14,
+ mapScaleNormal: 1,
+ mapScaleSelected: 1.5,
mapMaxZoom: 19,
mapDelay: 500,
diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js
new file mode 100644
index 00000000..efe8606a
--- /dev/null
+++ b/web/app/store/DeviceImages.js
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2016 Anton Tananaev (anton@traccar.org)
+ * Copyright 2016 Andrey Kunitsyn (andrey@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+Ext.define('Traccar.store.DeviceImages', {
+ extend: 'Ext.data.Store',
+ fields: ['key', 'name', 'svg', 'fillId', 'rotateId', 'scaleId'],
+
+ data: [{
+ key: 'arrow',
+ name: Strings.categoryArrow,
+ svg: document.getElementById('arrowSvg').contentDocument,
+ fillId: 'arrow',
+ rotateId: 'arrow',
+ scaleId: 'arrow'
+ }, {
+ key: 'default',
+ name: Strings.categoryDefault,
+ svg: document.getElementById('defaultSvg').contentDocument,
+ fillId: 'path4724',
+ rotateId: 'path4724',
+ scaleId: 'layer1'
+ }, {
+ key: 'car',
+ name: Strings.categoryCar,
+ svg: document.getElementById('carSvg').contentDocument,
+ fillId: 'path4724',
+ rotateId: 'path4724',
+ scaleId: 'layer1'
+ }, {
+ key: 'bus',
+ name: Strings.categoryBus,
+ svg: document.getElementById('busSvg').contentDocument,
+ fillId: 'path4724',
+ rotateId: 'path4724',
+ scaleId: 'layer1'
+ }, {
+ key: 'truck',
+ name: Strings.categoryTruck,
+ svg: document.getElementById('truckSvg').contentDocument,
+ fillId: 'path4724',
+ rotateId: 'path4724',
+ scaleId: 'layer1'
+ }, {
+ key: 'ship',
+ name: Strings.categoryShip,
+ svg: document.getElementById('shipSvg').contentDocument,
+ fillId: 'path4724',
+ rotateId: 'path4724',
+ scaleId: 'layer1'
+ }, {
+ key: 'plane',
+ name: Strings.categoryPlane,
+ svg: document.getElementById('planeSvg').contentDocument,
+ fillId: 'path4724',
+ rotateId: 'path4724',
+ scaleId: 'layer1'
+ }, {
+ key: 'motorcycle',
+ name: Strings.categoryMotorcycle,
+ svg: document.getElementById('motorcycleSvg').contentDocument,
+ fillId: 'path4724',
+ rotateId: 'path4724',
+ scaleId: 'layer1'
+ }, {
+ key: 'bicycle',
+ name: Strings.categoryBicycle,
+ svg: document.getElementById('bicycleSvg').contentDocument,
+ fillId: 'path4724',
+ rotateId: 'path4724',
+ scaleId: 'layer1'
+ }, {
+ key: 'person',
+ name: Strings.categoryPerson,
+ svg: document.getElementById('personSvg').contentDocument,
+ fillId: 'path4724',
+ rotateId: 'path4724',
+ scaleId: 'layer1'
+ }]
+});
diff --git a/web/app/view/DeviceDialog.js b/web/app/view/DeviceDialog.js
index 68740b24..d3f964ed 100644
--- a/web/app/view/DeviceDialog.js
+++ b/web/app/view/DeviceDialog.js
@@ -57,6 +57,22 @@ Ext.define('Traccar.view.DeviceDialog', {
xtype: 'textfield',
name: 'contact',
fieldLabel: Strings.deviceContact
+ }, {
+ xtype: 'combobox',
+ name: 'category',
+ fieldLabel: Strings.deviceCategory,
+ store: 'DeviceImages',
+ queryMode: 'local',
+ displayField: 'name',
+ valueField: 'key',
+ listConfig: {
+ getInnerTpl: function () {
+ return '<table><tr valign="middle" ><td><div align="center" style="width:40px;height:40px;" >' +
+ '{[new XMLSerializer().serializeToString(Traccar.DeviceImages.getImageSvg(' +
+ 'Traccar.Style.mapColorOnline, false, 0, values.key))]}</div></td>' +
+ '<td>- {name}</td></tr></table>';
+ }
+ }
}]
}
});
diff --git a/web/app/view/DevicesController.js b/web/app/view/DevicesController.js
index aa8e7886..a31ceb77 100644
--- a/web/app/view/DevicesController.js
+++ b/web/app/view/DevicesController.js
@@ -147,6 +147,7 @@ Ext.define('Traccar.view.DevicesController', {
selectDevice: function (device, center) {
this.getView().getSelectionModel().select([device], false, true);
+ this.updateButtons(this.getView().getSelectionModel());
this.getView().getView().focusRow(device);
},
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 32ea6b05..c981fabc 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -22,7 +22,8 @@ Ext.define('Traccar.view.MapController', {
requires: [
'Traccar.model.Position',
'Traccar.model.Device',
- 'Traccar.GeofenceConverter'
+ 'Traccar.GeofenceConverter',
+ 'Traccar.DeviceImages'
],
config: {
@@ -70,7 +71,7 @@ Ext.define('Traccar.view.MapController', {
this.lookupReference('showReportsButton').setVisible(Traccar.app.isMobile());
},
- showReports: function() {
+ showReports: function () {
Traccar.app.showReports(true);
},
@@ -85,18 +86,15 @@ Ext.define('Traccar.view.MapController', {
}
},
- changeMarkerColor: function (style, color) {
- return new ol.style.Style({
- image: new ol.style.Arrow({
- radius: style.getImage().getRadius(),
- fill: new ol.style.Fill({
- color: color
- }),
- stroke: style.getImage().getStroke(),
- rotation: style.getImage().getRotation()
- }),
+ changeMarkerColor: function (style, color, category) {
+ var newStyle = new ol.style.Style({
+ image: Traccar.DeviceImages.getImageIcon(color,
+ style.getImage().zoom,
+ style.getImage().angle,
+ category),
text: style.getText()
});
+ return newStyle;
},
updateDevice: function (store, data) {
@@ -113,7 +111,7 @@ Ext.define('Traccar.view.MapController', {
if (deviceId in this.latestMarkers) {
marker = this.latestMarkers[deviceId];
marker.setStyle(
- this.changeMarkerColor(marker.getStyle(), this.getDeviceColor(device)));
+ this.changeMarkerColor(marker.getStyle(), this.getDeviceColor(device), device.get('category')));
}
}
},
@@ -154,18 +152,20 @@ Ext.define('Traccar.view.MapController', {
if (deviceId in this.latestMarkers) {
marker = this.latestMarkers[deviceId];
marker.setGeometry(geometry);
+ marker.setStyle(this.rotateMarker(marker.getStyle(), position.get('course')));
} else {
marker = new ol.Feature(geometry);
marker.set('record', device);
- this.latestMarkers[deviceId] = marker;
- this.getView().getLatestSource().addFeature(marker);
- style = this.getLatestMarker(this.getDeviceColor(device));
+ style = this.getLatestMarker(this.getDeviceColor(device),
+ position.get('course'),
+ device.get('category'));
style.getText().setText(device.get('name'));
marker.setStyle(style);
- }
+ this.latestMarkers[deviceId] = marker;
+ this.getView().getLatestSource().addFeature(marker);
- marker.getStyle().getImage().setRotation(position.get('course') * Math.PI / 180);
+ }
if (marker === this.selectedMarker && this.followSelected()) {
this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
@@ -231,8 +231,7 @@ Ext.define('Traccar.view.MapController', {
this.reportMarkers[position.get('id')] = marker;
this.getView().getReportSource().addFeature(marker);
- style = this.getReportMarker(position.get('deviceId'));
- style.getImage().setRotation(position.get('course') * Math.PI / 180);
+ style = this.getReportMarker(position.get('deviceId'), position.get('course'));
/*style.getText().setText(
Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat24));*/
@@ -278,18 +277,10 @@ Ext.define('Traccar.view.MapController', {
});
},
- getMarkerStyle: function (radius, color) {
+ getMarkerStyle: function (zoom, color, angle, category) {
+ var image = Traccar.DeviceImages.getImageIcon(color, zoom, angle, category);
return new ol.style.Style({
- image: new ol.style.Arrow({
- radius: radius,
- fill: new ol.style.Fill({
- color: color
- }),
- stroke: new ol.style.Stroke({
- color: Traccar.Style.mapArrowStrokeColor,
- width: Traccar.Style.mapArrowStrokeWidth
- })
- }),
+ image: image,
text: new ol.style.Text({
textBaseline: 'bottom',
fill: new ol.style.Fill({
@@ -299,47 +290,58 @@ Ext.define('Traccar.view.MapController', {
color: Traccar.Style.mapTextStrokeColor,
width: Traccar.Style.mapTextStrokeWidth
}),
- offsetY: -radius / 2 - Traccar.Style.mapTextOffset,
+ offsetY: -image.getSize()[1] / 2 - Traccar.Style.mapTextOffset,
font : Traccar.Style.mapTextFont
})
});
},
- getLatestMarker: function (color) {
- return this.getMarkerStyle(
- Traccar.Style.mapRadiusNormal, color);
+ getLatestMarker: function (color, angle, category) {
+ return this.getMarkerStyle(false, color, angle, category);
},
- getReportMarker: function (deviceId) {
+ getReportMarker: function (deviceId, angle) {
var index = 0;
if (deviceId !== undefined) {
index = deviceId % Traccar.Style.mapRouteColor.length;
}
- return this.getMarkerStyle(
- Traccar.Style.mapRadiusNormal, Traccar.Style.mapRouteColor[index]);
+ return this.getMarkerStyle(false, Traccar.Style.mapRouteColor[index], angle, 'arrow');
},
- resizeMarker: function (style, radius) {
+ resizeMarker: function (style, zoom) {
+ var image, text;
+ image = Traccar.DeviceImages.getImageIcon(style.getImage().fill,
+ zoom,
+ style.getImage().angle,
+ style.getImage().category);
+ text = style.getText();
+ text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset);
return new ol.style.Style({
- image: new ol.style.Arrow({
- radius: radius,
- fill: style.getImage().getFill(),
- stroke: style.getImage().getStroke(),
- rotation: style.getImage().getRotation()
- }),
+ image: image,
+ text: text
+ });
+ },
+
+ rotateMarker: function (style, angle) {
+ var newStyle = new ol.style.Style({
+ image: Traccar.DeviceImages.getImageIcon(style.getImage().fill,
+ style.getImage().zoom,
+ angle,
+ style.getImage().category),
text: style.getText()
});
+ return newStyle;
},
selectMarker: function (marker, center) {
if (this.selectedMarker) {
this.selectedMarker.setStyle(
- this.resizeMarker(this.selectedMarker.getStyle(), Traccar.Style.mapRadiusNormal));
+ this.resizeMarker(this.selectedMarker.getStyle(), false));
}
if (marker) {
marker.setStyle(
- this.resizeMarker(marker.getStyle(), Traccar.Style.mapRadiusSelected));
+ this.resizeMarker(marker.getStyle(), true));
if (center) {
this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
}
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index 224a2a86..a8c5f4eb 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -41,7 +41,7 @@ Ext.define('Traccar.view.ReportController', {
}
},
- hideReports: function() {
+ hideReports: function () {
Traccar.app.showReports(false);
},
diff --git a/web/images/arrow.svg b/web/images/arrow.svg
new file mode 100644
index 00000000..a85201d8
--- /dev/null
+++ b/web/images/arrow.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="26" height="26"><polygon id="arrow" points="13,4 19,22 13,19 7,22" style="fill:#008000;stroke:#000000;stroke-width:1px;" transform="" /></svg>
diff --git a/web/images/bicycle.svg b/web/images/bicycle.svg
new file mode 100644
index 00000000..86132ffc
--- /dev/null
+++ b/web/images/bicycle.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="40"
+ height="40"
+ viewBox="0 0 40 40"
+ id="svg4145"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="bicycle.svg">
+ <defs
+ id="defs4147" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="15.839192"
+ inkscape:cx="-2.9160663"
+ inkscape:cy="26.96638"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="981"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata4150">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+ id="path4724"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ssscccs" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path4140"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 17.279576,21.785713 -2.19029,0 q -0.279018,0 -0.404576,-0.24414 -0.118583,-0.244141 0.04883,-0.467355 l 1.311384,-1.750837 q -0.453404,-0.216239 -0.955636,-0.216239 -0.920759,0 -1.576451,0.655692 -0.655692,0.655692 -0.655692,1.576451 0,0.920759 0.655692,1.576451 0.655692,0.655692 1.576451,0.655692 0.802176,0 1.416015,-0.502232 0.61384,-0.509208 0.774275,-1.283483 z m -1.297433,-0.892857 1.297433,0 Q 17.154018,20.299943 16.756418,19.86049 l -0.774275,1.032366 z m 3.348214,0 2.008929,-2.678571 -3.348214,0 -0.69057,0.920759 q 0.732422,0.718471 0.878907,1.757812 l 1.150948,0 z m 7.156808,2.02288 q 0.655692,-0.655692 0.655692,-1.576451 0,-0.920759 -0.655692,-1.576451 -0.655692,-0.655692 -1.576451,-0.655692 -0.418526,0 -0.844029,0.167411 l 1.213728,1.813616 q 0.104632,0.160435 0.06976,0.341797 -0.03488,0.181361 -0.188338,0.279018 -0.104631,0.07673 -0.251116,0.07673 -0.24414,0 -0.369698,-0.202287 L 23.327293,19.76981 q -0.648716,0.662668 -0.648716,1.569476 0,0.920759 0.655692,1.576451 0.655691,0.655692 1.57645,0.655692 0.920759,0 1.576451,-0.655692 z m 0.62779,-3.780692 q 0.920759,0.913783 0.920759,2.204241 0,1.290457 -0.920759,2.211216 -0.913783,0.913784 -2.204241,0.913784 -1.290457,0 -2.211216,-0.913784 -0.913784,-0.920759 -0.913784,-2.211216 0,-0.676618 0.272043,-1.276507 0.279018,-0.606864 0.767299,-1.046317 l -0.453404,-0.683594 -2.462333,3.271485 q -0.125558,0.181361 -0.355747,0.181361 l -1.374163,0 q -0.160436,1.143974 -1.039342,1.911273 -0.878906,0.767299 -2.050781,0.767299 -1.290458,0 -2.211217,-0.913784 -0.913783,-0.920759 -0.913783,-2.211216 0,-1.290458 0.913783,-2.204241 0.920759,-0.920759 2.211217,-0.920759 0.795201,0 1.499721,0.383649 l 0.955636,-1.276506 -1.5625,0 q -0.181362,0 -0.313895,-0.132534 -0.132534,-0.132533 -0.132534,-0.313895 0,-0.181361 0.132534,-0.313895 0.132533,-0.132533 0.313895,-0.132533 l 2.678571,0 0,0.892857 3.03432,0 -0.592913,-0.892857 -1.548549,0 q -0.181362,0 -0.313896,-0.132534 -0.132533,-0.132533 -0.132533,-0.313895 0,-0.181362 0.132533,-0.313895 0.132534,-0.132534 0.313896,-0.132534 l 1.785714,0 q 0.23019,0 0.369699,0.195313 l 1.862444,2.790179 q 0.634765,-0.30692 1.339285,-0.30692 1.290458,0 2.204241,0.920759 z" />
+ </g>
+</svg>
diff --git a/web/images/bus.svg b/web/images/bus.svg
new file mode 100644
index 00000000..6f1b7a90
--- /dev/null
+++ b/web/images/bus.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="40"
+ height="40"
+ viewBox="0 0 40 40"
+ id="svg4145"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="bus.svg">
+ <defs
+ id="defs4147" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="11.313708"
+ inkscape:cx="-29.149417"
+ inkscape:cy="17.209557"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="981"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata4150">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+ id="path4724"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ssscccs" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path4477"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 17.056362,22.866908 q 0.265067,-0.265067 0.265067,-0.634766 0,-0.369699 -0.265067,-0.62779 -0.258092,-0.265067 -0.62779,-0.265067 -0.369699,0 -0.634766,0.265067 -0.258091,0.258091 -0.258091,0.62779 0,0.369699 0.258091,0.634766 0.265067,0.258091 0.634766,0.258091 0.369698,0 0.62779,-0.258091 z m 7.142857,0 q 0.265067,-0.265067 0.265067,-0.634766 0,-0.369699 -0.265067,-0.62779 -0.258091,-0.265067 -0.62779,-0.265067 -0.369699,0 -0.634766,0.265067 -0.258091,0.258091 -0.258091,0.62779 0,0.369699 0.258091,0.634766 0.265067,0.258091 0.634766,0.258091 0.369699,0 0.62779,-0.258091 z m -0.0558,-3.397043 -0.502233,-2.678571 q -0.03488,-0.160435 -0.160435,-0.258092 -0.118582,-0.104631 -0.279018,-0.104631 l -6.40346,0 q -0.160435,0 -0.285993,0.104631 -0.118582,0.09766 -0.15346,0.258092 l -0.502232,2.678571 q -0.03488,0.209264 0.09766,0.369699 0.132534,0.160435 0.341797,0.160435 l 7.407924,0 q 0.209264,0 0.341797,-0.160435 0.132534,-0.160435 0.09766,-0.369699 z m -1.674108,-4.031808 q 0.09766,-0.09766 0.09766,-0.237165 0,-0.139509 -0.09766,-0.237165 -0.09766,-0.09766 -0.237165,-0.09766 l -4.464285,0 q -0.139509,0 -0.237166,0.09766 -0.09766,0.09766 -0.09766,0.237165 0,0.139509 0.09766,0.237165 0.09766,0.09766 0.237166,0.09766 l 4.464285,0 q 0.139509,0 0.237165,-0.09766 z m 2.887835,4.820034 0,4.206194 -0.892857,0 0,0.892857 q 0,0.369699 -0.265067,0.62779 -0.258091,0.265067 -0.62779,0.265067 -0.369699,0 -0.634766,-0.265067 -0.258091,-0.258091 -0.258091,-0.62779 l 0,-0.892857 -5.357143,0 0,0.892857 q 0,0.369699 -0.265067,0.62779 -0.258092,0.265067 -0.62779,0.265067 -0.369699,0 -0.634766,-0.265067 -0.258091,-0.258091 -0.258091,-0.62779 l 0,-0.892857 -0.892857,0 0,-4.206194 q 0,-0.78125 0.174386,-1.555525 l 0.718471,-3.166853 q 0.06278,-0.544084 0.676618,-0.955636 0.620815,-0.411551 1.604353,-0.620814 0.99051,-0.209264 2.183311,-0.209264 1.192802,0 2.17634,0.209264 0.990513,0.209263 1.604352,0.620814 0.620815,0.411552 0.683594,0.955636 l 0.732422,3.166853 q 0.160435,0.711496 0.160435,1.555525 z" />
+ </g>
+</svg>
diff --git a/web/images/car.svg b/web/images/car.svg
new file mode 100644
index 00000000..d712374f
--- /dev/null
+++ b/web/images/car.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="40"
+ height="40"
+ viewBox="0 0 40 40"
+ id="svg4145"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="car.svg">
+ <defs
+ id="defs4147" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="11.313708"
+ inkscape:cx="-29.149417"
+ inkscape:cy="17.209557"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="981"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata4150">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+ id="path4724"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ssscccs" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path4409"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 15.877511,21.904297 q 0.327846,-0.327846 0.327846,-0.788225 0,-0.46038 -0.327846,-0.788226 Q 15.549665,20 15.089285,20 q -0.460379,0 -0.788225,0.327846 -0.327846,0.327846 -0.327846,0.788226 0,0.460379 0.327846,0.788225 0.327846,0.327846 0.788225,0.327846 0.46038,0 0.788226,-0.327846 z m 0.578962,-3.020368 7.087053,0 -0.620814,-2.490235 q -0.01395,-0.0558 -0.09766,-0.118582 -0.0837,-0.06976 -0.146484,-0.06976 l -5.357143,0 q -0.06278,0 -0.146484,0.06976 -0.08371,0.06278 -0.09766,0.118582 l -0.620815,2.490235 z m 9.242466,3.020368 q 0.327846,-0.327846 0.327846,-0.788225 0,-0.46038 -0.327846,-0.788226 Q 25.371093,20 24.910714,20 q -0.46038,0 -0.788226,0.327846 -0.327846,0.327846 -0.327846,0.788226 0,0.460379 0.327846,0.788225 0.327846,0.327846 0.788226,0.327846 0.460379,0 0.788225,-0.327846 z m 1.443918,-1.457868 0,2.678571 q 0,0.09766 -0.06278,0.160436 -0.06278,0.06278 -0.160436,0.06278 l -0.669642,0 0,0.892857 q 0,0.558035 -0.390625,0.94866 -0.390625,0.390625 -0.948661,0.390625 -0.558036,0 -0.948661,-0.390625 -0.390625,-0.390625 -0.390625,-0.94866 l 0,-0.892857 -7.142857,0 0,0.892857 q 0,0.558035 -0.390625,0.94866 -0.390625,0.390625 -0.948661,0.390625 -0.558035,0 -0.94866,-0.390625 Q 13.75,24.799107 13.75,24.241072 l 0,-0.892857 -0.669643,0 q -0.09766,0 -0.160436,-0.06278 -0.06278,-0.06278 -0.06278,-0.160436 l 0,-2.678571 q 0,-0.648717 0.453404,-1.102121 0.46038,-0.460379 1.109096,-0.460379 l 0.195313,0 0.732422,-2.922712 q 0.160435,-0.655692 0.725446,-1.095145 0.565011,-0.446429 1.248605,-0.446429 l 5.357143,0 q 0.683594,0 1.248605,0.446429 0.565011,0.439453 0.725446,1.095145 l 0.732422,2.922712 0.195313,0 q 0.648716,0 1.10212,0.460379 0.46038,0.453404 0.46038,1.102121 z" />
+ </g>
+</svg>
diff --git a/web/images/default.svg b/web/images/default.svg
new file mode 100644
index 00000000..983e487c
--- /dev/null
+++ b/web/images/default.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="40"
+ height="40"
+ viewBox="0 0 40 40"
+ id="svg4145"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="default.svg">
+ <defs
+ id="defs4147" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="11.313708"
+ inkscape:cx="-7.4058825"
+ inkscape:cy="17.209557"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="981"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata4150">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+ id="path4724"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ssscccs" />
+ <circle
+ style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.81362325;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path4250"
+ cx="20"
+ cy="20"
+ r="5.2625632" />
+ </g>
+</svg>
diff --git a/web/images/motorcycle.svg b/web/images/motorcycle.svg
new file mode 100644
index 00000000..5e46b4d3
--- /dev/null
+++ b/web/images/motorcycle.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="40"
+ height="40"
+ viewBox="0 0 40 40"
+ id="svg4145"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="motorcycle.svg">
+ <defs
+ id="defs4147" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="11.313708"
+ inkscape:cx="-7.4058825"
+ inkscape:cy="17.209557"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="981"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata4150">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+ id="path4724"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ssscccs" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path4140"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 28.014333,20.976253 q 0.08371,0.718471 -0.15346,1.388114 -0.237165,0.662667 -0.690569,1.136997 -0.453404,0.474331 -1.109096,0.739398 -0.648716,0.265067 -1.367187,0.216238 -1.123047,-0.07673 -1.953125,-0.87193 -0.823103,-0.795201 -0.93471,-1.911273 -0.08371,-0.774274 0.188337,-1.464843 0.279018,-0.697545 0.830078,-1.192802 l -0.495257,-0.746373 q -0.669643,0.558036 -1.053292,1.353237 -0.38365,0.795201 -0.38365,1.702009 0,0.188337 -0.132533,0.327846 -0.125558,0.132533 -0.313895,0.132533 l -1.785714,0 -0.481306,0 q -0.160436,1.143974 -1.039342,1.911273 -0.878906,0.767299 -2.050781,0.767299 -1.290458,0 -2.211217,-0.913784 -0.913783,-0.920759 -0.913783,-2.211216 0,-1.290458 0.913783,-2.204241 0.920759,-0.920759 2.211217,-0.920759 0.530134,0 1.060268,0.188337 l 0.167411,-0.313895 q -0.85798,-0.767299 -2.120536,-0.767299 l -0.446429,0 q -0.181361,0 -0.313895,-0.132534 -0.132533,-0.132533 -0.132533,-0.313895 0,-0.181361 0.132533,-0.313895 0.132534,-0.132533 0.313895,-0.132533 l 0.892857,0 q 0.544085,0 1.01144,0.09766 0.467355,0.09068 0.809152,0.265067 0.348772,0.174386 0.502232,0.279018 0.15346,0.09766 0.355748,0.251116 l 3.571428,0 0.802177,0 -0.592913,-0.892857 -1.548549,0 q -0.209264,0 -0.341797,-0.15346 -0.132534,-0.160435 -0.09766,-0.369699 0.0279,-0.160435 0.160435,-0.265067 0.132533,-0.104632 0.299944,-0.104632 l 1.764788,0 q 0.23019,0 0.369699,0.195313 l 0.488281,0.732422 0.795201,-0.795201 q 0.132533,-0.132534 0.32087,-0.132534 l 0.70452,0 q 0.181362,0 0.313895,0.132534 0.132534,0.132533 0.132534,0.313895 l 0,0.892857 q 0,0.181362 -0.132534,0.313895 -0.132533,0.132534 -0.313895,0.132534 l -1.248605,0 0.802177,1.199777 q 0.913783,-0.439454 1.918248,-0.251117 0.997488,0.181362 1.702009,0.941686 0.70452,0.753348 0.823102,1.764788 z m -12.925502,2.594866 q 0.802176,0 1.416016,-0.502232 0.613839,-0.509208 0.774274,-1.283483 l -2.19029,0 q -0.244141,0 -0.38365,-0.216238 -0.125558,-0.223215 -0.007,-0.439453 l 1.025391,-1.932199 q -0.327846,-0.09068 -0.634766,-0.09068 -0.920759,0 -1.576451,0.655692 -0.655692,0.655692 -0.655692,1.576451 0,0.920759 0.655692,1.576451 0.655692,0.655692 1.576451,0.655692 z m 8.244978,-0.655692 q 0.655692,0.655692 1.576451,0.655692 0.920758,0 1.57645,-0.655692 0.655692,-0.655692 0.655692,-1.576451 0,-0.920759 -0.655692,-1.576451 -0.655692,-0.655692 -1.57645,-0.655692 -0.418527,0 -0.844029,0.167411 l 1.213727,1.813616 q 0.104632,0.160435 0.06976,0.341797 -0.03488,0.181361 -0.188337,0.279018 -0.104632,0.07673 -0.251116,0.07673 -0.244141,0 -0.369699,-0.202287 L 23.326833,19.7695 q -0.648716,0.662668 -0.648716,1.569476 0,0.920759 0.655692,1.576451 z" />
+ </g>
+</svg>
diff --git a/web/images/person.svg b/web/images/person.svg
new file mode 100644
index 00000000..71546ecb
--- /dev/null
+++ b/web/images/person.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="40"
+ height="40"
+ viewBox="0 0 40 40"
+ id="svg4145"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="person.svg">
+ <defs
+ id="defs4147" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="15.839192"
+ inkscape:cx="-2.9160663"
+ inkscape:cy="21.915617"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="981"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata4150">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+ id="path4724"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ssscccs" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path4140"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 24.464286,23.508649 q 0,0.760323 -0.439454,1.304408 -0.432477,0.544085 -1.046317,0.544085 l -5.957031,0 q -0.613839,0 -1.053292,-0.544085 -0.432478,-0.544085 -0.432478,-1.304408 0,-0.592913 0.0558,-1.116072 0.06278,-0.530134 0.223214,-1.060268 0.160435,-0.537109 0.404576,-0.913783 0.251116,-0.38365 0.655692,-0.620815 0.411551,-0.24414 0.941685,-0.24414 0.913784,0.892857 2.183315,0.892857 1.269531,0 2.183315,-0.892857 0.530134,0 0.934709,0.24414 0.411552,0.237165 0.655692,0.620815 0.251116,0.376674 0.411552,0.913783 0.160435,0.530134 0.216239,1.060268 0.06278,0.523159 0.06278,1.116072 z m -2.57394,-8.077567 q 0.788225,0.78125 0.788225,1.890346 0,1.109096 -0.788225,1.897321 -0.78125,0.78125 -1.890346,0.78125 -1.109096,0 -1.897322,-0.78125 -0.78125,-0.788225 -0.78125,-1.897321 0,-1.109096 0.78125,-1.890346 Q 18.890904,14.642856 20,14.642856 q 1.109096,0 1.890346,0.788226 z" />
+ </g>
+</svg>
diff --git a/web/images/plane.svg b/web/images/plane.svg
new file mode 100644
index 00000000..5c81e9b4
--- /dev/null
+++ b/web/images/plane.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="40"
+ height="40"
+ viewBox="0 0 40 40"
+ id="svg4145"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="plane.svg">
+ <defs
+ id="defs4147" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="11.313708"
+ inkscape:cx="-7.4058825"
+ inkscape:cy="17.209557"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="981"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata4150">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+ id="path4724"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ssscccs" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path4140"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 24.710579,15.289739 q 0.30692,0.362723 0.08371,1.032366 -0.223214,0.669642 -0.753348,1.199776 l -1.123047,1.123047 1.116072,4.854911 q 0.03488,0.132533 -0.08371,0.23019 l -0.892857,0.669643 q -0.04883,0.04185 -0.132533,0.04185 -0.0279,0 -0.04883,-0.007 -0.104632,-0.02093 -0.146485,-0.111607 l -1.946149,-3.543527 -1.806641,1.80664 0.369699,1.353237 q 0.03488,0.118583 -0.0558,0.216239 l -0.669643,0.669643 q -0.06278,0.06278 -0.160435,0.06278 l -0.01395,0 Q 18.342,24.873977 18.279221,24.797247 L 16.960858,23.03946 15.203046,21.7211 q -0.07673,-0.04883 -0.09068,-0.160435 -0.007,-0.09068 0.06278,-0.174386 l 0.669643,-0.676619 q 0.06278,-0.06278 0.160435,-0.06278 0.04185,0 0.0558,0.007 l 1.353237,0.369698 1.806641,-1.80664 -3.543527,-1.94615 q -0.09766,-0.0558 -0.118583,-0.16741 -0.01395,-0.111608 0.06278,-0.188337 L 16.51443,16.02216 q 0.09766,-0.09068 0.209263,-0.0558 l 4.638672,1.109096 1.116071,-1.116072 q 0.530134,-0.530134 1.199777,-0.753348 0.669643,-0.223214 1.032366,0.08371 z" />
+ </g>
+</svg>
diff --git a/web/images/ship.svg b/web/images/ship.svg
new file mode 100644
index 00000000..c82dc6c7
--- /dev/null
+++ b/web/images/ship.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="40"
+ height="40"
+ viewBox="0 0 40 40"
+ id="svg4145"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="ship.svg">
+ <defs
+ id="defs4147" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="11.313708"
+ inkscape:cx="14.337652"
+ inkscape:cy="17.209557"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="981"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata4150">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+ id="path4724"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ssscccs" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path4511"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 25.489676,24.596818 q 0.132533,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.892857,0.892858 -0.62779,0.62779 -0.578962,-0.578962 -0.578962,0.578962 q -0.125558,0.132533 -0.313895,0.132533 -0.188337,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132533 -0.313895,0.132533 -0.181362,0 -0.313895,-0.132533 l -0.578963,-0.578962 -0.578962,0.578962 q -0.132533,0.132533 -0.313895,0.132533 -0.181361,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132533,0.132533 -0.313895,0.132533 -0.181362,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132533 -0.313895,0.132533 -0.181362,0 -0.313895,-0.132533 L 16.875,25.538504 16.296038,26.117466 q -0.132534,0.132533 -0.313896,0.132533 -0.181361,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132533,0.132533 -0.313895,0.132533 -0.181361,0 -0.313895,-0.132533 l -0.892857,-0.892857 0.62779,-0.627791 0.578962,0.578962 0.578962,-0.578962 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.578962,0.578962 0.578963,-0.578962 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313896,0.132533 L 23.125,25.17578 23.703962,24.596818 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 z M 14.510323,24.331751 q -0.132533,0.132534 -0.313895,0.132534 -0.181361,0 -0.313895,-0.132534 l -0.892857,-0.892857 0.62779,-0.62779 0.578962,0.571987 0.578962,-0.571987 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.578962,0.571987 0.446429,-0.446429 0,-2.043806 -1.464844,-2.19029 q -0.118582,-0.181361 -0.04883,-0.390625 0.06976,-0.216239 0.279018,-0.285993 l 1.234654,-0.404576 0,-2.085659 0.892857,0 0,-0.892857 1.785714,0 0,-0.892857 1.785715,0 0,0.892857 1.785714,0 0,0.892857 0.892857,0 0,2.085659 1.234654,0.404576 q 0.209264,0.06975 0.279018,0.285993 0.06976,0.209264 -0.04883,0.390625 l -1.464844,2.19029 0,2.043806 0.132534,-0.125558 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.571987 0.578962,-0.571987 q 0.132533,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.892857,0.892857 -0.62779,0.62779 -0.578962,-0.578962 -0.578962,0.578962 q -0.125558,0.132534 -0.313895,0.132534 -0.188337,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132534 -0.313895,0.132534 -0.181362,0 -0.313895,-0.132534 l -0.578963,-0.578962 -0.578962,0.578962 q -0.132533,0.132534 -0.313895,0.132534 -0.181361,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132533,0.132534 -0.313895,0.132534 -0.181362,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132534 -0.313895,0.132534 -0.181362,0 -0.313895,-0.132534 L 16.875,23.752789 16.296038,24.331751 q -0.132534,0.132534 -0.313896,0.132534 -0.181361,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 z m 2.811105,-7.90318 0,0.892857 L 20,16.428571 l 2.678571,0.892857 0,-0.892857 -0.892857,0 0,-0.892858 -3.571429,0 0,0.892858 -0.892857,0 z" />
+ </g>
+</svg>
diff --git a/web/images/truck.svg b/web/images/truck.svg
new file mode 100644
index 00000000..0f82a3e8
--- /dev/null
+++ b/web/images/truck.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="40"
+ height="40"
+ viewBox="0 0 40 40"
+ id="svg4145"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="truck.svg">
+ <defs
+ id="defs4147" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="11.313708"
+ inkscape:cx="-7.4058825"
+ inkscape:cy="17.209557"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ units="px"
+ inkscape:window-width="1920"
+ inkscape:window-height="981"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1" />
+ <metadata
+ id="metadata4150">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1">
+ <path
+ style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z"
+ id="path4724"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ssscccs" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path4443"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 17.726005,23.75279 q 0.265067,-0.265067 0.265067,-0.627791 0,-0.362723 -0.265067,-0.62779 -0.265067,-0.265067 -0.627791,-0.265067 -0.362723,0 -0.62779,0.265067 -0.265067,0.265067 -0.265067,0.62779 0,0.362724 0.265067,0.627791 0.265067,0.265067 0.62779,0.265067 0.362724,0 0.627791,-0.265067 z m -2.413505,-4.199219 2.678572,0 0,-1.785714 -1.102121,0 q -0.09068,0 -0.15346,0.06278 l -1.360212,1.360212 q -0.06278,0.06278 -0.06278,0.153459 l 0,0.209264 z m 8.663505,4.199219 q 0.265067,-0.265067 0.265067,-0.627791 0,-0.362723 -0.265067,-0.62779 -0.265067,-0.265067 -0.627791,-0.265067 -0.362723,0 -0.62779,0.265067 -0.265067,0.265067 -0.265067,0.62779 0,0.362724 0.265067,0.627791 0.265067,0.265067 0.62779,0.265067 0.362724,0 0.627791,-0.265067 z m 2.050781,-8.217076 0,7.142857 q 0,0.104632 -0.0279,0.188337 -0.0279,0.07673 -0.09766,0.125558 -0.06278,0.04883 -0.111607,0.0837 -0.04883,0.0279 -0.167411,0.04185 -0.111607,0.007 -0.15346,0.01395 -0.04185,0 -0.181361,0 -0.132534,-0.007 -0.15346,-0.007 0,0.739398 -0.523159,1.262556 -0.523158,0.523159 -1.262556,0.523159 -0.739397,0 -1.262555,-0.523159 Q 21.5625,23.864397 21.5625,23.124999 l -2.678571,0 q 0,0.739398 -0.523159,1.262556 -0.523158,0.523159 -1.262556,0.523159 -0.739397,0 -1.262555,-0.523159 Q 15.3125,23.864397 15.3125,23.124999 l -0.446428,0 q -0.02093,0 -0.160436,0.007 -0.132533,0 -0.174386,0 -0.04185,-0.007 -0.160435,-0.01395 -0.111607,-0.01395 -0.160435,-0.04185 -0.04883,-0.03488 -0.118583,-0.0837 -0.06278,-0.04883 -0.09068,-0.125558 -0.0279,-0.0837 -0.0279,-0.188337 0,-0.181362 0.132534,-0.313895 0.132533,-0.132534 0.313895,-0.132534 l 0,-2.232143 q 0,-0.0558 -0.007,-0.24414 0,-0.188337 0,-0.265067 0.007,-0.07673 0.02093,-0.237165 0.01395,-0.167411 0.04185,-0.258092 0.03488,-0.09766 0.09766,-0.216239 0.06975,-0.118582 0.160435,-0.209263 l 1.381138,-1.381138 q 0.132534,-0.132534 0.348773,-0.223215 0.223214,-0.09068 0.411551,-0.09068 l 1.116072,0 0,-1.339285 q 0,-0.181362 0.132533,-0.313895 0.132534,-0.132534 0.313895,-0.132534 l 7.142857,0 q 0.181362,0 0.313895,0.132534 0.132534,0.132533 0.132534,0.313895 z" />
+ </g>
+</svg>
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 580c2a96..ee6bef81 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -60,6 +60,7 @@
"devicePhone": "Phone",
"deviceModel": "Model",
"deviceContact": "Contact",
+ "deviceCategory": "Category",
"deviceLastUpdate": "Last Update",
"deviceCommand": "Command",
"deviceFollow": "Follow",
@@ -185,5 +186,15 @@
"statisticsActiveDevices": "Active Devices",
"statisticsRequests": "Requests",
"statisticsMessagesReceived": "Messages Received",
- "statisticsMessagesStored": "Messages Stored"
+ "statisticsMessagesStored": "Messages Stored",
+ "categoryArrow": "Arrow",
+ "categoryDefault": "Default",
+ "categoryCar": "Car",
+ "categoryBus": "Bus",
+ "categoryTruck": "Truck",
+ "categoryShip": "Ship",
+ "categoryPlane": "Plane",
+ "categoryMotorcycle": "Motorcycle",
+ "categoryBicycle": "Bicycle",
+ "categoryPerson": "Person"
} \ No newline at end of file
diff --git a/web/load.js b/web/load.js
index f4987acd..0d13b2c6 100644
--- a/web/load.js
+++ b/web/load.js
@@ -1,24 +1,34 @@
(function () {
+ var debugMode, touchMode, locale, localeParameter, extjsVersion, fontAwesomeVersion, olVersion;
function addStyleFile(file) {
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', file);
- document.head.appendChild(link)
+ document.head.appendChild(link);
}
function addScriptFile(file) {
var script = document.createElement('script');
script.setAttribute('src', file);
- script.async = false
+ script.async = false;
document.head.appendChild(script);
}
- var debugMode = document.getElementById('loadScript').getAttribute('mode') === 'debug';
- var touchMode = 'ontouchstart' in window || navigator.maxTouchPoints;
+ function addSvgFile(file, id) {
+ var svg = document.createElement('object');
+ svg.setAttribute('id', id);
+ svg.setAttribute('data', file);
+ svg.setAttribute('type', 'image/svg+xml');
+ svg.setAttribute('style', 'visibility:hidden');
+ document.body.appendChild(svg);
+ }
+
+ debugMode = document.getElementById('loadScript').getAttribute('mode') === 'debug';
+ touchMode = 'ontouchstart' in window || navigator.maxTouchPoints;
- var locale = {};
+ locale = {};
window.Locale = locale;
locale.languages = {
@@ -65,7 +75,7 @@
'zh': { name: '中文', code: 'zh_CN' }
};
- var localeParameter = window.location.search.match(/locale=([^&#]+)/);
+ localeParameter = window.location.search.match(/locale=([^&#]+)/);
locale.language = localeParameter && localeParameter[1];
if (locale.language === undefined) {
locale.language = window.navigator.userLanguage || window.navigator.language;
@@ -76,7 +86,7 @@
locale.language = 'en'; // default
}
- window.addEventListener("load", function (event) {
+ window.addEventListener('load', function (event) {
if (debugMode) {
Ext.Loader.setConfig({
@@ -99,9 +109,9 @@
});
- var extjsVersion = '6.0.1';
- var fontAwesomeVersion = '4.6.3';
- var olVersion = '3.18.2';
+ extjsVersion = '6.0.1';
+ fontAwesomeVersion = '4.6.3';
+ olVersion = '3.18.2';
if (debugMode) {
addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/ext-all-debug.js');
@@ -119,6 +129,16 @@
addScriptFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol-debug.js');
addStyleFile('app.css');
- addScriptFile('arrow.js');
+
+ addSvgFile('images/default.svg', 'defaultSvg');
+ addSvgFile('images/arrow.svg', 'arrowSvg');
+ addSvgFile('images/car.svg', 'carSvg');
+ addSvgFile('images/bus.svg', 'busSvg');
+ addSvgFile('images/truck.svg', 'truckSvg');
+ addSvgFile('images/ship.svg', 'shipSvg');
+ addSvgFile('images/plane.svg', 'planeSvg');
+ addSvgFile('images/motorcycle.svg', 'motorcycleSvg');
+ addSvgFile('images/bicycle.svg', 'bicycleSvg');
+ addSvgFile('images/person.svg', 'personSvg');
})();
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-08 21:32:49 +0000