mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-01 11:06:02 +01:00
Update AppShelf
This commit is contained in:
Aj - Thomas
127
components/AppShelf/AddAppShelfItem.tsx
Normal file
127
components/AppShelf/AddAppShelfItem.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import {
|
||||
useMantineTheme,
|
||||
Modal,
|
||||
Paper,
|
||||
Center,
|
||||
Group,
|
||||
TextInput,
|
||||
Image,
|
||||
Button,
|
||||
Select,
|
||||
AspectRatio,
|
||||
Box,
|
||||
Text,
|
||||
Grid,
|
||||
} from '@mantine/core';
|
||||
import { useForm } from '@mantine/hooks';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
import { Apps } from 'tabler-icons-react';
|
||||
import { ServiceTypes } from './AppShelf.d';
|
||||
|
||||
export default function AddItemShelfItem(props: any) {
|
||||
const { additem: addItem } = props;
|
||||
const [opened, setOpened] = useState(false);
|
||||
const theme = useMantineTheme();
|
||||
const form = useForm({
|
||||
initialValues: {
|
||||
type: 'Other',
|
||||
name: '',
|
||||
icon: '',
|
||||
url: '',
|
||||
},
|
||||
|
||||
validationRules: {},
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<Modal size={'xl'} opened={opened} onClose={() => setOpened(false)} title="Add a service">
|
||||
<Paper radius="md" p="xl" withBorder {...props}>
|
||||
<Center>
|
||||
<Image
|
||||
height={120}
|
||||
width={120}
|
||||
src={form.values.icon}
|
||||
alt="Placeholder"
|
||||
withPlaceholder
|
||||
/>
|
||||
</Center>
|
||||
<form
|
||||
onSubmit={form.onSubmit(() => {
|
||||
addItem(form.values);
|
||||
setOpened(false);
|
||||
})}
|
||||
>
|
||||
<Group direction="column" grow>
|
||||
<TextInput
|
||||
required
|
||||
label="Service name"
|
||||
placeholder="Plex"
|
||||
value={form.values.name}
|
||||
onChange={(event) => form.setFieldValue('name', event.currentTarget.value)}
|
||||
error={form.errors.name && 'Invalid name'}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
required
|
||||
label="Icon url"
|
||||
placeholder="https://i.gifer.com/ANPC.gif"
|
||||
value={form.values.icon}
|
||||
onChange={(event) => {
|
||||
form.setFieldValue('icon', event.currentTarget.value);
|
||||
}}
|
||||
error={form.errors.icon && 'Icon url is invalid'}
|
||||
/>
|
||||
<TextInput
|
||||
required
|
||||
label="Service url"
|
||||
placeholder="http://localhost:8989"
|
||||
value={form.values.url}
|
||||
onChange={(event) => form.setFieldValue('url', event.currentTarget.value)}
|
||||
error={form.errors.icon && 'Icon url is invalid'}
|
||||
/>
|
||||
<Select
|
||||
label="Select the type of service (used for API calls)"
|
||||
defaultValue={'Other'}
|
||||
placeholder="Pick one"
|
||||
value={form.values.type}
|
||||
required
|
||||
searchable
|
||||
onChange={(value) => form.setFieldValue('type', value ?? 'Other')}
|
||||
data={ServiceTypes}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<Group grow position="center" mt="xl">
|
||||
<Button type="submit">Add service</Button>
|
||||
</Group>
|
||||
</form>
|
||||
</Paper>
|
||||
</Modal>
|
||||
<Grid.Col span={4} lg={2} sm={3}>
|
||||
<AspectRatio ratio={4 / 3}>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor:
|
||||
theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
|
||||
textAlign: 'center',
|
||||
padding: theme.spacing.xl,
|
||||
borderRadius: theme.radius.md,
|
||||
'&:hover': {
|
||||
backgroundColor:
|
||||
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Group direction="column" position="center">
|
||||
<motion.div whileHover={{ scale: 1.2 }}>
|
||||
<Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
|
||||
</motion.div>
|
||||
<Text>Add Service</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
</AspectRatio>
|
||||
</Grid.Col>
|
||||
</>
|
||||
);
|
||||
}
|
||||
15
components/AppShelf/AppShelf.d.ts
vendored
Normal file
15
components/AppShelf/AppShelf.d.ts
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
export const ServiceTypes = [
|
||||
'Other',
|
||||
'Sonarr',
|
||||
'Radarr',
|
||||
'Lidarr',
|
||||
'Plex',
|
||||
'Emby',
|
||||
]
|
||||
|
||||
export interface serviceItem {
|
||||
name: string;
|
||||
type: ServiceTypes;
|
||||
url: string;
|
||||
icon: string;
|
||||
}
|
||||
@@ -1,32 +1,49 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
ActionIcon,
|
||||
createStyles,
|
||||
Grid,
|
||||
Group,
|
||||
Text,
|
||||
Title,
|
||||
Paper,
|
||||
Tooltip,
|
||||
Image,
|
||||
ThemeIcon,
|
||||
useMantineTheme,
|
||||
Anchor,
|
||||
Box,
|
||||
Menu,
|
||||
AspectRatio,
|
||||
} from '@mantine/core';
|
||||
import { ArrowBack, Trash } from 'tabler-icons-react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Grid, Group, Text, Image, Anchor, Box, AspectRatio, createStyles } from '@mantine/core';
|
||||
import { serviceItem } from './AppShelf.d';
|
||||
import AppShelfMenu from './AppShelfMenu';
|
||||
import AddItemShelfItem from './AddAppShelfItem';
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
main: {
|
||||
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
|
||||
textAlign: 'center',
|
||||
padding: theme.spacing.xl,
|
||||
borderRadius: theme.radius.md,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const AppShelf = () => {
|
||||
const Services = loadServices();
|
||||
const [services, setServices] = useState<serviceItem[]>([]);
|
||||
const { classes } = useStyles();
|
||||
const [hovering, setHovering] = useState('none');
|
||||
const theme = useMantineTheme();
|
||||
|
||||
useEffect(() => {
|
||||
const localServices: serviceItem[] = JSON.parse(localStorage.getItem('services') || '[]');
|
||||
if (localServices) {
|
||||
setServices(localServices);
|
||||
}
|
||||
}, []);
|
||||
|
||||
function addItem(item: serviceItem) {
|
||||
setServices([...services, item]);
|
||||
localStorage.setItem('services', JSON.stringify([...services, item]));
|
||||
}
|
||||
|
||||
function removeItem(item: serviceItem) {
|
||||
setServices(services.filter((s) => s.url !== item.url));
|
||||
localStorage.setItem('services', JSON.stringify(services.filter((s) => s.url !== item.url)));
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid m={'xl'} gutter={'xl'}>
|
||||
{Services.map((service, i) => (
|
||||
<Grid.Col span={4} lg={2} sm={3} key={i}>
|
||||
{services.map((service, i) => (
|
||||
<Grid.Col lg={2} sm={3} key={i}>
|
||||
<motion.div
|
||||
onHoverStart={(e) => {
|
||||
setHovering(service.name);
|
||||
@@ -36,34 +53,14 @@ const AppShelf = () => {
|
||||
}}
|
||||
>
|
||||
<AspectRatio ratio={4 / 3}>
|
||||
<Box
|
||||
sx={(theme) => ({
|
||||
backgroundColor:
|
||||
theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
|
||||
textAlign: 'center',
|
||||
padding: theme.spacing.xl,
|
||||
borderRadius: theme.radius.md,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor:
|
||||
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
|
||||
},
|
||||
})}
|
||||
>
|
||||
<motion.div animate={{opacity: hovering == service.name ? 1 : 0}}>
|
||||
<Menu sx={{ position: 'absolute', top: 3, right: 3 }}>
|
||||
<Menu.Label>Settings</Menu.Label>
|
||||
|
||||
<Menu.Label>Danger zone</Menu.Label>
|
||||
<Menu.Item color="red" icon={<Trash size={14} />}>
|
||||
Delete
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
<Box className={classes.main}>
|
||||
<motion.div animate={{ opacity: hovering == service.name ? 1 : 0 }}>
|
||||
<AppShelfMenu removeitem={removeItem} name={service.name} />
|
||||
</motion.div>
|
||||
<Group position="center">
|
||||
<Group direction="column" position="center">
|
||||
<Anchor href={service.url} target="_blank">
|
||||
<motion.div whileHover={{ scale: 1.2 }}>
|
||||
<Image height={60} src={service.icon} alt={service.name} />
|
||||
<Image style={{ maxWidth: 60 }} src={service.icon} alt={service.name} />
|
||||
</motion.div>
|
||||
</Anchor>
|
||||
<Text>{service.name}</Text>
|
||||
@@ -73,62 +70,75 @@ const AppShelf = () => {
|
||||
</motion.div>
|
||||
</Grid.Col>
|
||||
))}
|
||||
<AddItemShelfItem additem={addItem} />
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppShelf;
|
||||
function loadServices() {
|
||||
return [
|
||||
|
||||
const MockServices = [
|
||||
{
|
||||
name: 'Radarr',
|
||||
type: 'Radarr',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Radarr/icon.png',
|
||||
url: 'http://server:7878/',
|
||||
},
|
||||
{
|
||||
name: 'Sonarr',
|
||||
type: 'Sonarr',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
|
||||
url: 'http://server:8989/',
|
||||
},
|
||||
{
|
||||
name: 'Sonarr',
|
||||
type: 'Sonarr',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
|
||||
url: 'http://server:8989/',
|
||||
},
|
||||
{
|
||||
name: 'Sonarr',
|
||||
type: 'Sonarr',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
|
||||
url: 'http://server:8989/',
|
||||
},
|
||||
{
|
||||
name: 'Sonarr',
|
||||
type: 'Sonarr',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
|
||||
url: 'http://server:8989/',
|
||||
},
|
||||
{
|
||||
name: 'Sonarr',
|
||||
type: 'Sonarr',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
|
||||
url: 'http://server:8989/',
|
||||
},
|
||||
{
|
||||
name: 'Sonarr',
|
||||
type: 'Sonarr',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
|
||||
url: 'http://server:8989/',
|
||||
},
|
||||
];
|
||||
|
||||
function saveLocal(arg0: any) {
|
||||
// localStorage.setItem('services', JSON.stringify(arg0));
|
||||
console.log(`saving ${arg0}`);
|
||||
}
|
||||
|
||||
function loadLocal(arg0: string) {
|
||||
const local = localStorage.getItem(arg0);
|
||||
if (local) {
|
||||
return JSON.parse(local);
|
||||
}
|
||||
return [
|
||||
...MockServices,
|
||||
{
|
||||
name: 'Sonarr',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
|
||||
url: 'http://server:8989/',
|
||||
},
|
||||
{
|
||||
name: 'Sonarr',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
|
||||
url: 'http://server:8989/',
|
||||
},
|
||||
{
|
||||
name: 'Sonarr',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
|
||||
url: 'http://server:8989/',
|
||||
name: 'Radarr',
|
||||
type: 'Radarr',
|
||||
icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Radarr/icon.png',
|
||||
url: 'http://server:7878/',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
34
components/AppShelf/AppShelfMenu.tsx
Normal file
34
components/AppShelf/AppShelfMenu.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { Menu, Text } from '@mantine/core';
|
||||
import { showNotification } from '@mantine/notifications';
|
||||
import { Check, Trash } from 'tabler-icons-react';
|
||||
|
||||
export default function AppShelfMenu(props: any) {
|
||||
const { name, removeitem: removeItem } = props;
|
||||
return (
|
||||
<Menu sx={{ position: 'absolute', top: 3, right: 3 }}>
|
||||
<Menu.Label>Settings</Menu.Label>
|
||||
|
||||
<Menu.Label>Danger zone</Menu.Label>
|
||||
<Menu.Item
|
||||
color="red"
|
||||
onClick={(e: any) => {
|
||||
removeItem(name);
|
||||
showNotification({
|
||||
autoClose: 5000,
|
||||
title: (
|
||||
<Text>
|
||||
Service <b>{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