From 60c38997d1551006a916f66f06e93abdcd175209 Mon Sep 17 00:00:00 2001 From: Bartek Fabiszewski Date: Sun, 9 Apr 2017 14:03:43 +0200 Subject: [PATCH] Tweak marker popup look --- api_gmaps.js | 17 +--------------- api_openlayers.js | 20 ++---------------- getpositions.php | 1 + images/accuracy_dark.svg | 1 + images/altitude_dark.svg | 1 + images/calendar_dark.svg | 1 + images/clock_dark.svg | 1 + images/distance.svg | 4 ++++ images/distance_blue.svg | 4 ++++ images/gps_dark.svg | 4 ++++ images/network_dark.svg | 4 ++++ images/route_dark.svg | 1 + images/speed_blue.svg | 4 ++++ images/speed_dark.svg | 1 + images/stats.svg | 4 ++++ images/stats_blue.svg | 4 ++++ images/time.svg | 4 ++++ images/time_blue.svg | 4 ++++ images/user_dark.svg | 4 ++++ lang/en.php | 4 +++- lang/pl.php | 2 ++ main.css | 36 +++++++++++++++++++++----------- main.js | 44 ++++++++++++++++++++++++++++++++++++++-- 23 files changed, 121 insertions(+), 49 deletions(-) create mode 100644 images/accuracy_dark.svg create mode 100644 images/altitude_dark.svg create mode 100644 images/calendar_dark.svg create mode 100644 images/clock_dark.svg create mode 100644 images/distance.svg create mode 100644 images/distance_blue.svg create mode 100644 images/gps_dark.svg create mode 100644 images/network_dark.svg create mode 100644 images/route_dark.svg create mode 100644 images/speed_blue.svg create mode 100644 images/speed_dark.svg create mode 100644 images/stats.svg create mode 100644 images/stats_blue.svg create mode 100644 images/time.svg create mode 100644 images/time_blue.svg create mode 100644 images/user_dark.svg diff --git a/api_gmaps.js b/api_gmaps.js index 675ba68..aa895cb 100755 --- a/api_gmaps.js +++ b/api_gmaps.js @@ -125,22 +125,7 @@ function setMarker(p,i,posLen) { else if (i==posLen-1) { marker.setIcon('//maps.google.com/mapfiles/markerB.png') } else { marker.setIcon('//maps.gstatic.com/mapfiles/ridefinder-images/mm_20_gray.png') } // popup - var content = ''; + var content = getPopupHtml(p,i,posLen); popup = new google.maps.InfoWindow(); popup.listener = google.maps.event.addListener(marker, 'click', (function(marker,content) { return function() { diff --git a/api_openlayers.js b/api_openlayers.js index 8ca3f2e..4076799 100755 --- a/api_openlayers.js +++ b/api_openlayers.js @@ -158,24 +158,8 @@ function setMarker(p,i,posLen) { var marker = new OpenLayers.Marker(lonLat,icon); layerMarkers.addMarker(marker); - // popup - var content = ''; + var content = getPopupHtml(p,i,posLen); marker.events.register("mousedown", marker, (function() { return function() { // remove popups @@ -185,7 +169,7 @@ function setMarker(p,i,posLen) { }; } // show popup - var popup = new OpenLayers.Popup.FramedCloud("id "+(i+1),lonLat,null,content,icon,true); + var popup = new OpenLayers.Popup.FramedCloud("popup_"+(i+1),lonLat,null,content,icon,true); map.addPopup(popup); if (document.getElementById('bottom').style.display=='block') { chart.setSelection([{row:i,column:null}]); diff --git a/getpositions.php b/getpositions.php index e4d3cdd..1db157a 100755 --- a/getpositions.php +++ b/getpositions.php @@ -52,6 +52,7 @@ if ($userId) { $xml->writeElement("bearing", $position->bearing); $xml->writeElement("dateoccured", $position->time); $xml->writeElement("accuracy", $position->accuracy); + $xml->writeElement("provider", $position->provider); $xml->writeElement("comments", $position->comment); $xml->writeElement("username", $position->userLogin); $xml->writeElement("trackid", $position->trackId); diff --git a/images/accuracy_dark.svg b/images/accuracy_dark.svg new file mode 100644 index 0000000..02c2d77 --- /dev/null +++ b/images/accuracy_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/altitude_dark.svg b/images/altitude_dark.svg new file mode 100644 index 0000000..631df71 --- /dev/null +++ b/images/altitude_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/calendar_dark.svg b/images/calendar_dark.svg new file mode 100644 index 0000000..81daa92 --- /dev/null +++ b/images/calendar_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/clock_dark.svg b/images/clock_dark.svg new file mode 100644 index 0000000..059091f --- /dev/null +++ b/images/clock_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/distance.svg b/images/distance.svg new file mode 100644 index 0000000..1fe199d --- /dev/null +++ b/images/distance.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/images/distance_blue.svg b/images/distance_blue.svg new file mode 100644 index 0000000..1a18d95 --- /dev/null +++ b/images/distance_blue.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/images/gps_dark.svg b/images/gps_dark.svg new file mode 100644 index 0000000..8187e75 --- /dev/null +++ b/images/gps_dark.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/images/network_dark.svg b/images/network_dark.svg new file mode 100644 index 0000000..c383ba6 --- /dev/null +++ b/images/network_dark.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/images/route_dark.svg b/images/route_dark.svg new file mode 100644 index 0000000..c660ad4 --- /dev/null +++ b/images/route_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/speed_blue.svg b/images/speed_blue.svg new file mode 100644 index 0000000..2440465 --- /dev/null +++ b/images/speed_blue.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/images/speed_dark.svg b/images/speed_dark.svg new file mode 100644 index 0000000..ebb68d1 --- /dev/null +++ b/images/speed_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/stats.svg b/images/stats.svg new file mode 100644 index 0000000..e376b52 --- /dev/null +++ b/images/stats.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/images/stats_blue.svg b/images/stats_blue.svg new file mode 100644 index 0000000..69075ad --- /dev/null +++ b/images/stats_blue.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/images/time.svg b/images/time.svg new file mode 100644 index 0000000..3800749 --- /dev/null +++ b/images/time.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/images/time_blue.svg b/images/time_blue.svg new file mode 100644 index 0000000..374ae07 --- /dev/null +++ b/images/time_blue.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/images/user_dark.svg b/images/user_dark.svg new file mode 100644 index 0000000..92d4262 --- /dev/null +++ b/images/user_dark.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/lang/en.php b/lang/en.php index 9c213aa..d63ca9c 100644 --- a/lang/en.php +++ b/lang/en.php @@ -36,7 +36,7 @@ $lang["accuracy"] = "Accuracy"; $lang["altitude"] = "Altitude"; $lang["ttime"] = "Total time"; $lang["aspeed"] = "Average speed"; -$lang["tdistance"] = "Total dist."; +$lang["tdistance"] = "Total distance"; $lang["point"] = "Point"; //Point x of y $lang["of"] = "of"; $lang["summary"] = "Trip summary"; @@ -64,5 +64,7 @@ $lang["oldpassword"] = "Old password"; $lang["newpassword"] = "New password"; $lang["newpasswordrepeat"] = "Repeat new password"; $lang["changepass"] = "Change password"; +$lang["gps"] = "GPS"; +$lang["network"] = "Network"; ?> diff --git a/lang/pl.php b/lang/pl.php index 1a6da39..b604f3f 100644 --- a/lang/pl.php +++ b/lang/pl.php @@ -63,5 +63,7 @@ $lang["oldpassword"] = "Obecne hasło"; $lang["newpassword"] = "Nowe hasło"; $lang["newpasswordrepeat"] = "Powtórz nowe hasło"; $lang["changepass"] = "Zmień hasło"; +$lang["gps"] = "GPS"; +$lang["network"] = "Sieć"; ?> diff --git a/main.css b/main.css index d40ce91..1ab2da2 100755 --- a/main.css +++ b/main.css @@ -102,6 +102,13 @@ select { #user, #track, #summary, #export, #other, #units { padding-bottom: 10px; } +#summary span { + display: block; + padding-top: .3em; +} +#summary span img { + margin-bottom: -2px; +} #login { font-family: Verdana, sans-serif; position: relative; @@ -127,28 +134,33 @@ select { padding-top: 1.2em; color: yellow; } -#popup { - width:370px; - min-height:130px; -} #popup * { font-family: Roboto, Verdana, sans-serif; - font-size: 12px; } #pheader { - font-weight: bolder; - padding-bottom: 5px; - border-bottom: 1px solid gray; + float: left; + font-size: .9rem; + color: #297b9a; + padding-bottom: .5rem; +} +#pheader div { + float: left; + padding-right: 2em; +} +#pbody { + clear: both; + padding-top: .2rem; + border-top: 1px solid #6cdae7;; + font-size: .8rem; + white-space: nowrap; } #pcomments { clear: both; color: #903; } -#pleft,#pright { - float:left; +#pleft, #pright { + display: inline-block; padding-top: 5px; -} -#pleft { padding-right: 20px; } #pfooter { diff --git a/main.js b/main.js index 0c31aa3..4bd8a81 100755 --- a/main.js +++ b/main.js @@ -142,6 +142,7 @@ function parsePosition(p) { if (bearing != null) { bearing = parseInt(bearing); } var accuracy = getNode(p,'accuracy'); // may be null if (accuracy != null) { accuracy = parseInt(accuracy); } + var provider = getNode(p,'provider'); // may be null var comments = getNode(p,'comments'); // may be null var username = getNode(p,'username'); var trackname = getNode(p,'trackname'); @@ -156,6 +157,7 @@ function parsePosition(p) { 'speed': speed, 'bearing': bearing, 'accuracy': accuracy, + 'provider': provider, 'comments': comments, 'username': username, 'trackname': trackname, @@ -166,6 +168,44 @@ function parsePosition(p) { }; } +function getPopupHtml(p, i, count) { + var dateTime = p.dateoccured.split(" "); + var date = dateTime[0]; + var time = dateTime[1]; + var provider = ''; + if (p.provider == 'gps') { + provider = ' ('+lang['gps']+')'; + } else if (p.provider == 'network') { + provider = ' ('+lang['network']+')'; + } + popup = + ''; + return popup; +} + function load(type,userid,trackid) { var url = 'download.php?type='+type+'&userid='+userid+'&trackid='+trackid; window.location.assign(url); @@ -175,8 +215,8 @@ function updateSummary(l,d,s) { var t = document.getElementById('summary'); if (latest==0){ t.innerHTML = ''+lang['summary']+'
'+ - lang['tdistance']+': '+(d.toKm()*factor_km).toFixed(2)+' '+unit_km+'
'+ - lang['ttime']+': '+s.toHMS(); + ''+lang['tdistance']+' '+(d.toKm()*factor_km).toFixed(2)+' '+unit_km+''+ + ''+lang['ttime']+' '+s.toHMS()+''; } else { t.innerHTML = ''+lang['latest']+':
'+l;