smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Bug fixes and new biome lint update

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-17 17:00:29 -05:00
parent 4a77340ba5
commit 7570c287c8
26 changed files with 459 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/WeatherModal/CurrentWeather.tsx
View File

@@ -32,7 +32,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
}, [sunStateData]);
return (
<>
{current ? (
{current && (
<Stack
gap={0}
justify='space-between'
@@ -250,8 +250,6 @@ export default function CurrentWeather({ current }: { current: CW }) {
</Stack>
</Group>
</Stack>
) : (
<></>
)}
</>
);

4
src/components/WeatherModal/ExtendedForecastCard.tsx
View File

@@ -6,7 +6,9 @@ import WeatherIcon from './WeatherIcon';
export default function ExtendedForecastCard({
forecast,
}: { forecast: ExtendedForecast[] }) {
}: {
forecast: ExtendedForecast[];
}) {
const { isMobile } = useCommonHooks();
const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);

45
src/components/WeatherModal/WeatherGraphs.tsx
View File

@@ -1,4 +1,4 @@
import { Stack, Text } from '@mantine/core';
import { Stack } from '@mantine/core';
import {
Area,
AreaChart,
@@ -12,34 +12,15 @@ import {
YAxis,
} from 'recharts';
import type { HourlyForecast } from 'types';
import WeatherTooltip from './WeatherTooltip';
export default function WeatherGraphs({
hourlyForecast,
}: { hourlyForecast: HourlyForecast[] }) {
function CustomTooltip({ payload, active }: any) {
if (active) {
return (
<Stack
style={{
backgroundColor: 'var(--mantine-color-background-0)',
padding: '1rem',
borderRadius: '8px',
}}
>
{payload.map((item: any) => (
<Text
key={item.name}
size='md'
c={item.stroke}
>{`${item.name} - ${item.value}${item.unit}`}</Text>
))}
</Stack>
);
}
return null;
}
}: {
hourlyForecast: HourlyForecast[];
}) {
const colorPrecipitation = 'colorPrecipitation';
const colorHumidity = 'colorHumidity';
return (
<Stack
style={{
@@ -68,7 +49,7 @@ export default function WeatherGraphs({
}}
/>
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Tooltip content={<WeatherTooltip />} />
<Line
unit={'°F'}
type='monotone'
@@ -103,7 +84,7 @@ export default function WeatherGraphs({
<ResponsiveContainer width={'100%'} height={150}>
<AreaChart data={hourlyForecast}>
<defs>
<linearGradient id='colorPrecipitation' x1='0' y1='0' x2='0' y2='1'>
<linearGradient id={colorPrecipitation} x1='0' y1='0' x2='0' y2='1'>
<stop
offset='40%'
stopColor='var(--mantine-color-primary-0)'
@@ -115,7 +96,7 @@ export default function WeatherGraphs({
stopOpacity={0}
/>
</linearGradient>
<linearGradient id='colorHumidity' x1='0' y1='0' x2='0' y2='1'>
<linearGradient id={colorHumidity} x1='0' y1='0' x2='0' y2='1'>
<stop
offset='20%'
stopColor='var(--mantine-color-accent-0)'
@@ -140,7 +121,7 @@ export default function WeatherGraphs({
/>
<YAxis stroke={'var(--mantine-color-primary-0)'} unit={'%'} domain={[0, 100]} />
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Tooltip content={<WeatherTooltip />} />
<Area
unit={'%'}
type='monotone'
@@ -150,7 +131,7 @@ export default function WeatherGraphs({
}}
stroke={'var(--mantine-color-primary-0)'}
strokeWidth={2}
fill={'url(#colorPrecipitation)'}
fill={`url(#${colorPrecipitation})`}
dot={{
stroke: 'var(--mantine-color-primary-0)',
strokeWidth: 0,
@@ -166,7 +147,7 @@ export default function WeatherGraphs({
}}
stroke={'var(--mantine-color-accent-0)'}
strokeWidth={2}
fill={'url(#colorHumidity)'}
fill={`url(#${colorHumidity})`}
dot={{
stroke: 'var(--mantine-color-accent-0)',
strokeWidth: 0,

348
src/components/WeatherModal/WeatherIcon.tsx
View File

@@ -15,259 +15,167 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
? textDescription.substring(0, textDescription.trim().indexOf('then'))
: textDescription;
const Icon = () => {
const lookupSource = (icon: any) => {
switch (icon.trim()) {
case 'Ash':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
return {
src: HazeIcon,
alt: 'HazeIcon',
};
case 'Broken Clouds':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
return {
src: PartlyCloudyIcon,
alt: 'PartlyCloudyIcon',
};
case 'Chance Rain Showers':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
return {
src: RainIcon,
alt: 'RainIcon',
};
case 'Chance Showers':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
return {
src: RainIcon,
alt: 'RainIcon',
};
case 'Slight Chance Showers':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
case 'Clear':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={SunnyIcon}
alt='SunnyIcon'
/>
);
return {
src: RainIcon,
alt: 'RainIcon',
};
case 'Cloudy':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={CloudyIcon}
alt='CloudyIcon'
/>
);
return {
src: CloudyIcon,
alt: 'CloudyIcon',
};
case 'Dust':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
return {
src: HazeIcon,
alt: 'HazeIcon',
};
case 'Drizzle':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
return {
src: RainIcon,
alt: 'RainIcon',
};
case 'Fog':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
return {
src: HazeIcon,
alt: 'HazeIcon',
};
case 'Freezing Rain':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={SleetIcon}
alt='SleetIcon'
/>
);
return {
src: SleetIcon,
alt: 'SleetIcon',
};
case 'Haze':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
return {
src: HazeIcon,
alt: 'HazeIcon',
};
case 'Heavy Rain':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HeavyRainIcon}
alt='HeavyRainIcon'
/>
);
return {
src: HeavyRainIcon,
alt: 'HeavyRainIcon',
};
case 'Heavy Snow':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={SnowIcon}
alt='SnowIcon'
/>
);
return {
src: SnowIcon,
alt: 'SnowIcon',
};
case 'Light Rain':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
return {
src: RainIcon,
alt: 'RainIcon',
};
case 'Mist':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
return {
src: HazeIcon,
alt: 'HazeIcon',
};
case 'Moderate Rain':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
return {
src: RainIcon,
alt: 'RainIcon',
};
case 'Mostly Cloudy':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={CloudyIcon}
alt='CloudyIcon'
/>
);
return {
src: CloudyIcon,
alt: 'CloudyIcon',
};
case 'Overcast Clouds':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
return {
src: PartlyCloudyIcon,
alt: 'PartlyCloudyIcon',
};
case 'Patchy Fog':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
return {
src: HazeIcon,
alt: 'HazeIcon',
};
case 'Partly Sunny':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
return {
src: PartlyCloudyIcon,
alt: 'PartlyCloudyIcon',
};
case 'Rain':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
return {
src: RainIcon,
alt: 'RainIcon',
};
case 'Scattered Clouds':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={PartlyCloudyIcon}
alt='PartlyCloudyIcon'
/>
);
return {
src: PartlyCloudyIcon,
alt: 'PartlyCloudyIcon',
};
case 'Showers':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={RainIcon}
alt='RainIcon'
/>
);
return {
src: RainIcon,
alt: 'RainIcon',
};
case 'Sleet':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={SleetIcon}
alt='SleetIcon'
/>
);
return {
src: SleetIcon,
alt: 'SleetIcon',
};
case 'Smoke':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={HazeIcon}
alt='HazeIcon'
/>
);
return {
src: HazeIcon,
alt: 'HazeIcon',
};
case 'Snow':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={SnowIcon}
alt='SnowIcon'
/>
);
return {
src: SnowIcon,
alt: 'SnowIcon',
};
case 'Squall':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={WindyIcon}
alt='WindyIcon'
/>
);
return {
src: WindyIcon,
alt: 'WindyIcon',
};
case 'Thunderstorm':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={ThunderstormIcon}
alt='ThunderstormIcon'
/>
);
return {
src: ThunderstormIcon,
alt: 'ThunderstormIcon',
};
case 'Tornado':
return (
<Image
style={{ width: '75px', height: '75px' }}
src={WindyIcon}
alt='WindyIcon'
/>
);
return {
src: WindyIcon,
alt: 'WindyIcon',
};
default:
return (
<Image
style={{ width: '75px', height: '75px' }}
src={SunnyIcon}
alt='SunnyIcon'
/>
);
return {
src: SunnyIcon,
alt: 'SunnyIcon',
};
}
};
return <Icon />;
return (
<Image
style={{ width: '75px', height: '75px' }}
src={lookupSource(icon).src}
alt={lookupSource(icon).alt}
/>
);
}

3
src/components/WeatherModal/WeatherModal.tsx
View File

@@ -1,8 +1,7 @@
import { Center, Group, Modal, Stack, Text } from '@mantine/core';
import { modalClasses } from 'styles';
import { useCommonHooks, useWeatherAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { modalClasses } from 'styles';
import type { CurrentWeather as CW, ExtendedForecast, HourlyForecast } from 'types';
import CurrentWeather from './CurrentWeather';

27
src/components/WeatherModal/WeatherTooltip.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { Stack, Text } from '@mantine/core';
function WeatherTooltip({ payload, active }: any) {
if (active) {
return (
<Stack
style={{
backgroundColor: 'var(--mantine-color-background-0)',
padding: '1rem',
borderRadius: '8px',
}}
>
{payload.map((item: any) => (
<Text
key={item.name}
size='md'
c={item.stroke}
>{`${item.name} - ${item.value}${item.unit}`}</Text>
))}
</Stack>
);
}
return null;
}
export default WeatherTooltip;