Merge lp:~nik90/ubuntu-clock-app/world-clock-part1 into lp:ubuntu-clock-app/saucy

[Nekhelesh Ramananthan]

Adds the first phase of the world clock's feature. It currently implements the following,
- Necessary UI to show the world clocks
- Search world clocks online using geoname.org API
- World Time is updated every minute locally using existing timer
- Add world clock local storage. Stores world clocks selected by the user
- Clicking on world clock sets it as the current location.
- Add Clock toolbar action

This MP achieves the following,
- Necessary UI to show the world clocks
- Search world clocks online using geoname.org API
- World Time is updated every minute locally using existing timer
- Add world clock local storage. Stores world clocks selected by the user
- Clicking on world clock sets it as the current location.

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:108
http://91.189.93.125:8080/job/ubuntu-clock-app-ci/73/
Executed test runs:
    SUCCESS: http://91.189.93.125:8080/job/ubuntu-clock-app-quantal-amd64-ci/38
    SUCCESS: http://91.189.93.125:8080/job/ubuntu-clock-app-raring-amd64-ci/73

Click here to trigger a rebuild:
http://91.189.93.125:8080/job/ubuntu-clock-app-ci/73/rebuild

review: Approve (continuous-integration)

=== modified file 'clock/ClockPage.qml'
--- clock/ClockPage.qml	2013-06-09 10:23:09 +0000
+++ clock/ClockPage.qml	2013-06-14 19:10:32 +0000
@@ -20,75 +20,237 @@
 
 import QtQuick 2.0
 import Ubuntu.Components 0.1
+import Ubuntu.Components.ListItems 0.1 as ListItem
+import QtQuick.XmlListModel 2.0
 import "../common/ClockUtils.js" as Utils
 import "../common/Constants.js" as Constants
