git.maemo.org Git - quandoparte/blob - application/resources/harmattan/qml/StationListPage.qml

   1 import QtQuick 1.0
   2 import QtMobility.location 1.1
   3 import com.nokia.meego 1.0
   4 import net.cirulla.quandoparte 1.0
   5
   6 Page {
   7     property variant stationView
   8     id: stationListPage
   9     Component.onCompleted: {
  10         stationListProxyModel.sortingMode = StationListProxyModel.AlphaSorting
  11     }
  12     tools: ToolBarLayout {
  13         id: toolBar
  14         ToolIcon { iconId: "icon-m-toolbar-back"; onClicked: pageStack.pop(); }
  15         ToolIcon { iconId: "icon-m-toolbar-settings"; onClicked: settingsSheet.open(); }
  16         ToolIcon { iconId: "icon-m-toolbar-view-menu"; }
  17     }
  18
  19     function loadStation()
  20     {
  21         var component = Qt.createComponent("StationPage.qml");
  22         if (component.status == Component.Ready) {
  23             var view = component.createObject(stationListPage)
  24             stationListPage.stationView = view
  25             pageStack.push(view)
  26             view.html = "<h1>Hello World</h1><p>Lorem ipsum</p>"
  27         }
  28         else
  29             console.log('Cannot load component: ' + component.errorString());
  30     }
  31
  32     function highlightSearch(s)
  33     {
  34         // TODO compile RegExp on change, or find a way to cleanly use
  35         // stationListProxyModel.filterRegExp
  36         if (searchField.text.length) {
  37             var r = new RegExp(searchField.text, 'i')
  38             var match = r.exec(s)
  39             return s.replace(r, '<span style="text-decoration:underline">' +
  40                              match + '</span>')
  41         } else {
  42             return s
  43         }
  44     }
  45
  46     PageHeader {
  47         id: header
  48         anchors.top: parent.top
  49         selectedIndex: stationListProxyModel.sortingMode
  50         options: ListModel {
  51             id: dialogOptions
  52             ListElement {
  53                 name: QT_TR_NOOP("Stations by Name")
  54             }
  55             ListElement {
  56                 name: QT_TR_NOOP("Stations by Distance")
  57             }
  58             ListElement {
  59                 name: QT_TR_NOOP("Stations Recently Seen")
  60             }
  61         }
  62     }
  63     SearchBar {
  64         id: searchField
  65         anchors.top: header.bottom
  66     }
  67     Binding {
  68         target: stationListProxyModel
  69         property: "searchPattern"
  70         value: searchField.text
  71     }
  72     Binding {
  73         target: stationListProxyModel
  74         property: "sortingMode"
  75         value: header.selectedIndex
  76     }
  77     Rectangle {
  78         id: shadow
  79         width: parent.width
  80         anchors.top: mainView.top
  81         height: 5
  82         gradient: Gradient {
  83             GradientStop {color: "#aa000000"; position: 0.0}
  84             GradientStop {color: "#00000000"; position: 1.0}
  85         }
  86     }
  87     Item {
  88         id: mainView
  89         x: 16
  90         y: 16
  91         anchors.top: searchField.bottom
  92         width: parent.width - 32
  93         height: parent.height
  94         ListView {
  95             id: stationListView
  96             clip: true
  97             width: parent.width
  98             height: parent.height
  99             model:  stationListProxyModel
 100             delegate: Item {
 101                 id: listItem
 102                 height: 48
 103                 width: parent.width
 104                 BorderImage {
 105                     id: background
 106                     anchors.fill: parent
 107                     // Fill page borders
 108                     visible: mouseArea.pressed
 109                     source: "image://theme/meegotouch-list-background-pressed-center"
 110                 }
 111                 Row {
 112                     anchors.fill: parent
 113
 114                     Column {
 115                         anchors.verticalCenter: parent.verticalCenter
 116
 117                         Label {
 118                             id: mainText
 119                             text: highlightSearch(model.display)
 120                             font.bold: true
 121                         }
 122                     }
 123                 }
 124                 MouseArea {
 125                     id: mouseArea
 126                     anchors.fill: background
 127                     onClicked: {
 128                         stationListPage.loadStation(model.display)
 129                     }
 130                 }
 131             }
 132         }
 133     }
 134
 135     Sheet {
 136         id: settingsSheet
 137         acceptButtonText: qsTr("Save")
 138         rejectButtonText: qsTr("Cancel")
 139         content: Item {
 140             x: 16
 141             y: 16
 142             width: parent.width - 32
 143             height: parent.height - 32
 144             Column {
 145                 spacing: 16
 146                 anchors.fill: parent
 147                 Row {
 148                     height: 40
 149                     spacing: 16
 150                     anchors.left: parent.left
 151                     anchors.right: parent.right
 152                     Label {
 153                         font.bold: true
 154                         text: "Show Last Station on Startup"
 155                         anchors.verticalCenter: parent.verticalCenter
 156                     }
 157                     Switch {
 158                         anchors.verticalCenter: parent.verticalCenter
 159                         id: showLastStationSwitch
 160                         anchors.right: parent.right
 161                     }
 162                 }
 163                 Row {
 164                     height: 40
 165                     spacing: 16
 166                     anchors.left: parent.left
 167                     anchors.right: parent.right
 168                     Label {
 169                         font.bold: true
 170                         text: "Update Display Periodically"
 171                         anchors.verticalCenter: parent.verticalCenter
 172                     }
 173                     Switch {
 174                         anchors.verticalCenter: parent.verticalCenter
 175                         anchors.right: parent.right
 176                         id: periodicCheckSwitch
 177                     }
 178                 }
 179             }
 180         }
 181     }
 182 }
 183