Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-16 18:26:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Migrate all wrapper to use WidgetWrapper

Browse Source
This commit is contained in:
Meierschlumpf
2022-12-19 18:26:04 +01:00
parent 8fa9cfaccf
commit c2186c2525
9 changed files with 153 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/widgets/weather/WeatherTile.tsx
View File

@@ -32,16 +32,16 @@ const definition = defineWidget({
export type IWeatherWidget = IWidget<typeof definition['id'], typeof definition>;
interface WeatherTileProps extends BaseTileProps {
interface WeatherTileProps {
widget: IWeatherWidget;
}
function WeatherTile({ className, widget }: WeatherTileProps) {
function WeatherTile({ widget }: WeatherTileProps) {
const { data: weather, isLoading, isError } = useWeatherForCity(widget.properties.location);
if (isLoading) {
return (
<HomarrCardWrapper className={className}>
<>
<Skeleton height={40} width={100} mb="xl" />
<Group noWrap>
<Skeleton height={50} circle />
@@ -50,58 +50,53 @@ function WeatherTile({ className, widget }: WeatherTileProps) {
<Skeleton height={25} width={70} />
</Group>
</Group>
</HomarrCardWrapper>
</>
);
}
if (isError) {
return (
<HomarrCardWrapper className={className}>
<Center>
<Text weight={500}>An error occured</Text>
</Center>
</HomarrCardWrapper>
<Center>
<Text weight={500}>An error occured</Text>
</Center>
);
}
// TODO: add widgetWrapper that is generic and uses the definition
return (
<HomarrCardWrapper className={className}>
<WidgetsMenu integration={definition.id} widget={widget} />
<Center style={{ height: '100%' }}>
<Group spacing="md" noWrap align="center">
<WeatherIcon code={weather!.current_weather.weathercode} />
<Stack p={0} spacing={4}>
<Title order={2}>
{getPerferedUnit(
weather!.current_weather.temperature,
widget.properties.displayInFahrenheit
)}
</Title>
<Group spacing="xs" noWrap>
<div>
<span>
{getPerferedUnit(
weather!.daily.temperature_2m_max[0],
widget.properties.displayInFahrenheit
)}
</span>
<IconArrowUpRight size={16} style={{ right: 15 }} />
</div>
<div>
<span>
{getPerferedUnit(
weather!.daily.temperature_2m_min[0],
widget.properties.displayInFahrenheit
)}
</span>
<IconArrowDownRight size={16} />
</div>
</Group>
</Stack>
</Group>
</Center>
</HomarrCardWrapper>
<Center style={{ height: '100%' }}>
<Group spacing="md" noWrap align="center">
<WeatherIcon code={weather!.current_weather.weathercode} />
<Stack p={0} spacing={4}>
<Title order={2}>
{getPerferedUnit(
weather!.current_weather.temperature,
widget.properties.displayInFahrenheit
)}
</Title>
<Group spacing="xs" noWrap>
<div>
<span>
{getPerferedUnit(
weather!.daily.temperature_2m_max[0],
widget.properties.displayInFahrenheit
)}
</span>
<IconArrowUpRight size={16} style={{ right: 15 }} />
</div>
<div>
<span>
{getPerferedUnit(
weather!.daily.temperature_2m_min[0],
widget.properties.displayInFahrenheit
)}
</span>
<IconArrowDownRight size={16} />
</div>
</Group>
</Stack>
</Group>
</Center>
);
}