This commit is contained in:
Thomas "ajnart" Camlong
2022-04-30 21:51:37 +02:00
parent 023f3ca9e4
commit a13dad4d42
7 changed files with 74 additions and 81 deletions

View File

@@ -35,67 +35,73 @@ export default function AddItemShelfItem(props: any) {
}); });
return ( return (
<> <>
<Modal size="xl" radius="lg" opened={props.opened || opened} onClose={() => setOpened(false)} title="Add a service"> <Modal
<Center> size="xl"
<Image radius="lg"
height={120} opened={props.opened || opened}
width={120} onClose={() => setOpened(false)}
src={form.values.icon} title="Add a service"
alt="Placeholder" >
withPlaceholder <Center>
<Image
height={120}
width={120}
src={form.values.icon}
alt="Placeholder"
withPlaceholder
/>
</Center>
<form
onSubmit={form.onSubmit(() => {
addItem(form.values);
setOpened(false);
form.reset();
})}
>
<Group direction="column" grow>
<TextInput
required
label="Service name"
placeholder="Plex"
value={form.values.name}
onChange={(event) => form.setFieldValue('name', event.currentTarget.value)}
error={form.errors.name && 'Invalid name'}
/> />
</Center>
<form
onSubmit={form.onSubmit(() => {
addItem(form.values);
setOpened(false);
form.reset();
})}
>
<Group direction="column" grow>
<TextInput
required
label="Service name"
placeholder="Plex"
value={form.values.name}
onChange={(event) => form.setFieldValue('name', event.currentTarget.value)}
error={form.errors.name && 'Invalid name'}
/>
<TextInput <TextInput
required required
label="Icon url" label="Icon url"
placeholder="https://i.gifer.com/ANPC.gif" placeholder="https://i.gifer.com/ANPC.gif"
value={form.values.icon} value={form.values.icon}
onChange={(event) => { onChange={(event) => {
form.setFieldValue('icon', event.currentTarget.value); form.setFieldValue('icon', event.currentTarget.value);
}} }}
error={form.errors.icon && 'Icon url is invalid'} error={form.errors.icon && 'Icon url is invalid'}
/> />
<TextInput <TextInput
required required
label="Service url" label="Service url"
placeholder="http://localhost:8989" placeholder="http://localhost:8989"
value={form.values.url} value={form.values.url}
onChange={(event) => form.setFieldValue('url', event.currentTarget.value)} onChange={(event) => form.setFieldValue('url', event.currentTarget.value)}
error={form.errors.icon && 'Icon url is invalid'} error={form.errors.icon && 'Icon url is invalid'}
/> />
<Select <Select
label="Select the type of service (used for API calls)" label="Select the type of service (used for API calls)"
defaultValue="Other" defaultValue="Other"
placeholder="Pick one" placeholder="Pick one"
value={form.values.type} value={form.values.type}
required required
searchable searchable
onChange={(value) => form.setFieldValue('type', value ?? 'Other')} onChange={(value) => form.setFieldValue('type', value ?? 'Other')}
data={ServiceTypes} data={ServiceTypes}
/> />
</Group> </Group>
<Group grow position="center" mt="xl"> <Group grow position="center" mt="xl">
<Button type="submit">Add service</Button> <Button type="submit">Add service</Button>
</Group> </Group>
</form> </form>
</Modal> </Modal>
<Grid.Col span={4} lg={2} sm={3}> <Grid.Col span={4} lg={2} sm={3}>
<AspectRatio ratio={4 / 3}> <AspectRatio ratio={4 / 3}>

View File

@@ -1,12 +1,4 @@
export const ServiceTypes = [ export const ServiceTypes = ['Other', 'Sonarr', 'Radarr', 'Lidarr', 'qBittorrent', 'Plex', 'Emby'];
'Other',
'Sonarr',
'Radarr',
'Lidarr',
'qBittorrent',
'Plex',
'Emby',
];
export interface serviceItem { export interface serviceItem {
[x: string]: any; [x: string]: any;

View File

@@ -4,6 +4,4 @@ export default {
title: 'Item Shelf', title: 'Item Shelf',
}; };
export const Default = (args: any) => ( export const Default = (args: any) => <AppShelf {...args} />;
<AppShelf {...args} />
);

View File

@@ -11,8 +11,8 @@ export default function SaveConfigComponent(props: any) {
} }
} }
return ( return (
<Button leftIcon={<Download />} variant="outline" onClick={onClick}> <Button leftIcon={<Download />} variant="outline" onClick={onClick}>
Download your config Download your config
</Button> </Button>
); );
} }

View File

@@ -20,12 +20,10 @@ function SettingsMenu(props: any) {
}, []); }, []);
return ( return (
<Group direction="column" grow> <Group direction="column" grow>
<TextInput <TextInput
label="Search bar querry url" label="Search bar querry url"
defaultValue={config.searchUrl} defaultValue={config.searchUrl}
onChange={ onChange={(e) => {
(e) => {
setConfig({ setConfig({
...config, ...config,
searchUrl: e.target.value, searchUrl: e.target.value,
@@ -37,8 +35,7 @@ function SettingsMenu(props: any) {
searchUrl: e.target.value, searchUrl: e.target.value,
}) })
); );
} }}
}
/> />
<Group direction="column"> <Group direction="column">
<Switch <Switch

View File

@@ -13,5 +13,5 @@ export function loadSettings(path: string): Settings | null {
export interface Settings { export interface Settings {
searchUrl: string; searchUrl: string;
searchBar: boolean, searchBar: boolean;
} }

View File

@@ -2,6 +2,6 @@ import { serviceItem } from '../components/AppShelf/AppShelf.d';
export interface Config { export interface Config {
services: serviceItem[]; services: serviceItem[];
settings: {}; settings: {};
[key: string]: any; [key: string]: any;
} }