Compare commits
34 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7dc205fa66 | ||
|
|
91a249d953 | ||
|
|
356afda9c7 | ||
|
|
35f02a2296 | ||
|
|
16bcec0deb | ||
|
|
16ec57081b | ||
|
|
690f09fcf3 | ||
|
|
2f960169bb | ||
|
|
14a40d9f66 | ||
|
|
e5abd67f83 | ||
|
|
399ba7e2fc | ||
|
|
7780ae3d7a | ||
|
|
80d3f16473 | ||
|
|
a8c0dfcd0c | ||
|
|
6ee7d6ec8d | ||
|
|
544fae3808 | ||
|
|
4516dde1f4 | ||
|
|
a20c5f8d12 | ||
|
|
60e5c0d165 | ||
|
|
b7bf18250d | ||
|
|
93256b7a6a | ||
|
|
47a4437a01 | ||
|
|
92470c619e | ||
|
|
7cb3dfbd16 | ||
|
|
d69e4f41a1 | ||
|
|
4980254e89 | ||
|
|
5133286e04 | ||
|
|
ca2713a12c | ||
|
|
4981823c37 | ||
|
|
5d31e414f0 | ||
|
|
8ec2b9d0cd | ||
|
|
bd920dfc86 | ||
|
|
b5540a9958 | ||
|
|
778988de58 |
@@ -198,7 +198,4 @@ SOFTWARE.
|
|||||||
<i>Thank you for visiting! <b>For more information <a href="https://github.com/ajnart/homarr/wiki">read the wiki!</a></b></i>
|
<i>Thank you for visiting! <b>For more information <a href="https://github.com/ajnart/homarr/wiki">read the wiki!</a></b></i>
|
||||||
<br/>
|
<br/>
|
||||||
<br/>
|
<br/>
|
||||||
<a href="https://trackgit.com">
|
|
||||||
<img src="https://us-central1-trackgit-analytics.cloudfunctions.net/token/ping/l3khzc3a3pexzw5w5whl" alt="trackgit-views" />
|
|
||||||
</a>
|
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
export const REPO_URL = 'ajnart/homarr';
|
export const REPO_URL = 'ajnart/homarr';
|
||||||
export const CURRENT_VERSION = 'v0.7.0';
|
export const CURRENT_VERSION = 'v0.7.1';
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "homarr",
|
"name": "homarr",
|
||||||
"version": "0.7.0",
|
"version": "0.7.1",
|
||||||
"description": "Homarr - A homepage for your server.",
|
"description": "Homarr - A homepage for your server.",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|||||||
@@ -12,6 +12,10 @@ import {
|
|||||||
Title,
|
Title,
|
||||||
Anchor,
|
Anchor,
|
||||||
Text,
|
Text,
|
||||||
|
Tabs,
|
||||||
|
MultiSelect,
|
||||||
|
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';
|
||||||
@@ -19,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 } 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);
|
||||||
@@ -113,6 +117,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
|
|||||||
username: props.username ?? (undefined as unknown as string),
|
username: props.username ?? (undefined as unknown as string),
|
||||||
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'],
|
||||||
|
newTab: props.newTab ?? true,
|
||||||
},
|
},
|
||||||
validate: {
|
validate: {
|
||||||
apiKey: () => null,
|
apiKey: () => null,
|
||||||
@@ -133,6 +139,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
|
|||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
},
|
},
|
||||||
|
status: (value: string[]) => {
|
||||||
|
if (!value.length) {
|
||||||
|
return 'Please select a status code';
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -167,6 +179,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
|
|||||||
</Center>
|
</Center>
|
||||||
<form
|
<form
|
||||||
onSubmit={form.onSubmit(() => {
|
onSubmit={form.onSubmit(() => {
|
||||||
|
if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
|
||||||
|
form.values.status = undefined;
|
||||||
|
}
|
||||||
|
if (form.values.newTab === true) {
|
||||||
|
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)) {
|
||||||
setConfig({
|
setConfig({
|
||||||
@@ -191,131 +209,167 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
|
|||||||
form.reset();
|
form.reset();
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<Group direction="column" grow>
|
<Tabs grow>
|
||||||
<TextInput
|
<Tabs.Tab label="Options">
|
||||||
required
|
<ScrollArea style={{ height: 500 }} scrollbarSize={4}>
|
||||||
label="Service name"
|
<Group direction="column" grow>
|
||||||
placeholder="Plex"
|
<TextInput
|
||||||
{...form.getInputProps('name')}
|
required
|
||||||
/>
|
label="Service name"
|
||||||
|
placeholder="Plex"
|
||||||
|
{...form.getInputProps('name')}
|
||||||
|
/>
|
||||||
|
|
||||||
<TextInput
|
<TextInput
|
||||||
required
|
required
|
||||||
label="Icon URL"
|
label="Icon URL"
|
||||||
placeholder="/favicon.svg"
|
placeholder="/favicon.svg"
|
||||||
{...form.getInputProps('icon')}
|
{...form.getInputProps('icon')}
|
||||||
/>
|
/>
|
||||||
<TextInput
|
<TextInput
|
||||||
required
|
required
|
||||||
label="Service URL"
|
label="Service URL"
|
||||||
placeholder="http://localhost:7575"
|
placeholder="http://localhost:7575"
|
||||||
{...form.getInputProps('url')}
|
{...form.getInputProps('url')}
|
||||||
/>
|
/>
|
||||||
<TextInput
|
<TextInput
|
||||||
label="New tab URL"
|
label="On Click URL"
|
||||||
placeholder="http://sonarr.example.com"
|
placeholder="http://sonarr.example.com"
|
||||||
{...form.getInputProps('openedUrl')}
|
{...form.getInputProps('openedUrl')}
|
||||||
/>
|
/>
|
||||||
<Select
|
<Select
|
||||||
label="Service type"
|
label="Service type"
|
||||||
defaultValue="Other"
|
defaultValue="Other"
|
||||||
placeholder="Pick one"
|
placeholder="Pick one"
|
||||||
required
|
required
|
||||||
searchable
|
searchable
|
||||||
data={ServiceTypeList}
|
data={ServiceTypeList}
|
||||||
{...form.getInputProps('type')}
|
{...form.getInputProps('type')}
|
||||||
/>
|
/>
|
||||||
<Select
|
<Select
|
||||||
label="Category"
|
label="Category"
|
||||||
data={categoryList}
|
data={categoryList}
|
||||||
placeholder="Select a category or create a new one"
|
placeholder="Select a category or create a new one"
|
||||||
nothingFound="Nothing found"
|
nothingFound="Nothing found"
|
||||||
searchable
|
searchable
|
||||||
clearable
|
clearable
|
||||||
creatable
|
creatable
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}}
|
}}
|
||||||
getCreateLabel={(query) => `+ Create "${query}"`}
|
getCreateLabel={(query) => `+ Create "${query}"`}
|
||||||
onCreate={(query) => {}}
|
onCreate={(query) => {}}
|
||||||
{...form.getInputProps('category')}
|
{...form.getInputProps('category')}
|
||||||
/>
|
/>
|
||||||
<LoadingOverlay visible={isLoading} />
|
<LoadingOverlay visible={isLoading} />
|
||||||
{(form.values.type === 'Sonarr' ||
|
{(form.values.type === 'Sonarr' ||
|
||||||
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
|
||||||
|
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' ||
|
||||||
|
form.values.type === 'qBittorrent') && (
|
||||||
|
<>
|
||||||
|
<TextInput
|
||||||
|
label="Username"
|
||||||
|
placeholder="admin"
|
||||||
|
value={form.values.username}
|
||||||
|
onChange={(event) => {
|
||||||
|
form.setFieldValue('username', event.currentTarget.value);
|
||||||
|
}}
|
||||||
|
error={form.errors.username && 'Invalid username'}
|
||||||
|
/>
|
||||||
|
<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
|
required
|
||||||
label="API key"
|
label="HTTP Status Codes"
|
||||||
placeholder="Your API key"
|
data={StatusCodes}
|
||||||
value={form.values.apiKey}
|
placeholder="Select valid status codes"
|
||||||
onChange={(event) => {
|
clearButtonLabel="Clear selection"
|
||||||
form.setFieldValue('apiKey', event.currentTarget.value);
|
nothingFound="Nothing found"
|
||||||
}}
|
defaultValue={['200']}
|
||||||
error={form.errors.apiKey && 'Invalid API key'}
|
clearable
|
||||||
|
searchable
|
||||||
|
{...form.getInputProps('status')}
|
||||||
/>
|
/>
|
||||||
<Text
|
<Switch
|
||||||
style={{
|
label="Open service in new tab"
|
||||||
alignSelf: 'center',
|
defaultChecked={form.values.newTab}
|
||||||
fontSize: '0.75rem',
|
{...form.getInputProps('newTab')}
|
||||||
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
|
</Group>
|
||||||
required
|
</Tabs.Tab>
|
||||||
label="Password"
|
</Tabs>
|
||||||
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
|
|
||||||
required
|
|
||||||
label="Password"
|
|
||||||
placeholder="password"
|
|
||||||
value={form.values.password}
|
|
||||||
onChange={(event) => {
|
|
||||||
form.setFieldValue('password', event.currentTarget.value);
|
|
||||||
}}
|
|
||||||
error={form.errors.password && 'Invalid password'}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Group>
|
|
||||||
|
|
||||||
<Group grow position="center" mt="xl">
|
<Group grow position="center" mt="xl">
|
||||||
<Button type="submit">{props.message ?? 'Add service'}</Button>
|
<Button type="submit">{props.message ?? 'Add service'}</Button>
|
||||||
</Group>
|
</Group>
|
||||||
|
|||||||
@@ -44,11 +44,16 @@ const AppShelf = (props: any) => {
|
|||||||
const { colorScheme } = useMantineColorScheme();
|
const { colorScheme } = useMantineColorScheme();
|
||||||
|
|
||||||
const sensors = useSensors(
|
const sensors = useSensors(
|
||||||
useSensor(TouchSensor, {}),
|
useSensor(TouchSensor, {
|
||||||
|
activationConstraint: {
|
||||||
|
delay: 500,
|
||||||
|
tolerance: 5,
|
||||||
|
},
|
||||||
|
}),
|
||||||
useSensor(MouseSensor, {
|
useSensor(MouseSensor, {
|
||||||
// Require the mouse to move by 10 pixels before activating
|
// Require the mouse to move by 10 pixels before activating
|
||||||
activationConstraint: {
|
activationConstraint: {
|
||||||
delay: 250,
|
delay: 500,
|
||||||
tolerance: 5,
|
tolerance: 5,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
@@ -101,7 +106,14 @@ const AppShelf = (props: any) => {
|
|||||||
<SortableContext items={config.services}>
|
<SortableContext items={config.services}>
|
||||||
<Grid gutter="xl" align="center">
|
<Grid gutter="xl" align="center">
|
||||||
{filtered.map((service) => (
|
{filtered.map((service) => (
|
||||||
<Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
|
<Grid.Col
|
||||||
|
key={service.id}
|
||||||
|
span={6}
|
||||||
|
xl={config.settings.appCardWidth || 2}
|
||||||
|
xs={4}
|
||||||
|
sm={3}
|
||||||
|
md={3}
|
||||||
|
>
|
||||||
<SortableAppShelfItem service={service} key={service.id} id={service.id} />
|
<SortableAppShelfItem service={service} key={service.id} id={service.id} />
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -83,8 +83,8 @@ export function AppShelfItem(props: any) {
|
|||||||
>
|
>
|
||||||
<Card.Section>
|
<Card.Section>
|
||||||
<Anchor
|
<Anchor
|
||||||
target="_blank"
|
target={service.newTab === false ? '_top' : '_blank'}
|
||||||
href={service.url}
|
href={service.openedUrl ? service.openedUrl : service.url}
|
||||||
style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
|
style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
|
||||||
>
|
>
|
||||||
<Text mt="sm" align="center" lineClamp={1} weight={550}>
|
<Text mt="sm" align="center" lineClamp={1} weight={550}>
|
||||||
@@ -127,13 +127,14 @@ export function AppShelfItem(props: any) {
|
|||||||
src={service.icon}
|
src={service.icon}
|
||||||
fit="contain"
|
fit="contain"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (service.openedUrl) window.open(service.openedUrl, '_blank');
|
if (service.openedUrl) {
|
||||||
else window.open(service.url);
|
window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
|
||||||
|
} else window.open(service.url, service.newTab === false ? '_top' : '_blank');
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</motion.i>
|
</motion.i>
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
<PingComponent url={service.url} />
|
<PingComponent url={service.url} status={service.status} />
|
||||||
</Card.Section>
|
</Card.Section>
|
||||||
</Center>
|
</Center>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -22,16 +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}
|
|
||||||
message="Save service"
|
message="Save service"
|
||||||
/>
|
/>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { useForm } from '@mantine/form';
|
|||||||
import { useConfig } from '../../tools/state';
|
import { useConfig } from '../../tools/state';
|
||||||
import { ColorSelector } from './ColorSelector';
|
import { ColorSelector } from './ColorSelector';
|
||||||
import { OpacitySelector } from './OpacitySelector';
|
import { OpacitySelector } from './OpacitySelector';
|
||||||
|
import { AppCardWidthSelector } from './AppCardWidthSelector';
|
||||||
import { ShadeSelector } from './ShadeSelector';
|
import { ShadeSelector } from './ShadeSelector';
|
||||||
|
|
||||||
export default function TitleChanger() {
|
export default function TitleChanger() {
|
||||||
@@ -58,6 +59,7 @@ export default function TitleChanger() {
|
|||||||
<ColorSelector type="secondary" />
|
<ColorSelector type="secondary" />
|
||||||
<ShadeSelector />
|
<ShadeSelector />
|
||||||
<OpacitySelector />
|
<OpacitySelector />
|
||||||
|
<AppCardWidthSelector />
|
||||||
</Group>
|
</Group>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
32
src/components/Settings/AppCardWidthSelector.tsx
Normal file
32
src/components/Settings/AppCardWidthSelector.tsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Group, Text, Slider } from '@mantine/core';
|
||||||
|
import { useConfig } from '../../tools/state';
|
||||||
|
|
||||||
|
export function AppCardWidthSelector() {
|
||||||
|
const { config, setConfig } = useConfig();
|
||||||
|
|
||||||
|
const setappCardWidth = (appCardWidth: number) => {
|
||||||
|
setConfig({
|
||||||
|
...config,
|
||||||
|
settings: {
|
||||||
|
...config.settings,
|
||||||
|
appCardWidth,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Group direction="column" spacing="xs" grow>
|
||||||
|
<Text>App Width</Text>
|
||||||
|
<Slider
|
||||||
|
label={null}
|
||||||
|
defaultValue={config.settings.appCardWidth}
|
||||||
|
step={0.2}
|
||||||
|
min={0.8}
|
||||||
|
max={2}
|
||||||
|
styles={{ markLabel: { fontSize: 'xx-small' } }}
|
||||||
|
onChange={(value) => setappCardWidth(value)}
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -29,6 +29,12 @@ export const CalendarModule: IModule = {
|
|||||||
'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
|
'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
|
||||||
icon: CalendarIcon,
|
icon: CalendarIcon,
|
||||||
component: CalendarComponent,
|
component: CalendarComponent,
|
||||||
|
options: {
|
||||||
|
sundaystart: {
|
||||||
|
name: 'Start the week on Sunday',
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function CalendarComponent(props: any) {
|
export default function CalendarComponent(props: any) {
|
||||||
@@ -62,41 +68,49 @@ export default function CalendarComponent(props: any) {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Create each Sonarr service and get the medias
|
// Create each Sonarr service and get the medias
|
||||||
const currentSonarrMedias: any[] = [...sonarrMedias];
|
const currentSonarrMedias: any[] = [];
|
||||||
Promise.all(
|
Promise.all(
|
||||||
sonarrServices.map((service) =>
|
sonarrServices.map((service) =>
|
||||||
getMedias(service, 'sonarr').then((res) => {
|
getMedias(service, 'sonarr').then((res) => {
|
||||||
currentSonarrMedias.push(...res.data);
|
currentSonarrMedias.push(...res.data);
|
||||||
|
}).catch(() => {
|
||||||
|
currentSonarrMedias.push([]);
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
).then(() => {
|
).then(() => {
|
||||||
setSonarrMedias(currentSonarrMedias);
|
setSonarrMedias(currentSonarrMedias);
|
||||||
});
|
});
|
||||||
const currentRadarrMedias: any[] = [...radarrMedias];
|
const currentRadarrMedias: any[] = [];
|
||||||
Promise.all(
|
Promise.all(
|
||||||
radarrServices.map((service) =>
|
radarrServices.map((service) =>
|
||||||
getMedias(service, 'radarr').then((res) => {
|
getMedias(service, 'radarr').then((res) => {
|
||||||
currentRadarrMedias.push(...res.data);
|
currentRadarrMedias.push(...res.data);
|
||||||
|
}).catch(() => {
|
||||||
|
currentRadarrMedias.push([]);
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
).then(() => {
|
).then(() => {
|
||||||
setRadarrMedias(currentRadarrMedias);
|
setRadarrMedias(currentRadarrMedias);
|
||||||
});
|
});
|
||||||
const currentLidarrMedias: any[] = [...lidarrMedias];
|
const currentLidarrMedias: any[] = [];
|
||||||
Promise.all(
|
Promise.all(
|
||||||
lidarrServices.map((service) =>
|
lidarrServices.map((service) =>
|
||||||
getMedias(service, 'lidarr').then((res) => {
|
getMedias(service, 'lidarr').then((res) => {
|
||||||
currentLidarrMedias.push(...res.data);
|
currentLidarrMedias.push(...res.data);
|
||||||
|
}).catch(() => {
|
||||||
|
currentLidarrMedias.push([]);
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
).then(() => {
|
).then(() => {
|
||||||
setLidarrMedias(currentLidarrMedias);
|
setLidarrMedias(currentLidarrMedias);
|
||||||
});
|
});
|
||||||
const currentReadarrMedias: any[] = [...readarrMedias];
|
const currentReadarrMedias: any[] = [];
|
||||||
Promise.all(
|
Promise.all(
|
||||||
readarrServices.map((service) =>
|
readarrServices.map((service) =>
|
||||||
getMedias(service, 'readarr').then((res) => {
|
getMedias(service, 'readarr').then((res) => {
|
||||||
currentReadarrMedias.push(...res.data);
|
currentReadarrMedias.push(...res.data);
|
||||||
|
}).catch(() => {
|
||||||
|
currentReadarrMedias.push([]);
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
).then(() => {
|
).then(() => {
|
||||||
@@ -104,8 +118,11 @@ export default function CalendarComponent(props: any) {
|
|||||||
});
|
});
|
||||||
}, [config.services]);
|
}, [config.services]);
|
||||||
|
|
||||||
|
const weekStartsAtSunday =
|
||||||
|
(config?.modules?.[CalendarModule.title]?.options?.sundaystart?.value as boolean) ?? false;
|
||||||
return (
|
return (
|
||||||
<Calendar
|
<Calendar
|
||||||
|
firstDayOfWeek={weekStartsAtSunday ? 'sunday' : 'monday'}
|
||||||
onChange={(day: any) => {}}
|
onChange={(day: any) => {}}
|
||||||
dayStyle={(date) =>
|
dayStyle={(date) =>
|
||||||
date.getDay() === today.getDay() && date.getDate() === today.getDate()
|
date.getDay() === today.getDay() && date.getDate() === today.getDate()
|
||||||
@@ -115,6 +132,13 @@ export default function CalendarComponent(props: any) {
|
|||||||
}
|
}
|
||||||
: {}
|
: {}
|
||||||
}
|
}
|
||||||
|
styles={{
|
||||||
|
calendarHeader: {
|
||||||
|
marginRight: 15,
|
||||||
|
marginLeft: 15,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
allowLevelChange={false}
|
||||||
dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
|
dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
|
||||||
renderDay={(renderdate) => (
|
renderDay={(renderdate) => (
|
||||||
<DayComponent
|
<DayComponent
|
||||||
|
|||||||
@@ -158,7 +158,7 @@ export default function DownloadComponent() {
|
|||||||
<Progress
|
<Progress
|
||||||
radius="lg"
|
radius="lg"
|
||||||
color={
|
color={
|
||||||
torrent.state === 'paused' ? 'yellow' : torrent.progress === 1 ? 'green' : 'blue'
|
torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'
|
||||||
}
|
}
|
||||||
value={torrent.progress * 100}
|
value={torrent.progress * 100}
|
||||||
size="lg"
|
size="lg"
|
||||||
|
|||||||
@@ -120,8 +120,8 @@ export function ModuleWrapper(props: any) {
|
|||||||
styles={{
|
styles={{
|
||||||
root: {
|
root: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 15,
|
top: 12,
|
||||||
right: 15,
|
right: 12,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -11,6 +11,8 @@ const service: serviceItem = {
|
|||||||
name: 'YouTube',
|
name: 'YouTube',
|
||||||
icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
|
icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
|
||||||
url: 'https://youtube.com/',
|
url: 'https://youtube.com/',
|
||||||
|
status: ['200'],
|
||||||
|
newTab: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Default = (args: any) => <PingComponent service={service} />;
|
export const Default = (args: any) => <PingComponent service={service} />;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Indicator, Tooltip } from '@mantine/core';
|
import { Indicator, Tooltip } from '@mantine/core';
|
||||||
import axios from 'axios';
|
import axios, { AxiosResponse } from 'axios';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { IconPlug as Plug } from '@tabler/icons';
|
import { IconPlug as Plug } from '@tabler/icons';
|
||||||
@@ -19,18 +19,37 @@ export default function PingComponent(props: any) {
|
|||||||
|
|
||||||
const { url }: { url: string } = props;
|
const { url }: { url: string } = props;
|
||||||
const [isOnline, setOnline] = useState<State>('loading');
|
const [isOnline, setOnline] = useState<State>('loading');
|
||||||
|
const [response, setResponse] = useState(500);
|
||||||
const exists = config.modules?.[PingModule.title]?.enabled ?? false;
|
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(() => {
|
useEffect(() => {
|
||||||
if (!exists) {
|
if (!exists) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
axios
|
axios
|
||||||
.get('/api/modules/ping', { params: { url } })
|
.get('/api/modules/ping', { params: { url } })
|
||||||
.then(() => {
|
.then((response) => {
|
||||||
setOnline('online');
|
statusCheck(response);
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch((error) => {
|
||||||
setOnline('down');
|
statusCheck(error.response);
|
||||||
});
|
});
|
||||||
}, [config.modules?.[PingModule.title]?.enabled]);
|
}, [config.modules?.[PingModule.title]?.enabled]);
|
||||||
if (!exists) {
|
if (!exists) {
|
||||||
@@ -40,7 +59,7 @@ export default function PingComponent(props: any) {
|
|||||||
<Tooltip
|
<Tooltip
|
||||||
radius="lg"
|
radius="lg"
|
||||||
style={{ position: 'absolute', bottom: 20, right: 20 }}
|
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
|
<motion.div
|
||||||
animate={{
|
animate={{
|
||||||
|
|||||||
@@ -44,7 +44,10 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
// Get the origin URL
|
// Get the origin URL
|
||||||
const { origin } = new URL(service.url);
|
var { href: origin } = new URL(service.url);
|
||||||
|
if (origin.endsWith("/")) {
|
||||||
|
origin = origin.slice(0, -1)
|
||||||
|
}
|
||||||
const pined = `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`;
|
const pined = `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`;
|
||||||
const data = await axios.get(
|
const data = await axios.get(
|
||||||
`${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`
|
`${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
|
|||||||
...(
|
...(
|
||||||
await new Deluge({
|
await new Deluge({
|
||||||
baseUrl: delugeService.url,
|
baseUrl: delugeService.url,
|
||||||
password: delugeService.password,
|
password: 'password' in delugeService ? delugeService.password : '',
|
||||||
}).getAllData()
|
}).getAllData()
|
||||||
).torrents
|
).torrents
|
||||||
);
|
);
|
||||||
@@ -49,7 +49,7 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
|
|||||||
await new Transmission({
|
await new Transmission({
|
||||||
baseUrl: transmissionService.url,
|
baseUrl: transmissionService.url,
|
||||||
username: transmissionService.username,
|
username: transmissionService.username,
|
||||||
password: transmissionService.password,
|
password: 'password' in transmissionService ? transmissionService.password : '',
|
||||||
}).getAllData()
|
}).getAllData()
|
||||||
).torrents
|
).torrents
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -7,10 +7,14 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
|
|||||||
await axios
|
await axios
|
||||||
.get(url as string)
|
.get(url as string)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
res.status(200).json(response.data);
|
res.status(response.status).json(response.statusText);
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
res.status(500).json(error);
|
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);
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ export interface Settings {
|
|||||||
background?: string;
|
background?: string;
|
||||||
appOpacity?: number;
|
appOpacity?: number;
|
||||||
widgetPosition?: string;
|
widgetPosition?: string;
|
||||||
|
appCardWidth?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Config {
|
export interface Config {
|
||||||
@@ -31,6 +32,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 = [
|
export const ServiceTypeList = [
|
||||||
'Other',
|
'Other',
|
||||||
'Emby',
|
'Emby',
|
||||||
@@ -66,4 +93,6 @@ export interface serviceItem {
|
|||||||
password?: string;
|
password?: string;
|
||||||
username?: string;
|
username?: string;
|
||||||
openedUrl?: string;
|
openedUrl?: string;
|
||||||
|
newTab?: boolean;
|
||||||
|
status?: string[];
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user