Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-08 22:45:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

� Weather module improvements

Browse Source
This commit is contained in:
Aj - Thomas
2022-05-16 00:23:49 +02:00
committed by Thomas "ajnart" Camlong
parent 73d06e15fb
commit ab860eeea1
2 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modules/date/DateModule.tsx
View File

@@ -25,7 +25,7 @@ export default function DateComponent(props: any) {
}, []); }, []);
return ( return (
<Group p="sm" direction="column"> <Group direction="column">
<Title> <Title>
{hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes} {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes}
</Title> </Title>

60
src/components/modules/weather/WeatherModule.tsx
View File

@@ -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 axios from 'axios';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { import {
Cloud, Cloud,
@@ -13,12 +12,12 @@ import {
Sun, Sun,
} from 'tabler-icons-react'; } from 'tabler-icons-react';
import { IModule } from '../modules'; import { IModule } from '../modules';
import { WeatherResponse, Convert } from './WeatherInterface'; import { WeatherResponse } from './WeatherInterface';
export const WeatherModule: IModule = { export const WeatherModule: IModule = {
title: 'Weather', title: 'Weather',
description: 'Look up the current weather in your location', description: 'Look up the current weather in your location',
icon: Cloud, icon: Sun,
component: WeatherComponent, component: WeatherComponent,
}; };
@@ -32,86 +31,90 @@ export const WeatherModule: IModule = {
// 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity // 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity
// 77 Snow grains // 77 Snow grains
// 80, 81, 82 Rain showers: Slight, moderate, and violent // 80, 81, 82 Rain showers: Slight, moderate, and violent
// 85, 86 Snow showers slight and heavy // 85, 86Snow showers slight and heavy
// 95 * Thunderstorm: Slight or moderate // 95 *Thunderstorm: Slight or moderate
// 96, 99 * Thunderstorm with slight and heavy hail // 96, 99 *Thunderstorm with slight and heavy hail
export function WeatherIcon(props: any) { export function WeatherIcon(props: any) {
const { code } = props; const { code } = props;
let data: { icon: any; name: string }; let data: { icon: any; name: string };
switch (code) { switch (code) {
case 0: { case 0: {
data = { icon: <Sun />, name: 'Clear' }; data = { icon: Sun, name: 'Clear' };
break; break;
} }
case 1: case 1:
case 2: case 2:
case 3: { case 3: {
data = { icon: <Cloud />, name: 'Mainly clear' }; data = { icon: Cloud, name: 'Mainly clear' };
break; break;
} }
case 45: case 45:
case 48: { case 48: {
data = { icon: <CloudFog />, name: 'Fog' }; data = { icon: CloudFog, name: 'Fog' };
break; break;
} }
case 51: case 51:
case 53: case 53:
case 55: { case 55: {
data = { icon: <Cloud />, name: 'Drizzle' }; data = { icon: Cloud, name: 'Drizzle' };
break; break;
} }
case 56: case 56:
case 57: { case 57: {
data = { icon: <Snowflake />, name: 'Freezing drizzle' }; data = { icon: Snowflake, name: 'Freezing drizzle' };
break; break;
} }
case 61: case 61:
case 63: case 63:
case 65: { case 65: {
data = { icon: <CloudRain />, name: 'Rain' }; data = { icon: CloudRain, name: 'Rain' };
break; break;
} }
case 66: case 66:
case 67: { case 67: {
data = { icon: <CloudRain />, name: 'Freezing rain' }; data = { icon: CloudRain, name: 'Freezing rain' };
break; break;
} }
case 71: case 71:
case 73: case 73:
case 75: { case 75: {
data = { icon: <CloudSnow />, name: 'Snow fall' }; data = { icon: CloudSnow, name: 'Snow fall' };
break; break;
} }
case 77: { case 77: {
data = { icon: <CloudSnow />, name: 'Snow grains' }; data = { icon: CloudSnow, name: 'Snow grains' };
break; break;
} }
case 80: case 80:
case 81: case 81:
case 82: { case 82: {
data = { icon: <CloudRain />, name: 'Rain showers' }; data = { icon: CloudRain, name: 'Rain showers' };
break; break;
} }
case 85: case 85:
case 86: { case 86: {
data = { icon: <CloudSnow />, name: 'Snow showers' }; data = { icon: CloudSnow, name: 'Snow showers' };
break; break;
} }
case 95: { case 95: {
data = { icon: <CloudStorm />, name: 'Thunderstorm' }; data = { icon: CloudStorm, name: 'Thunderstorm' };
break; break;
} }
case 96: case 96:
case 99: { case 99: {
data = { icon: <CloudStorm />, name: 'Thunderstorm with hail' }; data = { icon: CloudStorm, name: 'Thunderstorm with hail' };
break; break;
} }
default: { 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) { export default function WeatherComponent(props: any) {
@@ -136,17 +139,14 @@ export default function WeatherComponent(props: any) {
if (!weather.current_weather) { if (!weather.current_weather) {
return null; return null;
} }
console.log(weather.current_weather);
return ( return (
<Group p="sm" direction="column"> <Group position="left" direction="column">
<Title>{weather.current_weather.temperature}°C</Title> <Title>{weather.current_weather.temperature}°C</Title>
<Group>
<WeatherIcon code={weather.current_weather.weathercode} /> <WeatherIcon code={weather.current_weather.weathercode} />
<Text size="xl"> {weather.daily.temperature_2m_max[0]}°C / {weather.daily.temperature_2m_min[0]}°C
{ </Group>
// Use dayjs to format the date
// https://day.js.org/en/getting-started/installation/
}
</Text>
</Group> </Group>
); );
} }