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

Refactor

Browse Source
This commit is contained in:
Sean Edmunds
2024-12-06 15:33:58 -06:00
parent 00c141d8d7
commit 33813a34fb
48 changed files with 2188 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/homepage/components/AppItem.tsx → src/pages/homepage/components/Applications/AppItem.tsx
View File

@@ -1,8 +1,7 @@
import { Icon } from '@iconify/react';
import { Box, Stack, Text } from '@mantine/core';
import { useState } from 'react';
import stacks from '../../../styles/Stack.module.css';
import texts from '../../../styles/Text.module.css';
import { stackClasses, textClasses } from 'styles';
function AppItem({ url, icon, name, isMobile }: any) {
const [textDecoration, setTextDecoration] = useState<string>('none');
@@ -13,7 +12,7 @@ function AppItem({ url, icon, name, isMobile }: any) {
href={`https://${url}`}
onMouseOver={() => setTextDecoration('underline')}
onMouseOut={() => setTextDecoration('none')}
className={stacks.appItemBox}
className={stackClasses.appItemBox}
>
<Stack
align={isMobile && 'center'}
@@ -38,12 +37,12 @@ function AppItem({ url, icon, name, isMobile }: any) {
gap: 0,
}}
>
<Text className={texts.appName} classNames={texts}>
<Text className={textClasses.appName} classNames={textClasses}>
{name}
</Text>
<Text
className={texts.appUrl}
classNames={texts}
className={textClasses.appUrl}
classNames={textClasses}
style={{
textDecoration: textDecoration,
}}

6
src/pages/homepage/components/Applications.tsx → src/pages/homepage/components/Applications/Applications.tsx
View File

@@ -1,7 +1,7 @@
import { Stack, Text } from '@mantine/core';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { useQueryAPI } from '../../../hooks/useAPI';
import texts from '../../../styles/Text.module.css';
import { textClasses } from 'styles';
import AppItem from './AppItem';
function Applications({ contentType, isMobile }: any) {
@@ -16,7 +16,7 @@ function Applications({ contentType, isMobile }: any) {
<>
{applications.length > 0 && contentType.length > 0 && (
<Stack id='apps' style={{ gap: 0 }}>
<Text className={texts.sectionTitle} classNames={texts}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
Applications
</Text>
<Stack

6
src/pages/homepage/components/Bookmarks.tsx → src/pages/homepage/components/Bookmarks/Bookmarks.tsx
View File

@@ -1,7 +1,7 @@
import { Stack, Text } from '@mantine/core';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { useQueryAPI } from '../../../hooks/useAPI';
import texts from '../../../styles/Text.module.css';
import { textClasses } from 'styles';
import LinkGroups from './LinkGroups';
function Links({ contentType, isMobile }: any) {
@@ -27,7 +27,7 @@ function Links({ contentType, isMobile }: any) {
categories?.length > 0 &&
contentType.length > 0 && (
<Stack id='links' style={{ gap: 0 }}>
<Text className={texts.sectionTitle} classNames={texts}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
Bookmarks
</Text>
<Stack

4
src/pages/homepage/components/LinkGroups.tsx → src/pages/homepage/components/Bookmarks/LinkGroups.tsx
View File

@@ -1,5 +1,5 @@
import { Stack, Text } from '@mantine/core';
import texts from '../../../styles/Text.module.css';
import { textClasses } from 'styles';
import LinkItem from './LinkItem';
function LinkGroups({ links, category, isMobile }: any) {
@@ -12,7 +12,7 @@ function LinkGroups({ links, category, isMobile }: any) {
overflow: 'hidden',
}}
>
<Text className={texts.linkCategory} classNames={texts}>
<Text className={textClasses.linkCategory} classNames={textClasses}>
{category}
</Text>
{links?.map((link: any) => (

8
src/pages/homepage/components/LinkItem.tsx → src/pages/homepage/components/Bookmarks/LinkItem.tsx
View File

@@ -1,11 +1,11 @@
import { Text } from '@mantine/core';
import texts from '../../../styles/Text.module.css';
import { textClasses } from 'styles';
function LinkItem({ link, isMobile }: any) {
function LinkItem({ link }: any) {
return (
<Text
className={texts.linkItem}
classNames={texts}
className={textClasses.linkItem}
classNames={textClasses}
component='a'
href={link.url}
style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}

4
src/pages/homepage/components/Header.tsx → src/pages/homepage/components/Header/Header.tsx
View File

@@ -1,7 +1,7 @@
import { Group, Stack, Text } from '@mantine/core';
import { WeatherModal } from 'components';
import { useEffect, useState } from 'react';
import { textClasses } from '../../../styles';
import WeatherModal from './WeatherModal';
import { textClasses } from 'styles';
function Header({
greet,

59
src/pages/homepage/components/HelpModal.tsx
View File

@@ -1,59 +0,0 @@
import { Divider, Group, Modal, Stack, Text } from '@mantine/core';
import { useAtom } from 'jotai';
import { appTheme } from '../../../contexts/theme';
import { modalClasses } from '../../../styles';
export default function HelpModal({
setValue,
setProviderLabel,
setProviderURL,
providers,
providerModalOpened,
closeProviderModal,
}: any) {
const [theme, setTheme] = useAtom(appTheme);
return (
<Modal.Root
size={'60%'}
className={modalClasses.helpModal}
classNames={modalClasses}
opened={providerModalOpened}
onClose={() => {
closeProviderModal();
setValue('');
setProviderLabel('Google Search');
setProviderURL('https://www.google.com/search?q=');
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
closeOnEscape
closeOnClickOutside
>
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Help info</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>
<Stack gap={0} w={'100%'} align='center'>
<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
<Divider py={8} w={'65%'} color={theme.accentColor} />
{providers?.map((provider: any) => (
<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
<Text>{provider.prefix}</Text>
<Text>{provider.name}</Text>
</Group>
))}
</Stack>
</Modal.Body>
</Modal.Content>
</Modal.Root>
);
}

120
src/pages/homepage/components/HourlyCard.tsx
View File

@@ -1,120 +0,0 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Card, Center, Group, Image, Stack, Text } from '@mantine/core';
export enum WindDirection {
N = 0,
NE = 45,
E = 90,
SE = 135,
S = 180,
SW = 225,
W = 270,
NW = 315,
}
export default function HourlyCard({ weather }: any) {
return (
<Stack gap={0} align='center'>
<Card
style={{
height: '8rem',
width: '4rem',
backgroundColor: 'var(--color-text-pri)',
background: 'rgba(255, 255, 255, 0.6)',
padding: 0,
margin: 0,
}}
>
<Stack gap={0} h={'100%'} w={'100%'} align='center'>
<Stack gap={0} align='center'>
<Text mb={-6} fz={12} style={{ zIndex: 2 }}>
{new Date(weather.startTime).toLocaleString('en-US', {
weekday: 'short',
month: 'numeric',
day: 'numeric',
})}
</Text>
<Text fz={12} style={{ zIndex: 2 }}>
{new Date(weather.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric',
})}
</Text>
<Stack gap={0} align='center'>
<Box
style={{
position: 'absolute',
width: '56px',
height: '56px',
backgroundColor: 'transparent',
boxShadow:
'inset 0px 0px 10px 3px rgba(255, 255, 255, 1), 0px 0px 10px 0px rgba(255, 255, 255, .6)',
zIndex: 1,
borderRadius: '100%',
borderStyle: 'none',
border: '0px solid',
}}
/>
<Image
src={weather.icon}
style={{
zIndex: 0,
borderRadius: '100%',
border: '0px solid',
borderStyle: 'none',
}}
/>
</Stack>
</Stack>
<Stack gap={0} align='center' style={{ zIndex: 1 }}>
<Center>
<Icon
icon={'mdi:navigation'}
style={{
position: 'absolute',
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
}}
/>
<Icon fontSize={28} icon={'mdi:circle-outline'} />
</Center>
<Text mt={-6} fz={12}>
{weather.windSpeed}
</Text>
</Stack>
</Stack>
</Card>
<Text
mt={4}
w={'100%'}
fz={14}
style={{
textAlign: 'center',
borderRadius: '4px',
background: 'rgba(0, 0, 0, 0.6)',
}}
>
{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
</Text>
<Text
mt={4}
w={'100%'}
fz={14}
style={{
textAlign: 'center',
borderRadius: '4px',
background: 'rgba(0, 0, 0, 0.6)',
}}
>
<Group gap={0} justify='center'>
<Icon
icon={'mdi:drop'}
style={{
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
}}
/>
{`${weather.probabilityOfPrecipitation.value * 10}`}%
</Group>
</Text>
</Stack>
);
}

34
src/pages/homepage/components/MessageInfo.jsx
View File

@@ -1,34 +0,0 @@
import { useEffect, useState } from 'react';
import Messages from '../../../components/Messages';
import useQueryAPI from '../../../hooks/useAPI';
function MessageInfo() {
const messageData = useQueryAPI({ endpoint: 'api/messages' });
const [greetings, setGreetings] = useState([]);
useEffect(() => {
if (!messageData.isFetching) {
setGreetings(messageData.data);
}
}, [messageData.isFetching]);
return (
<>
{greetings && (
<div id='messageForm'>
{greetings.map((greeting, index) => (
<Messages
key={greeting.id}
group={index + 1}
index={greeting.index}
greeting={greeting.message}
easterEgg={greeting.customGreeting}
/>
))}
</div>
)}
</>
);
}
export default MessageInfo;

12
src/pages/homepage/components/Provider.jsx
View File

@@ -1,12 +0,0 @@
function Provider(props) {
return (
<tr>
<td>
<a href={props.provider.url}>{props.provider.name}</a>
</td>
<td>{props.provider.prefix}</td>
</tr>
);
}
export default Provider;

25
src/pages/homepage/components/Search.tsx → src/pages/homepage/components/Search/Search.tsx
View File

@@ -1,10 +1,10 @@
import { Stack, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useState } from 'react';
import { useQueryAPI } from '../../../hooks';
import { textInputClasses } from '../../../styles';
import HelpModal from './HelpModal';
import WeatherModal from './WeatherModal';
import { HelpModal } from '../../../../components/HelpModal/HelpModal';
import { WeatherModal } from '../../../../components/WeatherModal/WeatherModal';
import { containsProtocol, useQueryAPI, validURL } from '../../../../hooks';
import { textInputClasses } from '../../../../styles';
export default function Search({
current,
@@ -52,23 +52,6 @@ export default function Search({
}
};
function validURL(str: any) {
const pattern = new RegExp(
'^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
'(\\#[-a-z\\d_]*)?$',
'i',
); // fragment locator
return !!pattern.test(str);
}
function containsProtocol(str: any) {
const pattern = /^(https?:\/\/).*/i;
return !!pattern.test(str);
}
return (
<Stack
style={{

24
src/pages/homepage/components/SettingsButton.tsx
View File

@@ -1,18 +1,14 @@
import { Button, Menu, MultiSelect, NavLink } from '@mantine/core';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiMenu, FiMonitor } from 'react-icons/fi';
import { useQueryAPI } from '../../../hooks/useAPI';
import button from '../../../styles/Button.module.css';
import menu from '../../../styles/Menu.module.css';
import navLink from '../../../styles/NavLink.module.css';
import selectClasses from '../../../styles/Select.module.css';
import { buttonClasses, menuClasses, navLinkClasses, selectClasses } from 'styles';
function SettingsButton({
appFilter,
setAppFilter,
bookmarkFilter,
setBookmarkFilter,
theme,
}: any) {
const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
@@ -38,29 +34,29 @@ function SettingsButton({
return (
<Menu withinPortal={false} withArrow shadow='md' position='top'>
<Menu.Target>
<Button className={button.settingsButton} classNames={button}>
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
<FiMenu />
</Button>
</Menu.Target>
<Menu.Dropdown className={menu.dropdown}>
<Menu.Dropdown className={menuClasses.dropdown}>
<NavLink
label='Settings'
component='a'
href={`/${import.meta.env.VITE_BASE_URL}/settings`}
className={navLink.defaultNavLink}
classNames={navLink}
className={navLinkClasses.defaultNavLink}
classNames={navLinkClasses}
/>
<NavLink
label='Quick Actions'
className={navLink.defaultNavLink}
classNames={navLink}
className={navLinkClasses.defaultNavLink}
classNames={navLinkClasses}
>
<NavLink
label='Wake Dakota'
leftSection={<FiMonitor />}
onClick={() => runWakeCommand()}
className={navLink.defaultNavLink}
classNames={navLink}
className={navLinkClasses.defaultNavLink}
classNames={navLinkClasses}
/>
</NavLink>
<MultiSelect

60
src/pages/homepage/components/SmallOutlookCard.tsx
View File

@@ -1,60 +0,0 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Center, Image, Overlay, Stack, Text } from '@mantine/core';
export enum WindDirection {
N = 0,
NE = 45,
E = 90,
SE = 135,
S = 180,
SW = 225,
W = 270,
NW = 315,
}
export default function SmallOutlookCard({ weather }: any) {
return (
<Center display={'flex'}>
<Box pos={'relative'} style={{ zIndex: -1 }}>
<Image radius={'lg'} src={weather.icon} />
<Overlay
color='black'
gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
zIndex={0}
radius={'lg'}
/>
</Box>
<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
<Center>
<Icon
icon={'mdi:navigation'}
style={{
position: 'absolute',
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
}}
/>
<Icon fontSize={32} icon={'mdi:circle-outline'} />
</Center>
<Text mt={-6} fz={12}>
{weather.windSpeed}
</Text>
</Stack>
<Stack gap={0} pos={'absolute'} bottom={8}>
<Text mt={-4} mb={-4} fz={14}>
Precip:
</Text>
<Text mt={-8} mb={-8} p={0} fz={24}>
{weather.precipitation}%
</Text>
<Text mt={-4} mb={-4} fz={14}>
{weather.isDayTime ? 'High of:' : 'Low of:'}
</Text>
<Text mt={-8} mb={-8} p={0} fz={36}>
{weather.temperature}°F
</Text>
</Stack>
</Stack>
</Center>
);
}

58
src/pages/homepage/components/SmallWeatherCard.tsx
View File

@@ -1,58 +0,0 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Center, Group, Image, Overlay, Stack, Text } from '@mantine/core';
export default function SmallWeatherCard({ weather }: any) {
return (
<Center display={'flex'}>
<Box pos={'relative'} style={{ zIndex: -1 }}>
<Image radius={'lg'} src={weather.icon} />
<Overlay
color='black'
gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
zIndex={0}
radius={'lg'}
/>
</Box>
<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
<Text mb={-8} p={0} fz={12}>
{weather.highTemp}°F/{weather.lowTemp}°F
</Text>
<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
{weather.precipitation !== 'N/A' && (
<Group gap={0}>
<Icon icon={'mdi:weather-pouring'} height={32} width={32} />
<Text>{weather.precipitation} mm</Text>
</Group>
)}
{weather.precipitation === 'N/A' && (
<Icon icon={'mdi:white-balance-sunny'} height={32} width={32} />
)}
<Center>
<Icon
icon={'mdi:navigation'}
style={{
position: 'absolute',
transform: `rotate(${weather.windDirection}deg)`,
}}
/>
<Icon fontSize={32} icon={'mdi:circle-outline'} />
</Center>
<Text mt={-6} fz={12}>
{weather.windSpeed} mph
</Text>
</Stack>
<Stack gap={0} pos={'absolute'} bottom={8}>
<Text mt={-8} mb={-8} p={0} fz={36}>
{weather.temperature}°F
</Text>
<Text mt={-8} fz={12}>
Feels like: {weather.heatIndex}°F
</Text>
<Text mt={-6} fz={12}>
Humidity: {weather.humidity}%
</Text>
</Stack>
</Stack>
</Center>
);
}

111
src/pages/homepage/components/WeatherModal.tsx
View File

@@ -1,111 +0,0 @@
import { Center, Divider, Group, Modal, Stack } from '@mantine/core';
import { useAtom } from 'jotai';
import { modalClasses } from '../../../styles';
import SmallOutlookCard from './SmallOutlookCard';
import SmallWeatherCard from './SmallWeatherCard';
import { useEffect, useState } from 'react';
import { appTheme } from '../../../contexts/theme';
import HourlyCard from './HourlyCard';
export default function WeatherModal({
current,
outlook,
hourly,
closeWeatherModal,
weatherModalOpened,
setValue,
setProviderLabel,
setProviderURL,
}: any) {
const [theme, setTheme] = useAtom(appTheme);
const [hourlyForecast, setHourlyForecast] = useState<any>([]);
const [sunset, setSunset] = useState(100);
useEffect(() => {
if (hourly) {
setHourlyForecast(hourly.properties.periods.slice(1, 13));
}
}, [hourly]);
useEffect(() => {
if (hourlyForecast) {
setSunset(
(hourlyForecast.findIndex((item: any) => item.isDaytime === false) / 12) * 100,
);
}
}, [hourlyForecast]);
return (
<Modal.Root
size={'60%'}
className={modalClasses.helpModal}
classNames={modalClasses}
opened={weatherModalOpened}
onClose={() => {
closeWeatherModal();
setValue('');
setProviderLabel('Google Search');
setProviderURL('https://www.google.com/search?q=');
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
closeOnEscape
closeOnClickOutside
>
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>Weather Forecast</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pb={'2rem'}>
<Center w={'100%'}>
<Stack>
<Group gap={0} w={'100%'} align='center' justify='center'>
<Stack gap={0} align='center'>
<h3 style={{ padding: 0, margin: 0 }}>Currently</h3>
<Stack>
<SmallWeatherCard weather={current} />
</Stack>
</Stack>
<Divider orientation='vertical' mx={16} color={theme.accentColor} />
<Group gap={8}>
{outlook.map((o: any) => (
<Stack key={o.name} gap={0} align='center'>
<h3 style={{ padding: 0, margin: 0 }}>{o.name}</h3>
<Stack>
<SmallOutlookCard weather={o} />
</Stack>
</Stack>
))}
</Group>
</Group>
<Divider orientation='horizontal' mx={8} color={theme.accentColor} />
<Group
style={{
background:
hourlyForecast.length > 0 && hourlyForecast[0].isDaytime
? `linear-gradient(90deg, rgba(245, 225, 171, 0.85) ${sunset - 5}%, rgba(35, 28, 42, 0.85) ${sunset + 5}%)`
: `linear-gradient(90deg, rgba(35, 28, 42, 0.85)${sunset - 5}%, rgba(245, 225, 171, 0.85)${sunset + 5}%)`,
padding: '.5rem',
borderRadius: '.5rem',
}}
>
{hourlyForecast.length > 0 &&
hourlyForecast.map((h: any) => {
return <HourlyCard key={h.time} weather={h} />;
})}
</Group>
</Stack>
</Center>
</Modal.Body>
</Modal.Content>
</Modal.Root>
);
}