Add navigation maneuver details page for walk/transfer journey sections

We can still do a lot more here by matching that against our indoor maps
and rendering it in there, but this is at least a first step towards
making this information available.

src/app/JourneyPathPage.qml

+/*
+    SPDX-FileCopyrightText: 2021 Volker Krause <vkrause@kde.org>
+
+    SPDX-License-Identifier: LGPL-2.0-or-later
+*/
+
+import QtQuick 2.5
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.1 as QQC2
+import org.kde.kirigami 2.17 as Kirigami
+import org.kde.kpublictransport 1.0
+import org.kde.itinerary 1.0
+import "." as App
+
+Kirigami.ScrollablePage {
+    property alias path: pathModel.path
+
+    Component {
+        id: pathDelegate
+        Kirigami.AbstractListItem {
+            highlighted: false
+            property var section: model.section
+            GridLayout {
+                rows: 2
+                columns: 4
+
+                Kirigami.Icon {
+                    Layout.row: 0
+                    Layout.column: 0
+                    Layout.rowSpan: 2
+                    source: {
+                        switch (section.maneuver) {
+                            case PathSection.Stairs:
+                                return "qrc:/images/stairs.svg";
+                            case PathSection.Elevator:
+                                return "qrc:/images/elevator.svg";
+                            case PathSection.Escalator:
+                                return "qrc:/images/escalator.svg";
+                            default:
+                                return "qrc:/images/walk.svg";
+                        }
+                    }
+                    width: height
+                    height: Kirigami.Units.iconSizes.medium
+                }
+
+                // floor level change indicator
+                Kirigami.Icon {
+                    Layout.row: 0
+                    Layout.column: 1
+                    Layout.rowSpan: 2
+                    width: height
+                    height: Kirigami.Units.iconSizes.medium
+                    source: section.floorLevelChange == 0 ? "" : section.floorLevelChange < 0 ? "go-down-skip" : "go-up-skip"
+                }
+
+                QQC2.Label {
+                    Layout.row: 0
+                    Layout.column: 2
+                    Layout.fillWidth: true
+                    text: section.description
+                }
+                QQC2.Label {
+                    Layout.row: 1
+                    Layout.column: 2
+                    visible: section.distance > 0
+                    text: Localizer.formatDistance(section.distance)
+                }
+
+                // direction indicator
+                Kirigami.Icon {
+                    Layout.row: 0
+                    Layout.column: 3
+                    Layout.rowSpan: 2
+                    width: height
+                    height: Kirigami.Units.iconSizes.medium
+                    source: "go-up-symbolic"
+                    visible: model.turnDirection >= 0
+                    rotation: model.turnDirection
+                    smooth: true
+                }
+            }
+        }
+    }
+
+    PathModel {
+        id: pathModel
+    }
+
+    ListView {
+        model: pathModel
+        delegate: pathDelegate
+    }
+}

src/app/JourneySectionDelegate.qml

