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

🔧 Tweak UI and change the name of the settings

Browse Source
This commit is contained in:
ajnart
2022-06-20 09:52:05 +02:00
parent a8c0dfcd0c
commit 80d3f16473
5 changed files with 156 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,6 +15,7 @@ import {
Tabs, Tabs,
MultiSelect, MultiSelect,
ScrollArea, ScrollArea,
Switch,
} from '@mantine/core'; } from '@mantine/core';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -22,7 +23,7 @@ import { IconApps as Apps } from '@tabler/icons';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { useDebouncedValue } from '@mantine/hooks'; import { useDebouncedValue } from '@mantine/hooks';
import { useConfig } from '../../tools/state'; import { useConfig } from '../../tools/state';
import { ServiceTypeList, StatusCodes, Targets } from '../../tools/types'; import { ServiceTypeList, StatusCodes } from '../../tools/types';
export function AddItemShelfButton(props: any) { export function AddItemShelfButton(props: any) {
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
@@ -117,7 +118,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
password: props.password ?? (undefined as unknown as string), password: props.password ?? (undefined as unknown as string),
openedUrl: props.openedUrl ?? (undefined as unknown as string), openedUrl: props.openedUrl ?? (undefined as unknown as string),
status: props.status ?? ['200'], status: props.status ?? ['200'],
target: props.target ?? '_blank', newTab: props.newTab ?? true,
}, },
validate: { validate: {
apiKey: () => null, apiKey: () => null,
@@ -181,8 +182,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) { if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
form.values.status = undefined; form.values.status = undefined;
} }
if (form.values.target === '_blank') { if (form.values.newTab === true) {
form.values.target = undefined; form.values.newTab = undefined;
} }
// If service already exists, update it. // If service already exists, update it.
if (config.services && config.services.find((s) => s.id === form.values.id)) { if (config.services && config.services.find((s) => s.id === form.values.id)) {
@@ -208,155 +209,154 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
form.reset(); form.reset();
})} })}
> >
<Tabs position="center"> <Tabs grow>
<Tabs.Tab label="Options"> <Tabs.Tab label="Options">
<ScrollArea style={{height:'42vh'}} scrollbarSize={4}> <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
<Group direction="column" grow> <Group direction="column" grow>
<TextInput <TextInput
required required
label="Service name" label="Service name"
placeholder="Plex" placeholder="Plex"
{...form.getInputProps('name')} {...form.getInputProps('name')}
/> />
<TextInput
required
label="Icon URL"
placeholder="/favicon.svg"
{...form.getInputProps('icon')}
/>
<TextInput
required
label="Service URL"
placeholder="http://localhost:7575"
{...form.getInputProps('url')}
/>
<TextInput
label="On Click URL"
placeholder="http://sonarr.example.com"
{...form.getInputProps('openedUrl')}
/>
<Select
label="Service type"
defaultValue="Other"
placeholder="Pick one"
required
searchable
data={ServiceTypeList}
{...form.getInputProps('type')}
/>
<Select
label="Category"
data={categoryList}
placeholder="Select a category or create a new one"
nothingFound="Nothing found"
searchable
clearable
creatable
onClick={(e) => {
e.preventDefault();
}}
getCreateLabel={(query) => `+ Create "${query}"`}
onCreate={(query) => {}}
{...form.getInputProps('category')}
/>
<LoadingOverlay visible={isLoading} />
{(form.values.type === 'Sonarr' ||
form.values.type === 'Radarr' ||
form.values.type === 'Lidarr' ||
form.values.type === 'Readarr') && (
<>
<TextInput <TextInput
required required
label="API key" label="Icon URL"
placeholder="Your API key" placeholder="/favicon.svg"
value={form.values.apiKey} {...form.getInputProps('icon')}
onChange={(event) => {
form.setFieldValue('apiKey', event.currentTarget.value);
}}
error={form.errors.apiKey && 'Invalid API key'}
/>
<Text
style={{
alignSelf: 'center',
fontSize: '0.75rem',
textAlign: 'center',
color: 'gray',
}}
>
Tip: Get your API key{' '}
<Anchor
target="_blank"
weight="bold"
style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
href={`${hostname}/settings/general`}
>
here.
</Anchor>
</Text>
</>
)}
{form.values.type === 'qBittorrent' && (
<>
<TextInput
required
label="Username"
placeholder="admin"
value={form.values.username}
onChange={(event) => {
form.setFieldValue('username', event.currentTarget.value);
}}
error={form.errors.username && 'Invalid username'}
/> />
<TextInput <TextInput
required required
label="Password" label="Service URL"
placeholder="adminadmin" placeholder="http://localhost:7575"
value={form.values.password} {...form.getInputProps('url')}
onChange={(event) => {
form.setFieldValue('password', event.currentTarget.value);
}}
error={form.errors.password && 'Invalid password'}
/> />
</>
)}
{(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
<>
<TextInput <TextInput
label="Password" label="On Click URL"
placeholder="password" placeholder="http://sonarr.example.com"
value={form.values.password} {...form.getInputProps('openedUrl')}
onChange={(event) => {
form.setFieldValue('password', event.currentTarget.value);
}}
error={form.errors.password && 'Invalid password'}
/> />
</> <Select
)} label="Service type"
</Group> defaultValue="Other"
</ScrollArea> placeholder="Pick one"
</Tabs.Tab> required
<Tabs.Tab label="Advanced Options"> searchable
<Group direction="column" grow> data={ServiceTypeList}
<MultiSelect {...form.getInputProps('type')}
required />
label="HTTP Status Codes" <Select
data={StatusCodes} label="Category"
placeholder="Select valid status codes" data={categoryList}
clearButtonLabel="Clear selection" placeholder="Select a category or create a new one"
nothingFound="Nothing found" nothingFound="Nothing found"
defaultValue={['200']} searchable
clearable clearable
searchable creatable
{...form.getInputProps('status')} onClick={(e) => {
/> e.preventDefault();
<Select }}
label="Open Tab in: " getCreateLabel={(query) => `+ Create "${query}"`}
data={Targets} onCreate={(query) => {}}
defaultValue="_blank" {...form.getInputProps('category')}
placeholder="Pick one" />
{...form.getInputProps('target')} <LoadingOverlay visible={isLoading} />
/> {(form.values.type === 'Sonarr' ||
form.values.type === 'Radarr' ||
form.values.type === 'Lidarr' ||
form.values.type === 'Readarr') && (
<>
<TextInput
required
label="API key"
placeholder="Your API key"
value={form.values.apiKey}
onChange={(event) => {
form.setFieldValue('apiKey', event.currentTarget.value);
}}
error={form.errors.apiKey && 'Invalid API key'}
/>
<Text
style={{
alignSelf: 'center',
fontSize: '0.75rem',
textAlign: 'center',
color: 'gray',
}}
>
Tip: Get your API key{' '}
<Anchor
target="_blank"
weight="bold"
style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
href={`${hostname}/settings/general`}
>
here.
</Anchor>
</Text>
</>
)}
{form.values.type === 'qBittorrent' && (
<>
<TextInput
required
label="Username"
placeholder="admin"
value={form.values.username}
onChange={(event) => {
form.setFieldValue('username', event.currentTarget.value);
}}
error={form.errors.username && 'Invalid username'}
/>
<TextInput
required
label="Password"
placeholder="adminadmin"
value={form.values.password}
onChange={(event) => {
form.setFieldValue('password', event.currentTarget.value);
}}
error={form.errors.password && 'Invalid password'}
/>
</>
)}
{(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
<>
<TextInput
label="Password"
placeholder="password"
value={form.values.password}
onChange={(event) => {
form.setFieldValue('password', event.currentTarget.value);
}}
error={form.errors.password && 'Invalid password'}
/>
</>
)}
</Group>
</ScrollArea>
</Tabs.Tab>
<Tabs.Tab label="Advanced Options">
<Group direction="column" grow>
<MultiSelect
required
label="HTTP Status Codes"
data={StatusCodes}
placeholder="Select valid status codes"
clearButtonLabel="Clear selection"
nothingFound="Nothing found"
defaultValue={['200']}
clearable
searchable
{...form.getInputProps('status')}
/>
<Switch
label="Open service in new tab"
defaultChecked={form.values.newTab}
{...form.getInputProps('newTab')}
/>
</Group>
</Tabs.Tab> </Tabs.Tab>
</Tabs> </Tabs>
<Group grow position="center" mt="xl"> <Group grow position="center" mt="xl">

