🏗️ 💥 Change the whole folder structure.
Now using src as a subfolder to the source files
This commit is contained in:
Aj - Thomas
210
src/components/AppShelf/AddAppShelfItem.tsx
Normal file
210
src/components/AppShelf/AddAppShelfItem.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
import {
|
||||
Modal,
|
||||
Center,
|
||||
Group,
|
||||
TextInput,
|
||||
Image,
|
||||
Button,
|
||||
Select,
|
||||
AspectRatio,
|
||||
Text,
|
||||
Card,
|
||||
LoadingOverlay,
|
||||
} from '@mantine/core';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
import { Apps } from 'tabler-icons-react';
|
||||
import { useConfig } from '../../tools/state';
|
||||
import { ServiceTypeList } from '../../tools/types';
|
||||
import { AppShelfItemWrapper } from './AppShelfItemWrapper';
|
||||
|
||||
export default function AddItemShelfItem(props: any) {
|
||||
const [opened, setOpened] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
size="xl"
|
||||
radius="lg"
|
||||
opened={props.opened || opened}
|
||||
onClose={() => setOpened(false)}
|
||||
title="Add a service"
|
||||
>
|
||||
<AddAppShelfItemForm setOpened={setOpened} />
|
||||
</Modal>
|
||||
<AppShelfItemWrapper>
|
||||
<Card.Section>
|
||||
<Group position="center" mx="lg">
|
||||
<Text
|
||||
// TODO: #1 Remove this hack to get the text to be centered.
|
||||
ml={15}
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
alignContent: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
justifyItems: 'center',
|
||||
}}
|
||||
mt="sm"
|
||||
weight={500}
|
||||
>
|
||||
Add a service
|
||||
</Text>
|
||||
</Group>
|
||||
</Card.Section>
|
||||
<Card.Section>
|
||||
<AspectRatio ratio={5 / 3} m="xl">
|
||||
<motion.i
|
||||
whileHover={{
|
||||
cursor: 'pointer',
|
||||
scale: 1.1,
|
||||
}}
|
||||
>
|
||||
<Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
|
||||
</motion.i>
|
||||
</AspectRatio>
|
||||
</Card.Section>
|
||||
</AppShelfItemWrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function MatchIcon(name: string, form: any) {
|
||||
fetch(
|
||||
`https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
|
||||
.replace(/\s+/g, '-')
|
||||
.toLowerCase()}.png`
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
form.setFieldValue('icon', res.url);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Do nothing
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
|
||||
const { setOpened } = props;
|
||||
const { config, setConfig } = useConfig();
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
initialValues: {
|
||||
type: props.type ?? 'Other',
|
||||
name: props.name ?? '',
|
||||
icon: props.icon ?? '',
|
||||
url: props.url ?? '',
|
||||
apiKey: props.apiKey ?? (undefined as unknown as string),
|
||||
},
|
||||
validate: {
|
||||
apiKey: () => null,
|
||||
// Validate icon with a regex
|
||||
icon: (value: string) => {
|
||||
if (!value.match(/^https?:\/\/.+\.(png|jpg|jpeg|gif)$/)) {
|
||||
return 'Please enter a valid icon URL';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
// Validate url with a regex http/https
|
||||
url: (value: string) => {
|
||||
if (!value.match(/^https?:\/\/.+\/$/)) {
|
||||
return 'Please enter a valid URL (that ends with a /)';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Center>
|
||||
<Image height={120} width={120} src={form.values.icon} alt="Placeholder" withPlaceholder />
|
||||
</Center>
|
||||
<form
|
||||
onSubmit={form.onSubmit(() => {
|
||||
// If service already exists, update it.
|
||||
if (config.services && config.services.find((s) => s.name === form.values.name)) {
|
||||
setConfig({
|
||||
...config,
|
||||
services: config.services.map((s) => {
|
||||
if (s.name === form.values.name) {
|
||||
return {
|
||||
...form.values,
|
||||
};
|
||||
}
|
||||
return s;
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
setConfig({
|
||||
...config,
|
||||
services: [...config.services, 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);
|
||||
const match = MatchIcon(event.currentTarget.value, form);
|
||||
if (match) {
|
||||
form.setFieldValue('icon', match);
|
||||
}
|
||||
}}
|
||||
error={form.errors.name && 'Invalid icon url'}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
required
|
||||
label="Icon url"
|
||||
placeholder="https://i.gifer.com/ANPC.gif"
|
||||
{...form.getInputProps('icon')}
|
||||
/>
|
||||
<TextInput
|
||||
required
|
||||
label="Service url"
|
||||
placeholder="http://localhost:8989"
|
||||
{...form.getInputProps('url')}
|
||||
/>
|
||||
<Select
|
||||
label="Select the type of service (used for API calls)"
|
||||
defaultValue="Other"
|
||||
placeholder="Pick one"
|
||||
required
|
||||
searchable
|
||||
data={ServiceTypeList}
|
||||
{...form.getInputProps('type')}
|
||||
/>
|
||||
<LoadingOverlay visible={isLoading} />
|
||||
{(form.values.type === 'Sonarr' || form.values.type === 'Radarr') && (
|
||||
<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'}
|
||||
/>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
<Group grow position="center" mt="xl">
|
||||
<Button type="submit">{props.message ?? 'Add service'}</Button>
|
||||
</Group>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
18
src/components/AppShelf/AppShelf.story.tsx
Normal file
18
src/components/AppShelf/AppShelf.story.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import AppShelf, { AppShelfItem } from './AppShelf';
|
||||
|
||||
export default {
|
||||
title: 'Item Shelf',
|
||||
component: AppShelf,
|
||||
args: {
|
||||
service: {
|
||||
name: 'qBittorrent',
|
||||
url: 'http://',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/qBittorrent/icon.png',
|
||||
type: 'qBittorrent',
|
||||
apiKey: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = (args: any) => <AppShelf {...args} />;
|
||||
export const One = (args: any) => <AppShelfItem {...args} />;
|
||||
93
src/components/AppShelf/AppShelf.tsx
Normal file
93
src/components/AppShelf/AppShelf.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Text, AspectRatio, SimpleGrid, Card, Image, Group, Space } from '@mantine/core';
|
||||
import { useConfig } from '../../tools/state';
|
||||
import { serviceItem } from '../../tools/types';
|
||||
import AddItemShelfItem from './AddAppShelfItem';
|
||||
import { AppShelfItemWrapper } from './AppShelfItemWrapper';
|
||||
import AppShelfMenu from './AppShelfMenu';
|
||||
|
||||
const AppShelf = () => {
|
||||
const { config } = useConfig();
|
||||
|
||||
return (
|
||||
<SimpleGrid m="xl" cols={5} spacing="xl">
|
||||
{config.services.map((service) => (
|
||||
<AppShelfItem key={service.name} service={service} />
|
||||
))}
|
||||
<AddItemShelfItem />
|
||||
</SimpleGrid>
|
||||
);
|
||||
};
|
||||
|
||||
export function AppShelfItem(props: any) {
|
||||
const { service }: { service: serviceItem } = props;
|
||||
const [hovering, setHovering] = useState(false);
|
||||
return (
|
||||
<motion.div
|
||||
key={service.name}
|
||||
onHoverStart={() => {
|
||||
setHovering(true);
|
||||
}}
|
||||
onHoverEnd={() => {
|
||||
setHovering(false);
|
||||
}}
|
||||
>
|
||||
<AppShelfItemWrapper hovering={hovering}>
|
||||
<Card.Section>
|
||||
<Group position="apart" mx="lg">
|
||||
<Space />
|
||||
<Text
|
||||
// TODO: #1 Remove this hack to get the text to be centered.
|
||||
ml={15}
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
alignContent: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
justifyItems: 'center',
|
||||
}}
|
||||
mt="sm"
|
||||
weight={500}
|
||||
>
|
||||
{service.name}
|
||||
</Text>
|
||||
<motion.div
|
||||
style={{
|
||||
alignSelf: 'flex-end',
|
||||
}}
|
||||
animate={{
|
||||
opacity: hovering ? 1 : 0,
|
||||
}}
|
||||
>
|
||||
<AppShelfMenu service={service} />
|
||||
</motion.div>
|
||||
</Group>
|
||||
</Card.Section>
|
||||
<Card.Section>
|
||||
<AspectRatio ratio={5 / 3} m="xl">
|
||||
<motion.i
|
||||
whileHover={{
|
||||
cursor: 'pointer',
|
||||
scale: 1.1,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
onClick={() => {
|
||||
window.open(service.url);
|
||||
}}
|
||||
style={{
|
||||
maxWidth: '50%',
|
||||
marginBottom: 10,
|
||||
}}
|
||||
src={service.icon}
|
||||
/>
|
||||
</motion.i>
|
||||
</AspectRatio>
|
||||
</Card.Section>
|
||||
</AppShelfItemWrapper>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AppShelf;
|
||||
21
src/components/AppShelf/AppShelfItemWrapper.tsx
Normal file
21
src/components/AppShelf/AppShelfItemWrapper.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { useMantineTheme, Card } from '@mantine/core';
|
||||
|
||||
export function AppShelfItemWrapper(props: any) {
|
||||
const { children, hovering } = props;
|
||||
const theme = useMantineTheme();
|
||||
return (
|
||||
<Card
|
||||
style={{
|
||||
boxShadow: hovering ? '0px 0px 3px rgba(0, 0, 0, 0.5)' : '0px 0px 1px rgba(0, 0, 0, 0.5)',
|
||||
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
|
||||
|
||||
//TODO: #3 Fix this temporary fix and make the width and height dynamic / responsive
|
||||
width: 200,
|
||||
height: 180,
|
||||
}}
|
||||
radius="md"
|
||||
>
|
||||
{children}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
68
src/components/AppShelf/AppShelfMenu.tsx
Normal file
68
src/components/AppShelf/AppShelfMenu.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import { Menu, Modal, Text } from '@mantine/core';
|
||||
import { showNotification } from '@mantine/notifications';
|
||||
import { useState } from 'react';
|
||||
import { Check, Edit, Trash } from 'tabler-icons-react';
|
||||
import { useConfig } from '../../tools/state';
|
||||
import { AddAppShelfItemForm } from './AddAppShelfItem';
|
||||
|
||||
export default function AppShelfMenu(props: any) {
|
||||
const { service } = props;
|
||||
const { config, setConfig } = useConfig();
|
||||
const [opened, setOpened] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
size="xl"
|
||||
radius="lg"
|
||||
opened={props.opened || opened}
|
||||
onClose={() => setOpened(false)}
|
||||
title="Modify a service"
|
||||
>
|
||||
<AddAppShelfItemForm
|
||||
setOpened={setOpened}
|
||||
name={service.name}
|
||||
type={service.type}
|
||||
url={service.url}
|
||||
icon={service.icon}
|
||||
apiKey={service.apiKey}
|
||||
message="Save service"
|
||||
/>
|
||||
</Modal>
|
||||
<Menu position="right">
|
||||
<Menu.Label>Settings</Menu.Label>
|
||||
<Menu.Item
|
||||
color="primary"
|
||||
icon={<Edit size={14} />}
|
||||
// TODO: #2 Add the ability to edit the service.
|
||||
onClick={() => setOpened(true)}
|
||||
>
|
||||
Edit
|
||||
</Menu.Item>
|
||||
<Menu.Label>Danger zone</Menu.Label>
|
||||
<Menu.Item
|
||||
color="red"
|
||||
onClick={(e: any) => {
|
||||
setConfig({
|
||||
...config,
|
||||
services: config.services.filter((s) => s.name !== service.name),
|
||||
});
|
||||
showNotification({
|
||||
autoClose: 5000,
|
||||
title: (
|
||||
<Text>
|
||||
Service <b>{service.name}</b> removed successfully
|
||||
</Text>
|
||||
),
|
||||
color: 'green',
|
||||
icon: <Check />,
|
||||
message: undefined,
|
||||
});
|
||||
}}
|
||||
icon={<Trash size={14} />}
|
||||
>
|
||||
Delete
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user