Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-15 17:56:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #25 from ajnart/dev

Browse Source 
Merge dev into master
This commit is contained in:
Aj - Thomas
2022-05-09 22:08:16 +02:00
committed by GitHub
parent 6dc114a42b 7be22833b0
commit 8f71c898a2
6 changed files with 130 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/ColorSchemeToggle/ColorSchemeSwitch.tsx Normal file
View File

@@ -0,0 +1,45 @@
import React from 'react';
import { createStyles, Switch, Group, useMantineColorScheme } from '@mantine/core';
import { Sun, MoonStars } from 'tabler-icons-react';
const useStyles = createStyles((theme) => ({
root: {
position: 'relative',
'& *': {
cursor: 'pointer',
},
},
icon: {
pointerEvents: 'none',
position: 'absolute',
zIndex: 1,
top: 3,
},
iconLight: {
left: 4,
color: theme.white,
},
iconDark: {
right: 4,
color: theme.colors.gray[6],
},
}));
export function ColorSchemeSwitch() {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const { classes, cx } = useStyles();
return (
<Group>
<div className={classes.root}>
<Sun className={cx(classes.icon, classes.iconLight)} size={18} />
<MoonStars className={cx(classes.icon, classes.iconDark)} size={18} />
<Switch checked={colorScheme === 'dark'} onChange={() => toggleColorScheme()} size="md" />
</div>
Switch to {colorScheme === 'dark' ? 'light' : 'dark'} mode
</Group>
);
}

5
components/Settings/SettingsMenu.tsx
View File

