Skip to content

Commit

Permalink
For #152 - added links with action sheets, added basic function to se…
Browse files Browse the repository at this point in the history 
…nd location by email
  • Loading branch information
@vitalidze
vitalidze committed May 15, 2015
1 parent 5c5a443 commit 1e64df3
Show file tree
Hide file tree
Showing 5 changed files with 155 additions and 43 deletions.
Binary file added src/main/webapp/m/img/i-form-comment.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/main/webapp/m/img/i-form-email.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/main/webapp/m/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,10 @@
</div>
{{/each}}
</div>
<div class="content-block">
<a href="#" class="link" id="device-{{device.id}}-send-email"><i class="icon icon-form-email"></i></a>
<a href="#" class="link" id="device-{{device.id}}-send-sms"><i class="icon icon-form-comment"></i></a>
</div>
</script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/traccar-mobile.js"></script>
Expand Down
39 changes: 26 additions & 13 deletions src/main/webapp/m/js/i18n/Messages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ var i18n = {
course: 'Course',
address: 'Address',
follow: 'Follow',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
},
bg: {
_name_: 'Български',
Expand Down Expand Up @@ -55,7 +56,8 @@ var i18n = {
course: 'Курс',
address: 'Адрес',
follow: 'Следвай',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
},
de: {
_name_: 'German',
Expand Down Expand Up @@ -84,7 +86,8 @@ var i18n = {
course: 'Richtung',
address: 'Adresse',
follow: 'Folgen',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
},
es: {
_name_: 'Spanish',
Expand Down Expand Up @@ -113,7 +116,8 @@ var i18n = {
course: 'Curso',
address: 'Dirección',
follow: 'Seguir',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
},
hu: {
_name_: 'Hungarian',
Expand Down Expand Up @@ -142,7 +146,8 @@ var i18n = {
course: 'Irány',
address: 'Cím',
follow: 'Követés',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
},
it: {
_name_: 'Italian',
Expand Down Expand Up @@ -171,7 +176,8 @@ var i18n = {
course: 'Percorso',
address: 'Indirizzo',
follow: 'Segui',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
},
lt: {
_name_: 'Latvian',
Expand Down Expand Up @@ -200,7 +206,8 @@ var i18n = {
course: 'Kursas',
address: 'Adresas',
follow: 'Centruoti',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
},
nl: {
_name_: 'Danish',
Expand Down Expand Up @@ -229,7 +236,8 @@ var i18n = {
course: 'Richting',
address: 'Adres',
follow: 'Volgen',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
},
pl: {
_name_: 'Polish',
Expand Down Expand Up @@ -258,7 +266,8 @@ var i18n = {
course: 'Przebieg',
address: 'Adres',
follow: 'Obserwuj',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
},
pt_PT: {
_name_: 'Portuguese',
Expand Down Expand Up @@ -287,7 +296,8 @@ var i18n = {
course: 'Rota',
address: 'Morada',
follow: 'Seguir',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
},
ru: {
_name_: 'Russian',
Expand Down Expand Up @@ -316,7 +326,8 @@ var i18n = {
course: 'Курс',
address: 'Адрес',
follow: 'Отслеживать',
stop_following: 'Прекратить отслеживание'
stop_following: 'Прекратить отслеживание',
geo_fence: 'Геозона'
},
tl: {
_name_: 'Tagalog',
Expand Down Expand Up @@ -345,7 +356,8 @@ var i18n = {
course: 'Course',
address: 'Address',
follow: 'Sundin',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
},
sv_SE: {
_name_: 'Svenska',
Expand Down Expand Up @@ -374,6 +386,7 @@ var i18n = {
course: 'Kurs',
address: 'Adress',
follow: 'F\u00f6lj',
stop_following: 'Stop following'
stop_following: 'Stop following',
geo_fence: 'Geo-fence'
}
};
155 changes: 125 additions & 30 deletions src/main/webapp/m/js/traccar-mobile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ var myApp = new Framework7({
var $$ = Dom7;

// register template7 helpers
Template7.registerHelper('formatDate', function(timestamp) {

function formatDate(timestamp) {
var date = new Date(timestamp);
var month = date.getMonth() + 1;

Expand All @@ -51,13 +52,19 @@ Template7.registerHelper('formatDate', function(timestamp) {
(date.getHours() < 10 ? '0' : '') + date.getHours() + ':' +
(date.getMinutes() < 10 ? '0' : '') + date.getMinutes() + ':' +
(date.getSeconds() < 10 ? '0' : '') + date.getSeconds();
});
}

Template7.registerHelper('formatDate', formatDate);

function formatDouble(double, n) {
return isNaN(double) ? "-" : double.toFixed(n)
}

Template7.registerHelper('formatDouble', function(double, options) {
return isNaN(double) ? "-" : double.toFixed(options.hash.n);
return formatDouble(double, options.hash.n);
});

Template7.registerHelper('formatSpeed', function(speed) {
function formatSpeed(speed) {
if (isNaN(speed)) return "-";

var factor = 1;
Expand All @@ -71,7 +78,9 @@ Template7.registerHelper('formatSpeed', function(speed) {
suffix = 'mph';
}
return (speed * factor).toFixed(2) + ' ' + suffix;
});
}

Template7.registerHelper('formatSpeed', formatSpeed);

// Add view
var mainView = myApp.addView('.view-main');
Expand Down Expand Up @@ -406,38 +415,45 @@ function loadDevices() {
});
}

function parseOther(position) {
// parse 'other' field
var xmlDoc;
if (window.DOMParser) {
parser = new DOMParser();
xmlDoc = parser.parseFromString(position.other, "text/xml");
// Internet Explorer
} else {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(position.other);
}

var result;
if (xmlDoc.documentElement == null) {
result = null;
} else {
result = {};
var nodes = xmlDoc.documentElement.childNodes;
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].textContent == null) {
result[nodes[i].nodeName] = nodes[i].nodeValue;
} else {
result[nodes[i].nodeName] = nodes[i].textContent;
}
}
}

return result;
}

function drawDeviceDetails(deviceId, position) {
var deviceDetails = $$('#device-' + deviceId + '-details');
if (deviceDetails != undefined) {
if (position == undefined) {
deviceDetails.html('<div class="content-block">' + i18n.no_data_available + '</div>');
} else {
var otherXML = position.other;

// parse 'other' field
if (window.DOMParser) {
parser = new DOMParser();
xmlDoc = parser.parseFromString(otherXML, "text/xml");
// Internet Explorer
} else {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(otherXML);
}

if (xmlDoc.documentElement == null) {
position.other = null;
} else {
position.other = {};
var nodes = xmlDoc.documentElement.childNodes;
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].textContent == null) {
position.other[nodes[i].nodeName] = nodes[i].nodeValue;
} else {
position.other[nodes[i].nodeName] = nodes[i].textContent;
}
}
}
position.other = parseOther(position);

var source = $$('#device-details-template').html();
var template = Template7.compile(source);
Expand All @@ -447,6 +463,7 @@ function drawDeviceDetails(deviceId, position) {
// restore back XML
position.other = otherXML;

// register 'select on map' function
$$('#device-' + deviceId +'-select-on-map').on('click', function() {
position = appState.latestPositions[deviceId];
position.selected = true;
Expand All @@ -462,6 +479,7 @@ function drawDeviceDetails(deviceId, position) {
myApp.closePanel();
});

// register 'follow' function
$$('#device-' + deviceId + '-follow').on('click', function() {
appState.latestPositions.forEach(function(pos) {
pos.follow = false;
Expand All @@ -472,11 +490,88 @@ function drawDeviceDetails(deviceId, position) {
catchPosition(position);
});

// register 'unfollow' function
$$('#device-' + deviceId + '-unfollow').on('click', function() {
position = appState.latestPositions[deviceId];
position.follow = false;
drawDeviceDetails(deviceId, position);
});

// register 'send by email' function
$$('#device-' + deviceId + '-send-email').on('click', function () {
var target = this;
var drawSubject = function() {
for (var i = 0; i < appState.devices.length; i++) {
if (appState.devices[i].id == deviceId) {
return appState.devices[i].name;
}
}
return "";
};
var drawCoordinatesText = function() {
var p = appState.latestPositions[deviceId];
var text =
i18n.time + ': ' + formatDate(p.time) + '\n' +
i18n.latitude + ': ' + formatDouble(p.latitude, 4) + '\n' +
i18n.longitude + ': ' + formatDouble(p.longitude, 4) + '\n' +
i18n.speed + ': ' + formatSpeed(p.speed) + '\n' +
i18n.course + ': ' + formatDouble(p.course, 2) + '\n';
if (p.address != undefined && p.address != null) {
text += i18n.address + ': ' + p.address + '\n';
}
var other = parseOther(p);
if (other != undefined && other != null) {
for (var k in other) {
text += k + ': ' + other[k] + '\n';
}
}
if (p.geoFences != undefined && p.geoFences != null) {
for (var i = 0; i < p.geoFences.length; i++) {
text += i18n.geo_fence + ': ' + p.geoFences[i].name + '\n';
}
}
return text;
};
var drawURL = function() {
var p = appState.latestPositions[deviceId];
return 'http://www.openstreetmap.org/?mlat=' + p.latitude + '&mlon=' + p.longitude;
};
var buttons = [
{
text: 'Send coordinates',
onClick: function () {
window.open('mailto:?subject=' + encodeURIComponent(drawSubject()) + '&body=' + encodeURIComponent(drawCoordinatesText()), '_blank');
}
},
{
text: 'Send location URL',
onClick: function () {
window.open('mailto:?subject=' + encodeURIComponent(drawSubject()) + '&body=' + encodeURIComponent(drawURL()), '_blank');
}
}
];
myApp.actions(target, buttons);
});

// register 'send by sms' function
$$('#device-' + deviceId + '-send-sms').on('click', function() {
var target = this;
var buttons = [
{
text: 'Send coordinates',
onClick: function () {
myApp.alert('Button1 clicked');
}
},
{
text: 'Send location URL',
onClick: function () {
myApp.alert('Button2 clicked');
}
}
];
myApp.actions(target, buttons);
});
}
}
}
Expand Down

0 comments on commit 1e64df3

Please sign in to comment.