← Back to branch summary

~pkunal-parmar/ubuntu-calendar-app/Minor-Performance

« back to all changes in this revision

Viewing changes to TimeLineView.qml

  • Committer: Kunal Parmar
  • Date: 2013-06-01 11:53:11 UTC
  • mto: This revision was merged to the branch mainline in revision 44.
  • Revision ID: pkunal.parmar@gmail.com-20130601115311-hfou3qrtoxjs92th
Typo flickble->flickable fixed

Show diffs side-by-side

added added

removed removed

Lines of Context:
TimeLineView.qml
 
1
import QtQuick 2.0
 
2
import Ubuntu.Components 0.1
 
3
 
 
4
import "dateExt.js" as DateExt
 
5
import "dataService.js" as DataService
 
6
 
 
7
EventViewBase{
 
8
    id: root
 
9
 
 
10
    flickableChild: timeLineView
 
11
 
 
12
    onModelRefreshed: {
 
13
        timeLineView.createEvents();
 
14
    }
 
15
 
 
16
    Flickable{
 
17
        id: timeLineView
 
18
        anchors.fill: parent
 
19
 
 
20
        function scroll() {
 
21
            //scroll to first event or current hour
 
22
            var hour = intern.now.getHours();
 
23
            if(eventModel.count > 0) {
 
24
                hour = eventModel.get(0).startTime.getHours();
 
25
            }
 
26
 
 
27
            timeLineView.contentY = hour * intern.hourHeight;
 
28
 
 
29
            if(timeLineView.contentY >= timeLineView.contentHeight - timeLineView.height) {
 
30
                timeLineView.contentY = timeLineView.contentHeight - timeLineView.height
 
31
            }
 
32
        }
 
33
 
 
34
        function createEventMap() {
 
35
            var eventMap = {};
 
36
            for(var i = 0 ; i < eventModel.count ; ++i) {
 
37
                var event = eventModel.get(i);
 
38
                eventMap[event.startTime.getHours()] = event
 
39
            }
 
40
            return eventMap;
 
41
        }
 
42
 
 
43
        function createEvents() {
 
44
            intern.eventMap = createEventMap();
 
45
 
 
46
            bubbleOverLay.destroyAllChildren();
 
47
 
 
48
            for( var i=0; i < 24; ++i ) {
 
49
                var event = intern.eventMap[i];
 
50
                if( event ) {
 
51
                    bubbleOverLay.createEvent(event,i);
 
52
                } else if( i === intern.now.getHours()
 
53
                          && intern.now.isSameDay( root.dayStart )) {
 
54
                    bubbleOverLay.createSeparator(i);
 
55
                }
 
56
            }
 
57
 
 
58
            scroll();
 
59
        }
 
60
 
 
61
        function showEventDetails(hour) {
 
62
            var event = intern.eventMap[hour];
 
63
            pageStack.push(Qt.resolvedUrl("EventDetails.qml"),{"event":event});
 
64
        }
 
65
 
 
66
        contentHeight: timeLineColumn.height + units.gu(3)
 
67
        contentWidth: width
 
68
 
 
69
        QtObject {
 
70
            id: intern
 
71
            property var eventMap;
 
72
            property var now : new Date();
 
73
            property var hourHeight : units.gu(10)
 
74
        }
 
75
 
 
76
        Rectangle{
 
77
            id: background; anchors.fill: parent
 
78
            color: "white"
 
79
        }
 
80
 
 
81
        //Time line view
 
82
        Column{
 
83
            id: timeLineColumn
 
84
            anchors.top: parent.top
 
85
            anchors.topMargin: units.gu(3)
 
86
            width: parent.width
 
87
 
 
88
            Repeater{
 
89
                model: 24 // hour in a day
 
90
 
 
91
                delegate: Item {
 
92
                    id: delegate
 
93
                    width: parent.width
 
94
                    height: intern.hourHeight
 
95
 
 
96
                    Row {
 
97
                        width: parent.width
 
98
                        y: -timeLabel.height/2
 
99
                        Label{
 
100
                            id: timeLabel
 
101
                            // TRANSLATORS: this is a time formatting string,
 
102
                            // see http://qt-project.org/doc/qt-5.0/qtqml/qml-qtquick2-date.html#details for valid expressions
 
103
                            text: new Date(0, 0, 0, index).toLocaleTimeString(Qt.locale(), i18n.tr("HH:mm"))
 
104
                            color:"gray"
 
105
                            anchors.top: parent.top
 
106
                        }
 
107
                        Rectangle{
 
108
                            width: parent.width -timeLabel.width
 
109
                            height:units.dp(1)
 
110
                            color:"gray"
 
111
                            anchors.verticalCenter: parent.verticalCenter
 
112
                        }
 
113
                    }
 
114
 
 
115
                    Rectangle{
 
116
                        width: parent.width - units.gu(5)
 
117
                        height:units.dp(1)
 
118
                        color:"gray"
 
119
                        anchors.verticalCenter: parent.verticalCenter
 
120
                        anchors.horizontalCenter: parent.horizontalCenter
 
121
                    }
 
122
                }
 
123
            }
 
124
        }
 
125
 
 
126
        Item {
 
127
            id: bubbleOverLay
 
128
 
 
129
            width: timeLineColumn.width
 
130
            height: timeLineColumn.height
 
131
            anchors.top: parent.top
 
132
            anchors.topMargin: units.gu(3)
 
133
 
 
134
            function destroyAllChildren() {
 
135
                for( var i = children.length - 1; i >= 0; --i ) {
 
136
                    children[i].destroy();
 
137
                }
 
138
            }
 
139
 
 
140
            function createEvent( event ,hour) {
 
141
                var eventBubble = infoBubbleComponent.createObject(bubbleOverLay);
 
142
                eventBubble.title = event.title;
 
143
                eventBubble.location = "test";
 
144
                eventBubble.hour = hour;
 
145
 
 
146
                var yPos = (( event.startTime.getMinutes() * intern.hourHeight) / 60) + hour * intern.hourHeight
 
147
                eventBubble.y = yPos;
 
148
 
 
149
                var durationMin = (event.endTime.getHours() - event.startTime.getHours()) * 60;
 
150
                durationMin += (event.endTime.getMinutes() - event.startTime.getMinutes());
 
151
                var height = (durationMin * intern.hourHeight )/ 60;
 
152
                eventBubble.height = height;
 
153
            }
 
154
 
 
155
            function createSeparator(hour) {
 
156
                var separator = separatorComponent.createObject(bubbleOverLay);
 
157
                var yPos = ((intern.now.getMinutes() * intern.hourHeight) / 60) + hour * intern.hourHeight
 
158
                separator.visible = true;
 
159
                separator.y = yPos;
 
160
                separator.x = (parent.width - separator.width)/2
 
161
            }
 
162
        }
 
163
 
 
164
        Component{
 
165
            id: infoBubbleComponent
 
166
            Rectangle{
 
167
                id: infoBubble
 
168
 
 
169
                property string title;
 
170
                property string location;
 
171
                property int hour;
 
172
 
 
173
                color:'#fffdaa';
 
174
                width: timeLineView.width - units.gu(8)
 
175
                x: units.gu(5)
 
176
 
 
177
                border.color: "#f4d690"
 
178
 
 
179
                Column{
 
180
                    id: column
 
181
                    anchors {
 
182
                        left: parent.left
 
183
                        right: parent.right
 
184
                        top: parent.top
 
185
 
 
186
                        leftMargin: units.gu(1)
 
187
                        rightMargin: units.gu(1)
 
188
                        topMargin: units.gu(1)
 
189
                    }
 
190
                    spacing: units.gu(1)
 
191
                    Label{text:infoBubble.title;fontSize:"medium";color:"black"}
 
192
                    Label{text:infoBubble.location; fontSize:"small"; color:"black"}
 
193
                }
 
194
 
 
195
                MouseArea{
 
196
                    anchors.fill: parent
 
197
                    onClicked: {
 
198
                        timeLineView.showEventDetails(hour);
 
199
                    }
 
200
                }
 
201
            }
 
202
        }
 
203
 
 
204
        Component {
 
205
            id: separatorComponent
 
206
            TimeSeperator {
 
207
                id: separator
 
208
                width: timeLineView.width - units.gu(2)
 
209
                visible: false
 
210
            }
 
211
        }
 
212
    }
 
213
}