@@ -8,13 +8,16 @@ import {
Tooltip, Tooltip,
SegmentedControl, SegmentedControl,
} from '@mantine/core'; } from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';
import { useState } from 'react'; import { useState } from 'react';
import { Settings as SettingsIcon } from 'tabler-icons-react'; import { Settings as SettingsIcon } from 'tabler-icons-react';
import { useConfig } from '../../tools/state'; import { useConfig } from '../../tools/state';
import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
import SaveConfigComponent from '../Config/SaveConfig'; import SaveConfigComponent from '../Config/SaveConfig';
function SettingsMenu(props: any) { function SettingsMenu(props: any) {
const { config, setConfig } = useConfig(); const { config, setConfig } = useConfig();
const colorScheme = useColorScheme();
const matches = [ const matches = [
{ label: 'Google', value: 'https://google.com/search?q=' }, { label: 'Google', value: 'https://google.com/search?q=' },
{ label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' }, { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
@@ -46,6 +49,7 @@ function SettingsMenu(props: any) {
</Group> </Group>
<Group direction="column"> <Group direction="column">
<Switch <Switch
size="md"
onChange={(e) => onChange={(e) =>
setConfig({ setConfig({
...config, ...config,
@@ -59,6 +63,7 @@ function SettingsMenu(props: any) {
label="Enable search bar" label="Enable search bar"
/> />
</Group> </Group>
<ColorSchemeSwitch />
<SaveConfigComponent /> <SaveConfigComponent />
<Text <Text
style={{ style={{

2
components/layout/Header.tsx
View File

@@ -11,7 +11,6 @@ import {
import { useBooleanToggle } from '@mantine/hooks'; import { useBooleanToggle } from '@mantine/hooks';
import { NextLink } from '@mantine/next'; import { NextLink } from '@mantine/next';
import { Logo } from './Logo'; import { Logo } from './Logo';
import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
import { SettingsMenuButton } from '../Settings/SettingsMenu'; import { SettingsMenuButton } from '../Settings/SettingsMenu';
import CalendarComponent from '../modules/calendar/CalendarModule'; import CalendarComponent from '../modules/calendar/CalendarModule';
@@ -119,7 +118,6 @@ export function Header({ links }: HeaderResponsiveProps) {
<Head height={HEADER_HEIGHT} mb={10} className={classes.root}> <Head height={HEADER_HEIGHT} mb={10} className={classes.root}>
<Container className={classes.header}> <Container className={classes.header}>
<Group> <Group>
<ColorSchemeToggle />
<NextLink style={{ textDecoration: 'none' }} href="/"> <NextLink style={{ textDecoration: 'none' }} href="/">
<Logo style={{ fontSize: 22 }} /> <Logo style={{ fontSize: 22 }} />
</NextLink> </NextLink>

27
components/modules/calendar/CalendarModule.tsx
View File

@@ -6,6 +6,7 @@ import { CalendarIcon } from '@modulz/radix-icons';
import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay'; import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
import { useConfig } from '../../../tools/state'; import { useConfig } from '../../../tools/state';
import { MHPModule } from '../modules'; import { MHPModule } from '../modules';
import React from 'react';
export const CalendarModule: MHPModule = { export const CalendarModule: MHPModule = {
title: 'Calendar', title: 'Calendar',
@@ -93,8 +94,12 @@ function DayComponent(props: any) {
setOpened(true); setOpened(true);
}} }}
> >
{radarrFiltered.length > 0 && <Indicator size={7} color="yellow" children={null} />} {radarrFiltered.length > 0 && (
{sonarrFiltered.length > 0 && <Indicator size={7} offset={8} color="blue" children={null} />} <Indicator size={7} color="yellow" children={null} />
)}
{sonarrFiltered.length > 0 && (
<Indicator size={7} offset={8} color="blue" children={null} />
)}
<Popover <Popover
position="left" position="left"
width={700} width={700}
@@ -104,11 +109,25 @@ function DayComponent(props: any) {
target={`‏ ${day}`} target={`‏ ${day}`}
> >
<ScrollArea style={{ height: 400 }}> <ScrollArea style={{ height: 400 }}>
{sonarrFiltered.length > 0 && <SonarrMediaDisplay media={sonarrFiltered[0]} />} {sonarrFiltered.map((media: any, index: number) => {
return (
<React.Fragment key={index}>
<SonarrMediaDisplay media={media} />
{index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
</React.Fragment>
);
})}
{radarrFiltered.length > 0 && sonarrFiltered.length > 0 && ( {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
<Divider variant="dashed" my="xl" /> <Divider variant="dashed" my="xl" />
)} )}
{radarrFiltered.length > 0 && <RadarrMediaDisplay media={radarrFiltered[0]} />} {radarrFiltered.map((media: any, index: number) => {
return (
<React.Fragment key={index}>
<RadarrMediaDisplay media={media} />
{index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
</React.Fragment>
);
})}
</ScrollArea> </ScrollArea>
</Popover> </Popover>
</Box> </Box>

94
components/modules/calendar/MediaDisplay.tsx
View File

@@ -2,22 +2,20 @@ import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@ma
import { Link } from 'tabler-icons-react'; import { Link } from 'tabler-icons-react';
export interface IMedia { export interface IMedia {
id: string; overview: string;
imdbId: any;
title: string; title: string;
description: string;
poster: string; poster: string;
type: string;
genres: string[]; genres: string[];
seasonNumber?: number;
episodeNumber?: number;
} }
export function RadarrMediaDisplay(props: any) { function MediaDisplay(props: { media: IMedia }) {
const { media }: { media: any } = props; const { media }: { media: IMedia } = props;
// Find a poster CoverType
const poster = media.images.find((image: any) => image.coverType === 'poster');
// Return a movie poster containting the title and the description
return ( return (
<Group noWrap align="self-start"> <Group noWrap align="self-start" mr={15}>
<Image fit="cover" src={poster.url} alt={media.title} width={300} height={400} /> <Image fit="cover" src={media.poster} alt={media.title} width={300} height={400} />
<Stack <Stack
justify="space-between" justify="space-between"
sx={(theme) => ({ sx={(theme) => ({
@@ -33,7 +31,17 @@ export function RadarrMediaDisplay(props: any) {
</ActionIcon> </ActionIcon>
</Anchor> </Anchor>
</Group> </Group>
<Text>{media.overview}</Text> {media.episodeNumber && media.seasonNumber && (
<Text
style={{
textAlign: 'center',
color: '#a0aec0',
}}
>
Season {media.seasonNumber} episode {media.episodeNumber}
</Text>
)}
<Text align="justify">{media.overview}</Text>
</Group> </Group>
{/*Add the genres at the bottom of the poster*/} {/*Add the genres at the bottom of the poster*/}
<Group> <Group>
@@ -46,46 +54,40 @@ export function RadarrMediaDisplay(props: any) {
); );
} }
export function RadarrMediaDisplay(props: any) {
const { media }: { media: any } = props;
// Find a poster CoverType
const poster = media.images.find((image: any) => image.coverType === 'poster');
// Return a movie poster containting the title and the description
return (
<MediaDisplay
media={{
imdbId: media.imdbId,
title: media.title,
overview: media.overview,
poster: poster.url,
genres: media.genres,
}}
/>
);
}
export function SonarrMediaDisplay(props: any) { export function SonarrMediaDisplay(props: any) {
const { media }: { media: any } = props; const { media }: { media: any } = props;
// Find a poster CoverType // Find a poster CoverType
const poster = media.series.images.find((image: any) => image.coverType === 'poster'); const poster = media.series.images.find((image: any) => image.coverType === 'poster');
// Return a movie poster containting the title and the description // Return a movie poster containting the title and the description
return ( return (
<Group noWrap align="self-start"> <MediaDisplay
<Image src={poster.url} fit="cover" width={300} height={400} alt={media.series.title} /> media={{
<Stack imdbId: media.series.imdbId,
justify="space-between" title: media.series.title,
sx={(theme) => ({ overview: media.series.overview,
height: 400, poster: poster.url,
})} genres: media.series.genres,
> seasonNumber: media.seasonNumber,
<Group direction="column"> episodeNumber: media.episodeNumber,
<Group> }}
<Title order={3}>{media.series.title}</Title> />
<Anchor href={`https://www.imdb.com/title/${media.series.imdbId}`} target="_blank">
<ActionIcon>
<Link />
</ActionIcon>
</Anchor>
</Group>
<Text
style={{
textAlign: 'center',
color: '#a0aec0',
}}
>
Season {media.seasonNumber} episode {media.episodeNumber}
</Text>
<Text>{media.series.overview}</Text>
</Group>
{/*Add the genres at the bottom of the poster*/}
<Group>
{media.series.genres.map((genre: string, i: number) => (
<Badge key={i}>{genre}</Badge>
))}
</Group>
</Stack>
</Group>
); );
} }

13
package.json
View File

@@ -1,7 +1,12 @@
{ {
"name": "mantine-next-template", "name": "homarr",
"version": "1.0.0", "version": "0.0.1",
"private": true, "private": "false",
"description": "Customizable browser's home page to interact with your homeserver's Docker containers (i.e. Sonarr/Radarr)",
"repository": {
"type": "git",
"url": "https://github.com/ajnart/myhomepage"
},
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
@@ -76,4 +81,4 @@
"ts-jest": "^27.1.4", "ts-jest": "^27.1.4",
"typescript": "4.6.3" "typescript": "4.6.3"
} }
} }