mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-08 22:45:49 +01:00
� Weather module improvements
This commit is contained in:
Aj - Thomas
committed by
Thomas "ajnart" Camlong
Thomas "ajnart" Camlong
parent
73d06e15fb
commit
ab860eeea1
@@ -1,6 +1,5 @@
|
||||
import { Group, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { Center, Group, Text, Title, Tooltip } from '@mantine/core';
|
||||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Cloud,
|
||||
@@ -13,105 +12,109 @@ import {
|
||||
Sun,
|
||||
} from 'tabler-icons-react';
|
||||
import { IModule } from '../modules';
|
||||
import { WeatherResponse, Convert } from './WeatherInterface';
|
||||
import { WeatherResponse } from './WeatherInterface';
|
||||
|
||||
export const WeatherModule: IModule = {
|
||||
title: 'Weather',
|
||||
description: 'Look up the current weather in your location',
|
||||
icon: Cloud,
|
||||
icon: Sun,
|
||||
component: WeatherComponent,
|
||||
};
|
||||
|
||||
// 0 Clear sky
|
||||
// 1, 2, 3 Mainly clear, partly cloudy, and overcast
|
||||
// 45, 48 Fog and depositing rime fog
|
||||
// 51, 53, 55 Drizzle: Light, moderate, and dense intensity
|
||||
// 56, 57 Freezing Drizzle: Light and dense intensity
|
||||
// 61, 63, 65 Rain: Slight, moderate and heavy intensity
|
||||
// 66, 67 Freezing Rain: Light and heavy intensity
|
||||
// 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity
|
||||
// 51, 53, 55 Drizzle: Light, moderate, and dense intensity
|
||||
// 56, 57 Freezing Drizzle: Light and dense intensity
|
||||
// 61, 63, 65 Rain: Slight, moderate and heavy intensity
|
||||
// 66, 67 Freezing Rain: Light and heavy intensity
|
||||
// 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity
|
||||
// 77 Snow grains
|
||||
// 80, 81, 82 Rain showers: Slight, moderate, and violent
|
||||
// 85, 86 Snow showers slight and heavy
|
||||
// 95 * Thunderstorm: Slight or moderate
|
||||
// 96, 99 * Thunderstorm with slight and heavy hail
|
||||
// 80, 81, 82 Rain showers: Slight, moderate, and violent
|
||||
// 85, 86Snow showers slight and heavy
|
||||
// 95 *Thunderstorm: Slight or moderate
|
||||
// 96, 99 *Thunderstorm with slight and heavy hail
|
||||
export function WeatherIcon(props: any) {
|
||||
const { code } = props;
|
||||
let data: { icon: any; name: string };
|
||||
switch (code) {
|
||||
case 0: {
|
||||
data = { icon: <Sun />, name: 'Clear' };
|
||||
data = { icon: Sun, name: 'Clear' };
|
||||
break;
|
||||
}
|
||||
case 1:
|
||||
case 2:
|
||||
case 3: {
|
||||
data = { icon: <Cloud />, name: 'Mainly clear' };
|
||||
data = { icon: Cloud, name: 'Mainly clear' };
|
||||
break;
|
||||
}
|
||||
case 45:
|
||||
case 48: {
|
||||
data = { icon: <CloudFog />, name: 'Fog' };
|
||||
data = { icon: CloudFog, name: 'Fog' };
|
||||
break;
|
||||
}
|
||||
case 51:
|
||||
case 53:
|
||||
case 55: {
|
||||
data = { icon: <Cloud />, name: 'Drizzle' };
|
||||
data = { icon: Cloud, name: 'Drizzle' };
|
||||
break;
|
||||
}
|
||||
case 56:
|
||||
case 57: {
|
||||
data = { icon: <Snowflake />, name: 'Freezing drizzle' };
|
||||
data = { icon: Snowflake, name: 'Freezing drizzle' };
|
||||
break;
|
||||
}
|
||||
case 61:
|
||||
case 63:
|
||||
case 65: {
|
||||
data = { icon: <CloudRain />, name: 'Rain' };
|
||||
data = { icon: CloudRain, name: 'Rain' };
|
||||
break;
|
||||
}
|
||||
case 66:
|
||||
case 67: {
|
||||
data = { icon: <CloudRain />, name: 'Freezing rain' };
|
||||
data = { icon: CloudRain, name: 'Freezing rain' };
|
||||
break;
|
||||
}
|
||||
case 71:
|
||||
case 73:
|
||||
case 75: {
|
||||
data = { icon: <CloudSnow />, name: 'Snow fall' };
|
||||
data = { icon: CloudSnow, name: 'Snow fall' };
|
||||
break;
|
||||
}
|
||||
case 77: {
|
||||
data = { icon: <CloudSnow />, name: 'Snow grains' };
|
||||
data = { icon: CloudSnow, name: 'Snow grains' };
|
||||
break;
|
||||
}
|
||||
case 80:
|
||||
case 81:
|
||||
case 82: {
|
||||
data = { icon: <CloudRain />, name: 'Rain showers' };
|
||||
data = { icon: CloudRain, name: 'Rain showers' };
|
||||
|
||||
break;
|
||||
}
|
||||
case 85:
|
||||
case 86: {
|
||||
data = { icon: <CloudSnow />, name: 'Snow showers' };
|
||||
data = { icon: CloudSnow, name: 'Snow showers' };
|
||||
break;
|
||||
}
|
||||
case 95: {
|
||||
data = { icon: <CloudStorm />, name: 'Thunderstorm' };
|
||||
data = { icon: CloudStorm, name: 'Thunderstorm' };
|
||||
break;
|
||||
}
|
||||
case 96:
|
||||
case 99: {
|
||||
data = { icon: <CloudStorm />, name: 'Thunderstorm with hail' };
|
||||
data = { icon: CloudStorm, name: 'Thunderstorm with hail' };
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
data = { icon: <QuestionMark />, name: 'Unknown' };
|
||||
data = { icon: QuestionMark, name: 'Unknown' };
|
||||
}
|
||||
}
|
||||
return <Tooltip label={data.name}>{data.icon}</Tooltip>;
|
||||
return (
|
||||
<Tooltip label={data.name}>
|
||||
<data.icon size={50} />
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
export default function WeatherComponent(props: any) {
|
||||
@@ -136,17 +139,14 @@ export default function WeatherComponent(props: any) {
|
||||
if (!weather.current_weather) {
|
||||
return null;
|
||||
}
|
||||
console.log(weather.current_weather);
|
||||
|
||||
return (
|
||||
<Group p="sm" direction="column">
|
||||
<Group position="left" direction="column">
|
||||
<Title>{weather.current_weather.temperature}°C</Title>
|
||||
<WeatherIcon code={weather.current_weather.weathercode} />
|
||||
<Text size="xl">
|
||||
{
|
||||
// Use dayjs to format the date
|
||||
// https://day.js.org/en/getting-started/installation/
|
||||
}
|
||||
</Text>
|
||||
<Group>
|
||||
<WeatherIcon code={weather.current_weather.weathercode} />
|
||||
{weather.daily.temperature_2m_max[0]}°C / {weather.daily.temperature_2m_min[0]}°C
|
||||
</Group>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user