@@ -18,6 +18,8 @@ Kirigami.AbstractListItem {
     onClicked: {
         if (modelData.mode == JourneySection.PublicTransport) {
             applicationWindow().pageStack.push(journeySectionPage, {"journeySection": modelData});
+        } else if (modelData.path.sections.length > 1) {
+            applicationWindow().pageStack.push(journeyPathPage, {"path": modelData.path});
         }
     }
 

src/app/images/elevator.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+  <defs id="defs3051">
+    <style
+       type="text/css"
+       id="current-color-scheme">
+      .ColorScheme-Text {
+        color:#4d4d4d;
+      }
+      </style>
+  </defs>
+  <path d="m 13.891951,2.1595513 v 1.465731 h 2.931463 V 18.282592 H 14.26706 l -0.03966,1.465731 h 5.527474 V 2.1595513 Z M 6.5632967,12.419668 10.96049,19.748323 15.357683,12.419668 H 12.426221 V 9.4882061 h 2.931462 L 10.96049,2.1595513 6.5632967,9.4882061 h 2.931462 v 2.9314619 z m 0.8526688,7.328655 0.059488,-1.465731 H 5.0975654 V 3.6252823 H 8.0290275 V 2.1595513 H 2.1661038 V 19.748323 Z" class="ColorScheme-Text" style="fill:currentColor;"/>
+</svg>

src/app/images/elevator.svg.license

+SPDX-License-Identifier: CC0-1.0
+SPDX-FileCopyrightText: https://github.com/gravitystorm/openstreetmap-carto

src/app/images/escalator.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+  <defs id="defs3051">
+    <style
+       type="text/css"
+       id="current-color-scheme">
+      .ColorScheme-Text {
+        color:#4d4d4d;
+      }
+      </style>
+  </defs>
+  <path
+     style="color:#4d4d4d;fill:currentColor;fill-opacity:1;stroke:none" class="ColorScheme-Text"
+     d="M 15.421821,4.149711 C 14.791977,4.1493251 13.983404,4.4066009 13.50051,4.8906508 L 5.6613053,12.681742 C 5.4318152,12.91046 5.4044789,12.921922 4.952441,12.922308 H 3.4545242 c -1.5034503,-3.86e-4 -2.4044909,1.35083 -2.4056481,2.498665 0.00115,1.143981 0.9019199,2.592455 2.5403643,2.591685 0,0 2.0343344,0.0011 2.6622505,0 0.6290732,0.0011 1.3908996,-0.237424 2.0207445,-0.827542 L 16.066534,9.406854 c 0.166238,-0.1465713 0.260251,-0.1924526 0.545282,-0.1924526 h 1.927725 c 0.924904,0 2.234878,-1.0477952 2.235649,-2.5628173 C 20.77409,5.1543052 19.454577,4.1527968 18.462561,4.149711 Z m 0.182828,1.2926342 h 2.732819 c 0.664169,0.00155 1.113782,0.7440044 1.113012,1.1867861 0.0011,0.4447097 -0.318821,1.2730043 -1.132258,1.2733903 h -1.642256 c -0.697342,-3.86e-4 -1.006209,0.097205 -1.408107,0.4971665 L 7.4158246,16.25814 C 7.096467,16.576339 6.6936595,16.70155 6.1745102,16.700778 H 3.5860329 c -0.6664858,7.77e-4 -1.253373,-0.561595 -1.2541446,-1.29905 7.71e-4,-0.741311 0.5608982,-1.156374 1.1386735,-1.157918 h 1.7769721 c 0.5176063,0.0015 0.8596525,-0.145258 1.1547109,-0.44264 L 14.388997,5.8144197 C 14.719154,5.4865778 15.044619,5.443889 15.604649,5.4423452 Z" />
+</svg>

src/app/images/escalator.svg.license

+SPDX-License-Identifier: CC0-1.0
+SPDX-FileCopyrightText: Volker Krause <vkrause@kde.org>

src/app/images/stairs.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+  <defs id="defs3051">
+    <style
+       type="text/css"
+       id="current-color-scheme">
+      .ColorScheme-Text {
+        color:#4d4d4d;
+      }
+      </style>
+  </defs>
+  <path style="stroke-width:1px;fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" class="ColorScheme-Text" d="m 3.3896829,19 v -4 h 4 V 11 H 11.389683 V 7 h 4 V 3 h 4"/>
+</svg>

src/app/images/stairs.svg.license

+SPDX-License-Identifier: CC0-1.0
+SPDX-FileCopyrightText: Volker Krause <vkrause@kde.org>

src/app/main.qml

@@ -195,6 +195,10 @@ Kirigami.ApplicationWindow {
         id: journeySectionPage
         App.JourneySectionPage {}
     }
+    Component {
+        id: journeyPathPage
+        App.JourneyPathPage {}
+    }
     Component {
         id: indoorMapPage
         App.IndoorMapPage {}

src/app/qml.qrc

@@ -43,6 +43,7 @@
         <file>IndoorMapPage.qml</file>
         <file>IndoorMapPlatformSheet.qml</file>
         <file>JourneyDelegateHeader.qml</file>
+        <file>JourneyPathPage.qml</file>
         <file>JourneyQueryPage.qml</file>
         <file>JourneySectionDelegate.qml</file>
         <file>JourneySectionPage.qml</file>
@@ -84,6 +85,8 @@
         <file>images/cablecar.svg</file>
         <file>images/car.svg</file>
         <file>images/coach.svg</file>
+        <file>images/elevator.svg</file>
+        <file>images/escalator.svg</file>
         <file>images/ferry.svg</file>
         <file>images/flight.svg</file>
         <file>images/foodestablishment.svg</file>
@@ -92,6 +95,7 @@
         <file>images/rapidtransit.svg</file>
         <file>images/seat.svg</file>
         <file>images/shuttle.svg</file>
+        <file>images/stairs.svg</file>
         <file>images/subway.svg</file>
         <file>images/taxi.svg</file>
         <file>images/train.svg</file>

tests/journeyquerytest.qml

@@ -34,6 +34,10 @@ Kirigami.ApplicationWindow {
         id: journeySectionPage
         App.JourneySectionPage {}
     }
+    Component {
+        id: journeyPathPage
+        App.JourneyPathPage {}
+    }
 
     Component {
         id: jnyQueryPage

tests/journeyquerytest.qrc

@@ -6,6 +6,7 @@
     <qresource prefix="/">
         <file>journeyquerytest.qml</file>
         <file alias="JourneyDelegateHeader.qml">../src/app/JourneyDelegateHeader.qml</file>
+        <file alias="JourneyPathPage.qml">../src/app/JourneyPathPage.qml</file>
         <file alias="JourneyQueryPage.qml">../src/app/JourneyQueryPage.qml</file>
         <file alias="JourneySectionDelegate.qml">../src/app/JourneySectionDelegate.qml</file>
         <file alias="JourneySectionPage.qml">../src/app/JourneySectionPage.qml</file>
@@ -18,6 +19,8 @@
         <file alias="images/cablecar.svg">../src/app/images/cablecar.svg</file>
         <file alias="images/car.svg">../src/app/images/car.svg</file>
         <file alias="images/coach.svg">../src/app/images/coach.svg</file>
+        <file alias="images/elevator.svg">../src/app/images/elevator.svg</file>
+        <file alias="images/escalator.svg">../src/app/images/escalator.svg</file>
         <file alias="images/ferry.svg">../src/app/images/ferry.svg</file>
         <file alias="images/flight.svg">../src/app/images/flight.svg</file>
         <file alias="images/foodestablishment.svg">../src/app/images/foodestablishment.svg</file>
@@ -26,6 +29,7 @@
         <file alias="images/rapidtransit.svg">../src/app/images/rapidtransit.svg</file>
         <file alias="images/seat.svg">../src/app/images/seat.svg</file>
         <file alias="images/shuttle.svg">../src/app/images/shuttle.svg</file>
+        <file alias="images/stairs.svg">../src/app/images/stairs.svg</file>
         <file alias="images/subway.svg">../src/app/images/subway.svg</file>
         <file alias="images/taxi.svg">../src/app/images/taxi.svg</file>
         <file alias="images/train.svg">../src/app/images/train.svg</file>