Implement Station map lookup
[quandoparte] / application / resources / harmattan / qml / StationListPage.qml
index 1687c00..ee0d51a 100644 (file)
@@ -1,6 +1,6 @@
 import QtQuick 1.0
 import QtMobility.location 1.1
-import com.nokia.meego 1.0
+import com.nokia.meego 1.1
 import net.cirulla.quandoparte 1.0
 import "uiconstants.js" as UiConstants
 import "StationListPage.js" as Private
@@ -8,45 +8,70 @@ import "StationListPage.js" as Private
 Page {
     property variant stationView
     id: stationListPage
-    Component.onCompleted: {
-        stationListProxyModel.sortingMode = StationListProxyModel.AlphaSorting
-    }
     tools: ToolBarLayout {
         id: toolBar
-        ToolIcon { iconId: "icon-m-toolbar-back"; onClicked: pageStack.pop(); }
-        ToolIcon { iconId: "icon-m-toolbar-settings"; onClicked: settingsSheet.open(); }
-        ToolIcon { iconId: "icon-m-toolbar-view-menu"; }
+        ToolIcon {
+            iconId: "icon-m-toolbar-search" + (theme.inverted ? "-white": "")
+            onClicked: searchField.open = !searchField.open
+        }
+        ToolIcon {
+            iconId: "icon-m-toolbar-view-menu" + (theme.inverted ? "-white": "")
+            onClicked: menu.open()
+        }
     }
-
-    DataProvider {
-        id: provider
-        onStationScheduleReady: {
-            if (Private.view !== undefined) {
-                Private.view.html = result
-                //Private.view.url = url
+    Menu {
+        id: menu
+        content: MenuLayout {
+            MenuItem {
+                text: qsTr("Update Periodically")
+                Switch {
+                    id: periodicCheckSwitch
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        right: parent.right
+                        rightMargin: UiConstants.DefaultMargin
+                    }
+                    checked: settings.autoUpdate
+                    onCheckedChanged: settings.autoUpdate = checked
+                }
             }
+            MenuItem {
+                text: qsTr("Use Dark Theme")
+                Switch {
+                    id: darkThemeSwitchSwitch
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        right: parent.right
+                        rightMargin: UiConstants.DefaultMargin
+                    }
+                    checked: settings.darkThemePreferred
+                    onCheckedChanged: {
+                        settings.darkThemePreferred = checked
+                        theme.inverted = checked
+                    }
+                }
+            }
+            MenuItem {
+                text: qsTr("About Quando Parte")
+                onClicked: Private.showAboutPage()
+            }
+            Component.onCompleted: periodicCheckSwitch.checked = settings.autoUpdate
         }
     }
     PageHeader {
         id: header
         anchors.top: parent.top
         selectedIndex: stationListProxyModel.sortingMode
-        options: ListModel {
-            id: dialogOptions
-            ListElement {
-                name: QT_TR_NOOP("Stations by Name")
-            }
-            ListElement {
-                name: QT_TR_NOOP("Stations by Distance")
-            }
-            ListElement {
-                name: QT_TR_NOOP("Stations Recently Seen")
-            }
-        }
+        options: [
+            qsTr("Stations by Name"),
+            qsTr("Stations by Distance"),
+            qsTr("Stations Recently Seen")
+        ]
     }
     SearchBar {
         id: searchField
         anchors.top: header.bottom
+        open: false
     }
     Binding {
         target: stationListProxyModel
@@ -58,111 +83,125 @@ Page {
         property: "sortingMode"
         value: header.selectedIndex
     }
-    Rectangle {
-        id: shadow
-        width: parent.width
-        anchors.top: mainView.top
-        height: 5
-        gradient: Gradient {
-            GradientStop {color: "#aa000000"; position: 0.0}
-            GradientStop {color: "#00000000"; position: 1.0}
-        }
+    Binding {
+        target: stationListView
+        property: "section.property"
+        value: header.selectedIndex === 0 ? "name" : ""
     }
     Item {
         id: mainView
-        x: 16
-        y: 16
-        anchors.top: searchField.bottom
-        width: parent.width - 32
-        height: parent.height
+        anchors {
+            top: searchField.bottom
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
+        DroppedShadow {
+            id: shadow
+            anchors.top: mainView.top
+        }
         ListView {
             id: stationListView
             clip: true
             width: parent.width
-            height: parent.height
+            cacheBuffer: 10
+            anchors {
+                top: shadow.top
+                bottom: parent.bottom
+            }
             model:  stationListProxyModel
+            section {
+                //property: "name"
+                criteria: ViewSection.FirstCharacter
+                delegate: Item {
+                    width: parent.width
+                    height: UiConstants.SectionItemHeightSmall
+                    anchors {
+                        margins: UiConstants.DefaultMargin
+                    }
+                    Image {
+                        anchors {
+                            left: parent.left
+                            right: sectionLabel.left
+                            verticalCenter: parent.verticalCenter
+                            margins: UiConstants.DefaultMargin
+                        }
+                        source: "image://theme/meegotouch-separator-" + (theme.inverted ? "inverted-" : "") + "background-horizontal"
+                    }
+                    Label {
+                        id: sectionLabel
+                        anchors {
+                            right: sectionRightMargin.left
+                            verticalCenter: parent.verticalCenter
+                        }
+                        text: section
+                    }
+                    Item {
+                        id: sectionRightMargin
+                        anchors {
+                            right: parent.right
+                        }
+                        width: UiConstants.DefaultMargin
+                        height: UiConstants.DefaultMargin
+                    }
+                }
+            }
             delegate: Item {
                 id: listItem
-                height: 48
+                height: UiConstants.ListItemHeightSmall
                 width: parent.width
                 BorderImage {
                     id: background
                     anchors.fill: parent
                     // Fill page borders
                     visible: mouseArea.pressed
-                    source: "image://theme/meegotouch-list-background-pressed-center"
+                    source: "image://theme/meegotouch-list-fullwidth-" + (theme.inverted ? "inverted-" : "") + "background-pressed"
                 }
                 Row {
                     anchors.fill: parent
-
+                    Item {
+                        width: UiConstants.DefaultMargin
+                        height: UiConstants.DefaultMargin
+                    }
                     Column {
                         anchors.verticalCenter: parent.verticalCenter
 
                         Label {
                             id: mainText
-                            text: Private.highlightSearch(model.display, UiConstants.AccentColor)
+                            text: Private.highlightSearch(model.name, UiConstants.AccentColor)
                             font.bold: true
                         }
                     }
                 }
+                Image {
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    //source: "image://theme/meegotouch-separator-" + (theme.inverted ? "inverted-" : "") + "background-horizontal"
+                }
                 MouseArea {
                     id: mouseArea
                     anchors.fill: background
                     onClicked: {
-                        Private.loadStation(model.display)
+                        Private.loadStation(model.name, model.code)
                     }
+                    onPressAndHold: contextMenu.open()
                 }
-            }
-        }
-    }
-
-    Sheet {
-        id: settingsSheet
-        acceptButtonText: qsTr("Save")
-        rejectButtonText: qsTr("Cancel")
-        content: Item {
-            x: 16
-            y: 16
-            width: parent.width - 32
-            height: parent.height - 32
-            Column {
-                spacing: 16
-                anchors.fill: parent
-                Item {
-                    height: 40
-                    anchors.leftMargin: UiConstants.DefaultMargins
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    Label {
-                        font.bold: true
-                        text: "Show Last Station on Startup"
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.left: parent.left
-                    }
-                    Switch {
-                        anchors.verticalCenter: parent.verticalCenter
-                        id: showLastStationSwitch
-                        anchors.right: parent.right
-                    }
-                }
-                Item {
-                    height: 40
-                    anchors.leftMargin: UiConstants.DefaultMargins
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    Label {
-                        font.bold: true
-                        text: "Update Display Periodically"
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                    Switch {
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.right: parent.right
-                        id: periodicCheckSwitch
+                ContextMenu {
+                    id: contextMenu
+                    MenuLayout {
+                        MenuItem {
+                            text: qsTr("Show on the map")
+                            onClicked: Qt.openUrlExternally("geo:" + model.longitude + "," + model.latitude)
+                        }
                     }
                 }
             }
         }
+        ScrollDecorator {
+            id: decorator
+            flickableItem: stationListView
+        }
     }
 }
-