vcs.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         text: qsTr("Stations")
  50         selectedIndex: stationListProxyModel.sortingMode
  51         options: ListModel {
  52             id: dialogOptions
  53             ListElement {
  54                 name: QT_TR_NOOP("Stations by Name")
  55             }
  56             ListElement {
  57                 name: QT_TR_NOOP("Stations by Distance")
  58             }
  59             ListElement {
  60                 name: QT_TR_NOOP("Stations Recently Seen")
  61             }
  62         }
  63         onSelectedIndexChanged: {
  64             header.text = dialogOptions.get(selectedIndex).name
  65             console.log("Selection changed to: " + selectedIndex)
  66             console.log("Selection text is: " + header.text)
  67         }
  68     }
  69     SearchBar {
  70         id: searchField
  71         anchors.top: header.bottom
  72     }
  73     Binding {
  74         target: stationListProxyModel
  75         property: "searchPattern"
  76         value: searchField.text
  77     }
  78     Binding {
  79         target: stationListProxyModel
  80         property: "sortingMode"
  81         value: header.selectedIndex
  82     }
  83     Rectangle {
  84         id: shadow
  85         width: parent.width
  86         anchors.top: mainView.top
  87         height: 5
  88         gradient: Gradient {
  89             GradientStop {color: "#aa000000"; position: 0.0}
  90             GradientStop {color: "#00000000"; position: 1.0}
  91         }
  92     }
  93     Item {
  94         id: mainView
  95         x: 16
  96         y: 16
  97         anchors.top: searchField.bottom
  98         width: parent.width - 32
  99         height: parent.height
 100         ListView {
 101             id: stationListView
 102             clip: true
 103             width: parent.width
 104             height: parent.height
 105             model:  stationListProxyModel
 106             delegate: Item {
 107                 id: listItem
 108                 height: 48
 109                 width: parent.width
 110                 BorderImage {
 111                     id: background
 112                     anchors.fill: parent
 113                     // Fill page borders
 114                     visible: mouseArea.pressed
 115                     source: "image://theme/meegotouch-list-background-pressed-center"
 116                 }
 117                 Row {
 118                     anchors.fill: parent
 119
 120                     Column {
 121                         anchors.verticalCenter: parent.verticalCenter
 122
 123                         Label {
 124                             id: mainText
 125                             text: highlightSearch(model.display)
 126                             font.bold: true
 127                         }
 128                     }
 129                 }
 130                 MouseArea {
 131                     id: mouseArea
 132                     anchors.fill: background
 133                     onClicked: {
 134                         stationListPage.loadStation(model.display)
 135                     }
 136                 }
 137             }
 138         }
 139     }
 140
 141     Sheet {
 142         id: settingsSheet
 143         acceptButtonText: qsTr("Save")
 144         rejectButtonText: qsTr("Cancel")
 145         content: Item {
 146             x: 16
 147             y: 16
 148             width: parent.width - 32
 149             height: parent.height - 32
 150             Column {
 151                 spacing: 16
 152                 anchors.fill: parent
 153                 Row {
 154                     height: 40
 155                     spacing: 16
 156                     anchors.left: parent.left
 157                     anchors.right: parent.right
 158                     Label {
 159                         font.bold: true
 160                         text: "Show Last Station on Startup"
 161                         anchors.verticalCenter: parent.verticalCenter
 162                     }
 163                     Switch {
 164                         anchors.verticalCenter: parent.verticalCenter
 165                         id: showLastStationSwitch
 166                         anchors.right: parent.right
 167                     }
 168                 }
 169                 Row {
 170                     height: 40
 171                     spacing: 16
 172                     anchors.left: parent.left
 173                     anchors.right: parent.right
 174                     Label {
 175                         font.bold: true
 176                         text: "Update Display Periodically"
 177                         anchors.verticalCenter: parent.verticalCenter
 178                     }
 179                     Switch {
 180                         anchors.verticalCenter: parent.verticalCenter
 181                         anchors.right: parent.right
 182                         id: periodicCheckSwitch
 183                     }
 184                 }
 185             }
 186         }
 187     }
 188 }
 189