Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-11 16:05:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

🚸 Improve add service autofill capabilities

Browse Source
This commit is contained in:
ajnart
2022-05-27 13:14:09 +02:00
parent 1a420c3b8b
commit 0457c91ede
1 changed files with 61 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/AppShelf/AddAppShelfItem.tsx
View File

@@ -10,6 +10,8 @@ import {
ActionIcon, ActionIcon,
Tooltip, Tooltip,
Title, Title,
Anchor,
Text,
} from '@mantine/core'; } from '@mantine/core';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { useState } from 'react'; import { useState } from 'react';
@@ -61,6 +63,31 @@ function MatchIcon(name: string, form: any) {
return false; return false;
} }
function MatchService(name: string, form: any) {
const service = ServiceTypeList.find((s) => s === name);
if (service) {
form.setFieldValue('type', service);
}
}
function MatchPort(name: string, form: any) {
const portmap = [
{ name: 'qBittorrent', value: '8080' },
{ name: 'Sonarr', value: '8989' },
{ name: 'Radarr', value: '7878' },
{ name: 'Lidarr', value: '8686' },
{ name: 'Readarr', value: '8686' },
{ name: 'Deluge', value: '8112' },
{ name: 'Transmission', value: '9091' },
];
// Match name with portmap key
const port = portmap.find((p) => p.name === name);
console.log('port', port);
if (port) {
form.setFieldValue('url', `http://localhost:${port.value}`);
}
}
export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) { export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
const { setOpened } = props; const { setOpened } = props;
const { config, setConfig } = useConfig(); const { config, setConfig } = useConfig();
@@ -145,10 +172,9 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
value={form.values.name} value={form.values.name}
onChange={(event) => { onChange={(event) => {
form.setFieldValue('name', event.currentTarget.value); form.setFieldValue('name', event.currentTarget.value);
const match = MatchIcon(event.currentTarget.value, form); MatchIcon(event.currentTarget.value, form);
if (match) { MatchService(event.currentTarget.value, form);
form.setFieldValue('icon', match); MatchPort(event.currentTarget.value, form);
}
}} }}
error={form.errors.name && 'Invalid icon url'} error={form.errors.name && 'Invalid icon url'}
/> />
@@ -166,7 +192,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
{...form.getInputProps('url')} {...form.getInputProps('url')}
/> />
<Select <Select
label="Select the type of service (used for API calls)" label="Service type"
defaultValue="Other" defaultValue="Other"
placeholder="Pick one" placeholder="Pick one"
required required
@@ -179,6 +205,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
form.values.type === 'Radarr' || form.values.type === 'Radarr' ||
form.values.type === 'Lidarr' || form.values.type === 'Lidarr' ||
form.values.type === 'Readarr') && ( form.values.type === 'Readarr') && (
<>
<TextInput <TextInput
required required
label="API key" label="API key"
@@ -189,6 +216,25 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
}} }}
error={form.errors.apiKey && 'Invalid API key'} error={form.errors.apiKey && 'Invalid API key'}
/> />
<Text
style={{
alignSelf: 'center',
fontSize: '0.75rem',
textAlign: 'center',
color: '#a0aec0',
}}
>
tip: Get your API key{' '}
<Anchor
target="_blank"
weight="bold"
style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
href={`${form.values.url}/settings/general`}
>
here
</Anchor>
</Text>
</>
)} )}
{form.values.type === 'qBittorrent' && ( {form.values.type === 'qBittorrent' && (
<> <>