Various UI fixes
[pywienerlinien] / qml / MainPage.qml
index a4b3a98..c6deee0 100644 (file)
 import QtQuick 1.1
 import com.nokia.meego 1.0
+import QtMobility.location 1.1
+
 import "UIConstants.js" as UIConstants
 import "ExtrasConstants.js" as ExtrasConstants
 
 Page {
     tools: commonTools
+    orientationLock: PageOrientation.LockPortrait
+
+    property bool canRefresh: realtimeResult.sourceUrl != '' || (realtimeResult.isStation && realtimeResult.gstation != '')
+    //property alias stationSelect: stationSelector
+    property variant nearbyStations
 
-    Image {
-        id: logo
-        source: 'logo.png'
+    function search() {
+        lineSearchButton.clicked()
+    }
+
+    function refresh() {
+        realtimeResult.refresh()
+    }
 
+    function fillNearbyStations(lat, lon) {
+        nearbyStations = itip.get_nearby_stations(lat, lon)
+    }
+
+    function showNearby() {
+        console.log("show nearby")
+
+        var stations = nearbyStations;
+        stationSelectorModel.clear();
+        for (var idx in stations) {
+            stationSelectorModel.append({'name': stations[idx]});
+        }
+
+        stationSelector.open();
+    }
+
+    Text {
+        visible: !parent.canRefresh
+        anchors.centerIn: parent
+        font.pixelSize: 30
+        text: '<p><strong>Welcome, traveller!<br></strong></p><p>Press <img src="image://theme/icon-m-toolbar-search"> to search for<br>departure information.</p><p>Press <img src="image://theme/icon-m-toolbar-view-menu"> for nearby stations.<br></p><p><strong>Have a safe journey.</strong></p>'
+    }
+
+    Rectangle {
+        id: header
         anchors {
-            topMargin: 25
             top: parent.top
-            horizontalCenter: parent.horizontalCenter
+            left: parent.left
+            right: parent.right
+            margins: -1
+        }
+        border {
+            color: 'black'
+            width: 1
         }
-    }
 
-    SelectionDialog {
-        id: lineSelector
-        titleText: 'Select line'
+        gradient: Gradient {
+            GradientStop { position: 0; color: '#777' }
+            GradientStop { position: 1; color: '#aaa' }
+        }
 
-        model: ListModel {
-            id: lineSelectorModel
+        height: 80
+        color: 'white'
 
-            Component.onCompleted: {
-                var lines = itip.get_lines()
+        Image {
+            id: logo
+            source: 'logo.png'
 
-                for (var idx in lines) {
-                    lineSelectorModel.append({'name': lines[idx]})
-                }
+            anchors {
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                leftMargin: 10
             }
         }
 
-        // XXX It would be nice if we could make a delegate with
-        // icons (i.e. U1, U2, ... in the right colors), but we
-        // would have to "copy" the default delegate style
+    }
+
+    PositionSource {
+        id: positionSource
+        updateInterval: 10000
+
+        active: true
+
+        onPositionChanged: {
+            fillNearbyStations(positionSource.position.coordinate.latitude, positionSource.position.coordinate.longitude)
+        }
+    }
+
+    SelectionDialog {
+        id: stationSelector
+        titleText: 'Select nearby station'
+
+        model: ListModel {
+            id: stationSelectorModel
+        }
 
         onAccepted: {
-            console.log('accepted: ' + selectedIndex)
-            gline.text = lineSelectorModel.get(selectedIndex).name
+            realtimeResult.isStation = true
+            realtimeResult.gline = ''
+            realtimeResult.sourceUrl = ''
+            gline.text = ''
+            gstation.text = stationSelectorModel.get(selectedIndex).name
+            realtimeResult.gstation = stationSelectorModel.get(selectedIndex).name
+            console.log('station to get: ' + realtimeResult.gstation)
         }
     }
 
     TextField {
+        visible: false
         placeholderText: 'Line'
 
         id: gline
         anchors {
-            top: logo.bottom
+            top: parent.top
             left: parent.left
             topMargin: 20
             leftMargin: 10
@@ -57,17 +123,7 @@ Page {
         }
 
         onTextChanged: {
-            // TODO: Check if text matches an item in lineSelectorModel and
-            // set selectedIndex in lineSelector to the right item
-
-            if (lineSelector.selectedIndex == -1) {
-                return
-            }
-
-            // Disable selection in line selector if user changes the text
-            if (lineSelectorModel.get(lineSelector.selectedIndex).name != text) {
-                lineSelector.selectedIndex = -1
-            }
+            gstation.text = ''
         }
 
          MouseArea {
@@ -79,8 +135,19 @@ Page {
          }
     }
 
+    LineSheet {
+        id: lineSheet
+        onAccepted: {
+            gline.text = currentLine
+
+            /* We usually want to select a station after selecting a line */
+            stationPickerButton.clicked()
+        }
+    }
+
     Button {
         id: lineSearchButton
+        visible: false
 
         anchors {
             top: gline.top
@@ -92,39 +159,83 @@ Page {
         width: 60
         iconSource: 'image://theme/icon-m-common-search'
 
-        onClicked: lineSelector.open()
+        onClicked: {
+            lineSheet.currentLine = ''
+            lineSheet.open()
+        }
     }
 
     TextField {
         placeholderText: 'Station'
         id: gstation
+        visible: false
+
         anchors {
             top: gline.bottom
             left: parent.left
-            right: parent.right
+            right: stationPickerButton.left
             topMargin: 10
             leftMargin: 10
-            rightMargin: 10
+            rightMargin: 10*stationPickerButton.opacity
         }
     }
 
-    ResultRealtime { id: resu }
+    StationSheet {
+        id: stationSheet
+        onAccepted: {
+            gstation.text = stationSheet.currentStation
+
+            realtimeResult.gline = stationSheet.currentLine
+            realtimeResult.gdirection = stationSheet.currentDirection
+            realtimeResult.isStation = false
+            realtimeResult.sourceUrl = itip.get_directions_url(stationSheet.currentLine, stationSheet.currentDirection, stationSheet.currentStation)
+            realtimeResult.gstation = stationSheet.currentStation
+            
+            console.debug('url to get: ' + realtimeResult.sourceUrl)
+            realtimeResult.refresh()
+        }
+    }
 
     Button {
-        id: btnSearch
-        text: 'Search'
+        id: stationPickerButton
+
         anchors {
-            top: gstation.bottom
-            topMargin: 10
-            horizontalCenter: parent.horizontalCenter
+            top: gstation.top
+            bottom: gstation.bottom
+            right: parent.right
+            rightMargin: 10
         }
+
+        visible: false
+
+        width: lineSearchButton.width * opacity
+        //iconSource: 'image://theme/icon-m-common-location-picker'
+        iconSource: 'image://theme/icon-m-toolbar-list'
+
         onClicked: {
-            resu.gline = gline.text
-            resu.gstation = gstation.text
-            pageStack.push(resu)
-            itip.search(gline.text, gstation.text)
-            resu.busy = false
+            stationSheet.open()
+            stationSheet.loadData(gline.text)
+        }
+    }
+
+    ResultRealtime {
+        id: realtimeResult
+
+        anchors {
+            margins: 10
+            top: header.bottom
+            left: parent.left
+            bottom: parent.bottom
+            right: parent.right
         }
+
+        clip: true
+
+        gline: stationSheet.currentLine
+        gstation: stationSheet.currentStation
+        gdirection: stationSheet.currentDirection
+
+        sourceUrl: stationSheet.currentUrl
     }
 }