WeatherApp

import QtQuick 2.0
import Sailfish.Silica 1.0
import QtQuick.LocalStorage 2.0

Page {

    id: page

    property double lat: 52.52
    property double lon: 13.41
    property string city: "Берлин"
    property var weather
    property var records: []

    property var db: LocalStorage.openDatabaseSync("QDeclarativeExampleDB", "1.0", "The Example QML SQL!", 1000000)

    Column {
        spacing: 100
        anchors.verticalCenter: parent.verticalCenter

        Column { // Колонка - контейнер для расположения элементов в столбец
            width: 720
            height: 300
            spacing: 20

            Label {
                id: cityLabel
                text: city
                font.family: "Helvetica"; font.pixelSize: 40; font.bold: true
                anchors.horizontalCenter: parent.horizontalCenter
            }
            Row {
                Image {
                    id: weatherIcon

                    anchors.verticalCenter: parent.verticalCenter
                    source: "https://openweathermap.org/img/wn/01d@2x.png"
                    width: 300
                    height: 300
                }

                Column {
                    width: 420
                    spacing: 10
                    anchors.verticalCenter: parent.verticalCenter

                    Label {
                        id: dateLabel
                        font.family: "Helvetica"; font.pixelSize: 30
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                    Row {
                        anchors.horizontalCenter: parent.horizontalCenter
                        spacing: 10
                        Label {
                            id: timeLabel
                            font.family: "Helvetica"; font.pixelSize: 70
                        }
                        Label {
                            text: "GMT"
                            anchors.bottom: timeLabel.bottom
                            font.family: "Helvetica"; font.pixelSize: 20
                        }
                    }

                    Rectangle {
                        height: 5
                        width: 300
                        color: "black"
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                    Row {
                        anchors.horizontalCenter: parent.horizontalCenter
                        spacing: 20

                        Label {
                            id: temperatureLabel
                            font.family: "Helvetica"; font.pixelSize: 70
                        }

                        Column {
                            Label {
                                id: windSpeedLabel
                                anchors.horizontalCenter: parent.horizontalCenter
                            }
                            Image {
                                anchors.horizontalCenter: parent.horizontalCenter
                                id: windDirImage
                                source: "https://www.svgrepo.com/show/533632/arrow-up.svg"
                                width: 50
                                height: width
                            }
                        }
                    }
                }
            }
        }

        Column {
            anchors.horizontalCenter: parent.horizontalCenter
            width: 600
            spacing: 10
            Row {
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: 10
                Button {
                    text: "Берлин"
                    width: 300
                    onClicked: {
                        lat = 52.52
                        lon = 13.41
                        city = "Берлин"
                        loadWeather()
                    }
                }
                Button {
                    text: "Сидней"
                    width: 300
                    onClicked: {
                        lat = -33.8678
                        lon = 151.2073
                        city = "Сидней"
                        loadWeather()
                    }
                }
            }

            Row {
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: 10
                Button {
                    text: "Вашингтон"
                    width: 300
                    onClicked: {
                        lat = 38.8951
                        lon = -77.0364
                        city = "Вашингтон"
                        loadWeather()
                    }
                }
                Button {
                    text: "Буэнос-Айрес"
                    width: 300
                    onClicked: {
                        lat = -34.6131
                        lon = -58.3772
                        city = "Буэнос-Айрес"
                        loadWeather()
                    }
                }
            }
        }

        SilicaListView {
            width: 720
            height: 300
            model: records
            delegate: Label {
                width: parent.width
                height: 100
                Button {
                    text: JSON.parse(modelData.weather).city + " " + JSON.parse(modelData.weather).current_weather.time
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: {
                        console.log(modelData.weather)
                        weather = JSON.parse(modelData.weather)
                        city = weather.city

                        var current_weather_units = weather.current_weather_units
                        var current_weather = weather.current_weather
                        console.log(current_weather.time)
                        var date = new Date(current_weather.time);

                        weatherIcon.source = getWeatherIcon(current_weather.weathercode, current_weather.is_day);
                        dateLabel.text = date.toDateString()
                        timeLabel.text = date.toTimeString().slice(0,5)
                        temperatureLabel.text = current_weather.temperature + " " + current_weather_units.temperature
                        windSpeedLabel.text = current_weather.windspeed + " " + current_weather_units.windspeed
                        windDirImage.rotation = current_weather.winddirection
                    }
                }
            }
            spacing: 5
        }

        Button {
            text: "Очистить"
            onClicked: {
                clearDB()
            }
        }
    }

    Component.onCompleted: { // такая штука чтобы весь код ниже запустился с загрузкой проги
        loadWeather()
        createDB()
    }

    function loadWeather() {
        var xhr = new XMLHttpRequest(); // всё из презентации

        xhr.open('GET', 'https://api.open-meteo.com/v1/forecast?latitude=' + lat + '&longitude=' + lon + '&current_weather=true', true); // адрес по которому получаем погоду

        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {

                weather = JSON.parse(xhr.responseText) // текст по ссылке превращаем в javascript объект
                var current_weather_units = weather.current_weather_units
                var current_weather = weather.current_weather
                console.log(current_weather.time)
                var date = new Date(current_weather.time);

                weatherIcon.source = getWeatherIcon(current_weather.weathercode, current_weather.is_day);
                dateLabel.text = date.toDateString()
                timeLabel.text = date.toTimeString().slice(0,5)
                temperatureLabel.text = current_weather.temperature + " " + current_weather_units.temperature
                windSpeedLabel.text = current_weather.windspeed + " " + current_weather_units.windspeed
                windDirImage.rotation = current_weather.winddirection

                var weatherCopy = JSON.parse(JSON.stringify(weather))
                weatherCopy.city = city

                addRecord(JSON.stringify(weatherCopy))

            }
        }
        xhr.send();
    }

    function getWeatherIcon(code, isDay) {
        var iconUrl = "https://openweathermap.org/img/wn/"

        var codesDict = {
            0: "01",
            1: "01",
            2: "02",
            3: "03",
            45: "50", 48: "50",
            51: "10", 53: "10", 55: "10", 56: "10", 57: "10",
            61: "10", 63: "10", 65: "10", 66: "10", 67: "10",
            71: "13", 73: "13", 75: "13", 77: "13", 85: "13", 86: "13",
            80: "09", 81: "09", 82: "09",
            95: "11", 96: "11", 99: "11"
        }

        if (codesDict[code] !== null) {
            iconUrl += codesDict[code];
        } else {
            iconUrl += "11";
        }

        if (isDay === 1) {
            iconUrl += "d";
        } else {
            iconUrl += "n";
        }

        iconUrl += "@2x.png";

        return iconUrl;
    }

    function createDB() {
        db.transaction(
                    function(tx) {
                        // Create the database if it doesn't already exist
                        tx.executeSql('CREATE TABLE IF NOT EXISTS records(weather TEXT)');

                        // Show all added greetings
                        var rs = tx.executeSql('SELECT * FROM records');

                        var r = []
                        for (var i = 0; i < rs.rows.length; i++) {
                            r.push(rs.rows.item(i))
                        }
                        console.log(r)
                        records = r
                    }
                    )
    }

    function addRecord(text) {
        db.transaction(function(tx) {
            tx.executeSql("INSERT INTO records (weather) VALUES(?);", [text]);

            // Show all added greetings
            var rs = tx.executeSql('SELECT * FROM records');

            var r = []
            for (var i = 0; i < rs.rows.length; i++) {
                r.push(rs.rows.item(i))
            }
            console.log(r)
            records = r
        });
    }

    function clearDB() {
        db.transaction(
                    function(tx) {
                        // Create the database if it doesn't already exist
                        tx.executeSql('DROP TABLE IF EXISTS records');
                        tx.executeSql('CREATE TABLE IF NOT EXISTS records(weather TEXT)');

                        // Show all added greetings
                        var rs = tx.executeSql('SELECT * FROM records');

                        var r = []
                        for (var i = 0; i < rs.rows.length; i++) {
                            r.push(rs.rows.item(i))
                        }
                        console.log(r)
                        records = r
                    }
                    )
    }
}