Implement LinePad for easy line selection
authorThomas Perl <m@thp.io>
Wed, 11 Jan 2012 12:12:39 +0000 (13:12 +0100)
committerThomas Perl <m@thp.io>
Wed, 11 Jan 2012 12:12:39 +0000 (13:12 +0100)
Woo!1!

qml/LinePad.qml [new file with mode: 0644]
qml/LineSheet.qml
qml/MainPage.qml

diff --git a/qml/LinePad.qml b/qml/LinePad.qml
new file mode 100644 (file)
index 0000000..1d6bd59
--- /dev/null
@@ -0,0 +1,152 @@
+
+import QtQuick 1.0
+
+Rectangle {
+    id: linePad
+    property alias currentLine: inputLine.text
+
+    /* List of available lines - will be filled w/ real data by LineSheet */
+    property variant availableLines: ['59A', '63A', '58']
+
+    property variant matches: availableLines
+
+    onMatchesChanged: {
+        if (matches !== undefined) {
+            if (matches.length == 1) {
+                inputLine.text = matches[0];
+            }
+        }
+    }
+
+    function getMatches(prefix) {
+        var result = [];
+
+        for (var i in availableLines) {
+            var line = availableLines[i];
+            if (line.indexOf(prefix) == 0) {
+                result.push(line);
+            }
+        }
+
+        return result;
+    }
+
+    height: 800
+    width: 480
+
+    Text {
+        id: inputLine
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        height: 100
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+
+        font {
+            pixelSize: height * .9
+            bold: true
+        }
+
+        text: ''
+        onTextChanged: {
+            if (text != '') {
+                linePad.matches = linePad.getMatches(text);
+            } else {
+                linePad.matches = linePad.availableLines;
+            }
+        }
+
+        Image {
+            source: 'image://theme/icon-m-toolbar-backspace'
+            anchors {
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+                margins: 20
+            }
+
+            MouseArea {
+                anchors {
+                    fill: parent
+                    margins: -(inputLine.height - height)/2
+                }
+                onClicked: inputLine.text = ''
+            }
+        }
+    }
+
+    Item {
+        id: inputState
+        property bool isMetro: inputLine.text[0] == 'U'
+    }
+
+    Repeater {
+        model: [1,2,3, 4,5,6, 7,8,9, 'A',0,'B', 'D','U','VRT', 'O','N','WLB']
+
+        Rectangle {
+            id: inputElement
+            property variant ch: modelData
+            property bool isCandidate
+
+            isCandidate: {
+                for (var i in linePad.matches) {
+                    if (ch == matches[i][inputLine.text.length]) {
+                        return true;
+                    } else if ((ch == 'VRT' || ch == 'WLB') && inputLine.text == '') {
+                        return true;
+                    }
+                }
+
+                return false;
+            }
+
+            opacity: isCandidate?1:.15
+            Behavior on opacity { PropertyAnimation { } }
+
+            color: {
+                if (inputState.isMetro) {
+                    switch (ch) {
+                        case 1: return '#E20A16';
+                        case 2: return '#764785';
+                        case 3: return '#F76013';
+                        case 4: return '#008131';
+                        case 6: return '#88471F';
+                    }
+                }
+                return (index%2?'#ddd':'#eee');
+            }
+            width: parent.width/3
+            height: (parent.height-inputLine.height)/6
+            x: width*(index%3)
+            y: inputLine.height + height*parseInt(index/3)
+
+            Text {
+                anchors.centerIn: parent
+                text: modelData
+                font {
+                    pixelSize: parent.height * .5
+                    bold: true
+                }
+                color: {
+                    if (inputState.isMetro) {
+                        return 'white';
+                    } else if (inputElement.isCandidate) {
+                        return 'black';
+                    }
+
+                    return '#ddd';
+                }
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    inputLine.text += modelData
+                }
+            }
+        }
+    }
+}
+
index 025cf4c..391eb33 100644 (file)
+
 import QtQuick 1.1
 import com.nokia.meego 1.0
