Merge lp:~nik90/unav/poi-details-page into lp:unav

[Nekhelesh Ramananthan]

Added a POI details page. Screenshot at http://i.imgur.com/etZtUEN.png

[lp:~nik90/unav/poi-details-page]

43. By Nekhelesh Ramananthan on 2016-04-11

Fixed popup width

44. By Nekhelesh Ramananthan on 2016-04-11

Added license headers

45. By Nekhelesh Ramananthan on 2016-04-11

Added coordinates

46. By Nekhelesh Ramananthan on 2016-04-11

Added simulate route button

47. By Nekhelesh Ramananthan on 2016-04-11

Added nearby action

48. By Nekhelesh Ramananthan on 2016-04-11

Added wifi detail

49. By Nekhelesh Ramananthan on 2016-04-11

Added wheelchair (need to change icon)

50. By Nekhelesh Ramananthan on 2016-04-11

Added proper wheelchair icon

51. By Nekhelesh Ramananthan on 2016-04-11

Improved wifi and wheelchair strings and made them translatable

52. By Nekhelesh Ramananthan on 2016-04-11

Added comments

53. By Nekhelesh Ramananthan on 2016-04-11

Added POI distance

54. By Nekhelesh Ramananthan on 2016-04-11

Removed wifi icon colors :/

55. By Nekhelesh Ramananthan on 2016-04-11

Changed grid style and added thin divider

56. By Nekhelesh Ramananthan on 2016-04-11

Minor text fix

[costales (costales)]

Great work :)
Please, could you apply this diff?
http://paste.ubuntu.com/15764220/

This will:
- Parse latitude,longitude to 6 decimals max (accuracy of centimeters).
- No º for a decimal coordinate.
- Added order of lat, long as title.
- Calculate from current lat,long.
- Not show distance if there is not a position

review: Needs Fixing

[lp:~nik90/unav/poi-details-page]

57. By Nekhelesh Ramananthan on 2016-04-11

Applied costales patch

[Nekhelesh Ramananthan (nik90)]

Applied patch. Thnx marcos!

[costales (costales)]

Looks great for me :) Great work Nekhelesh!
@Joerg?

The icons in the popup will be in another branch better :)

review: Approve

[lp:~nik90/unav/poi-details-page]

58. By Nekhelesh Ramananthan on 2016-04-11

Merged lp:unav

59. By Nekhelesh Ramananthan on 2016-04-11

Merged lp:unav

60. By Nekhelesh Ramananthan on 2016-04-11

Prevent white screen issue in PoiDetailsPage

[JkB (joergberroth)]

Hey some things are popping up now that I had time to test it.

Great work!!

Some suggestions:
1. to be consistent in design:
- for the coordinates " | dist m" instead of "(dist m)"
- we use the world icon as a www now. We have it as "Coordinates".qml also. We have to change it in one of them. I suggest in the coordinates page to the compass icon.
- for the opening hours a "clock" icon would be better than the "alarm-clock" icon, maybe.
- the "info" icon to the description?!

2. I would like to see a bit more topMargin from the header. Same as to the line maybe.

4. The link to that page as a trailing action in the poiListPage.
4.a) By the way it would be great to have the sections bar in the header of poiListPage for the search state, too. ;-)

Thanks a lot nik!

Best Joerg

review: Needs Fixing

[costales (costales)]

One improvement more :)
http://paste.ubuntu.com/15766425/
Don't allow URLs without http. An example is bad POI URL:
http://nominatim.openstreetmap.org/details.php?place_id=53629320

review: Needs Fixing

[lp:~nik90/unav/poi-details-page]

61. By Nekhelesh Ramananthan on 2016-04-11

Fixed the design issues that Joerg pointed out

62. By Nekhelesh Ramananthan on 2016-04-11

Merged patch from costales for bad web urls

[Nekhelesh Ramananthan (nik90)]

> Hey some things are popping up now that I had time to test it.
>
> Great work!!

Thanks mate!

