lock: add weather
Also refactor weather service
This commit is contained in:
2 * r + 2 * t
parent
acfef5103e
commit
87b491d8e7
4 changed files with 161 additions and 41 deletions
|
|
@ -20,7 +20,7 @@ Item {
|
|||
anchors.left: parent.left
|
||||
|
||||
animate: true
|
||||
text: Weather.icon || "cloud_alert"
|
||||
text: Weather.icon
|
||||
color: Colours.palette.m3secondary
|
||||
font.pointSize: Appearance.font.size.extraLarge * 2
|
||||
}
|
||||
|
|
@ -38,7 +38,7 @@ Item {
|
|||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
animate: true
|
||||
text: Config.services.useFahrenheit ? Weather.tempF : Weather.tempC
|
||||
text: Weather.temp
|
||||
color: Colours.palette.m3primary
|
||||
font.pointSize: Appearance.font.size.extraLarge
|
||||
font.weight: 500
|
||||
|
|
@ -48,7 +48,7 @@ Item {
|
|||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
animate: true
|
||||
text: Weather.description || qsTr("No weather")
|
||||
text: Weather.description
|
||||
|
||||
elide: Text.ElideRight
|
||||
width: Math.min(implicitWidth, root.parent.width - icon.implicitWidth - info.anchors.leftMargin - Appearance.padding.large * 2)
|
||||
|
|
|
|||
|
|
@ -21,12 +21,14 @@ RowLayout {
|
|||
|
||||
StyledRect {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
implicitHeight: weather.implicitHeight
|
||||
|
||||
radius: Appearance.rounding.small
|
||||
color: Colours.tPalette.m3surfaceContainer
|
||||
|
||||
// WeatherInfo {}
|
||||
WeatherInfo {
|
||||
id: weather
|
||||
}
|
||||
}
|
||||
|
||||
StyledRect {
|
||||
|
|
|
|||
|
|
@ -1,49 +1,166 @@
|
|||
import qs.components
|
||||
import qs.services
|
||||
import qs.config
|
||||
import qs.utils
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
RowLayout {
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.margins: Appearance.padding.large * 2
|
||||
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
StyledText {
|
||||
Layout.topMargin: Appearance.padding.large * 2
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: qsTr("Weather")
|
||||
color: Colours.palette.m3primary
|
||||
font.pointSize: Appearance.font.size.extraLarge
|
||||
font.weight: 500
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.large
|
||||
|
||||
MaterialIcon {
|
||||
animate: true
|
||||
text: Weather.icon || "cloud_alert"
|
||||
text: Weather.icon
|
||||
color: Colours.palette.m3secondary
|
||||
font.pointSize: Appearance.font.size.extraLarge * 2.5
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
StyledText {
|
||||
Layout.fillWidth: true
|
||||
|
||||
animate: true
|
||||
text: Config.services.useFahrenheit ? Weather.tempF : Weather.tempC
|
||||
color: Colours.palette.m3primary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
font.pointSize: Appearance.font.size.extraLarge
|
||||
text: Weather.description
|
||||
color: Colours.palette.m3secondary
|
||||
font.pointSize: Appearance.font.size.large
|
||||
font.weight: 500
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
StyledText {
|
||||
Layout.fillWidth: true
|
||||
|
||||
animate: true
|
||||
text: Weather.description || qsTr("No weather")
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
font.pointSize: Appearance.font.size.large
|
||||
text: qsTr("Humidity: %1%").arg(Weather.humidity)
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
font.pointSize: Appearance.font.size.normal
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.rightMargin: Appearance.padding.smaller
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
StyledText {
|
||||
Layout.fillWidth: true
|
||||
|
||||
animate: true
|
||||
text: Weather.temp
|
||||
color: Colours.palette.m3primary
|
||||
horizontalAlignment: Text.AlignRight
|
||||
font.pointSize: Appearance.font.size.extraLarge
|
||||
font.weight: 500
|
||||
elide: Text.ElideLeft
|
||||
}
|
||||
|
||||
StyledText {
|
||||
Layout.fillWidth: true
|
||||
|
||||
animate: true
|
||||
text: qsTr("Feels like: %1").arg(Weather.feelsLike)
|
||||
color: Colours.palette.m3outline
|
||||
horizontalAlignment: Text.AlignRight
|
||||
font.pointSize: Appearance.font.size.smaller
|
||||
elide: Text.ElideLeft
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.topMargin: Appearance.spacing.smaller
|
||||
Layout.bottomMargin: Appearance.padding.large * 2
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.large
|
||||
|
||||
Repeater {
|
||||
model: {
|
||||
const forecast = Weather.forecast;
|
||||
if (!forecast)
|
||||
return Array.from({
|
||||
length: 5
|
||||
}, () => null);
|
||||
|
||||
const hours = [];
|
||||
const hour = new Date().getHours();
|
||||
let count = 5;
|
||||
|
||||
const today = forecast[0].hourly;
|
||||
const arr = [...today, ...forecast[1].hourly];
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const time = parseInt(arr[i].time, 10) / 100;
|
||||
|
||||
if (i > today.length ? time < hour : time > hour) {
|
||||
hours.push(arr[i]);
|
||||
count--;
|
||||
}
|
||||
|
||||
if (count === 0)
|
||||
break;
|
||||
}
|
||||
|
||||
return hours;
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: forecastHour
|
||||
|
||||
required property var modelData
|
||||
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
StyledText {
|
||||
Layout.fillWidth: true
|
||||
text: {
|
||||
if (!forecastHour.modelData)
|
||||
return "00 AM";
|
||||
const hour = parseInt(forecastHour.modelData.time, 10) / 100;
|
||||
return hour > 12 ? `${(hour - 12).toString().padStart(2, "0")} PM` : `${hour.toString().padStart(2, "0")} AM`;
|
||||
}
|
||||
color: Colours.palette.m3outline
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
font.pointSize: Appearance.font.size.larger
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: forecastHour.modelData ? Icons.getWeatherIcon(forecastHour.modelData.weatherCode) : "cloud_alert"
|
||||
font.pointSize: Appearance.font.size.extraLarge * 1.5
|
||||
font.weight: 500
|
||||
}
|
||||
|
||||
StyledText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: Config.services.useFahrenheit ? `${forecastHour.modelData?.tempF ?? 0}°F` : `${forecastHour.modelData?.tempC ?? 0}°C`
|
||||
color: Colours.palette.m3secondary
|
||||
font.pointSize: Appearance.font.size.larger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
running: true
|
||||
triggeredOnStart: true
|
||||
|
|
|
|||
|
|
@ -9,10 +9,13 @@ Singleton {
|
|||
id: root
|
||||
|
||||
property string loc
|
||||
property string icon
|
||||
property string description
|
||||
property string tempC: "0°C"
|
||||
property string tempF: "0°F"
|
||||
property var cc
|
||||
property var forecast
|
||||
readonly property string icon: cc ? Icons.getWeatherIcon(cc.weatherCode) : "cloud_alert"
|
||||
readonly property string description: cc?.weatherDesc[0].value ?? qsTr("No weather")
|
||||
readonly property string temp: Config.services.useFahrenheit ? `${cc?.temp_F ?? 0}°F` : `${cc?.temp_C ?? 0}°C`
|
||||
readonly property string feelsLike: Config.services.useFahrenheit ? `${cc?.FeelsLikeF ?? 0}°F` : `${cc?.FeelsLikeC ?? 0}°C`
|
||||
readonly property int humidity: cc?.humidity ?? 0
|
||||
|
||||
function reload(): void {
|
||||
if (Config.services.weatherLocation)
|
||||
|
|
@ -25,11 +28,9 @@ Singleton {
|
|||
}
|
||||
|
||||
onLocChanged: Requests.get(`https://wttr.in/${loc}?format=j1`, text => {
|
||||
const json = JSON.parse(text).current_condition[0];
|
||||
icon = Icons.getWeatherIcon(json.weatherCode);
|
||||
description = json.weatherDesc[0].value;
|
||||
tempC = `${parseFloat(json.temp_C)}°C`;
|
||||
tempF = `${parseFloat(json.temp_F)}°F`;
|
||||
const json = JSON.parse(text);
|
||||
cc = json.current_condition[0];
|
||||
forecast = json.weather;
|
||||
})
|
||||
|
||||
Component.onCompleted: reload()
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue