New settings pages
This commit is contained in:
Sean Edmunds
275
src/pages/settings/components/Theming/ThemePlaylistModal.tsx
Normal file
275
src/pages/settings/components/Theming/ThemePlaylistModal.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Group,
|
||||
Modal,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from '@mantine/core';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { modalClasses, selectClasses, textInputClasses } from 'styles';
|
||||
import ThemeMiniCard from './ThemeMiniCard';
|
||||
|
||||
function ThemePlaylistModal({
|
||||
opened,
|
||||
handleClose,
|
||||
createPlaylist,
|
||||
selectedPlaylist,
|
||||
setSelectedPlaylist,
|
||||
handleSavePlaylist,
|
||||
allThemes,
|
||||
}: any) {
|
||||
const { theme } = useCommonHooks();
|
||||
const [themeList, setThemeList] = useState<any>('[]');
|
||||
useEffect(() => {
|
||||
if (selectedPlaylist.themeList) {
|
||||
setThemeList(JSON.parse(selectedPlaylist?.themeList));
|
||||
}
|
||||
}, [selectedPlaylist]);
|
||||
return (
|
||||
<Modal.Root
|
||||
size={'50%'}
|
||||
className={modalClasses.editThemeModal}
|
||||
classNames={modalClasses}
|
||||
opened={opened}
|
||||
onClose={() => {
|
||||
handleClose();
|
||||
setThemeList('[]');
|
||||
setSelectedPlaylist({});
|
||||
}}
|
||||
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}")`,
|
||||
}}
|
||||
>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header style={{ justifyContent: 'center' }}>
|
||||
<Group pos={'absolute'}>
|
||||
<Text>Name:</Text>
|
||||
<TextInput
|
||||
className={textInputClasses.default}
|
||||
classNames={textInputClasses}
|
||||
value={selectedPlaylist.name}
|
||||
disabled={selectedPlaylist.name === 'Time of Day'}
|
||||
onChange={(e) =>
|
||||
setSelectedPlaylist({ ...selectedPlaylist, name: e.target.value })
|
||||
}
|
||||
styles={{
|
||||
label: {
|
||||
color: theme.primaryColor,
|
||||
},
|
||||
input: {
|
||||
color: theme.primaryColor,
|
||||
border: 'none',
|
||||
borderBottom: `1px solid ${theme.primaryColor}`,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pt={8}>
|
||||
{selectedPlaylist.name === 'Time of Day' ? (
|
||||
<Stack>
|
||||
<Group>
|
||||
<Text w={'100px'}>00:00-05:59</Text>
|
||||
<Select
|
||||
labelProps={{ display: 'none' }}
|
||||
placeholder='Select Theme'
|
||||
defaultValue={themeList['0']}
|
||||
data={allThemes?.map((theme: any) => {
|
||||
return {
|
||||
value: `${theme.id}`,
|
||||
label: theme.name,
|
||||
};
|
||||
})}
|
||||
classNames={{
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
}}
|
||||
onChange={(data) => {
|
||||
const newThemeList = themeList;
|
||||
newThemeList['0'] = data;
|
||||
createPlaylist({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/themePlaylists',
|
||||
body: {
|
||||
id: selectedPlaylist.id,
|
||||
name: selectedPlaylist.name,
|
||||
themeList: JSON.stringify(newThemeList),
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={'100%'}>
|
||||
<Text w={'100px'}>06:00-11:59</Text>
|
||||
<Select
|
||||
labelProps={{ display: 'none' }}
|
||||
placeholder='Select Theme'
|
||||
defaultValue={themeList['1']}
|
||||
data={allThemes?.map((theme: any) => {
|
||||
return {
|
||||
value: `${theme.id}`,
|
||||
label: theme.name,
|
||||
};
|
||||
})}
|
||||
classNames={{
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
}}
|
||||
onChange={(data) => {
|
||||
const newThemeList = themeList;
|
||||
newThemeList['1'] = data;
|
||||
createPlaylist({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/themePlaylists',
|
||||
body: {
|
||||
id: selectedPlaylist.id,
|
||||
name: selectedPlaylist.name,
|
||||
themeList: JSON.stringify(newThemeList),
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={'100%'}>
|
||||
<Text w={'100px'}>12:00-17:59</Text>
|
||||
<Select
|
||||
labelProps={{ display: 'none' }}
|
||||
placeholder='Select Theme'
|
||||
defaultValue={themeList['2']}
|
||||
data={allThemes?.map((theme: any) => {
|
||||
return {
|
||||
value: `${theme.id}`,
|
||||
label: theme.name,
|
||||
};
|
||||
})}
|
||||
classNames={{
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
}}
|
||||
onChange={(data) => {
|
||||
const newThemeList = themeList;
|
||||
newThemeList['2'] = data;
|
||||
createPlaylist({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/themePlaylists',
|
||||
body: {
|
||||
id: selectedPlaylist.id,
|
||||
name: selectedPlaylist.name,
|
||||
themeList: JSON.stringify(newThemeList),
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={'100%'}>
|
||||
<Text w={'100px'}>18:00-23:59</Text>
|
||||
<Select
|
||||
labelProps={{ display: 'none' }}
|
||||
placeholder='Select Theme'
|
||||
defaultValue={themeList['3']}
|
||||
data={allThemes?.map((theme: any) => {
|
||||
return {
|
||||
value: `${theme.id}`,
|
||||
label: theme.name,
|
||||
};
|
||||
})}
|
||||
classNames={{
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
}}
|
||||
onChange={(data) => {
|
||||
const newThemeList = themeList;
|
||||
newThemeList['3'] = data;
|
||||
createPlaylist({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/themePlaylists',
|
||||
body: {
|
||||
id: selectedPlaylist.id,
|
||||
name: selectedPlaylist.name,
|
||||
themeList: JSON.stringify(newThemeList),
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</Stack>
|
||||
) : (
|
||||
<SimpleGrid cols={3}>
|
||||
{selectedPlaylist.name !== 'Time of Day' &&
|
||||
allThemes?.map((miniTheme: any) => {
|
||||
const newThemeList = themeList;
|
||||
return (
|
||||
<Group
|
||||
key={miniTheme.id}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
filter:
|
||||
newThemeList && !newThemeList?.includes(miniTheme.id)
|
||||
? 'saturate(0)'
|
||||
: undefined,
|
||||
}}
|
||||
onClick={() => {
|
||||
const newSelectedPlaylist = { ...selectedPlaylist };
|
||||
if (themeList?.includes(miniTheme.id)) {
|
||||
newThemeList.splice(themeList.indexOf(miniTheme.id), 1);
|
||||
} else {
|
||||
newThemeList.push(miniTheme.id);
|
||||
}
|
||||
newSelectedPlaylist.themeList = JSON.stringify(newThemeList);
|
||||
setSelectedPlaylist(newSelectedPlaylist);
|
||||
}}
|
||||
>
|
||||
<ThemeMiniCard allThemes={allThemes} item={miniTheme.id} />
|
||||
</Group>
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
)}
|
||||
<Divider color='black' my='sm' />
|
||||
<Group>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={handleSavePlaylist}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
handleClose();
|
||||
setThemeList('[]');
|
||||
setSelectedPlaylist({});
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export default ThemePlaylistModal;
|
||||
Reference in New Issue
Block a user