>
> Some suggestions:
> 1. to be consistent in design:
> - for the coordinates " | dist m" instead of "(dist m)"
> - we use the world icon as a www now. We have it as "Coordinates".qml also. We
> have to change it in one of them. I suggest in the coordinates page to the
> compass icon.
> - for the opening hours a "clock" icon would be better than the "alarm-clock"
> icon, maybe.
> - the "info" icon to the description?!
>
> 2. I would like to see a bit more topMargin from the header. Same as to the
> line maybe.
>

You are a good tester with spotting even tiny issues I may have missed out. Nice work! I agree and fixed all the design inconsistencies you pointed out.

> 4. The link to that page as a trailing action in the poiListPage.

At first I wasn't sure about this, but on thinking more it makes perfect sense. Nice suggestion!

> 4.a) By the way it would be great to have the sections bar in the header of
> poiListPage for the search state, too. ;-)
>

I would like to defer this to another branch if you don't mind.

[lp:~nik90/unav/poi-details-page]

63. By Nekhelesh Ramananthan on 2016-04-11

Added trailing edge action in the poi list page

[JkB (joergberroth)]

Great!

review: Approve

[Nekhelesh Ramananthan (nik90)]

@Joerg, @Costales, fixed all your comments. (Except for 4a which I will defer to another branch). Hope this is good to be merged now.

[costales (costales)]

So great work Nekhelesh!!

> 4. The link to that page as a trailing action in the poiListPage.

We should remove icons in there too :)

review: Approve

=== added file 'nav/img/poi/wheelchair-negative.svg'
--- nav/img/poi/wheelchair-negative.svg	1970-01-01 00:00:00 +0000
+++ nav/img/poi/wheelchair-negative.svg	2016-04-11 20:00:36 +0000
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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"
+   version="1.0"
+   x="0px"
+   y="0px"
+   viewBox="0 0 86.735 100"
+   enable-background="new 0 0 86.735 100"
+   xml:space="preserve"
+   id="svg2"
+   inkscape:version="0.48.4 r9939"
+   width="100%"
+   height="100%"
+   sodipodi:docname="wheelchair.svg"><metadata
+     id="metadata16"><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><defs
+     id="defs14" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1034"
+     inkscape:window-height="615"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="2.36"
+     inkscape:cx="15.616852"
+     inkscape:cy="50"
+     inkscape:window-x="124"
+     inkscape:window-y="72"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" /><g
+     id="g4"
+     style="fill:#ed3146;fill-opacity:1"><path
+       d="M61.075,65.383c0.002,0.146,0.011,0.288,0.011,0.434c0,14.833-12.068,26.901-26.902,26.901   c-14.833,0-26.902-12.068-26.902-26.901c0-8.966,4.413-16.916,11.176-21.807l-0.915-8.038C7.087,41.825,0,53.006,0,65.816   C0,84.666,15.334,100,34.184,100c15.979,0,29.427-11.021,33.154-25.859L61.075,65.383z"
+       id="path6"
+       style="fill:#ed3146;fill-opacity:1" /></g><circle
+     cx="29.795"
+     cy="8.698"
+     r="8.698"
+     id="circle8"
+     style="fill:#ed3146;fill-opacity:1" /><path
+     d="M85.867,76.098L66.35,48.807c-1.022-1.429-2.726-2.105-4.457-1.957c-0.129-0.012-0.258-0.023-0.389-0.023H39.209  l-0.553-4.854h16.572c1.927,0,3.489-1.562,3.489-3.489s-1.562-3.489-3.489-3.489H37.862l-0.907-7.97  c-0.53-4.662-4.74-8.011-9.401-7.48c-4.662,0.531-8.011,4.74-7.48,9.401l2.562,22.509c0.496,4.353,4.196,7.557,8.478,7.533  c0.014,0,0.028,0.003,0.043,0.003h29.172l16.738,23.403c1.598,2.237,4.866,2.641,7.297,0.901  C86.793,81.557,87.467,78.334,85.867,76.098z"
+     id="path10"
+     style="fill:#ed3146;fill-opacity:1" /></svg>
\ No newline at end of file

