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

State fixes, Tab routing

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-14 12:01:57 -05:00
parent 6b07655e3f
commit 04e6875be2
7 changed files with 138 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/settings/components/ThemeMiniCard.tsx
View File

@@ -9,13 +9,14 @@ function ThemeMiniCard({ allThemes, item }: any) {
justify='center'
display={'grid'}
pos={'relative'}
w={'200px'}
h={'75px'}
w={'175px'}
h={'60px'}
style={{
background: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), no-repeat center url(/backgrounds/${theme.backgroundImage})`,
backgroundSize: 'cover',
backgroundColor: theme.backgroundColor,
border: `solid ${theme.borderColor}`,
borderRadius: '8px',
}}
>
<Text

38
src/pages/settings/components/ThemePlaylistCard.tsx
View File

@@ -169,10 +169,10 @@ function ThemePlaylistCard({
)}
<Button
w={'275px'}
h={'300px'}
h={'310px'}
style={{
backgroundSize: 'cover',
backgroundColor: theme.primaryColor,
backgroundColor: theme.searchColor,
color: theme.accentColor,
border: `solid ${theme.borderColor}`,
}}
@@ -185,22 +185,32 @@ function ThemePlaylistCard({
<Stack h={'100%'} w={'100%'}>
{cardPlaylist.name !== 'Time of Day' ? (
<>
<Text>Count: {themeList.length}</Text>
<ScrollArea h={'240px'} w={'100%'} style={{ zIndex: 2 }}>
{themeList.length > 0 &&
themeList.map((item: any) => {
return <ThemeMiniCard key={item} item={item} allThemes={allThemes} />;
})}
<Text mt={8} mb={-8}>
Count: {themeList.length}
</Text>
<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>
<Stack gap={4}>
{themeList.length > 0 &&
themeList.map((item: any) => {
return (
<ThemeMiniCard key={item} item={item} allThemes={allThemes} />
);
})}
</Stack>
</ScrollArea>
</>
) : (
<>
<Text>Timed Themes</Text>
<ScrollArea h={'240px'} w={'100%'} style={{ zIndex: 2 }}>
<ThemeMiniCard item={Number(themeList[0])} allThemes={allThemes} />
<ThemeMiniCard item={Number(themeList[1])} allThemes={allThemes} />
<ThemeMiniCard item={Number(themeList[2])} allThemes={allThemes} />
<ThemeMiniCard item={Number(themeList[3])} allThemes={allThemes} />
<Text mt={8} mb={-8}>
Timed Themes
</Text>
<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>
<Stack gap={4}>
<ThemeMiniCard item={Number(themeList[0])} allThemes={allThemes} />
<ThemeMiniCard item={Number(themeList[1])} allThemes={allThemes} />
<ThemeMiniCard item={Number(themeList[2])} allThemes={allThemes} />
<ThemeMiniCard item={Number(themeList[3])} allThemes={allThemes} />
</Stack>
</ScrollArea>
</>
)}

21
src/pages/settings/components/ThemePlaylistModal.tsx
View File

@@ -25,7 +25,6 @@ function ThemePlaylistModal({
}: any) {
const { theme } = useCommonHooks();
const [themeList, setThemeList] = useState<any>('[]');
useEffect(() => {
if (selectedPlaylist.themeList) {
setThemeList(JSON.parse(selectedPlaylist?.themeList));
@@ -40,6 +39,7 @@ function ThemePlaylistModal({
onClose={() => {
handleClose();
setThemeList('[]');
setSelectedPlaylist({});
}}
style={{
'--color-text-pri': theme.primaryColor,
@@ -59,6 +59,7 @@ function ThemePlaylistModal({
className={textInputClasses.default}
classNames={textInputClasses}
value={selectedPlaylist.name}
disabled={selectedPlaylist.name === 'Time of Day'}
onChange={(e) =>
setSelectedPlaylist({ ...selectedPlaylist, name: e.target.value })
}
@@ -80,7 +81,7 @@ function ThemePlaylistModal({
{selectedPlaylist.name === 'Time of Day' ? (
<Stack>
<Group>
<Text>00:00-05:59</Text>
<Text w={'100px'}>00:00-05:59</Text>
<Select
labelProps={{ display: 'none' }}
placeholder='Select Theme'
@@ -113,7 +114,7 @@ function ThemePlaylistModal({
/>
</Group>
<Group w={'100%'}>
<Text>06:00-11:59</Text>
<Text w={'100px'}>06:00-11:59</Text>
<Select
labelProps={{ display: 'none' }}
placeholder='Select Theme'
@@ -146,7 +147,7 @@ function ThemePlaylistModal({
/>
</Group>
<Group w={'100%'}>
<Text>12:00-17:59</Text>
<Text w={'100px'}>12:00-17:59</Text>
<Select
labelProps={{ display: 'none' }}
placeholder='Select Theme'
@@ -179,7 +180,7 @@ function ThemePlaylistModal({
/>
</Group>
<Group w={'100%'}>
<Text>18:00-23:59</Text>
<Text w={'100px'}>18:00-23:59</Text>
<Select
labelProps={{ display: 'none' }}
placeholder='Select Theme'
@@ -228,12 +229,14 @@ function ThemePlaylistModal({
: undefined,
}}
onClick={() => {
const newSelectedPlaylist = { ...selectedPlaylist };
if (themeList?.includes(miniTheme.id)) {
newThemeList.splice(themeList.indexOf(miniTheme.id), 1);
} else {
newThemeList.push(miniTheme.id);
}
selectedPlaylist.themeList = JSON.stringify(newThemeList);
newSelectedPlaylist.themeList = JSON.stringify(newThemeList);
setSelectedPlaylist(newSelectedPlaylist);
}}
>
<ThemeMiniCard allThemes={allThemes} item={miniTheme.id} />
@@ -254,7 +257,11 @@ function ThemePlaylistModal({
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
onClick={() => {
handleClose();
setThemeList('[]');
setSelectedPlaylist({});
}}
>
Cancel
</Button>

118
src/pages/settings/components/ThemePlaylists.tsx
View File

@@ -91,40 +91,90 @@ function ThemePlaylists() {
</Group>
</Group>
<Group justify='center' align='center' pos={'relative'}>
{themePlaylists?.map((cardPlaylist: any) => {
return (
<Group key={cardPlaylist.name} pos={'relative'}>
{cardPlaylist.name === currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 1,
fontSize: '2em',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: theme.borderColor,
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
}}
/>
)}
<Box>
<ThemePlaylistCard
cardPlaylist={cardPlaylist}
handleOpen={handleOpen}
currentThemePlaylist={currentThemePlaylist}
setCurrentThemePlaylist={setCurrentThemePlaylist}
handleDeletePlaylist={handleDeletePlaylist}
allThemes={allThemes}
createPlaylist={createPlaylist}
/>
</Box>
</Group>
);
})}
<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
Defaults
</Text>
</Group>
<Group justify='center' align='center' pos={'relative'}>
{themePlaylists
?.filter((playlist: any) => playlist.default === 1)
.map((cardPlaylist: any) => {
return (
<Group key={cardPlaylist.name} pos={'relative'}>
{cardPlaylist.name === currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2em',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: theme.borderColor,
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
}}
/>
)}
<Box>
<ThemePlaylistCard
cardPlaylist={cardPlaylist}
handleOpen={handleOpen}
currentThemePlaylist={currentThemePlaylist}
setCurrentThemePlaylist={setCurrentThemePlaylist}
handleDeletePlaylist={handleDeletePlaylist}
allThemes={allThemes}
createPlaylist={createPlaylist}
/>
</Box>
</Group>
);
})}
</Group>
<Group justify='center' align='center' pos={'relative'}>
<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
User Made
</Text>
</Group>
<Group justify='center' align='center' pos={'relative'}>
{themePlaylists
?.filter((playlist: any) => playlist.default === 0)
.map((cardPlaylist: any) => {
return (
<Group key={cardPlaylist.name} pos={'relative'}>
{cardPlaylist.name === currentThemePlaylist && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2em',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: theme.borderColor,
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
}}
/>
)}
<Box>
<ThemePlaylistCard
cardPlaylist={cardPlaylist}
handleOpen={handleOpen}
currentThemePlaylist={currentThemePlaylist}
setCurrentThemePlaylist={setCurrentThemePlaylist}
handleDeletePlaylist={handleDeletePlaylist}
allThemes={allThemes}
createPlaylist={createPlaylist}
/>
</Box>
</Group>
);
})}
</Group>
</Stack>
</>