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

Reworked AddAppShelfItem

Browse Source 
Adds:
- Advanced Options tab
- Changed which ping status codes identify as "Online"
- Change if service opens in new tab or not

Fixes:
- Deluge and Transmission Password requirement
This commit is contained in:
Larvey
2022-06-16 15:38:50 -04:00
committed by ajnart
parent a20c5f8d12
commit 4516dde1f4
8 changed files with 235 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,6 +12,8 @@ import {
Title,
Anchor,
Text,
Tabs,
MultiSelect,
} from '@mantine/core';
import { useForm } from '@mantine/form';
import { useEffect, useState } from 'react';
@@ -19,7 +21,7 @@ import { IconApps as Apps } from '@tabler/icons';
import { v4 as uuidv4 } from 'uuid';
import { useDebouncedValue } from '@mantine/hooks';
import { useConfig } from '../../tools/state';
import { ServiceTypeList } from '../../tools/types';
import { ServiceTypeList, statusCodes, targets } from '../../tools/types';
export function AddItemShelfButton(props: any) {
const [opened, setOpened] = useState(false);
@@ -113,6 +115,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
username: props.username ?? (undefined as unknown as string),
password: props.password ?? (undefined as unknown as string),
openedUrl: props.openedUrl ?? (undefined as unknown as string),
status: props.status ?? ['200'],
target: props.target ?? '_blank',
},
validate: {
apiKey: () => null,
@@ -133,6 +137,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
}
return null;
},
status: (value: string[]) => {
if (!value.length) {
return 'Please select a status code';
}
return null;
},
},
});
@@ -191,6 +201,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
form.reset();
})}
>
<Tabs position="apart">
<Tabs.Tab label="Options">
<Group direction="column" grow>
<TextInput
required
@@ -276,6 +288,30 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
</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' ||
form.values.type === 'qBittorrent') && (
@@ -301,7 +337,29 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
</>
)}
</Group>
</Tabs.Tab>
<Tabs.Tab label="Advanced Options">
<MultiSelect
required
label="HTTP Status Codes"
data={statusCodes}
placeholder="Select valid status codes"
clearButtonLabel="Clear selection"
nothingFound="Nothing found"
clearable
searchable
{...form.getInputProps('status')}
/>
<Select
required
label="Open Tab in: "
data={targets}
defaultValue="_blank"
placeholder="Pick one"
{...form.getInputProps('target')}
/>
</Tabs.Tab>
</Tabs>
<Group grow position="center" mt="xl">
<Button type="submit">{props.message ?? 'Add service'}</Button>
</Group>

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

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

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

@@ -32,6 +32,8 @@ export default function AppShelfMenu(props: any) {
username={service.username}
password={service.password}
openedUrl={service.openedUrl}
status={service.status}
target={service.target}
message="Save service"
/>
</Modal>

1
src/components/modules/ping/PingModule.story.tsx
View File

@@ -11,6 +11,7 @@ const service: serviceItem = {
name: 'YouTube',
icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
url: 'https://youtube.com/',
status: ['200'],
};
export const Default = (args: any) => <PingComponent service={service} />;

31
src/components/modules/ping/PingModule.tsx
View File

@@ -1,5 +1,5 @@
import { Indicator, Tooltip } from '@mantine/core';
import axios from 'axios';
import axios, { AxiosResponse } from 'axios';
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import { IconPlug as Plug } from '@tabler/icons';
@@ -19,18 +19,37 @@ export default function PingComponent(props: any) {
const { url }: { url: string } = props;
const [isOnline, setOnline] = useState<State>('loading');
const [response, setResponse] = useState(500);
const exists = config.modules?.[PingModule.title]?.enabled ?? false;
function statusCheck(response: AxiosResponse) {
const { status }: {status: string[]} = props;
//Default Status
let acceptableStatus = ['200'];
if (status !== undefined && status.length) {
acceptableStatus = status;
}
// Checks if reported status is in acceptable status array
if (acceptableStatus.indexOf((response.status).toString()) >= 0) {
setOnline('online');
setResponse(response.status);
} else {
setOnline('down');
setResponse(response.status)
}
}
useEffect(() => {
if (!exists) {
return;
}
axios
.get('/api/modules/ping', { params: { url } })
.then(() => {
setOnline('online');
.then((response) => {
statusCheck(response);
})
.catch(() => {
setOnline('down');
.catch((error) => {
statusCheck(error.response);
});
}, [config.modules?.[PingModule.title]?.enabled]);
if (!exists) {
@@ -40,7 +59,7 @@ export default function PingComponent(props: any) {
<Tooltip
radius="lg"
style={{ position: 'absolute', bottom: 20, right: 20 }}
label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? 'Online' : 'Offline'}
label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? `Online - ${response}` : `Offline - ${response}`}
>
<motion.div
animate={{

4
src/pages/api/modules/downloads.ts
View File

@@ -38,7 +38,7 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
...(
await new Deluge({
baseUrl: delugeService.url,
password: delugeService.password,
password: 'password' in delugeService ? delugeService.password : '',
}).getAllData()
).torrents
);
@@ -49,7 +49,7 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
await new Transmission({
baseUrl: transmissionService.url,
username: transmissionService.username,
password: transmissionService.password,
password: 'password' in transmissionService ? transmissionService.password : '',
}).getAllData()
).torrents
);

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

@@ -7,10 +7,10 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
await axios
.get(url as string)
.then((response) => {
res.status(200).json(response.data);
res.status(response.status).json(response.statusText);
})
.catch((error) => {
res.status(500).json(error);
res.status(error.response.status).json(error.response.statusText);
});
// // Make a request to the URL
// const response = await axios.get(url);

28
src/tools/types.ts
View File

@@ -31,6 +31,32 @@ interface ConfigModule {
};
}
export const statusCodes = [
{value: '200', label: '200 - OK', group:'Sucessful responses'},
{value: '204', label: '204 - No Content', group:'Sucessful responses'},
{value: '301', label: '301 - Moved Permanently', group:'Redirection responses'},
{value: '302', label: '302 - Found / Moved Temporarily', group:'Redirection responses'},
{value: '304', label: '304 - Not Modified', group:'Redirection responses'},
{value: '307', label: '307 - Temporary Redirect', group:'Redirection responses'},
{value: '308', label: '308 - Permanent Redirect', group:'Redirection responses'},
{value: '400', label: '400 - Bad Request', group:'Client error responses'},
{value: '401', label: '401 - Unauthorized', group:'Client error responses'},
{value: '403', label: '403 - Forbidden', group:'Client error responses'},
{value: '404', label: '404 - Not Found', group:'Client error responses'},
{value: '408', label: '408 - Request Timeout', group:'Client error responses'},
{value: '410', label: '410 - Gone', group:'Client error responses'},
{value: '429', label: '429 - Too Many Requests', group:'Client error responses'},
{value: '500', label: '500 - Internal Server Error', group:'Server error responses'},
{value: '502', label: '502 - Bad Gateway', group:'Server error responses'},
{value: '503', label: '503 - Service Unavailable', group:'Server error responses'},
{value: '054', label: '504 - Gateway Timeout Error', group:'Server error responses'},
];
export const targets = [
{value: '_blank', label: 'New Tab'},
{value: '_top', label: 'Same Window'}
]
export const ServiceTypeList = [
'Other',
'Emby',
@@ -66,4 +92,6 @@ export interface serviceItem {
password?: string;
username?: string;
openedUrl?: string;
status: string[];
target: string;
}