=== added file 'nav/img/poi/wheelchair.svg'
--- nav/img/poi/wheelchair.svg	1970-01-01 00:00:00 +0000
+++ nav/img/poi/wheelchair.svg	2016-04-11 20:00:36 +0000
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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"
+   version="1.0"
+   x="0px"
+   y="0px"
+   viewBox="0 0 86.735 100"
+   enable-background="new 0 0 86.735 100"
+   xml:space="preserve"
+   id="svg2"
+   inkscape:version="0.48.4 r9939"
+   width="100%"
+   height="100%"
+   sodipodi:docname="wheelchair.svg"><metadata
+     id="metadata16"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs14" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1034"
+     inkscape:window-height="615"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="2.36"
+     inkscape:cx="15.616852"
+     inkscape:cy="50"
+     inkscape:window-x="-18"
+     inkscape:window-y="80"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" /><g
+     id="g4"
+     style="fill:#3eb34f;fill-opacity:1"><path
+       d="M61.075,65.383c0.002,0.146,0.011,0.288,0.011,0.434c0,14.833-12.068,26.901-26.902,26.901   c-14.833,0-26.902-12.068-26.902-26.901c0-8.966,4.413-16.916,11.176-21.807l-0.915-8.038C7.087,41.825,0,53.006,0,65.816   C0,84.666,15.334,100,34.184,100c15.979,0,29.427-11.021,33.154-25.859L61.075,65.383z"
+       id="path6"
+       style="fill:#3eb34f;fill-opacity:1" /></g><circle
+     cx="29.795"
+     cy="8.698"
+     r="8.698"
+     id="circle8"
+     style="fill:#3eb34f;fill-opacity:1" /><path
+     d="M85.867,76.098L66.35,48.807c-1.022-1.429-2.726-2.105-4.457-1.957c-0.129-0.012-0.258-0.023-0.389-0.023H39.209  l-0.553-4.854h16.572c1.927,0,3.489-1.562,3.489-3.489s-1.562-3.489-3.489-3.489H37.862l-0.907-7.97  c-0.53-4.662-4.74-8.011-9.401-7.48c-4.662,0.531-8.011,4.74-7.48,9.401l2.562,22.509c0.496,4.353,4.196,7.557,8.478,7.533  c0.014,0,0.028,0.003,0.043,0.003h29.172l16.738,23.403c1.598,2.237,4.866,2.641,7.297,0.901  C86.793,81.557,87.467,78.334,85.867,76.098z"
+     id="path10"
+     style="fill:#3eb34f;fill-opacity:1" /></svg>
\ No newline at end of file

=== modified file 'qml/Main.qml'
--- qml/Main.qml	2016-04-11 17:48:41 +0000
+++ qml/Main.qml	2016-04-11 20:00:36 +0000
@@ -439,7 +439,7 @@
                 id: goThereActionPopover
 
                 // #FIXME: Find out how to replace these hardcoded width and height and use the delegate's dimension automatically
-                width: goThereActionPopover.poiName !== i18n.tr("Current Position") ? units.gu(46.5) : units.gu(39)
+                width: goThereActionPopover.poiName !== i18n.tr("Current Position") && goThereActionPopover.osm_id !== 'none' ? units.gu(46.5) : units.gu(38.5)
                 height: mainPageStack.favPopup ? units.gu(21) : units.gu(16)
 
                 property string poiName
@@ -588,8 +588,8 @@
                                 visible: goThereActionPopover.osm_id !== 'none'
                                 color: UbuntuColors.orange
                                 onClicked: {
-                                    console.log(goThereActionPopover.osm_id);
-                                    console.log(goThereActionPopover.osm_type);
+                                    goThereActionPopover.hide();
+                                    mainPageStack.push(Qt.resolvedUrl("PoiDetailsPage.qml"), {osm_id: goThereActionPopover.osm_id, osm_type: goThereActionPopover.osm_type, poiName: goThereActionPopover.poiName})
                                 }
                             }
 