-
-Page {    
+import "../common"
+
+Page {
+    id: clockPage;
+
     // Property to hold the formatted time string to show on the screen
     property string currentTimeFormatted
+    property real currentTimeStamp
+    property real diff: new Date().getTimezoneOffset()
 
     Component.onCompleted: {
         Utils.log("ClockPage loaded");
-        currentTimeFormatted = Qt.formatTime(new Date());
+        updateTime();
     }
 
     function onTimerUpdate(now) {
-        currentTimeFormatted = Qt.formatTime(now);
+        currentTimeFormatted = Qt.formatTime(new Date(currentTimeStamp + (diff * 60000)), "hh:mm")
+        now.setMinutes(now.getMinutes() + diff)
         clockFace.timeChanged(now)
-    }
-
-    // Label to show the current time
-    Label {
-        id: currentTimeLabel
-        objectName: "currentTimeLabel"
-
-        z: clockFace.z + 1;
-        width: parent.width; height: parent.height / 4
-        anchors.centerIn: clockFace
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        fontSize: "x-large"
-        color: Constants.brightWhite;        
-
-        text: currentTimeFormatted
-    }
-
-    // Qml Element to draw the analogue clock face along with its hour, minute and second hands.
-    AnalogClockFace {
-        id: clockFace
-
-        anchors.centerIn: parent
-        Component.onCompleted: easterEggCircle.reloadSunRiseModel()
-
-        onClicked: {            
-            if (easterEggCircle.isReady == 1) {
-                clockFace.state == "" ? clockFace.state = "easteregg" : clockFace.state = "";
-            } else {
-                Utils.log("Sunrise/Sunset times not yet loaded.")
-            }
-        }
-
-        EasterEgg {
-            id: easterEggCircle
-            anchors.centerIn: parent
+        if (now.getUTCSeconds() == 0) {
+            updateTime();
+        }
+    }
+
+    function updateTime() {
+        var now = new Date();
+        currentTimeStamp = now.getTime();
+    }
+
+    function getTimeDifference(data) {
+        var worldTime = data.split(' ')[1].split(':'),
+            hoursWT = parseInt(worldTime[0]),
+            minutesWT = parseInt(worldTime[1]),
+            now = new Date();
+        return ((hoursWT - now.getHours()) * 60 + (minutesWT - now.getMinutes()));
+    }
+
+    WorldClockModel {
+        id: worldModel;
+
+        Component.onCompleted: {
+            _loadDB();
+            diff = worldModel.timeDiff;
+            currentLocation.text = worldModel.city;
+            currentTimeFormatted = Qt.formatTime(new Date(currentTimeStamp + (diff * 60000)), "hh:mm")
+        }
+    }
+
+    AnimationContainer {
+        id: clockAnimationContainer
+
+        initYPos: units.gu(0);
+        finalYPos: -listWorldClocks.height;
+
+        anchors.fill: parent
+
+        // Label to show the current time
+        Rectangle {
+            id: labelContainer;
+
+            z: clockFace.z + 1;
             width: clockFace.innerDimension; height: width;
-            radius: width / 2;
-        }
-
-        states: [
-            State {
-                name: "easteregg"
-                PropertyChanges { target: easterEggCircle; opacity: 1; }
-                PropertyChanges { target: currentTimeLabel; opacity: 0; }
-                // TODO: Do some caching of data here. Store data locally to reduce API calls.
-                PropertyChanges { target: easterEggCircle; sunriseLabel: easterEggCircle.getSunTime(easterEggCircle.model.get(0).sunrise); }
-                PropertyChanges { target: easterEggCircle; sunsetLabel: easterEggCircle.getSunTime(easterEggCircle.model.get(0).sunset); }
-            },
-            State {
-                name: ""
-                PropertyChanges { target: currentTimeLabel; opacity: 1; }
-                PropertyChanges { target: easterEggCircle; opacity: 0; }
-            }
-        ]
+            anchors.centerIn: clockFace;
+            color: "transparent"
+
+            Label {
+                id: currentTimeLabel
+                objectName: "currentTimeLabel"
+
+                anchors.centerIn: parent
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                fontSize: "x-large"
+                color: Constants.brightWhite;
+
+                text: currentTimeFormatted
+            }
+        }
+
+        // Qml Element to draw the analogue clock face along with its hour, minute and second hands.
+        AnalogClockFace {
+            id: clockFace
+
+            anchors { top: parent.top; topMargin: units.gu(17); horizontalCenter: parent.horizontalCenter }
+            Component.onCompleted: easterEggCircle.reloadSunRiseModel()
+
+            onClicked: {
+                if (easterEggCircle.isReady == XmlListModel.Ready) {
+                    clockFace.state == "" ? clockFace.state = "easteregg" : clockFace.state = "";
+                } else {
+                    Utils.log("Sunrise/Sunset times not yet loaded.")
+                }
+            }
+
+            EasterEgg {
+                id: easterEggCircle
+                anchors.centerIn: parent
+                width: clockFace.innerDimension; height: width;
+                radius: width / 2;
+            }
+
+            states: [
+                State {
+                    name: "easteregg"
+                    PropertyChanges { target: easterEggCircle; opacity: 1; }
+                    PropertyChanges { target: currentTimeLabel; opacity: 0; }
+                    // TODO: Do some caching of data here. Store data locally to reduce API calls.
+                    PropertyChanges { target: easterEggCircle; sunriseLabel: easterEggCircle.getSunTime(easterEggCircle.model.get(0).sunrise); }
+                    PropertyChanges { target: easterEggCircle; sunsetLabel: easterEggCircle.getSunTime(easterEggCircle.model.get(0).sunset); }
+                },
+                State {
+                    name: ""
+                    PropertyChanges { target: currentTimeLabel; opacity: 1; }
+                    PropertyChanges { target: easterEggCircle; opacity: 0; }
+                }
+            ]
+        }
+
+        Column {
+            id: savedWorldClock
+
+            height: childrenRect.height;
+            anchors { left:parent.left; right:parent.right; top: clockFace.bottom; topMargin: units.gu(12)}
+
+            ListItem.ThinDivider {}
+
+            ListItem.Header { text: i18n.tr("Current Location") }
+
+            ListItem.SingleValue {
+                id: currentLocation
+                text: "UTC"
+                value: Qt.formatTime(new Date(currentTimeStamp + (diff * 60000)), "hh:mm A");
+            }
+
+            ListItem.Header { text: i18n.tr("World") }
+
+            ListView {
+                id: listWorldClocks
+
+                anchors { left: parent.left; right: parent.right }
+                height: units.gu(30)
+                model: worldModel
+                currentIndex: -1
+
+                delegate: ListItem.Standard {
+                    text: cityName;
+
+                    Label {
+                        fontSize: "medium"
+                        text: Qt.formatTime(new Date(currentTimeStamp + (rawOffSet * 60000)), "hh:mm A");
+                        anchors { verticalCenter: parent.verticalCenter; right: parent.right; rightMargin: units.gu(2) }
+                    }
+
+                    selected: listWorldClocks.currentIndex == index
+
+                    onClicked: {
+                        currentLocation.text = cityName;
+                        diff = rawOffSet;
+                        worldModel.appendCurrentLocation(cityName, diff);
+                    }
+                }
+            }
+        }
+    }
+
+    WorldClock {
+        id: worldClockList;
+
+        anchors { left: parent.left; right: parent.right; top: parent.top; topMargin: units.gu(2) }
+
+        // Xml model to retrieve timezone of searched city
+        XmlListModel {
+            id: cityDetailsModel;
+
+            source: worldClockList.getCityTimezoneUrl(worldClockList.lat, worldClockList.lng)
+            query: "/geonames/timezone"
+
+            onStatusChanged: {
+                if(status == XmlListModel.Ready && worldClockList.city != "null") {
+                    worldModel.appendPreset(worldClockList.city, getTimeDifference(cityDetailsModel.get(0).time));
+                }
+            }
+
+            XmlRole { name: "time"; query: "time/string()" }
+        }
+
+        onClicked: {
+            lat = searchModel.get(index).lat;
+            lng = searchModel.get(index).lng;
+            city = searchModel.get(index).city;
+            cityDetailsModel.reload()
+            clockPage.state = "NORMAL"
+        }
+    }
+
+    states: [
+        State {
+            name: "ADDCITY"
+            PropertyChanges { target: worldClockList; visible: true }
+            PropertyChanges { target: clockAnimationContainer; visible: false }
+            PropertyChanges { target: addCity; visible: false }
+        },
+
+        State {
+            name: "NORMAL"
+            PropertyChanges { target: worldClockList; visible: false }
+            PropertyChanges { target: clockAnimationContainer; visible: true }
+            PropertyChanges { target: addCity; visible: true }
+        }
+    ]
+
+    tools: ToolbarActions {
+        id: toolbarClock
+
+        Action {
+            id: addCity
+
+            iconSource: Qt.resolvedUrl("../images/add_icon.png")
+            text: i18n.tr("Add City")
+            visible: true;
+
+            onTriggered: clockPage.state = "ADDCITY";
+        }
+
+        back {
+            visible: true;
+            onTriggered: clockPage.state = "NORMAL";
+        }
     }
 }

=== modified file 'clock/EasterEgg.qml'
--- clock/EasterEgg.qml	2013-06-09 10:23:09 +0000
+++ clock/EasterEgg.qml	2013-06-14 19:10:32 +0000
@@ -52,7 +52,7 @@
     function getUrlString (latitude, longitude) {
         var base_url,url;
         base_url = "http://api.openweathermap.org/data/2.5/weather?";
-        url = base_url + "lat=" + latitude + "&lon=" + longitude + "&mode=xml";
+        url = base_url + "lat=" + latitude + "&lon=" + longitude + "&mode=xml";        
         return url;
     }
 

=== added file 'clock/WorldClock.qml'
--- clock/WorldClock.qml	1970-01-01 00:00:00 +0000
+++ clock/WorldClock.qml	2013-06-14 19:10:32 +0000
@@ -0,0 +1,107 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import Ubuntu.Components.ListItems 0.1 as ListItem
+import QtQuick.XmlListModel 2.0
+import "../common/ClockUtils.js" as Utils
+import "../common/Constants.js" as Constants
+
+Column {
+    id: worldClocks
+
+    // Properties to store the user searched city details
+    property string city: "null";
+    property real lng: 0;
+    property real lat: 0;
+    property real rawOffSet: 0;
+
+    // Property to store the city searched by the user
+    property string search_string: "london";
+
+    // Properties to store the information related to api.geonames.org
+    readonly property string username: "krnekhelesh";
+    readonly property string search_base_url: "http://api.geonames.org/search?q=";
+    readonly property string timezone_base_url: "http://api.geonames.org/timezone?lat=";
+    readonly property int no_of_results: 5;
+
+    property alias searchModel: searchCityModel;
+    property alias index: worldList.currentIndex;
+
+    signal clicked()
+
+    function searchCityUrl (city) {
+        return (search_base_url + search_string + "&maxRows="+ no_of_results + "&username=" + username);
+    }
+
+    function getCityTimezoneUrl (lat, lng) {
+        return (timezone_base_url + lat + "&lng=" + lng + "&username=" + username);
+    }
+
+    height: childrenRect.height;
+    visible: false;
+
+    // Xml model to search city online and retrieve latitude and longitude of searched city
+    XmlListModel {
+        id: searchCityModel;
+
+        source: searchCityUrl(city)
+        query: "/geonames/geoname"
+
+        XmlRole { name: "city"; query: "toponymName/string()"; isKey: true }
+        XmlRole { name: "lat"; query: "lat/string()"; isKey: true }
+        XmlRole { name: "lng"; query: "lng/string()"; isKey: true }
+    }
+
+    Row {
+        id: searchBox;
+
+        spacing: units.gu(1)
+        anchors.horizontalCenter: parent.horizontalCenter;
+        height: childrenRect.height;
+
+        TextField {
+            id: searchLabel
+
+            hasClearButton: true
+            placeholderText: i18n.tr("Search");
+        }
+
+        Button {
+            id: searchButton;
+
+            width: units.gu(12); height: searchLabel.height;
+            color: Constants.green;
+            text: i18n.tr("Search")
+
+            onClicked: {
+                if (searchLabel.text != "") {
+                    search_string = searchLabel.text;
+                    searchCityModel.reload();
+                }
+            }
+        }
+
+        ActivityIndicator {
+            running: searchCityModel.status === XmlListModel.Loading
+        }
+    }
+
+    ListView {
+        id: worldList
+
+        anchors { left: parent.left; right: parent.right }
+        height: units.gu(35)
+        model: searchCityModel
+        currentIndex: -1
+
+        delegate: ListItem.Standard {
+            id: delegateTest;
+            text: searchCityModel.status == XmlListModel.Ready ? searchCityModel.get(index).city : i18n.tr("Loading...");
+            selected: worldList.currentIndex == index;
+
+            onClicked: {
+                worldList.currentIndex = index;
+                worldClocks.clicked()
+            }
+        }
+    }
+}

=== added file 'clock/WorldClockModel.qml'
--- clock/WorldClockModel.qml	1970-01-01 00:00:00 +0000
+++ clock/WorldClockModel.qml	2013-06-14 19:10:32 +0000
@@ -0,0 +1,178 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
+ */
+
+import QtQuick 2.0
+import QtQuick.LocalStorage 2.0
+import "../common/ClockUtils.js" as Utils
+
+ListModel {
+    id: model
+
+    readonly property string dbName: "ubuntu-clock-app"
+    readonly property string dbVersion: "0.1"
+    readonly property string dbDescription: "World Clock"
+
+    property real timeDiff: new Date().getTimezoneOffset()
+    property string city: "UTC";
+
+    property var _db: null
+
+    function appendCurrentLocation(cityname, rawOffSet)
+    {
+        try {
+            _db.transaction(function(tx){
+                var currentValue;
+                var res = tx.executeSql('SELECT * FROM CurrentClock');
+                if (res.rows.length > 0) {
+                    currentValue = res.rows.item(0).rawOffSet;
+                }
+
+                if (currentValue !== rawOffSet) {
+                    // Update existing value or insert if none
+                    Utils.log("Outer loop");
+                    if (currentValue !== undefined) {
+                        res = tx.executeSql('UPDATE CurrentClock SET rawOffSet = ?, cityName = ?', [rawOffSet, cityname]);
+                        Utils.log("Existing record found. Hence updating it!");
+                    } else {
+                        res = tx.executeSql('INSERT INTO CurrentClock VALUES(?, ?)', [cityname, rawOffSet]);
+                        Utils.log("No City found. Creating a new entry.");
+                    }
+                }
+            });
+        } catch (err) {
+            Utils.error("Error setting current location '" + "': " + err);
+            return false;
+        }
+    }
+
+    function appendPreset(cityName, rawOffSet)
+    {
+        if (_appendDB(cityName, rawOffSet)) {
+            model.append({"cityName" : cityName, "rawOffSet" : rawOffSet})
+        }
+    }
+
+    function removePreset(index)
+    {
+        var cityName = get(index).cityName
+        if (_removeDB(cityName)) {
+            model.remove(index);
+        }
+    }
+
+    function _createDB() {
+        if (_db == null) return false;
+        try {
+            _db.transaction(function(tx){
+                tx.executeSql('CREATE TABLE IF NOT EXISTS WorldClock(cityName TEXT, rawOffSet REAL)');
+            });
+        } catch (err) {
+            Utils.error("Error creating WorldClock table in db:" + err);
+            return false;
+        }
+        try {
+            _db.transaction(function(tx){
+                tx.executeSql('CREATE TABLE IF NOT EXISTS CurrentClock(cityName TEXT, rawOffSet REAL)');
+            });
+        } catch (err) {
+            Utils.error("Error creating CurrentClock table in db:" + err);
+            return false;
+        }
+        return true;
+    }
+
+    function _loadDB() {
+        _db = LocalStorage.openDatabaseSync(model.dbName, model.dbVersion, model.dbDescription, 1000);
+        if (_db == null) return false;
+        if (!_createDB()) {
+            _db = null;
+            return false;
+        }
+        try {
+            _db.readTransaction(function(tx){
+                var res = tx.executeSql('SELECT * FROM WorldClock');
+                if (res.rows.length > 0) {
+                    for (var i = 0; i < res.rows.length; i++) {
+                        model.append({"cityName" : res.rows.item(i).cityName,
+                                         "rawOffSet" : res.rows.item(i).rawOffSet});
+                    }
+                }
+            });
+        } catch (err) {
+            Utils.error("Error opening database: " + err);
+            _db = null
+            return false;
+        }
+        try {
+            _db.readTransaction(function(tx){
+                var currentstate = tx.executeSql('SELECT * FROM CurrentClock ORDER BY cityName');
+                if (currentstate.rows.length > 0) {
+                    city = currentstate.rows.item(0).cityName;
+                    timeDiff = currentstate.rows.item(0).rawOffSet
+                    Utils.log("Inside reading")
+                }
+            });
+        } catch (err) {
+            Utils.error("Error opening database: " + err);
+            _db = null
+            return false;
+        }
+        return true;
+    }
+
+    function _appendDB(cityName, rawOffSet) {
+        if (_db == null) return false;
+
+        try {
+            _db.transaction(function(tx){
+                var currentValue;
+                var res = tx.executeSql('SELECT rawOffSet FROM WorldClock WHERE cityName=?', cityName);
+                if (res.rows.length > 0) {
+                    currentValue = res.rows.item(0).rawOffSet;
+                }
+
+                if (currentValue !== rawOffSet) {
+                    // Update existing value or insert if none
+                    if (currentValue !== undefined) {
+                        res = tx.executeSql('UPDATE WorldClock SET rawOffSet = ? WHERE cityName = ?', [rawOffSet, cityName]);
+                    } else {
+                        res = tx.executeSql('INSERT INTO WorldClock VALUES(?, ?)', [cityName, rawOffSet]);
+                    }
+                }
+            });
+        } catch (err) {
+            Utils.error("Error setting labeltxt '"+ label + "': " + err);
+            return false;
+        }
+        return true;
+    }
+
+    function _removeDB(cityName) {
+        if (_db == null) return false;
+
+        try {
+            _db.transaction(function(tx){
+                tx.executeSql('DELETE FROM WorldClock WHERE cityName = ?', [cityName]);
+            });
+        } catch (err) {
+            Utils.error("Error delete WorldClock'" + cityName + "': " + err);
+            return false;
+        }
+        return true;
+    }
+}