PackageHelper/www/assets/js/toolbox_weather.js

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */


function ftoc(f) {
    return (f - 32) * 5 / 9;
}

function loadWeather(reload) {
    if (typeof reload == "undefined") {
        reload = false;
    } else {
        reload = reload == true;
    }

    if (userPosition.coords.accuracy > 99999) {
        app.dialog.alert("Couldn't find your location.  Wait for a GPS signal and try again.", "Error");
        return;
    }

    var requestfinished = false;
    var weatherdialogopen = false;
    $.ajax({
        url: SETTINGS.weatherapi,
        dataType: 'json',
        data: {
            // Round the numbers off to increase user privacy
            // Accuracy with two decimal places is ~1.1km/0.6mi
            latitude: userPosition.coords.latitude.toFixed(2),
            longitude: userPosition.coords.longitude.toFixed(2)
        },
        timeout: 15 * 1000,
        success: function (resp) {
            if (weatherdialogopen) {
                app.dialog.close();
                weatherdialogopen = false;
            }
            requestfinished = true;
            if (resp.status == "OK") {
                //
                // Summary tab
                //
                var mintemp = (getStorage("units") == "metric" ? Math.round(ftoc(resp.summary.temp.min)) + " °C" : Math.round(resp.summary.temp.min) + " °F");
                var maxtemp = (getStorage("units") == "metric" ? Math.round(ftoc(resp.summary.temp.max)) + " °C" : Math.round(resp.summary.temp.max) + " °F");
                $("#summarylowtemp").html(mintemp);
                $("#summaryhightemp").html(maxtemp);
                $("#summaryprecipchance").text(Math.round(resp.summary.precipitation.chance * 100.0) + "% chance");
                if (getStorage("units") == "metric") {
                    $("#summarywindspeed").text(Math.round(resp.summary.windspeed * 1.609344) + " km/h");
                } else {
                    $("#summarywindspeed").text(Math.round(resp.summary.windspeed) + " mph");
                }
                if (SETTINGS.weathericons.includes(resp.summary.icon)) {
                    $("#summaryweathericon").attr("src", "assets/images/weather-" + resp.summary.icon + ".svg");
                } else {
                    $("#summaryweathericon").attr("src", "assets/images/weather-none.svg");
                }
                $("#summary-forecast-location").text(resp.location_name);
                $("#summary-forecast-info").text("Forecast covers the next " + resp.summary.forecast_hours + " hours (until " + timestampToTimeString(resp.summary.forecast_until) + ").");
                $("#summary-forecast-creditlink").text(resp.source.text);
                $("#summary-forecast-creditlink").attr("onclick", "openExternalBrowser('" + resp.source.url + "')");


                //
                // Now tab
                //
                var temp = (getStorage("units") == "metric" ? Math.round(ftoc(resp.now.temp)) + " °C" : Math.round(resp.now.temp) + " °F");
                var feelslike = (getStorage("units") == "metric" ? Math.round(ftoc(resp.now.feelslike)) + " °C" : Math.round(resp.now.feelslike) + " °F");
                $("#nowtemp").html(temp);
                $("#nowfeelslike").html(feelslike);
                if (SETTINGS.weathericons.includes(resp.now.icon)) {
                    $("#nowweathericon").attr("src", "assets/images/weather-" + resp.now.icon + ".svg");
                } else {
                    $("#nowweathericon").attr("src", "assets/images/weather-none.svg");
                }

                var uvcolor = "#4CAF50";
                if (resp.now.uv_index > 10) {
                    uvcolor = "#673AB7";
                } else if (resp.now.uv_index > 7) {
                    uvcolor = "#F44336";
                } else if (resp.now.uv_index > 5) {
                    uvcolor = "#FF9800";
                } else if (resp.now.uv_index > 2) {
                    uvcolor = "#FFEB3B";
                }
                app.gauge.get('#nowuvindexgauge').update({
                    value: Math.max(resp.now.uv_index / 11, 0.05),
                    valueText: resp.now.uv_index,
                    borderColor: uvcolor,
                });

                if (getStorage("units") == "metric") {
                    $("#nowwindspeed").text(Math.round(resp.now.windspeed * 1.609344) + " km/h");
                } else {
                    $("#nowwindspeed").text(Math.round(resp.now.windspeed) + " mph");
                }

                $("#nowwinddirection").text(degreesToCardinal(resp.now.winddirection));

                var minutelydata = [];
                var maxprecip = 0;
                for (var i = 0; i < resp.today.minutely.length; i++) {
                    precip = resp.today.minutely[i].precip;
                    if (getStorage("units") == "metric") {
                        precip = precip * 25.4;
                    }

                    minutelydata[i] = {
                        x: new Date(resp.today.minutely[i].time * 1000),
                        y: precip
                    };
                    if (precip > maxprecip) {
                        maxprecip = precip;
                    }
                }

                if (maxprecip > 0) {
                    // only make rain chart if there's rain
                    var precipChart = new Chart(document.getElementById('precipchart'), {
                        type: "line",
                        data: {
                            datasets: [
                                {
                                    fill: true,
                                    data: minutelydata,
                                    borderWidth: 0,
                                    spanGaps: true,
                                    backgroundColor: "#03A9F4",
                                    borderColor: "#03A9F4"
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            elements: {
                                point: {
                                    radius: 0
                                }
                            },
                            scales: {
                                xAxes: [{
                                        type: 'time',
                                        display: true,
                                        scaleLabel: {
                                            display: false
                                        },
                                        gridLines: {
                                            display: true,
                                            drawBorder: false
                                        },
                                        time: {
                                            unit: 'minute',
                                            stepSize: 5,
                                            displayFormats: {
                                                minute: 'h:mm',
                                                hour: 'hA'
                                            }
                                        }
                                    }],
                                yAxes: [{
                                        display: true,
                                        scaleLabel: {
                                            display: true
                                        },
                                        gridLines: {
                                            display: false,
                                            drawBorder: false
                                        },
                                        ticks: {
                                            min: 0,
                                            max: Math.round(maxprecip),
                                            stepSize: (Math.round(maxprecip) / 2),
                                            callback: function (value, index, values) {
                                                if (getStorage("units") == "metric") {
                                                    return value + ' mm';
                                                } else {
                                                    return value + ' in';
                                                }
                                            }
                                        }
                                    }]
                            },
                            legend: {
                                display: false
                            },
                            tooltips: {
                                enabled: false
                            }
                        }
                    });
                }

                forecastItems = [];

                for (var i = 1; i < resp.forecast.length; i++) {
                    var low = (getStorage("units") == "metric" ? Math.round(ftoc(resp.forecast[i].temp.min)) : Math.round(resp.forecast[i].temp.min));
                    var high = (getStorage("units") == "metric" ? Math.round(ftoc(resp.forecast[i].temp.max)) + " &deg;C" : Math.round(resp.forecast[i].temp.max) + " &deg;F");
                    forecastItems.push({
                        day: formatTimestamp('l', resp.forecast[i].date),
                        temps: low + " to " + high,
                        uv_index: resp.forecast[i].uv_index
                    });
                }

                forecastItemTemplate = '<li>'
                        + '<div class="item-content">'
                        + '  <div class="item-inner">'
                        + '    <div class="item-title">'
                        + '    <div class="item-header">{{day}}</div>'
                        + '        {{temps}}'
                        + '        <br>UV Index: {{uv_index}}'
                        + '    </div>'
                        + '  </div>'
                        + '</div>'
                        + '</li>';

                forecastVirtualList = app.virtualList.create({
                    el: "#forecast-list",
                    items: forecastItems,
                    itemTemplate: forecastItemTemplate
                });
            } else {
                app.dialog.alert(resp.message, "Error");
            }
        },
        error: function (jqXHR, status, errorThrown) {
            if (weatherdialogopen) {
                app.dialog.close();
                weatherdialogopen = false;
            }
            requestfinished = true;
            app.dialog.alert("There was a network issue while checking the weather.  Please try again.", "Error");
        }
    });

    // Open a loading message if there's a delay or we're reloading
    if (reload) {
        app.dialog.preloader("Checking Weather...");
        weatherdialogopen = true;
    } else {
        setTimeout(function () {
            if (!requestfinished) {
                app.dialog.preloader("Checking Weather...");
                weatherdialogopen = true;
            }
        }, 1000);
    }
}