=== added file 'qml/PoiDetailsPage.qml'
--- qml/PoiDetailsPage.qml	1970-01-01 00:00:00 +0000
+++ qml/PoiDetailsPage.qml	2016-04-11 20:00:36 +0000
@@ -0,0 +1,307 @@
+/*
+ * uNav http://launchpad.net/unav
+ * Copyright (C) 2016 Nekhelesh Ramananthan https://launchpad.net/~nik90
+ *
+ * uNav 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.
+ *
+ * uNav 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.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import QtQuick.XmlListModel 2.0
+import Ubuntu.Components.Popups 1.3
+import "js/utils.js" as QmlJs
+import "components"
+
+Page {
+    id: poiDetailsPage
+
+    property string osm_type
+    property string osm_id
+    property string poiName
+
+    header: UNavHeader {
+        title: poiName
+        flickable: flickable
+        // #FIXME: This back button is only here to allow the user to press Escape keyboard key to go back.
+        // This feature will be implemented upstream by the SDK devs when they add keyboard shortcuts to pages,
+        // at which point this back button can be removed.
+        leadingActionBar.actions: Action {
+            iconName: "back"
+            text: i18n.tr("Back")
+            shortcut: "Escape"
+            onTriggered: {
+                mainPageStack.pop()
+                mainPageStack.executeJavaScript("force_show_map()");
+            }
+        }
+    }
+
+    anchors.fill: parent
+
+    Component.onCompleted: mainPageStack.executeJavaScript("qml_set_route_status()")
+
+    XmlListModel {
+        id: poiDetailsModel
+
+        readonly property string baseUrl: "http://nominatim.openstreetmap.org/reverse?format=xml&addressdetails=1&email=[e-mail]&extratags=1"
+        readonly property string url: baseUrl + "&osm_type=" + osm_type + "&osm_id=" + osm_id
+
+        property string lat
+        property string lng
+        property string distance
+
+        onStatusChanged:  {
+            if (status === XmlListModel.Ready) {
+                description.title = poiDetailsModel.get(0).description
+                address.title = poiDetailsModel.get(0).address
+                cuisine.title = poiDetailsModel.get(0).cuisine
+                phone.title = poiDetailsModel.get(0).phone
+                openingHours.title = poiDetailsModel.get(0).opening_hours
+                website.title = poiDetailsModel.get(0).website
+                internet.title = poiDetailsModel.get(0).internet_access
+                wheelchair.title = poiDetailsModel.get(0).wheelchair
+                lat = poiDetailsModel.get(0).lat
+                lng = poiDetailsModel.get(0).lng
+
+                distance = QmlJs.formatDistance(QmlJs.calcPoiDistance(mainPageStack.currentLat, mainPageStack.currentLng, lat, lng, 10), navApp.settings.unit)
+
+                coordinates.title = "%1 %2, %3 %4".arg(i18n.tr("Lat, Long:")).arg(parseFloat(lat).toFixed(6)).arg(parseFloat(lng).toFixed(6)).arg((distance ? '| '+distance : ''))
+
+                // Internet access values returned by OSM are (yes, no, wlan, terminal and wired) which
+                // are too short and not translated. They are converted to meaningful phrases and also
+                // used to set the icon colors for better visiblity.
+                if (internet.title === "yes") {
+                    internet.title = i18n.tr("Available")
+                } else if (internet.title === "no") {
+                    internet.title = i18n.tr("Not Available")
+                } else if (internet.title === "wlan") {
+                    internet.title = i18n.tr("Wi-Fi Hotspot Available")
+                } else if (internet.title === "wired") {
+                    internet.title = i18n.tr("Wired Connection Available (ethernet connection)")
+                } else if (internet.title === "terminal") {
+                    internet.title = i18n.tr("Computer Terminal Available")
+                }
+
+                // Wheelchair values returned by OSM are (yes, no, limited) which are too short
+                // and not translated. They are converted to meaningful phrases and also used to
+                // set the icon colors for better visibility.
+                if (wheelchair.title === "yes") {
+                    wheelchair.title = i18n.tr("Available")
+                } else if (wheelchair.title === "no") {
+                    wheelchair.title = i18n.tr("Not Available")
+                    wheelchair.icon.source = Qt.resolvedUrl("../nav/img/poi/wheelchair-negative.svg")
+                } else if (wheelchair.title === "limited") {
+                    wheelchair.title = i18n.tr("Limited Availability")
+                    wheelchair.icon.source = Qt.resolvedUrl("../nav/img/poi/wheelchair-negative.svg")
+                }
+
+                if (lat && lng) {
+                    mapActionButtonModel.append({mode: "ROUTE", iconName: "send"})
+                    mapActionButtonModel.append({mode: "SAVE", iconName: "starred"})
+                    mapActionButtonModel.append({mode: "SHARE", iconName: "share"})
+                    mapActionButtonModel.append({mode: "NEARBY", iconName: "location"})
+                }
+
+                if (mainPageStack.ptFromLat === "null" && lat && lng) {
+                    mapActionButtonModel.append({mode: "PTFROM", iconName: "transfer-progress-upload"})
+                }
+
+                if (mainPageStack.ptFromLat !== "null" && lat && lng) {
+                    mapActionButtonModel.append({mode: "PTTO", iconName: "transfer-progress-download"})
+                }
+
+                if (phone.title) {
+                    poiActionButtonModel.append({mode: "CALL", iconName: "call-start"})
+                }
+
+                if (website.title && website.title.substring(0, 4) === "http") {
+                    poiActionButtonModel.append({mode: "WEB", iconName: "stock_website"})
+                }
+            }
+        }
+
+        onSourceChanged: console.log(url)
+
+        source: url
+        query: "/reversegeocode"
+
+        XmlRole { name: "address"; query: "result/string()" }
+        XmlRole { name: "description"; query: "extratags/tag[@key='description']/@value/string()" }
+        XmlRole { name: "cuisine"; query: "extratags/tag[@key='cuisine']/@value/string()" }
+        XmlRole { name: "phone"; query: "extratags/tag[@key='phone']/@value/string()" }
+        XmlRole { name: "opening_hours"; query: "extratags/tag[@key='opening_hours']/@value/string()" }
+        XmlRole { name: "website"; query: "extratags/tag[@key='website']/@value/string()" }
+        XmlRole { name: "internet_access"; query: "extratags/tag[@key='internet_access']/@value/string()" }
+        XmlRole { name: "wheelchair"; query: "extratags/tag[@key='wheelchair']/@value/string()" }
+        XmlRole { name: "lat"; query: "result/@lat/string()"; }
+        XmlRole { name: "lng"; query: "result/@lon/string()"; }
+    }
+
+    Label {
+        id: statusLabel
+        wrapMode: Text.WordWrap
+        anchors.centerIn: parent
+        width: parent.width - units.gu(4)
+        horizontalAlignment: Text.AlignHCenter
+        visible: poiDetailsModel.status === XmlListModel.Loading
+        text: i18n.tr("Loading POI details...")
+    }
+
+    // Indicator to show load activity
+    ActivityIndicator {
+        id: searchActivity
+        running: poiDetailsModel.status === XmlListModel.Loading
+        anchors { bottom: statusLabel.top; bottomMargin: units.gu (1); horizontalCenter: parent.horizontalCenter }
+    }
+
+    ListModel {
+        id: mapActionButtonModel
+    }
+
+    ListModel{
+        id: poiActionButtonModel
+    }
+
+    Flickable {
+        id: flickable
+
+        anchors.fill: parent
+        contentHeight: mainColumn.height + units.gu(10)
+
+        Column {
+            id: mainColumn
+
+            spacing: units.gu(3)
+            anchors { top: parent.top; left: parent.left; right: parent.right; margins: units.gu(2); topMargin: units.gu(3) }
+
+            CustomGridView {
+                id: mapButtonGrid
+
+                itemWidth: units.gu(7)
+                model: mapActionButtonModel
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                delegate: GridIconDelegate {
+
+                    icon.name: model.iconName
+
+                    onClicked: {
+                        if (model.mode === "ROUTE") {
+                            mainPageStack.clear()
+                            mainPageStack.center_onpos = 2;
+                            mainPageStack.routeState = 'yes'
+                            mainPageStack.executeJavaScript("calc2coord("+ poiDetailsModel.lat + "," + poiDetailsModel.lng + ");");
+                        } else if (model.mode === "SAVE") {
+                            mainPageStack.push(Qt.resolvedUrl("FavoritesPage.qml"), {isAddedFromPopup: true, lat: poiDetailsModel.lat, lng: poiDetailsModel.lng, favName: poiName})
+                        } else if (model.mode === "SHARE") {
+                            mainPageStack.push(Qt.resolvedUrl("Share.qml"), {"lat": poiDetailsModel.lat, "lon": poiDetailsModel.lng})
+                        } else if (model.mode === "NEARBY") {
+                            mainPageStack.push(Qt.resolvedUrl("PoiPage.qml"), {"lat": poiDetailsModel.lat, "lng": poiDetailsModel.lng})
+                        } else if (model.mode === "PTFROM") {
+                            mainPageStack.clear()
+                            mainPageStack.ptFromLat = mainPageStack.clickedLat;
+                            mainPageStack.ptFromLng = mainPageStack.clickedLng;
+                        } else if (model.mode === "PTTO") {
+                            mainPageStack.clear()
+                            mainPageStack.routeState = 'simulate_calculating';
+                            mainPageStack.executeJavaScript("simulate2coord(" + mainPageStack.ptFromLat + ", " + mainPageStack.ptFromLng + ", " + mainPageStack.clickedLat + ", " + mainPageStack.clickedLng + ");");
+                            mainPageStack.ptFromLat = "null";
+                        }
+                    }
+                }
+            }
+
+            CustomGridView {
+                id: poiButtonGrid
+
+                visible: poiActionButtonModel.count !== 0
+                itemWidth: units.gu(9)
+                model: poiActionButtonModel
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                delegate: GridIconDelegate {
+
+                    width: units.gu(9)
+                    icon.name: model.iconName
+
+                    onClicked: {
+                        if (model.mode === "CALL") {
+                            Qt.openUrlExternally("tel:///" + phone.title)
+                        } else if (model.mode === "WEB") {
+                            Qt.openUrlExternally(website.title)
+                        }
+                    }
+                }
+            }
+
+            Rectangle {
+                width: parent.width
+                height: units.dp(0.5)
+                color: UbuntuColors.slate
+                visible: !searchActivity.running
+            }
+
+            PoiDetailRow {
+                id: description
+                icon.name: "info"
+                visible: title
+            }
+
+            PoiDetailRow {
+                id: address
+                icon.name: "location"
+                visible: title
+            }
+
+            PoiDetailRow {
+                id: coordinates
+                icon.name: "webbrowser-app-symbolic"
+                visible: title
+            }
+
+            PoiDetailRow {
+                id: cuisine
+                icon.source: Qt.resolvedUrl("../nav/img/poi/Restaurant.svg")
+                visible: title
+            }
+
+            PoiDetailRow {
+                id: phone
+                icon.name: "call-start"
+                visible: title
+            }
+
+            PoiDetailRow {
+                id: openingHours
+                icon.name: "clock"
+                visible: title
+            }
+
+            PoiDetailRow {
+                id: website
+                icon.name: "stock_website"
+                visible: title
+            }
+
+            PoiDetailRow {
+                id: internet
+                icon.name: "network-wifi-symbolic"
+                visible: title
+            }
+
+            PoiDetailRow {
+                id: wheelchair
+                icon.source: Qt.resolvedUrl("../nav/img/poi/wheelchair.svg")
+                visible: title
+            }
+        }
+    }
+}

=== modified file 'qml/PoiListPage.qml'
--- qml/PoiListPage.qml	2016-04-11 17:48:41 +0000
+++ qml/PoiListPage.qml	2016-04-11 20:00:36 +0000
@@ -294,6 +294,12 @@
                         onTriggered: {
                             Qt.openUrlExternally("tel:///"+ phone)
                         }
+                    },
+                    Action {
+                        iconName: "info"
+                        onTriggered: {
+                            mainPageStack.push(Qt.resolvedUrl("PoiDetailsPage.qml"), {osm_id: model.osm_id, osm_type: model.osm_type, poiName: model.name !== "" ? model.name : poiListPage.poiType})
+                        }
                     }
                 ]
             }

=== modified file 'qml/RoutePage.qml'
--- qml/RoutePage.qml	2016-04-10 09:43:33 +0000
+++ qml/RoutePage.qml	2016-04-11 20:00:36 +0000
@@ -57,7 +57,7 @@
                 routePageModel.append({mode: "SEARCH", text: i18n.tr("Search"), iconName: "find", visible: true})
                 routePageModel.append({mode: "FAVORITES", text: i18n.tr("Favorites"), iconName: "starred", visible: true})
                 routePageModel.append({mode: "NEARBY", text: i18n.tr("Nearby"), iconName: "location", visible: true})
-                routePageModel.append({mode: "COORDINATES", text: i18n.tr("Coordinates"), iconName: "stock_website", visible: true})
+                routePageModel.append({mode: "COORDINATES", text: i18n.tr("Coordinates"), iconName: "webbrowser-app-symbolic", visible: true})
                 routePageModel.append({mode: "SHARE", text: i18n.tr("Share"), iconName: "share", visible: true})
                 routePageModel.append({mode: "CANCEL", text: i18n.tr("Cancel Route"), iconName: "dialog-error-symbolic", visible: mainPageStack.routeState !== 'no'})
             }

=== added file 'qml/components/GridIconDelegate.qml'
--- qml/components/GridIconDelegate.qml	1970-01-01 00:00:00 +0000
+++ qml/components/GridIconDelegate.qml	2016-04-11 20:00:36 +0000
@@ -0,0 +1,48 @@
+/*
+ * uNav http://launchpad.net/unav
+ * Copyright (C) 2016 Nekhelesh Ramananthan https://launchpad.net/~nik90
+ *
+ * uNav 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.
+ *
+ * uNav 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.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+AbstractButton {
+    id: gridDelegate
+
+    // Public APIs
+    property alias icon: _icon
+
+    width: units.gu(7)
+    height: _icon.height
+    
+    Loader {
+        sourceComponent: gridDelegate.pressed ? backgroundComponent : undefined
+        anchors { fill: _icon; margins: -units.gu(2) }
+    }
+
+    Component {
+        id: backgroundComponent
+        UbuntuShape {
+            opacity: 0.15
+            backgroundColor: UbuntuColors.darkGrey
+        }
+    }
+
+    Icon {
+        id: _icon
+        width: height
+        height: units.gu(4)
+        anchors.centerIn: parent
+    }
+}
+

=== added file 'qml/components/PoiDetailRow.qml'
--- qml/components/PoiDetailRow.qml	1970-01-01 00:00:00 +0000
+++ qml/components/PoiDetailRow.qml	2016-04-11 20:00:36 +0000
@@ -0,0 +1,42 @@
+/*
+ * uNav http://launchpad.net/unav
+ * Copyright (C) 2016 Nekhelesh Ramananthan https://launchpad.net/~nik90
+ *
+ * uNav 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.
+ *
+ * uNav 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.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+
+Item {
+    id: address
+    
+    width: parent.width
+    height: Math.max(icon.height, title.implicitHeight)
+    
+    property alias icon: icon
+    property alias title: title.text
+    
+    Icon {
+        id: icon
+        width: units.gu(2.5)
+        height: width
+        color: UbuntuColors.jet
+        anchors { verticalCenter: parent.veticalCenter; left: parent.left }
+    }
+    
+    Label {
+        id: title
+        text: ""
+        wrapMode: Text.WordWrap
+        anchors { left: icon.right; right: parent.right; verticalCenter: parent.verticalCenter; leftMargin: units.gu(2) }
+    }
+}

=== modified file 'qml/js/utils.js'
--- qml/js/utils.js	2016-04-03 20:20:20 +0000
+++ qml/js/utils.js	2016-04-11 20:00:36 +0000
@@ -8,7 +8,7 @@
 * @return   integer   Distance (in meters)
 */
 function calcPoiDistance(cur_lat, cur_lng, poi_lat, poi_lng, accuracy) {
-	if (cur_lat === null || cur_lng === null)
+    if (cur_lat === null || cur_lng === null || cur_lat === 'null' || cur_lng === 'null')
 		return null;
 	
 	accuracy = Math.floor(accuracy) || 1;