12
src/components/AppShelf/AppShelfItem.tsx
View File

@@ -83,7 +83,7 @@ export function AppShelfItem(props: any) {
> >
<Card.Section> <Card.Section>
<Anchor <Anchor
target={service.target !== undefined ? service.target : '_blank'} target={service.newTab === false ? '_top' : '_blank'}
href={service.openedUrl ? service.openedUrl : service.url} href={service.openedUrl ? service.openedUrl : service.url}
style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }} style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
> >
@@ -127,13 +127,9 @@ export function AppShelfItem(props: any) {
src={service.icon} src={service.icon}
fit="contain" fit="contain"
onClick={() => { onClick={() => {
if (service.target === undefined || service.target === '_blank') { if (service.openedUrl) {
if (service.openedUrl) window.open(service.openedUrl, '_blank'); window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
else window.open(service.url); } else window.open(service.url, service.newTab === false ? '_top' : '_blank');
} else {
if (service.openedUrl) window.location.href = service.openedUrl;
else window.location.href = service.url;
}
}} }}
/> />
</motion.i> </motion.i>

13
src/components/AppShelf/AppShelfMenu.tsx
View File

@@ -22,18 +22,7 @@ export default function AppShelfMenu(props: any) {
> >
<AddAppShelfItemForm <AddAppShelfItemForm
setOpened={setOpened} setOpened={setOpened}
name={service.name} {...service}
id={service.id}
category={service.category}
type={service.type}
url={service.url}
icon={service.icon}
apiKey={service.apiKey}
username={service.username}
password={service.password}
openedUrl={service.openedUrl}
status={service.status}
target={service.target}
message="Save service" message="Save service"
/> />
</Modal> </Modal>

6
src/pages/api/modules/ping.ts
View File

@@ -10,7 +10,11 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
res.status(response.status).json(response.statusText); res.status(response.status).json(response.statusText);
}) })
.catch((error) => { .catch((error) => {
res.status(error.response.status).json(error.response.statusText); if (error.response) {
res.status(error.response.status).json(error.response.statusText);
} else {
res.status(500).json('Server Error');
}
}); });
// // Make a request to the URL // // Make a request to the URL
// const response = await axios.get(url); // const response = await axios.get(url);

4
src/tools/types.ts
View File

@@ -92,6 +92,6 @@ export interface serviceItem {
password?: string; password?: string;
username?: string; username?: string;
openedUrl?: string; openedUrl?: string;
status: string[]; newTab?: boolean;
target: string; status?: string[];
} }