-import com.nokia.extras 1.0
-
-import "UIConstants.js" as UIConstants
-import "ExtrasConstants.js" as ExtrasConstants
 
 Sheet {
     id: lineSheet
-    property string currentSection: ''
-    property string currentLine: ''
+    property alias currentLine: linePad.currentLine
 
     acceptButtonText: 'Select'
     rejectButtonText: 'Cancel'
 
-    function loadData() {
-        var lines = itip.get_lines()
-
-        for (var i in lines) {
-            lineSelectorModel.append({'name': lines[i]})
-        }
-        lineSheet.currentSection = sectionName
-
-        sectionChooserBusyIndicator.running = true
-
-        underground.clicked()
-        sectionChooser.checkedButton = underground
-    }
-
-    Connections {
-        target: itip
-
-        onLinesLoaded: {
-            sectionChooserBusyIndicator.running = false
-
-            underground.clicked()
-            sectionChooser.checkedButton = underground
-        }
-    }
-
-    content: Item {
+    content: LinePad {
+        id: linePad
         anchors.fill: parent
-
-        ButtonRow {
-            id: sectionChooser
-            property string section1
-            property string section2
-            property string section3
-            property string section4
-
-            visible: !sectionChooserBusyIndicator.running
-
-            function chosen(idx) {
-                console.log('section chosen: '+ idx)
-
-                lineSelectorListView.selectedIndex = -1
-
-                if (idx == 1) {
-                    lineSheet.currentSection = sectionChooser.section1
-                } else if (idx == 2) {
-                    lineSheet.currentSection = sectionChooser.section2
-                } else if (idx == 2) {
-                    lineSheet.currentSection = sectionChooser.section3
-                } else {
-                    lineSheet.currentSection = sectionChooser.section4
-                }
-                console.log(lineSheet.currentSection)
-
-                sectionChooserModel.clear()
-                var lines = itip.get_lines()
-
-                for (var i in lines) {
-                    lineSelectorModel.append({'name': lines[i]})
-                }
-            }
-
-            anchors {
-                margins: 10
-                top: parent.top
-                left: parent.left
-                right: parent.right
-            }
-
-                Button {
-                    id: underground
-                    text: 'U-Bahn'
-                    onClicked: sectionChooser.chosen(1)
-                }
-
-                Button {
-                    id: tram
-                    text: 'Straßenbahn'
-                    onClicked: sectionChooser.chosen(2)
-                }
-
-                Button {
-                    id: bus
-                    text: 'Autobus'
-                    onClicked: sectionChooser.chosen(3)
-                }
-
-                Button {
-                    id: nightline
-                    text: 'Nightline'
-                    onClicked: sectionChooser.chosen(4)
-                }
-
-        }
-
-        ListView {
-            id: lineSelectorListView
-            visible: !sectionChooserBusyIndicator.running
-
-            property int selectedIndex: -1
-            onSelectedIndexChanged: {
-                console.log('current index: ' + selectedIndex)
-                if (selectedIndex != -1) {
-                    lineSheet.currentLine = sectionChooserModel.get(selectedIndex).station
-                } else {
-                    lineSheet.currentLine = ''
-                }
-            }
-
-            anchors {
-                margins: 10
-                top: sectionChooserModel.bottom
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-
-            clip: true
-
-            model: ListModel {
-                id: sectionChooserModel
-            }
-
-            delegate: SheetListItem { selector: lineSelectorListView }
-        }
-
-        ScrollDecorator {
-            flickableItem: lineSelectorListView
-        }
-
-        BusyIndicator {
-            id: sectionChooserBusyIndicator
-            anchors.centerIn: parent
-            visible: running
-            platformStyle: BusyIndicatorStyle { size: 'large' }
-        }
-    }
-
-    onAccepted: {
-        gstation.text = stationSheet.currentStation
-
-        realtimeResult.gline = stationSheet.currentLine
-
-        realtimeResult.sourceUrl = itip.get_directions_url(lineSheet.currentLine, lineSheet.currentSection, lineSheet.currentStation)
+        availableLines: itip.get_lines()
     }
 }
+
index 8a6c4cc..9f1a7f7 100644 (file)
@@ -44,32 +44,6 @@ Page {
     }
 
     SelectionDialog {
-        id: lineSelector
-        titleText: 'Select line'
-
-        model: ListModel {
-            id: lineSelectorModel
-
-            Component.onCompleted: {
-                var lines = itip.get_lines()
-
-                for (var idx in lines) {
-                    lineSelectorModel.append({'name': lines[idx]})
-                }
-            }
-        }
-
-        // 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
-
-        onAccepted: {
-            console.log('accepted: ' + selectedIndex)
-            gline.text = lineSelectorModel.get(selectedIndex).name
-        }
-    }
-
-    SelectionDialog {
         id: stationSelector
         titleText: 'Select nearby station'
 
@@ -102,19 +76,12 @@ Page {
         }
 
         onTextChanged: {
-            // TODO: Check if text matches an item in lineSelectorModel and
-            // set selectedIndex in lineSelector to the right item
             gstation.text = ''
 
             if (lineSelector.selectedIndex === -1) {
                 text = text.toUpperCase()
                 return
             }
-
-            // Disable selection in line selector if user changes the text
-            if (lineSelectorModel.get(lineSelector.selectedIndex).name !== text) {
-                lineSelector.selectedIndex = -1
-            }
         }
 
          MouseArea {
@@ -126,10 +93,10 @@ Page {
          }
     }
 
-    /*
     LineSheet {
         id: lineSheet
-    }*/
+        onAccepted: gline.text = currentLine
+    }
 
     Button {
         id: lineSearchButton
@@ -144,7 +111,7 @@ Page {
         width: 60
         iconSource: 'image://theme/icon-m-common-search'
 
-        onClicked: lineSelector.open()
+        onClicked: lineSheet.open()
     }
 
     TextField {