Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-08 22:45:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into weather-module

Browse Source
This commit is contained in:
Thomas Camlong
2022-05-18 22:14:01 +02:00
committed by GitHub
parent 4870ea3e40 119f2d7e51
commit ba8e9ef63c
9 changed files with 200 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@@ -20,6 +20,7 @@ module.exports = {
},
rules: {
'react/react-in-jsx-scope': 'off',
'react/no-children-prop': 'off',
"unused-imports/no-unused-imports": "warn",
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/no-unused-imports": "off",

7
README.md
View File

@@ -39,6 +39,7 @@
- [📊 Modules](#-modules)
- [🔍 Search Bar](#-search-bar)
- [💖 Contributing](#-contributing)
- [🍏 Request Icons](#-request-icons)
<!-- Getting Started -->
@@ -192,3 +193,9 @@ The Search Bar will open any Search Query after the Query URL you've specified i
All contributions are highly appreciated.
**[⤴️ Back to Top](#-table-of-contents)**
## 🍏 Request Icons
The icons used in Homarr are automatically requested from the [dashboard-icons](https://github.com/walkxhub/dashboard-icons) repo. You can make a icon request by creating an [issue](https://github.com/walkxhub/dashboard-icons/issues/new/choose).
**[⤴️ Back to Top](#-table-of-contents)**

4
src/components/AppShelf/AppShelf.tsx
View File

@@ -52,8 +52,8 @@ export function AppShelfItem(props: any) {
<motion.div
style={{
position: 'absolute',
top: 5,
right: 5,
top: 15,
right: 15,
alignSelf: 'flex-end',
}}
animate={{

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

@@ -1,4 +1,4 @@
import { Menu, Modal, Text } from '@mantine/core';
import { Menu, Modal, Text, useMantineTheme } from '@mantine/core';
import { showNotification } from '@mantine/notifications';
import { useState } from 'react';
import { Check, Edit, Trash } from 'tabler-icons-react';
@@ -8,12 +8,13 @@ import { AddAppShelfItemForm } from './AddAppShelfItem';
export default function AppShelfMenu(props: any) {
const { service } = props;
const { config, setConfig } = useConfig();
const theme = useMantineTheme();
const [opened, setOpened] = useState(false);
return (
<>
<Modal
size="xl"
radius="lg"
radius="md"
opened={props.opened || opened}
onClose={() => setOpened(false)}
title="Modify a service"
@@ -28,7 +29,16 @@ export default function AppShelfMenu(props: any) {
message="Save service"
/>
</Modal>
<Menu position="right">
<Menu
position="right"
radius="md"
styles={{
body: {
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
},
}}
>
<Menu.Label>Settings</Menu.Label>
<Menu.Item
color="primary"

37
src/components/Settings/SettingsMenu.tsx
View File

@@ -6,14 +6,11 @@ import {
Text,
Tooltip,
SegmentedControl,
Indicator,
Alert,
TextInput,
} from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';
import { useEffect, useState } from 'react';
import { AlertCircle, Settings as SettingsIcon } from 'tabler-icons-react';
import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
import { useState } from 'react';
import { Settings as SettingsIcon } from 'tabler-icons-react';
import { useConfig } from '../../tools/state';
import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
import ConfigChanger from '../Config/ConfigChanger';
@@ -39,14 +36,6 @@ function SettingsMenu(props: any) {
return (
<Group direction="column" grow>
<Alert
icon={<AlertCircle size={16} />}
title="Update available"
radius="lg"
hidden={current === latest}
>
Version {latest} is available. Current: {current}
</Alert>
<Group grow direction="column" spacing={0}>
<Text>Search engine</Text>
<SegmentedControl
@@ -108,20 +97,7 @@ function SettingsMenu(props: any) {
}
export function SettingsMenuButton(props: any) {
const [update, setUpdate] = useState(false);
const [opened, setOpened] = useState(false);
const [latestVersion, setLatestVersion] = useState(CURRENT_VERSION);
useEffect(() => {
// Fetch Data here when component first mounted
fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
res.json().then((data) => {
setLatestVersion(data.tag_name);
if (data.tag_name !== CURRENT_VERSION) {
setUpdate(true);
}
});
});
}, []);
return (
<>
<Modal
@@ -131,7 +107,7 @@ export function SettingsMenuButton(props: any) {
opened={props.opened || opened}
onClose={() => setOpened(false)}
>
<SettingsMenu current={CURRENT_VERSION} latest={latestVersion} />
<SettingsMenu />
</Modal>
<ActionIcon
variant="default"
@@ -142,14 +118,7 @@ export function SettingsMenuButton(props: any) {
onClick={() => setOpened(true)}
>
<Tooltip label="Settings">
<Indicator
size={12}
disabled={CURRENT_VERSION === latestVersion}
offset={-3}
position="top-end"
>
<SettingsIcon />
</Indicator>
</Tooltip>
</ActionIcon>
</>

60
src/components/layout/Footer.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import {
createStyles,
Anchor,
@@ -6,9 +6,11 @@ import {
Group,
ActionIcon,
Footer as FooterComponent,
Alert,
useMantineTheme,
} from '@mantine/core';
import { BrandGithub } from 'tabler-icons-react';
import { CURRENT_VERSION } from '../../../data/constants';
import { AlertCircle, BrandGithub } from 'tabler-icons-react';
import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
const useStyles = createStyles((theme) => ({
footer: {
@@ -41,6 +43,8 @@ interface FooterCenteredProps {
}
export function Footer({ links }: FooterCenteredProps) {
const [update, setUpdate] = useState(false);
const theme = useMantineTheme();
const { classes } = useStyles();
const items = links.map((link) => (
<Anchor<'a'>
@@ -55,13 +59,58 @@ export function Footer({ links }: FooterCenteredProps) {
</Anchor>
));
const [latestVersion, setLatestVersion] = useState(CURRENT_VERSION);
const [isOpen, setOpen] = useState(true);
useEffect(() => {
// Fetch Data here when component first mounted
fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
res.json().then((data) => {
setLatestVersion(data.tag_name);
if (data.tag_name !== CURRENT_VERSION) {
setUpdate(true);
}
});
});
}, []);
return (
<FooterComponent
p={5}
height="auto"
style={{ border: 'none', position: 'fixed', bottom: 0, right: 0 }}
style={{
background: 'none',
border: 'none',
clear: 'both',
position: 'fixed',
bottom: '0',
left: '0',
}}
>
<Group position="right" mr="xs" mb="xs">
<Group position="apart" direction="row" style={{ alignItems: 'end' }} mr="xs" mb="xs">
<Group position="left">
<Alert
// onClick open latest release page
onClose={() => setOpen(false)}
icon={<AlertCircle size={16} />}
title={`Updated version: ${latestVersion} is available. Current version: ${CURRENT_VERSION}`}
withCloseButton
radius="lg"
hidden={CURRENT_VERSION === latestVersion || !isOpen}
variant="outline"
styles={{
root: {
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
},
closeButton: {
marginLeft: '5px',
},
}}
children={undefined}
/>
</Group>
<Group position="right">
<Group spacing={0}>
<ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
<BrandGithub size={18} />
@@ -92,6 +141,7 @@ export function Footer({ links }: FooterCenteredProps) {
</Anchor>
</Text>
</Group>
</Group>
</FooterComponent>
);
}

33
src/components/modules/date/DateModule.tsx
View File

@@ -2,6 +2,7 @@ import { Group, Text, Title } from '@mantine/core';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { Clock } from 'tabler-icons-react';
import { useConfig } from '../../../tools/state';
import { IModule } from '../modules';
export const DateModule: IModule = {
@@ -9,33 +10,39 @@ export const DateModule: IModule = {
description: 'Show the current time and date in a card',
icon: Clock,
component: DateComponent,
options: {
full: {
name: 'Display full time (24-hour)',
value: true,
},
},
};
export default function DateComponent(props: any) {
const [date, setDate] = useState(new Date());
const { config } = useConfig();
const hours = date.getHours();
const minutes = date.getMinutes();
const fullSetting = config.settings[`${DateModule.title}.full`];
// Change date on minute change
// Note: Using 10 000ms instead of 1000ms to chill a little :)
useEffect(() => {
setInterval(() => {
setDate(new Date());
}, 10000);
}, 1000 * 60);
}, []);
const timeString = `${hours < 10 ? `0${hours}` : hours}:${
minutes < 10 ? `0${minutes}` : minutes
}`;
const halfTimeString = `${hours < 10 ? `${hours % 12}` : hours % 12}:${
minutes < 10 ? `0${minutes}` : minutes
} ${hours < 12 ? 'AM' : 'PM'}`;
const finalTimeString = fullSetting ? timeString : halfTimeString;
return (
<Group direction="column">
<Title>
{hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes}
</Title>
<Text size="xl">
{
// Use dayjs to format the date
// https://day.js.org/en/getting-started/installation/
dayjs(date).format('dddd, MMMM D')
}
</Text>
<Group p="sm" direction="column">
<Title>{finalTimeString}</Title>
<Text size="xl">{dayjs(date).format('dddd, MMMM D')}</Text>
</Group>
);
}

67
src/components/modules/moduleWrapper.tsx
View File

@@ -1,19 +1,82 @@
import { Card, useMantineTheme } from '@mantine/core';
import { Card, Menu, Switch, useMantineTheme } from '@mantine/core';
import { useConfig } from '../../tools/state';
import { IModule } from './modules';
export function ModuleWrapper(props: any) {
const { module }: { module: IModule } = props;
const { config } = useConfig();
const { config, setConfig } = useConfig();
const enabledModules = config.settings.enabledModules ?? [];
// Remove 'Module' from enabled modules titles
const isShown = enabledModules.includes(module.title);
const theme = useMantineTheme();
const items: JSX.Element[] = [];
if (module.options) {
const keys = Object.keys(module.options);
const values = Object.values(module.options);
// Get the value and the name of the option
const types = values.map((v) => typeof v.value);
// Loop over all the types with a for each loop
types.forEach((type, index) => {
const optionName = `${module.title}.${keys[index]}`;
// TODO: Add support for other types
if (type === 'boolean') {
items.push(
<Switch
defaultChecked={
// Set default checked to the value of the option if it exists
config.settings[optionName] ??
(module.options && module.options[keys[index]].value) ??
false
}
defaultValue={config.settings[optionName] ?? false}
key={keys[index]}
onClick={(e) => {
setConfig({
...config,
settings: {
...config.settings,
enabledModules: [...config.settings.enabledModules],
[optionName]: e.currentTarget.checked,
},
});
}}
label={values[index].name}
/>
);
}
});
}
// Sussy baka
if (!isShown) {
return null;
}
return (
<Card hidden={!isShown} mx="sm" withBorder radius="lg" shadow="sm">
{module.options && (
<Menu
size="md"
shadow="xl"
closeOnItemClick={false}
radius="md"
position="left"
styles={{
root: {
position: 'absolute',
top: 15,
right: 15,
},
body: {
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
},
}}
>
<Menu.Label>Settings</Menu.Label>
{items.map((item) => (
<Menu.Item key={item.key}>{item}</Menu.Item>
))}
</Menu>
)}
<module.component />
</Card>
);

13
src/components/modules/modules.tsx
View File

@@ -6,6 +6,15 @@ export interface IModule {
title: string;
description: string;
icon: React.ReactNode;
component: (args: any) => JSX.Element | null;
props?: any;
component: React.ComponentType;
options?: Option;
}
interface Option {
[x: string]: OptionValues;
}
interface OptionValues {
name: string;
value: boolean;
}