Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 07:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

🔀 Merge branch 'dev' into overseerr-integration

Browse Source
This commit is contained in:
ajnart
2022-07-24 21:36:55 +02:00
parent 1de20d1583 3fe8a4f7bc
commit 87c55f264e
100 changed files with 4558 additions and 11317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.dockerignore
View File

@@ -2,5 +2,8 @@ Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
*.md
.git
.github
LICENSE
docs/

1
.eslintrc.js
View File

@@ -3,7 +3,6 @@ module.exports = {
'mantine',
'plugin:@next/next/recommended',
'plugin:jest/recommended',
'plugin:storybook/recommended',
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"

10
.github/ISSUE_TEMPLATE/feature-request.yml vendored
View File

@@ -22,13 +22,3 @@ body:
- High (App breaking feature)
validations:
required: true
- type: checkboxes
id: idiot-check
attributes:
label: Please tick the boxes
description: Before submitting, please ensure that
options:
- label: You've read the [docs](https://github.com/ajnart/homarr#readme)
required: true
- label: You've checked for [duplicate issues](https://github.com/ajnart/homarr/issues)
required: true

7
.github/pull_request_template.md vendored
View File

@@ -14,10 +14,3 @@
### Screenshot _(if applicable)_
> If you've introduced any significant UI changes, please include a screenshot.
### Code Quality Checklist _(Please complete)_
- [ ] All changes are backwards compatible
- [ ] There are no (new) build warnings or errors
- [ ] _(If a new config option is added)_ Attribute is outlined in the schema and documented
- [ ] _(If a new dependency is added)_ Package is essential, and has been checked out for security or performance
- [ ] Bumps version, if new feature added

103
.github/workflows/docker.yml vendored
View File

@@ -1,6 +1,8 @@
name: Master docker CI
# Workflow to build and publish docker image
name: Master CI
# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.
on:
push:
branches: [master]
@@ -22,72 +24,46 @@ jobs:
# Push image to GitHub Packages.
# See also https://docs.docker.com/docker-hub/builds/
yarn_install_and_build:
# Will run yarn install && yarn build
runs-on: ubuntu-latest
steps:
- name: Setup
uses: actions/setup-node@v3
- name: Checkout
uses: actions/checkout@v3
- name: Get yarn cache directory path
# to help speed up build times
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- name: Yarn cache
# to help speed up build times
uses: actions/cache@v3
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: ${{ runner.os }}-yarn-
- name: Nextjs cache
uses: actions/cache@v2
with:
# See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
path: |
~/.npm
${{ github.workspace }}/.next/cache
# Generate a new cache whenever packages or source files change.
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
# If source files changed but packages didn't, rebuild from a prior cache.
restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
- run: yarn install --immutable
- run: yarn build
- name: Cache build output
# to copy needed files to docker build job
uses: actions/cache@v2
id: restore-build
with:
path: |
./next.config.js
./pages/
./public/
./.next/static/
./.next/standalone/
./packages.json
key: ${{ github.sha }}
docker_image_build_and_push:
needs: [yarn_install_and_build]
runs-on: ubuntu-latest
permissions:
packages: write
contents: read
steps:
- name: Setup
uses: actions/setup-node@v3
- name: Checkout
uses: actions/checkout@v2
- uses: actions/cache@v2
id: restore-build
uses: actions/checkout@v3
- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
- uses: actions/cache@v3
id: yarn-cache
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- name: Restore NextJS cache
uses: actions/cache@v2
with:
# See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
path: |
./next.config.js
./pages/
./public/
./.next/static/
./.next/standalone/
./packages.json
key: ${{ github.sha }}
${{ github.workspace }}/.next/cache
# Generate a new cache whenever packages or source files change.
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
# If source files changed but packages didn't, rebuild from a prior cache.
restore-keys: |
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
- run: yarn install --immutable
- run: yarn build
- name: Docker meta
id: meta
uses: docker/metadata-action@v4
@@ -98,10 +74,13 @@ jobs:
tags: |
type=raw,value=latest
type=pep440,pattern={{version}}
- name: Set up QEMU
uses: docker/setup-qemu-action@v2
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v2
- name: Login to GHCR
uses: docker/login-action@v2
with:
@@ -117,3 +96,5 @@ jobs:
push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
cache-from: type=gha
cache-to: type=gha,mode=max

66
.github/workflows/docker_dev.yml vendored
View File

@@ -16,7 +16,7 @@ on:
workflow_dispatch:
inputs:
tags:
requierd: true
required: true
description: 'Tags to deploy to'
env:
@@ -30,6 +30,9 @@ jobs:
# See also https://docs.docker.com/docker-hub/builds/
yarn_install_and_build:
runs-on: ubuntu-latest
permissions:
packages: write
contents: read
steps:
- name: Setup
@@ -40,68 +43,34 @@ jobs:
- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn cache dir)"
- name: Yarn cache
uses: actions/cache@v3
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
- uses: actions/cache@v3
id: yarn-cache
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: ${{ runner.os }}-yarn-
restore-keys: |
${{ runner.os }}-yarn-
- name: Nextjs cache
- name: Restore NextJS cache
uses: actions/cache@v2
with:
# See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
# See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
path: |
~/.npm
${{ github.workspace }}/.next/cache
# Generate a new cache whenever packages or source files change.
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
# If source files changed but packages didn't, rebuild from a prior cache.
restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
restore-keys: |
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
- run: yarn install --immutable
- run: yarn build
- name: Cache build output
uses: actions/cache@v2
id: restore-build
with:
path: |
./next.config.js
./pages/
./public/
./.next/static/
./.next/standalone/
./packages.json
key: ${{ github.sha }}
docker_image_build_and_push:
needs: [yarn_install_and_build]
runs-on: ubuntu-latest
permissions:
packages: write
contents: read
steps:
- name: Checkout
uses: actions/checkout@v2
- uses: actions/cache@v2
id: restore-build
with:
path: |
./next.config.js
./pages/
./public/
./.next/static/
./.next/standalone/
./packages.json
key: ${{ github.sha }}
- name: Docker meta
if: github.event_name != 'pull_request'
id: meta
uses: docker/metadata-action@v4
with:
@@ -127,6 +96,7 @@ jobs:
password: ${{ secrets.GITHUB_TOKEN }}
- name: Build and push
if: github.event_name != 'pull_request'
uses: docker/build-push-action@v3
with:
platforms: linux/amd64,linux/arm64,linux/arm/v7
@@ -134,3 +104,5 @@ jobs:
push: ${{ github.event_name != 'pull_request' }}
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
cache-from: type=gha
cache-to: type=gha,mode=max

30
.storybook/main.js
View File

@@ -1,30 +0,0 @@
module.exports = {
stories: ['../src/components/**/*.story.mdx', '../src/components/**/*.story.*'],
addons: [
'@storybook/addon-links',
'storybook-addon-mock/register',
'@storybook/addon-essentials',
],
typescript: {
check: false,
reactDocgen: false,
},
framework: '@storybook/react',
features: { emotionAlias: false },
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
// https://github.com/polkadot-js/extension/issues/621#issuecomment-759341776
// framer-motion uses the .mjs notation and we need to include it so that webpack will
// transpile it for us correctly (enables using a CJS module inside an ESM).
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
});
// Return the altered config
return config;
},
};

16
.storybook/preview.tsx
View File

@@ -1,16 +0,0 @@
import { MantineProvider, ColorSchemeProvider } from '@mantine/core';
import { NotificationsProvider } from '@mantine/notifications';
export const parameters = { layout: 'fullscreen' };
function ThemeWrapper(props: { children: React.ReactNode }) {
return (
<ColorSchemeProvider colorScheme="light" toggleColorScheme={() => {}}>
<MantineProvider withGlobalStyles withNormalizeCSS>
<NotificationsProvider>{props.children}</NotificationsProvider>
</MantineProvider>
</ColorSchemeProvider>
);
}
export const decorators = [(renderStory: Function) => <ThemeWrapper>{renderStory()}</ThemeWrapper>];

28
.vscode/launch.json vendored Normal file
View File

@@ -0,0 +1,28 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "yarn dev"
},
{
"name": "Next.js: debug client-side",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "yarn dev",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}

24
Dockerfile
View File

@@ -1,13 +1,23 @@
FROM node:16-alpine
WORKDIR /app
RUN apk add tzdata
ENV NEXT_TELEMETRY_DISABLED 1
ENV NODE_ENV production
COPY /next.config.js ./
COPY /public ./public
COPY /package.json ./package.json
# Automatically leverage output traces to reduce image size. https://nextjs.org/docs/advanced-features/output-file-tracing
COPY /.next/standalone ./
COPY /.next/static ./.next/static
COPY next.config.js ./
COPY public ./public
COPY package.json ./package.json
# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY .next/standalone ./
COPY .next/static ./.next/static
EXPOSE 7575
ENV PORT 7575
VOLUME /app/data/configs
CMD ["node", "server.js"]

11
README.md
View File

@@ -21,7 +21,7 @@
<i>Join the discord! — Don't forget to star the repo if you are enjoying the project!</i>
</p>
<p align="center">
<a href="https://homarr.netlify.app/"><strong> Demo ↗️ </strong></a> • <a href="#-installation"><strong> Install ➡️ </strong></a> • <a href="https://github.com/ajnart/homarr/wiki"><strong> Read the Wiki 📄 </strong></a>
<a href="https://homarr.ajnart.fr/"><strong> Demo ↗️ </strong></a> • <a href="https://homarr.vercel.app/docs/quick-start/"><strong> Install ➡️ </strong></a> • <a href="https://homarr.vercel.app/docs/about"><strong> Read the Docs 📄 </strong></a>
</p>
---
@@ -33,7 +33,7 @@ Homarr is a simple and lightweight homepage for your server, that helps you easi
It integrates with the services you use to display information on the homepage (E.g. Show upcoming Sonarr/Radarr releases).
For a full list of integrations look at: [wiki/integrations](#).
For a full list of integrations, [head over to our documentation](https://homarr.vercel.app/docs/advanced-features/integrations).
If you have any questions about Homarr or want to share information with us, please go to one of the following places:
@@ -42,7 +42,7 @@ If you have any questions about Homarr or want to share information with us, ple
*Before you file an [issue](https://github.com/ajnart/homarr/issues/new/choose), make sure you have the read [known issues](#-known-issues) section.*
**For more information, [read the wiki!](https://github.com/ajnart/homarr/wiki)**
**For more information, [read the documentation!](https://homarr.vercel.app/docs/about)**
<details>
<summary><b>Table of Contents</b></summary>
@@ -195,10 +195,7 @@ SOFTWARE.
---
<p align="center">
<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://homarr.vercel.app/docs/about">read the documentation!</a></b></i>
<br/>
<br/>
<a href="https://trackgit.com">
<img src="https://us-central1-trackgit-analytics.cloudfunctions.net/token/ping/l3khzc3a3pexzw5w5whl" alt="trackgit-views" />
</a>
</p>

3
data/configs/default.json
View File

@@ -18,6 +18,9 @@
},
"Date": {
"enabled": false
},
"Docker": {
"enabled": true
}
}
}

2
data/constants.ts
View File

@@ -1,2 +1,2 @@
export const REPO_URL = 'ajnart/homarr';
export const CURRENT_VERSION = 'v0.6.0';
export const CURRENT_VERSION = 'v0.8.2';

5
next.config.js
View File

@@ -6,11 +6,8 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
module.exports = withBundleAnalyzer({
reactStrictMode: false,
eslint: {
ignoreDuringBuilds: true,
},
experimental: {
outputStandalone: true,
},
basePath: env.BASE_URL,
output: 'standalone',
});

84
package.json
View File

@@ -1,7 +1,8 @@
{
"name": "homarr",
"version": "0.6.0",
"version": "0.8.2",
"description": "Homarr - A homepage for your server.",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/ajnart/homarr"
@@ -19,68 +20,63 @@
"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
"test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
"storybook": "start-storybook -p 7001",
"storybook:build": "build-storybook",
"ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
},
"dependencies": {
"@ctrl/deluge": "^4.0.0",
"@ctrl/qbittorrent": "^4.0.0",
"@ctrl/shared-torrent": "^4.1.0",
"@dnd-kit/core": "^6.0.1",
"@dnd-kit/sortable": "^7.0.0",
"@ctrl/deluge": "^4.1.0",
"@ctrl/qbittorrent": "^4.1.0",
"@ctrl/shared-torrent": "^4.1.1",
"@ctrl/transmission": "^4.1.1",
"@dnd-kit/core": "^6.0.5",
"@dnd-kit/sortable": "^7.0.1",
"@dnd-kit/utilities": "^3.2.0",
"@mantine/core": "^4.2.6",
"@mantine/dates": "^4.2.6",
"@mantine/dropzone": "^4.2.6",
"@mantine/form": "^4.2.6",
"@mantine/hooks": "^4.2.6",
"@mantine/next": "^4.2.6",
"@mantine/notifications": "^4.2.6",
"@mantine/prism": "^4.2.6",
"@mantine/core": "^4.2.12",
"@mantine/dates": "^4.2.12",
"@mantine/dropzone": "^4.2.12",
"@mantine/form": "^4.2.12",
"@mantine/hooks": "^4.2.12",
"@mantine/next": "^4.2.12",
"@mantine/notifications": "^4.2.12",
"@mantine/prism": "^4.2.12",
"@nivo/core": "^0.79.0",
"@nivo/line": "^0.79.1",
"@tabler/icons": "^1.68.0",
"@tabler/icons": "^1.78.0",
"axios": "^0.27.2",
"cookies-next": "^2.0.4",
"dayjs": "^1.11.2",
"framer-motion": "^6.3.1",
"cookies-next": "^2.1.1",
"dayjs": "^1.11.4",
"dockerode": "^3.3.2",
"framer-motion": "^6.5.1",
"js-file-download": "^0.4.12",
"next": "12.1.6",
"prism-react-renderer": "^1.3.1",
"prism-react-renderer": "^1.3.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"systeminformation": "^5.12.1",
"uuid": "^8.3.2"
},
"devDependencies": {
"@babel/core": "^7.17.8",
"@next/bundle-analyzer": "^12.1.4",
"@next/eslint-plugin-next": "^12.1.4",
"@storybook/react": "^6.5.4",
"@types/node": "^17.0.23",
"@types/react": "17.0.43",
"@types/dockerode": "^3.3.9",
"@types/node": "17.0.1",
"@types/react": "17.0.1",
"@types/uuid": "^8.3.4",
"@typescript-eslint/eslint-plugin": "^5.16.0",
"@typescript-eslint/parser": "^5.16.0",
"eslint": "^8.11.0",
"@typescript-eslint/eslint-plugin": "^5.30.7",
"@typescript-eslint/parser": "^5.30.7",
"eslint": "^8.20.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^16.1.0",
"eslint-config-mantine": "1.1.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jest": "^26.1.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-storybook": "^0.5.11",
"eslint-plugin-testing-library": "^5.2.0",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-mantine": "^2.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jest": "^26.6.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-testing-library": "^5.5.1",
"eslint-plugin-unused-imports": "^2.0.0",
"jest": "^28.1.0",
"prettier": "^2.6.2",
"require-from-string": "^2.0.2",
"typescript": "4.6.4"
},
"resolutions": {
"@types/react": "17.0.30"
"jest": "^28.1.3",
"prettier": "^2.7.1",
"typescript": "^4.7.4"
},
"packageManager": "yarn@3.2.1"
}

358
src/components/AppShelf/AddAppShelfItem.tsx
View File

@@ -1,25 +1,30 @@
import {
Modal,
ActionIcon,
Anchor,
Button,
Center,
Group,
TextInput,
Image,
Button,
Select,
LoadingOverlay,
ActionIcon,
Tooltip,
Modal,
MultiSelect,
ScrollArea,
Select,
Switch,
Tabs,
TextInput,
Title,
Anchor,
Text,
Tooltip,
} from '@mantine/core';
import { useForm } from '@mantine/form';
import { useEffect, useState } from 'react';
import { useDebouncedValue } from '@mantine/hooks';
import { IconApps as Apps } from '@tabler/icons';
import { useEffect, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { useDebouncedValue } from '@mantine/hooks';
import { useConfig } from '../../tools/state';
import { ServiceTypeList } from '../../tools/types';
import { tryMatchPort, ServiceTypeList, StatusCodes } from '../../tools/types';
import Tip from '../layout/Tip';
export function AddItemShelfButton(props: any) {
const [opened, setOpened] = useState(false);
@@ -50,11 +55,13 @@ export function AddItemShelfButton(props: any) {
);
}
function MatchIcon(name: string, form: any) {
function MatchIcon(name: string | undefined, form: any) {
if (name === undefined || name === '') return null;
fetch(
`https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
.replace(/\s+/g, '-')
.toLowerCase()}.png`
.toLowerCase()
.replace(/^dash\.$/, 'dashdot')}.png`
).then((res) => {
if (res.ok) {
form.setFieldValue('icon', res.url);
@@ -65,28 +72,13 @@ function MatchIcon(name: string, form: any) {
}
function MatchService(name: string, form: any) {
const service = ServiceTypeList.find((s) => s === name);
const service = ServiceTypeList.find((s) => s.toLowerCase() === name.toLowerCase());
if (service) {
form.setFieldValue('type', service);
}
}
function MatchPort(name: string, form: any) {
const portmap = [
{ name: 'qBittorrent', value: '8080' },
{ name: 'Sonarr', value: '8989' },
{ name: 'Radarr', value: '7878' },
{ name: 'Lidarr', value: '8686' },
{ name: 'Readarr', value: '8686' },
{ name: 'Deluge', value: '8112' },
{ name: 'Transmission', value: '9091' },
];
// Match name with portmap key
const port = portmap.find((p) => p.name === name);
if (port) {
form.setFieldValue('url', `http://localhost:${port.value}`);
}
}
const DEFAULT_ICON = '/favicon.svg';
export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
const { setOpened } = props;
@@ -107,22 +99,21 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
type: props.type ?? 'Other',
category: props.category ?? undefined,
name: props.name ?? '',
icon: props.icon ?? '/favicon.svg',
icon: props.icon ?? DEFAULT_ICON,
url: props.url ?? '',
apiKey: props.apiKey ?? (undefined as unknown as string),
username: props.username ?? (undefined as unknown as string),
password: props.password ?? (undefined as unknown as string),
openedUrl: props.openedUrl ?? (undefined as unknown as string),
status: props.status ?? ['200'],
newTab: props.newTab ?? true,
},
validate: {
apiKey: () => null,
// Validate icon with a regex
icon: (value: string) => {
// Regex to match everything that ends with and icon extension
if (!value.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
return 'Please enter a valid icon URL';
}
return null;
},
icon: (value: string) =>
// Disable matching to allow any values
null,
// Validate url with a regex http/https
url: (value: string) => {
try {
@@ -132,15 +123,21 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
}
return null;
},
status: (value: string[]) => {
if (!value.length) {
return 'Please select a status code';
}
return null;
},
},
});
const [debounced, cancel] = useDebouncedValue(form.values.name, 250);
useEffect(() => {
if (form.values.name !== debounced) return;
if (form.values.name !== debounced || form.values.icon !== DEFAULT_ICON) return;
MatchIcon(form.values.name, form);
MatchService(form.values.name, form);
MatchPort(form.values.name, form);
tryMatchPort(form.values.name, form);
}, [debounced]);
// Try to set const hostname to new URL(form.values.url).hostname)
@@ -166,6 +163,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
</Center>
<form
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 (config.services && config.services.find((s) => s.id === form.values.id)) {
setConfig({
@@ -190,126 +193,171 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
form.reset();
})}
>
<Group direction="column" grow>
<TextInput
required
label="Service name"
placeholder="Plex"
{...form.getInputProps('name')}
/>
<Tabs grow>
<Tabs.Tab label="Options">
<ScrollArea style={{ height: 500 }} scrollbarSize={4}>
<Group direction="column" grow>
<TextInput
required
label="Service name"
placeholder="Plex"
{...form.getInputProps('name')}
/>
<TextInput
required
label="Icon url"
placeholder="https://i.gifer.com/ANPC.gif"
{...form.getInputProps('icon')}
/>
<TextInput
required
label="Service url"
placeholder="http://localhost:7575"
{...form.getInputProps('url')}
/>
<Select
label="Service type"
defaultValue="Other"
placeholder="Pick one"
required
searchable
data={ServiceTypeList}
{...form.getInputProps('type')}
/>
<Select
label="Category"
data={categoryList}
placeholder="Select a category or create a new one"
nothingFound="Nothing found"
searchable
clearable
creatable
onClick={(e) => {
e.preventDefault();
}}
getCreateLabel={(query) => `+ Create "${query}"`}
onCreate={(query) => {}}
{...form.getInputProps('category')}
/>
<LoadingOverlay visible={isLoading} />
{(form.values.type === 'Sonarr' ||
form.values.type === 'Radarr' ||
form.values.type === 'Lidarr' ||
form.values.type === 'Readarr') && (
<>
<TextInput
<TextInput
required
label="Icon URL"
placeholder={DEFAULT_ICON}
{...form.getInputProps('icon')}
/>
<TextInput
required
label="Service URL"
placeholder="http://localhost:7575"
{...form.getInputProps('url')}
/>
<TextInput
label="On Click URL"
placeholder="http://sonarr.example.com"
{...form.getInputProps('openedUrl')}
/>
<Select
label="Service type"
defaultValue="Other"
placeholder="Pick one"
required
searchable
data={ServiceTypeList}
{...form.getInputProps('type')}
/>
<Select
label="Category"
data={categoryList}
placeholder="Select a category or create a new one"
nothingFound="Nothing found"
searchable
clearable
creatable
onClick={(e) => {
e.preventDefault();
}}
getCreateLabel={(query) => `+ Create "${query}"`}
onCreate={(query) => {}}
{...form.getInputProps('category')}
/>
<LoadingOverlay visible={isLoading} />
{(form.values.type === 'Sonarr' ||
form.values.type === 'Radarr' ||
form.values.type === 'Lidarr' ||
form.values.type === 'Readarr') && (
<>
<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'}
/>
<Tip>
Get your API key{' '}
<Anchor
target="_blank"
weight="bold"
style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
href={`${hostname}/settings/general`}
>
here.
</Anchor>
</Tip>
</>
)}
{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' && (
<>
<TextInput
label="Password"
placeholder="password"
value={form.values.password}
onChange={(event) => {
form.setFieldValue('password', event.currentTarget.value);
}}
error={form.errors.password && 'Invalid password'}
/>
</>
)}
{form.values.type === 'Transmission' && (
<>
<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="adminadmin"
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
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'}
label="HTTP Status Codes"
data={StatusCodes}
placeholder="Select valid status codes"
clearButtonLabel="Clear selection"
nothingFound="Nothing found"
defaultValue={['200']}
clearable
searchable
{...form.getInputProps('status')}
/>
<Text
style={{
alignSelf: 'center',
fontSize: '0.75rem',
textAlign: 'center',
color: '#a0aec0',
}}
>
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'}
<Switch
label="Open service in new tab"
defaultChecked={form.values.newTab}
{...form.getInputProps('newTab')}
/>
<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' && (
<>
<TextInput
required
label="Password"
placeholder="deluge"
value={form.values.password}
onChange={(event) => {
form.setFieldValue('password', event.currentTarget.value);
}}
error={form.errors.password && 'Invalid password'}
/>
</>
)}
</Group>
</Group>
</Tabs.Tab>
</Tabs>
<Group grow position="center" mt="xl">
<Button type="submit">{props.message ?? 'Add service'}</Button>
</Group>

27
src/components/AppShelf/AppShelf.story.tsx
View File

@@ -1,27 +0,0 @@
import { SimpleGrid } from '@mantine/core';
import AppShelf from './AppShelf';
import { AppShelfItem } from './AppShelfItem';
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} />;
export const Ten = (args: any) => (
<SimpleGrid>
{Array.from(Array(10)).map((_, i) => (
<AppShelfItem {...args} key={i} />
))}
</SimpleGrid>
);

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

@@ -1,28 +1,74 @@
import React, { useState } from 'react';
import { Grid, Group, Title } from '@mantine/core';
import { Accordion, createStyles, Grid, Group, Paper, useMantineColorScheme } from '@mantine/core';
import {
closestCenter,
DndContext,
DragOverlay,
MouseSensor,
TouchSensor,
useSensor,
useSensors,
} from '@dnd-kit/core';
import { arrayMove, SortableContext } from '@dnd-kit/sortable';
import { useLocalStorage } from '@mantine/hooks';
import { useConfig } from '../../tools/state';
import { SortableAppShelfItem, AppShelfItem } from './AppShelfItem';
import { ModuleWrapper } from '../modules/moduleWrapper';
import { DownloadsModule } from '../modules';
import { ModuleMenu, ModuleWrapper } from '../../modules/moduleWrapper';
import { DownloadsModule } from '../../modules';
import DownloadComponent from '../../modules/downloads/DownloadsModule';
const useStyles = createStyles((theme, _params) => ({
item: {
overflow: 'hidden',
borderLeft: '3px solid transparent',
borderRight: '3px solid transparent',
borderBottom: '3px solid transparent',
borderRadius: '20px',
borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
marginTop: theme.spacing.md,
},
control: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
borderRadius: theme.spacing.md,
'&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
},
},
content: {
margin: theme.spacing.md,
},
label: {
overflow: 'visible',
},
}));
const AppShelf = (props: any) => {
const { classes, cx } = useStyles(props);
const [toggledCategories, settoggledCategories] = useLocalStorage({
key: 'app-shelf-toggled',
// This is a bit of a hack to get the 5 first categories to be toggled on by default
defaultValue: { 0: true, 1: true, 2: true, 3: true, 4: true } as Record<string, boolean>,
});
const [activeId, setActiveId] = useState(null);
const { config, setConfig } = useConfig();
const { colorScheme } = useMantineColorScheme();
const sensors = useSensors(
useSensor(TouchSensor, {
activationConstraint: {
delay: 500,
tolerance: 5,
},
}),
useSensor(MouseSensor, {
// Require the mouse to move by 10 pixels before activating
activationConstraint: {
delay: 250,
delay: 500,
tolerance: 5,
},
})
@@ -75,7 +121,14 @@ const AppShelf = (props: any) => {
<SortableContext items={config.services}>
<Grid gutter="xl" align="center">
{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} />
</Grid.Col>
))}
@@ -99,26 +152,49 @@ const AppShelf = (props: any) => {
const noCategory = config.services.filter(
(e) => e.category === undefined || e.category === null
);
const downloadEnabled = config.modules?.[DownloadsModule.title]?.enabled ?? false;
// Create an item with 0: true, 1: true, 2: true... For each category
return (
// Return one item for each category
<Group grow direction="column">
{categoryList.map((category) => (
<>
<Title order={3} key={category}>
{category}
</Title>
{item(category)}
</>
))}
{/* Return the item for all services without category */}
{noCategory && noCategory.length > 0 ? (
<>
<Title order={3}>Other</Title>
{item()}
</>
) : null}
<ModuleWrapper mt="xl" module={DownloadsModule} />
<Accordion
disableIconRotation
classNames={classes}
order={2}
iconPosition="right"
multiple
initialState={toggledCategories}
onChange={(idx) => settoggledCategories(idx)}
>
{categoryList.map((category, idx) => (
<Accordion.Item key={category} label={category}>
{item(category)}
</Accordion.Item>
))}
{/* Return the item for all services without category */}
{noCategory && noCategory.length > 0 ? (
<Accordion.Item key="Other" label="Other">
{item()}
</Accordion.Item>
) : null}
{downloadEnabled ? (
<Accordion.Item key="Downloads" label="Your downloads">
<Paper
p="lg"
radius="lg"
style={{
background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
${(config.settings.appOpacity || 100) / 100}`,
borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
${(config.settings.appOpacity || 100) / 100}`,
}}
>
<ModuleMenu module={DownloadsModule} />
<DownloadComponent />
</Paper>
</Accordion.Item>
) : null}
</Accordion>
</Group>
);
}

46
src/components/AppShelf/AppShelfItem.tsx
View File

@@ -1,11 +1,21 @@
import { Text, Card, Anchor, AspectRatio, Image, Center, createStyles } from '@mantine/core';
import {
Text,
Card,
Anchor,
AspectRatio,
Image,
Center,
createStyles,
useMantineColorScheme,
} from '@mantine/core';
import { motion } from 'framer-motion';
import { useState } from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { serviceItem } from '../../tools/types';
import PingComponent from '../modules/ping/PingModule';
import PingComponent from '../../modules/ping/PingModule';
import AppShelfMenu from './AppShelfMenu';
import { useConfig } from '../../tools/state';
const useStyles = createStyles((theme) => ({
item: {
@@ -15,6 +25,9 @@ const useStyles = createStyles((theme) => ({
boxShadow: `${theme.shadows.md} !important`,
transform: 'scale(1.05)',
},
[theme.fn.smallerThan('sm')]: {
WebkitUserSelect: 'none',
},
},
}));
@@ -38,7 +51,9 @@ export function SortableAppShelfItem(props: any) {
export function AppShelfItem(props: any) {
const { service }: { service: serviceItem } = props;
const [hovering, setHovering] = useState(false);
const { classes, theme } = useStyles();
const { config } = useConfig();
const { colorScheme } = useMantineColorScheme();
const { classes } = useStyles();
return (
<motion.div
animate={{
@@ -54,11 +69,22 @@ export function AppShelfItem(props: any) {
setHovering(false);
}}
>
<Card withBorder radius="lg" shadow="md" className={classes.item}>
<Card
withBorder
radius="lg"
shadow="md"
className={classes.item}
style={{
background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
${(config.settings.appOpacity || 100) / 100}`,
borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
${(config.settings.appOpacity || 100) / 100}`,
}}
>
<Card.Section>
<Anchor
target="_blank"
href={service.url}
target={service.newTab === false ? '_top' : '_blank'}
href={service.openedUrl ? service.openedUrl : service.url}
style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
>
<Text mt="sm" align="center" lineClamp={1} weight={550}>
@@ -91,22 +117,24 @@ export function AppShelfItem(props: any) {
>
<motion.i
whileHover={{
cursor: 'pointer',
scale: 1.1,
}}
>
<Image
styles={{ root: { cursor: 'pointer' } }}
width={80}
height={80}
src={service.icon}
fit="contain"
onClick={() => {
window.open(service.url);
if (service.openedUrl) {
window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
} else window.open(service.url, service.newTab === false ? '_top' : '_blank');
}}
/>
</motion.i>
</AspectRatio>
<PingComponent url={service.url} />
<PingComponent url={service.url} status={service.status} />
</Card.Section>
</Center>
</Card>

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

@@ -20,19 +20,7 @@ export default function AppShelfMenu(props: any) {
onClose={() => setOpened(false)}
title="Modify a service"
>
<AddAppShelfItemForm
setOpened={setOpened}
name={service.name}
id={service.id}
category={service.category}
type={service.type}
url={service.url}
icon={service.icon}
apiKey={service.apiKey}
username={service.username}
password={service.password}
message="Save service"
/>
<AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
</Modal>
<Menu
position="right"
@@ -66,7 +54,7 @@ export default function AppShelfMenu(props: any) {
autoClose: 5000,
title: (
<Text>
Service <b>{service.name}</b> removed successfully
Service <b>{service.name}</b> removed successfully!
</Text>
),
color: 'green',

2
src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { createStyles, Switch, Group, useMantineColorScheme, Kbd } from '@mantine/core';
import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
import { useConfig } from '../../tools/state';
const useStyles = createStyles((theme) => ({
root: {
@@ -29,6 +30,7 @@ const useStyles = createStyles((theme) => ({
}));
export function ColorSchemeSwitch() {
const { config } = useConfig();
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const { classes, cx } = useStyles();

7
src/components/Config/ConfigChanger.tsx
View File

@@ -1,5 +1,5 @@
import { Center, Loader, Select, Tooltip } from '@mantine/core';
import { setCookies } from 'cookies-next';
import { setCookie } from 'cookies-next';
import { useEffect, useState } from 'react';
import { useConfig } from '../../tools/state';
@@ -26,7 +26,10 @@ export default function ConfigChanger() {
label="Config loader"
onChange={(e) => {
loadConfig(e ?? 'default');
setCookies('config-name', e ?? 'default', { maxAge: 60 * 60 * 24 * 30 });
setCookie('config-name', e ?? 'default', {
maxAge: 60 * 60 * 24 * 30,
sameSite: 'strict',
});
}}
data={
// If config list is empty, return the current config

7
src/components/Config/LoadConfig.tsx
View File

@@ -10,7 +10,7 @@ import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
import { showNotification } from '@mantine/notifications';
import { useRef } from 'react';
import { useRouter } from 'next/router';
import { setCookies } from 'cookies-next';
import { setCookie } from 'cookies-next';
import { useConfig } from '../../tools/state';
import { Config } from '../../tools/types';
import { migrateToIdConfig } from '../../tools/migrate';
@@ -90,7 +90,10 @@ export default function LoadConfigComponent(props: any) {
icon: <Check />,
message: undefined,
});
setCookies('config-name', newConfig.name, { maxAge: 60 * 60 * 24 * 30 });
setCookie('config-name', newConfig.name, {
maxAge: 60 * 60 * 24 * 30,
sameSite: 'strict',
});
const migratedConfig = migrateToIdConfig(newConfig);
setConfig(migratedConfig);
});

13
src/components/Config/SaveConfig.tsx
View File

@@ -27,7 +27,7 @@ export default function SaveConfigComponent(props: any) {
}
}
return (
<Group>
<Group spacing="xs">
<Modal
radius="md"
opened={opened}
@@ -59,10 +59,11 @@ export default function SaveConfigComponent(props: any) {
</Group>
</form>
</Modal>
<Button leftIcon={<Download />} variant="outline" onClick={onClick}>
Download your config
<Button size="xs" leftIcon={<Download />} variant="outline" onClick={onClick}>
Download config
</Button>
<Button
size="xs"
leftIcon={<Trash />}
variant="outline"
onClick={() => {
@@ -91,10 +92,10 @@ export default function SaveConfigComponent(props: any) {
setConfig({ ...config, name: 'default' });
}}
>
Delete current config
Delete config
</Button>
<Button leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
Save a copy of your config
<Button size="xs" leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
Save a copy
</Button>
</Group>
);

65
src/components/Settings/AdvancedSettings.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { TextInput, Group, Button } from '@mantine/core';
import { useForm } from '@mantine/form';
import { useConfig } from '../../tools/state';
import { ColorSelector } from './ColorSelector';
import { OpacitySelector } from './OpacitySelector';
import { AppCardWidthSelector } from './AppCardWidthSelector';
import { ShadeSelector } from './ShadeSelector';
export default function TitleChanger() {
const { config, setConfig } = useConfig();
const form = useForm({
initialValues: {
title: config.settings.title,
logo: config.settings.logo,
favicon: config.settings.favicon,
background: config.settings.background,
},
});
const saveChanges = (values: {
title?: string;
logo?: string;
favicon?: string;
background?: string;
}) => {
setConfig({
...config,
settings: {
...config.settings,
title: values.title,
logo: values.logo,
favicon: values.favicon,
background: values.background,
},
});
};
return (
<Group direction="column" grow mb="lg">
<form onSubmit={form.onSubmit((values) => saveChanges(values))}>
<Group grow direction="column">
<TextInput label="Page title" placeholder="Homarr 🦞" {...form.getInputProps('title')} />
<TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
<TextInput
label="Favicon"
placeholder="/favicon.svg"
{...form.getInputProps('favicon')}
/>
<TextInput
label="Background"
placeholder="/img/background.png"
{...form.getInputProps('background')}
/>
<Button type="submit">Save</Button>
</Group>
</form>
<ColorSelector type="primary" />
<ColorSelector type="secondary" />
<ShadeSelector />
<OpacitySelector />
<AppCardWidthSelector />
</Group>
);
}

32
src/components/Settings/AppCardWidthSelector.tsx Normal file
View 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>
);
}

96
src/components/Settings/ColorSelector.tsx Normal file
View File

@@ -0,0 +1,96 @@
import React, { useState } from 'react';
import { ColorSwatch, Group, Popover, Text, useMantineTheme } from '@mantine/core';
import { useConfig } from '../../tools/state';
import { useColorTheme } from '../../tools/color';
interface ColorControlProps {
type: string;
}
export function ColorSelector({ type }: ColorControlProps) {
const { config, setConfig } = useConfig();
const [opened, setOpened] = useState(false);
const { primaryColor, secondaryColor, setPrimaryColor, setSecondaryColor } = useColorTheme();
const theme = useMantineTheme();
const colors = Object.keys(theme.colors).map((color) => ({
swatch: theme.colors[color][6],
color,
}));
const configColor = type === 'primary' ? primaryColor : secondaryColor;
const setConfigColor = (color: string) => {
if (type === 'primary') {
setPrimaryColor(color);
setConfig({
...config,
settings: {
...config.settings,
primaryColor: color,
},
});
} else {
setSecondaryColor(color);
setConfig({
...config,
settings: {
...config.settings,
secondaryColor: color,
},
});
}
};
const swatches = colors.map(({ color, swatch }) => (
<ColorSwatch
component="button"
type="button"
onClick={() => setConfigColor(color)}
key={color}
color={swatch}
size={22}
style={{ color: theme.white, cursor: 'pointer' }}
/>
));
return (
<Group direction="row" spacing={3}>
<Popover
opened={opened}
onClose={() => setOpened(false)}
transitionDuration={0}
target={
<ColorSwatch
component="button"
type="button"
color={theme.colors[configColor][6]}
onClick={() => setOpened((o) => !o)}
size={22}
style={{ display: 'block', cursor: 'pointer' }}
/>
}
styles={{
root: {
marginRight: theme.spacing.xs,
},
body: {
width: 152,
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
},
arrow: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
},
}}
position="bottom"
placement="end"
withArrow
arrowSize={3}
>
<Group spacing="xs">{swatches}</Group>
</Popover>
<Text>{type[0].toUpperCase() + type.slice(1)} color</Text>
</Group>
);
}

86
src/components/Settings/CommonSettings.tsx Normal file
View File

@@ -0,0 +1,86 @@
import { Group, Text, SegmentedControl, TextInput } from '@mantine/core';
import { useState } from 'react';
import { useConfig } from '../../tools/state';
import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
import { WidgetsPositionSwitch } from '../WidgetsPositionSwitch/WidgetsPositionSwitch';
import ConfigChanger from '../Config/ConfigChanger';
import SaveConfigComponent from '../Config/SaveConfig';
import ModuleEnabler from './ModuleEnabler';
import Tip from '../layout/Tip';
export default function CommonSettings(args: any) {
const { config, setConfig } = useConfig();
const matches = [
{ label: 'Google', value: 'https://google.com/search?q=' },
{ label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
{ label: 'Bing', value: 'https://bing.com/search?q=' },
{ label: 'Custom', value: 'Custom' },
];
const [customSearchUrl, setCustomSearchUrl] = useState(config.settings.searchUrl);
const [searchUrl, setSearchUrl] = useState(
matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
);
return (
<Group direction="column" grow mb="lg">
<Group grow direction="column" spacing={0}>
<Text>Search engine</Text>
<Tip>
Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube or
for a Torrent respectively.
</Tip>
<SegmentedControl
fullWidth
mb="sm"
title="Search engine"
value={
// Match config.settings.searchUrl with a key in the matches array
searchUrl
}
onChange={
// Set config.settings.searchUrl to the value of the selected item
(e) => {
setSearchUrl(e);
setConfig({
...config,
settings: {
...config.settings,
searchUrl: e,
},
});
}
}
data={matches}
/>
{searchUrl === 'Custom' && (
<>
<Tip>%s can be used as a placeholder for the query.</Tip>
<TextInput
label="Query URL"
placeholder="Custom query URL"
value={customSearchUrl}
onChange={(event) => {
setCustomSearchUrl(event.currentTarget.value);
setConfig({
...config,
settings: {
...config.settings,
searchUrl: event.currentTarget.value,
},
});
}}
/>
</>
)}
</Group>
<ColorSchemeSwitch />
<WidgetsPositionSwitch />
<ModuleEnabler />
<ConfigChanger />
<SaveConfigComponent />
<Tip>Upload your config file by dragging and dropping it onto the page!</Tip>
</Group>
);
}

44
src/components/Settings/Credits.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { Group, ActionIcon, Anchor, Text } from '@mantine/core';
import { IconBrandDiscord, IconBrandGithub } from '@tabler/icons';
import { CURRENT_VERSION } from '../../../data/constants';
export default function Credits(props: any) {
return (
<Group position="center" direction="row" mr="xs">
<Group spacing={0}>
<ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
<IconBrandGithub size={18} />
</ActionIcon>
<Text
style={{
position: 'relative',
fontSize: '0.90rem',
color: 'gray',
}}
>
{CURRENT_VERSION}
</Text>
</Group>
<Group spacing={1}>
<Text
style={{
fontSize: '0.90rem',
textAlign: 'center',
color: 'gray',
}}
>
Made with ❤️ by @
<Anchor
href="https://github.com/ajnart"
style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
>
ajnart
</Anchor>
</Text>
<ActionIcon<'a'> component="a" href="https://discord.gg/aCsmEV5RgA" size="lg">
<IconBrandDiscord size={18} />
</ActionIcon>
</Group>
</Group>
);
}

45
src/components/Settings/ModuleEnabler.tsx
View File

@@ -1,5 +1,5 @@
import { Group, Switch } from '@mantine/core';
import * as Modules from '../modules';
import { Checkbox, Group, SimpleGrid, Title } from '@mantine/core';
import * as Modules from '../../modules';
import { useConfig } from '../../tools/state';
export default function ModuleEnabler(props: any) {
@@ -7,26 +7,29 @@ export default function ModuleEnabler(props: any) {
const modules = Object.values(Modules).map((module) => module);
return (
<Group direction="column">
{modules.map((module) => (
<Switch
key={module.title}
size="md"
checked={config.modules?.[module.title]?.enabled ?? false}
label={`Enable ${module.title} module`}
onChange={(e) => {
setConfig({
...config,
modules: {
...config.modules,
[module.title]: {
...config.modules?.[module.title],
enabled: e.currentTarget.checked,
<Title order={4}>Module enabler</Title>
<SimpleGrid cols={2} spacing="md">
{modules.map((module) => (
<Checkbox
key={module.title}
size="md"
checked={config.modules?.[module.title]?.enabled ?? false}
label={`${module.title}`}
onChange={(e) => {
setConfig({
...config,
modules: {
...config.modules,
[module.title]: {
...config.modules?.[module.title],
enabled: e.currentTarget.checked,
},
},
},
});
}}
/>
))}
});
}}
/>
))}
</SimpleGrid>
</Group>
);
}

44
src/components/Settings/OpacitySelector.tsx Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import { Group, Text, Slider } from '@mantine/core';
import { useConfig } from '../../tools/state';
export function OpacitySelector() {
const { config, setConfig } = useConfig();
const MARKS = [
{ value: 10, label: '10' },
{ value: 20, label: '20' },
{ value: 30, label: '30' },
{ value: 40, label: '40' },
{ value: 50, label: '50' },
{ value: 60, label: '60' },
{ value: 70, label: '70' },
{ value: 80, label: '80' },
{ value: 90, label: '90' },
{ value: 100, label: '100' },
];
const setConfigOpacity = (opacity: number) => {
setConfig({
...config,
settings: {
...config.settings,
appOpacity: opacity,
},
});
};
return (
<Group direction="column" spacing="xs" grow>
<Text>App Opacity</Text>
<Slider
defaultValue={config.settings.appOpacity || 100}
step={10}
min={10}
marks={MARKS}
styles={{ markLabel: { fontSize: 'xx-small' } }}
onChange={(value) => setConfigOpacity(value)}
/>
</Group>
);
}

10
src/components/Settings/SettingsMenu.story.tsx
View File

@@ -1,10 +0,0 @@
import { SettingsMenuButton } from './SettingsMenu';
export default {
title: ' menu',
args: {
opened: false,
},
};
export const Default = (args: any) => <SettingsMenuButton {...args} />;

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

@@ -1,131 +1,25 @@
import {
ActionIcon,
Group,
Title,
Text,
Tooltip,
SegmentedControl,
TextInput,
Drawer,
Anchor,
} from '@mantine/core';
import { useColorScheme, useHotkeys } from '@mantine/hooks';
import { ActionIcon, Title, Tooltip, Drawer, Tabs, ScrollArea } from '@mantine/core';
import { useHotkeys } from '@mantine/hooks';
import { useState } from 'react';
import { IconBrandGithub as BrandGithub, IconSettings } from '@tabler/icons';
import { CURRENT_VERSION } from '../../../data/constants';
import { useConfig } from '../../tools/state';
import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
import ConfigChanger from '../Config/ConfigChanger';
import SaveConfigComponent from '../Config/SaveConfig';
import ModuleEnabler from './ModuleEnabler';
import { IconSettings } from '@tabler/icons';
import AdvancedSettings from './AdvancedSettings';
import CommonSettings from './CommonSettings';
import Credits from './Credits';
function SettingsMenu(props: any) {
const { config, setConfig } = useConfig();
const colorScheme = useColorScheme();
const { current, latest } = props;
const matches = [
{ label: 'Google', value: 'https://google.com/search?q=' },
{ label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
{ label: 'Bing', value: 'https://bing.com/search?q=' },
{ label: 'Custom', value: 'Custom' },
];
const [customSearchUrl, setCustomSearchUrl] = useState(config.settings.searchUrl);
const [searchUrl, setSearchUrl] = useState(
matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
);
return (
<Group direction="column" grow>
<Group grow direction="column" spacing={0}>
<Text>Search engine</Text>
<SegmentedControl
fullWidth
title="Search engine"
value={
// Match config.settings.searchUrl with a key in the matches array
searchUrl
}
onChange={
// Set config.settings.searchUrl to the value of the selected item
(e) => {
setSearchUrl(e);
setConfig({
...config,
settings: {
...config.settings,
searchUrl: e,
},
});
}
}
data={matches}
/>
{searchUrl === 'Custom' && (
<TextInput
label="Query URL"
placeholder="Custom query url"
value={customSearchUrl}
onChange={(event) => {
setCustomSearchUrl(event.currentTarget.value);
setConfig({
...config,
settings: {
...config.settings,
searchUrl: event.currentTarget.value,
},
});
}}
/>
)}
</Group>
<ModuleEnabler />
<ColorSchemeSwitch />
<ConfigChanger />
<SaveConfigComponent />
<Text
style={{
alignSelf: 'center',
fontSize: '0.75rem',
textAlign: 'center',
color: '#a0aec0',
}}
>
tip: You can upload your config file by dragging and dropping it onto the page
</Text>
<Group position="center" direction="row" mr="xs">
<Group spacing={0}>
<ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
<BrandGithub size={18} />
</ActionIcon>
<Text
style={{
position: 'relative',
fontSize: '0.90rem',
color: 'gray',
}}
>
{CURRENT_VERSION}
</Text>
</Group>
<Text
style={{
fontSize: '0.90rem',
textAlign: 'center',
color: '#a0aec0',
}}
>
Made with ❤️ by @
<Anchor
href="https://github.com/ajnart"
style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
>
ajnart
</Anchor>
</Text>
</Group>
</Group>
<Tabs grow>
<Tabs.Tab data-autofocus label="Common">
<ScrollArea style={{ height: '78vh' }} offsetScrollbars>
<CommonSettings />
</ScrollArea>
</Tabs.Tab>
<Tabs.Tab label="Customizations">
<ScrollArea style={{ height: '78vh' }} offsetScrollbars>
<AdvancedSettings />
</ScrollArea>
</Tabs.Tab>
</Tabs>
);
}
@@ -136,14 +30,15 @@ export function SettingsMenuButton(props: any) {
return (
<>
<Drawer
size="auto"
padding="xl"
size="xl"
padding="lg"
position="right"
title={<Title order={3}>Settings</Title>}
title={<Title order={5}>Settings</Title>}
opened={props.opened || opened}
onClose={() => setOpened(false)}
>
<SettingsMenu />
<Credits />
</Drawer>
<ActionIcon
variant="default"

97
src/components/Settings/ShadeSelector.tsx Normal file
View File

@@ -0,0 +1,97 @@
import React, { useState } from 'react';
import { ColorSwatch, Group, Popover, Text, useMantineTheme, MantineTheme } from '@mantine/core';
import { useConfig } from '../../tools/state';
import { useColorTheme } from '../../tools/color';
export function ShadeSelector() {
const { config, setConfig } = useConfig();
const [opened, setOpened] = useState(false);
const { primaryColor, secondaryColor, primaryShade, setPrimaryShade } = useColorTheme();
const theme = useMantineTheme();
const primaryShades = theme.colors[primaryColor].map((s, i) => ({
swatch: theme.colors[primaryColor][i],
shade: i as MantineTheme['primaryShade'],
}));
const secondaryShades = theme.colors[secondaryColor].map((s, i) => ({
swatch: theme.colors[secondaryColor][i],
shade: i as MantineTheme['primaryShade'],
}));
const setConfigShade = (shade: MantineTheme['primaryShade']) => {
setPrimaryShade(shade);
setConfig({
...config,
settings: {
...config.settings,
primaryShade: shade,
},
});
};
const primarySwatches = primaryShades.map(({ swatch, shade }) => (
<ColorSwatch
component="button"
type="button"
onClick={() => setConfigShade(shade)}
key={Number(shade)}
color={swatch}
size={22}
style={{ color: theme.white, cursor: 'pointer' }}
/>
));
const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
<ColorSwatch
component="button"
type="button"
onClick={() => setConfigShade(shade)}
key={Number(shade)}
color={swatch}
size={22}
style={{ color: theme.white, cursor: 'pointer' }}
/>
));
return (
<Group direction="row" spacing={3}>
<Popover
opened={opened}
onClose={() => setOpened(false)}
transitionDuration={0}
target={
<ColorSwatch
component="button"
type="button"
color={theme.colors[primaryColor][Number(primaryShade)]}
onClick={() => setOpened((o) => !o)}
size={22}
style={{ display: 'block', cursor: 'pointer' }}
/>
}
styles={{
root: {
marginRight: theme.spacing.xs,
},
body: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
},
arrow: {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
},
}}
position="bottom"
placement="end"
withArrow
arrowSize={3}
>
<Group direction="column" spacing="xs">
<Group spacing="xs">{primarySwatches}</Group>
<Group spacing="xs">{secondarySwatches}</Group>
</Group>
</Popover>
<Text>Shade</Text>
</Group>
);
}

60
src/components/WidgetsPositionSwitch/WidgetsPositionSwitch.tsx Normal file
View File

@@ -0,0 +1,60 @@
import React, { useState } from 'react';
import { createStyles, Switch, Group } from '@mantine/core';
import { useConfig } from '../../tools/state';
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 WidgetsPositionSwitch() {
const { config, setConfig } = useConfig();
const { classes, cx } = useStyles();
const defaultPosition = config?.settings?.widgetPosition || 'right';
const [widgetPosition, setWidgetPosition] = useState(defaultPosition);
const toggleWidgetPosition = () => {
const position = widgetPosition === 'right' ? 'left' : 'right';
setWidgetPosition(position);
setConfig({
...config,
settings: {
...config.settings,
widgetPosition: position,
},
});
};
return (
<Group>
<div className={classes.root}>
<Switch
checked={widgetPosition === 'left'}
onChange={() => toggleWidgetPosition()}
size="md"
/>
</div>
Position widgets on left
</Group>
);
}

30
src/components/layout/Aside.tsx
View File

@@ -1,26 +1,36 @@
import { Aside as MantineAside, Group } from '@mantine/core';
import { WeatherModule, DateModule, CalendarModule, TotalDownloadsModule } from '../modules';
import { ModuleWrapper } from '../modules/moduleWrapper';
import { Aside as MantineAside, createStyles } from '@mantine/core';
import Widgets from './Widgets';
const useStyles = createStyles((theme) => ({
hide: {
[theme.fn.smallerThan('xs')]: {
display: 'none',
},
},
burger: {
[theme.fn.largerThan('sm')]: {
display: 'none',
},
},
}));
export default function Aside(props: any) {
const { classes, cx } = useStyles();
return (
<MantineAside
pr="md"
hiddenBreakpoint="md"
hiddenBreakpoint="sm"
hidden
className={cx(classes.hide)}
style={{
border: 'none',
background: 'none',
}}
width={{
base: 'auto',
}}
>
<Group mt="sm" grow direction="column" style={{ width: 300 }}>
<ModuleWrapper module={CalendarModule} />
<ModuleWrapper module={TotalDownloadsModule} />
<ModuleWrapper module={WeatherModule} />
<ModuleWrapper module={DateModule} />
</Group>
<Widgets />
</MantineAside>
);
}

20
src/components/layout/Background.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { Global } from '@mantine/core';
import { useConfig } from '../../tools/state';
export function Background() {
const { config } = useConfig();
return (
<Global
styles={{
body: {
minHeight: '100vh',
backgroundImage: `url('${config.settings.background}')` || '',
backgroundPosition: 'center center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
},
}}
/>
);
}

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

@@ -1,6 +1,7 @@
import React, { useEffect } from 'react';
import { createStyles, Footer as FooterComponent } from '@mantine/core';
import { showNotification } from '@mantine/notifications';
import { IconAlertCircle as AlertCircle } from '@tabler/icons';
import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
const useStyles = createStyles((theme) => ({
@@ -38,12 +39,21 @@ export function Footer({ links }: FooterCenteredProps) {
// Fetch Data here when component first mounted
fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
res.json().then((data) => {
if (data.tag_name !== CURRENT_VERSION) {
if (data.tag_name > CURRENT_VERSION) {
showNotification({
color: 'yellow',
autoClose: false,
title: 'New version available',
message: `Version ${data.tag_name} is available, update now! 😡`,
icon: <AlertCircle />,
message: `Version ${data.tag_name} is available, update now!`,
});
} else if (data.tag_name < CURRENT_VERSION) {
showNotification({
color: 'orange',
autoClose: 5000,
title: 'You are using a development version',
icon: <AlertCircle />,
message: 'This version of Homarr is still in development! Bugs are expected 🐛',
});
}
});

20
src/components/layout/Header.tsx
View File

@@ -1,9 +1,11 @@
import React from 'react';
import { createStyles, Header as Head, Group, Box } from '@mantine/core';
import { Logo } from './Logo';
import SearchBar from '../modules/search/SearchModule';
import { Box, createStyles, Group, Header as Head } from '@mantine/core';
import { useBooleanToggle } from '@mantine/hooks';
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
import DockerMenuButton from '../../modules/docker/DockerModule';
import SearchBar from '../../modules/search/SearchModule';
import { SettingsMenuButton } from '../Settings/SettingsMenu';
import { Logo } from './Logo';
const HEADER_HEIGHT = 60;
@@ -13,19 +15,27 @@ const useStyles = createStyles((theme) => ({
display: 'none',
},
},
burger: {
[theme.fn.largerThan('sm')]: {
display: 'none',
},
},
}));
export function Header(props: any) {
const [opened, toggleOpened] = useBooleanToggle(false);
const { classes, cx } = useStyles();
const [hidden, toggleHidden] = useBooleanToggle(true);
return (
<Head height="auto">
<Group m="xs" position="apart">
<Group p="xs" position="apart">
<Box className={classes.hide}>
<Logo style={{ fontSize: 22 }} />
</Box>
<Group noWrap>
<SearchBar />
<DockerMenuButton />
<SettingsMenuButton />
<AddItemShelfButton />
</Group>

14
src/components/layout/HeaderConfig.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import Head from 'next/head';
import { useConfig } from '../../tools/state';
export function HeaderConfig(props: any) {
const { config } = useConfig();
return (
<Head>
<title>{config.settings.title || 'Homarr 🦞'}</title>
<link rel="shortcut icon" href={config.settings.favicon || '/favicon.svg'} />
</Head>
);
}

16
src/components/layout/Layout.tsx
View File

@@ -2,6 +2,10 @@ import { AppShell, createStyles } from '@mantine/core';
import { Header } from './Header';
import { Footer } from './Footer';
import Aside from './Aside';
import Navbar from './Navbar';
import { HeaderConfig } from './HeaderConfig';
import { Background } from './Background';
import { useConfig } from '../../tools/state';
const useStyles = createStyles((theme) => ({
main: {},
@@ -9,8 +13,18 @@ const useStyles = createStyles((theme) => ({
export default function Layout({ children, style }: any) {
const { classes, cx } = useStyles();
const { config } = useConfig();
const widgetPosition = config?.settings?.widgetPosition === 'left';
return (
<AppShell aside={<Aside />} header={<Header />} footer={<Footer links={[]} />}>
<AppShell
header={<Header />}
navbar={widgetPosition ? <Navbar /> : undefined}
aside={widgetPosition ? undefined : <Aside />}
footer={<Footer links={[]} />}
>
<HeaderConfig />
<Background />
<main
className={cx(classes.main)}
style={{

45
src/components/layout/Logo.tsx
View File

@@ -1,33 +1,44 @@
import { Group, Image, Text } from '@mantine/core';
import { NextLink } from '@mantine/next';
import * as React from 'react';
import { useColorTheme } from '../../tools/color';
import { useConfig } from '../../tools/state';
export function Logo({ style, withoutText }: any) {
const { config } = useConfig();
const { primaryColor, secondaryColor } = useColorTheme();
export function Logo({ style }: any) {
return (
<Group spacing="xs">
<Image
width={50}
src="/imgs/logo.png"
src={config.settings.logo || '/imgs/logo.png'}
style={{
position: 'relative',
}}
/>
<NextLink
style={{
textDecoration: 'none',
position: 'relative',
}}
href="/"
>
<Text
sx={style}
weight="bold"
variant="gradient"
gradient={{ from: 'red', to: 'orange', deg: 145 }}
{withoutText ? null : (
<NextLink
href="/"
style={{
textDecoration: 'none',
position: 'relative',
}}
>
Homarr
</Text>
</NextLink>
<Text
sx={style}
weight="bold"
variant="gradient"
gradient={{
from: primaryColor,
to: secondaryColor,
deg: 145,
}}
>
{config.settings.title || 'Homarr'}
</Text>
</NextLink>
)}
</Group>
);
}

31
src/components/layout/Navbar.tsx
View File

@@ -1,24 +1,37 @@
import { Group, Navbar as MantineNavbar } from '@mantine/core';
import { WeatherModule, DateModule } from '../modules';
import { ModuleWrapper } from '../modules/moduleWrapper';
import { createStyles, Navbar as MantineNavbar } from '@mantine/core';
import Widgets from './Widgets';
const useStyles = createStyles((theme) => ({
hide: {
[theme.fn.smallerThan('xs')]: {
display: 'none',
},
},
burger: {
[theme.fn.largerThan('sm')]: {
display: 'none',
},
},
}));
export default function Navbar() {
const { classes, cx } = useStyles();
return (
<MantineNavbar
hiddenBreakpoint="lg"
pl="md"
hiddenBreakpoint="sm"
hidden
className={cx(classes.hide)}
style={{
border: 'none',
background: 'none',
}}
width={{
base: 'auto',
}}
>
<Group mt="sm" direction="column" align="center">
<ModuleWrapper module={DateModule} />
<ModuleWrapper module={WeatherModule} />
<ModuleWrapper module={WeatherModule} />
</Group>
<Widgets />
</MantineNavbar>
);
}

19
src/components/layout/Tip.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { Text } from '@mantine/core';
interface TipProps {
children: React.ReactNode;
}
export default function Tip(props: TipProps) {
return (
<Text
style={{
fontSize: '0.75rem',
color: 'gray',
marginBottom: '0.5rem',
}}
>
Tip: {props.children}
</Text>
);
}

16
src/components/layout/Widgets.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { Group } from '@mantine/core';
import { CalendarModule, DateModule, TotalDownloadsModule, WeatherModule } from '../../modules';
import { DashdotModule } from '../../modules/dashdot';
import { ModuleWrapper } from '../../modules/moduleWrapper';
export default function Widgets(props: any) {
return (
<Group my="sm" grow direction="column" style={{ width: 300 }}>
<ModuleWrapper module={CalendarModule} />
<ModuleWrapper module={TotalDownloadsModule} />
<ModuleWrapper module={WeatherModule} />
<ModuleWrapper module={DateModule} />
<ModuleWrapper module={DashdotModule} />
</Group>
);
}

7
src/components/modules/calendar/CalendarComponent.story.tsx
View File

@@ -1,7 +0,0 @@
import CalendarComponent from './CalendarModule';
export default {
title: 'Calendar component',
};
export const Default = (args: any) => <CalendarComponent {...args} />;

67
src/components/modules/calendar/MediaDisplay.story.tsx
View File

@@ -1,67 +0,0 @@
import { RadarrMediaDisplay } from './MediaDisplay';
export default {
title: 'Media display component',
args: {
media: {
title: 'Doctor Strange in the Multiverse of Madness',
originalTitle: 'Doctor Strange in the Multiverse of Madness',
originalLanguage: {
id: 1,
name: 'English',
},
secondaryYearSourceId: 0,
sortTitle: 'doctor strange in multiverse madness',
sizeOnDisk: 0,
status: 'announced',
overview:
'Doctor Strange, with the help of mystical allies both old and new, traverses the mind-bending and dangerous alternate realities of the Multiverse to confront a mysterious new adversary.',
inCinemas: '2022-05-04T00:00:00Z',
images: [
{
coverType: 'poster',
url: 'https://image.tmdb.org/t/p/original/wRnbWt44nKjsFPrqSmwYki5vZtF.jpg',
},
{
coverType: 'fanart',
url: 'https://image.tmdb.org/t/p/original/ndCSoasjIZAMMDIuMxuGnNWu4DU.jpg',
},
],
website: 'https://www.marvel.com/movies/doctor-strange-in-the-multiverse-of-madness',
year: 2022,
hasFile: false,
youTubeTrailerId: 'aWzlQ2N6qqg',
studio: 'Marvel Studios',
path: '/config/Doctor Strange in the Multiverse of Madness (2022)',
qualityProfileId: 1,
monitored: true,
minimumAvailability: 'announced',
isAvailable: true,
folderName: '/config/Doctor Strange in the Multiverse of Madness (2022)',
runtime: 126,
cleanTitle: 'doctorstrangeinmultiversemadness',
imdbId: 'tt9419884',
tmdbId: 453395,
titleSlug: '453395',
certification: 'PG-13',
genres: ['Fantasy', 'Action', 'Adventure'],
tags: [],
added: '2022-04-29T20:52:33Z',
ratings: {
tmdb: {
votes: 0,
value: 0,
type: 'user',
},
},
collection: {
name: 'Doctor Strange Collection',
tmdbId: 618529,
images: [],
},
id: 1,
},
},
};
export const Default = (args: any) => <RadarrMediaDisplay {...args} />;

7
src/components/modules/date/DateModule.story.tsx
View File

@@ -1,7 +0,0 @@
import DateComponent from './DateModule';
export default {
title: 'Date module',
};
export const Default = (args: any) => <DateComponent {...args} />;

140
src/components/modules/downloads/DownloadsModule.tsx
View File

@@ -1,140 +0,0 @@
import { Table, Text, Tooltip, Title, Group, Progress, Skeleton } from '@mantine/core';
import { IconDownload as Download } from '@tabler/icons';
import { useEffect, useState } from 'react';
import axios from 'axios';
import { NormalizedTorrent } from '@ctrl/shared-torrent';
import { IModule } from '../modules';
import { useConfig } from '../../../tools/state';
import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
export const DownloadsModule: IModule = {
title: 'Torrent',
description: 'Show the current download speed of supported services',
icon: Download,
component: DownloadComponent,
options: {
hidecomplete: {
name: 'Hide completed torrents',
value: false,
},
},
};
export default function DownloadComponent() {
const { config } = useConfig();
const qBittorrentService = config.services
.filter((service) => service.type === 'qBittorrent')
.at(0);
const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
const hideComplete: boolean =
(config?.modules?.[DownloadsModule.title]?.options?.hidecomplete?.value as boolean) ?? false;
const [delugeTorrents, setDelugeTorrents] = useState<NormalizedTorrent[]>([]);
const [qBittorrentTorrents, setqBittorrentTorrents] = useState<NormalizedTorrent[]>([]);
useEffect(() => {
if (qBittorrentService) {
setInterval(() => {
axios
.post('/api/modules/downloads?dlclient=qbit', { ...qBittorrentService })
.then((res) => {
setqBittorrentTorrents(res.data.torrents);
});
}, 3000);
}
if (delugeService) {
setInterval(() => {
axios.post('/api/modules/downloads?dlclient=deluge', { ...delugeService }).then((res) => {
setDelugeTorrents(res.data.torrents);
});
}, 3000);
}
}, [config.modules]);
if (!qBittorrentService && !delugeService) {
return (
<Group direction="column">
<Title>Critical: No qBittorrent/Deluge instance found in services.</Title>
<Group>
<Title order={3}>Add a qBittorrent/Deluge service to view current downloads</Title>
<AddItemShelfButton />
</Group>
</Group>
);
}
if (qBittorrentTorrents.length === 0 && delugeTorrents.length === 0) {
return (
<>
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
</>
);
}
const ths = (
<tr>
<th>Name</th>
<th>Download</th>
<th>Upload</th>
<th>Progress</th>
</tr>
);
// Loop over qBittorrent torrents merging with deluge torrents
const torrents: NormalizedTorrent[] = [];
delugeTorrents.forEach((delugeTorrent) =>
torrents.push({ ...delugeTorrent, progress: delugeTorrent.progress / 100 })
);
qBittorrentTorrents.forEach((torrent) => torrents.push(torrent));
const rows = torrents.map((torrent) => {
if (torrent.progress === 1 && hideComplete) {
return [];
}
const downloadSpeed = torrent.downloadSpeed / 1024 / 1024;
const uploadSpeed = torrent.uploadSpeed / 1024 / 1024;
return (
<tr key={torrent.id}>
<td>
<Tooltip position="top" label={torrent.name}>
<Text
style={{
maxWidth: '30vw',
}}
size="xs"
lineClamp={1}
>
{torrent.name}
</Text>
</Tooltip>
</td>
<td>
<Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
</td>
<td>
<Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
</td>
<td>
<Text>{(torrent.progress * 100).toFixed(1)}%</Text>
<Progress
radius="lg"
color={torrent.progress === 1 ? 'green' : 'blue'}
value={torrent.progress * 100}
size="lg"
/>
</td>
</tr>
);
});
return (
<Group noWrap direction="column">
<Title order={4}>Your torrents</Title>
<Table highlightOnHover>
<thead>{ths}</thead>
<tbody>{rows}</tbody>
</Table>
</Group>
);
}

16
src/components/modules/ping/PingModule.story.tsx
View File

@@ -1,16 +0,0 @@
import { serviceItem } from '../../../tools/types';
import PingComponent from './PingModule';
export default {
title: 'Modules/Search bar',
};
const service: serviceItem = {
id: '1',
type: 'Other',
name: 'YouTube',
icon: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/youtube.png',
url: 'https://youtube.com/',
};
export const Default = (args: any) => <PingComponent service={service} />;

10
src/components/modules/search/SearchModule.story.tsx
View File

@@ -1,10 +0,0 @@
import SearchBar from './SearchModule';
export default {
title: 'Search bar',
config: {
searchBar: false,
},
};
export const Default = (args: any) => <SearchBar {...args} />;

8
src/components/modules/modules.tsx → src/modules/ModuleTypes.d.ts vendored
View File

@@ -1,11 +1,14 @@
// This interface is to be used in all the modules of the project
// Each module should have its own interface and call the following function:
// TODO: Add a function to register a module
import { TablerIcon } from '@tabler/icons';
// Note: Maybe use context to keep track of the modules
export interface IModule {
title: string;
description: string;
icon: React.ReactNode;
icon: TablerIcon;
component: React.ComponentType;
options?: Option;
}
@@ -16,5 +19,6 @@ interface Option {
export interface OptionValues {
name: string;
value: boolean | string;
value: boolean | string | string[];
options?: string[];
}

245
src/components/modules/calendar/CalendarModule.tsx → src/modules/calendar/CalendarModule.tsx
View File

@@ -1,17 +1,27 @@
/* eslint-disable react/no-children-prop */
import { Box, Divider, Indicator, Popover, ScrollArea, useMantineTheme } from '@mantine/core';
import {
Box,
Divider,
Indicator,
Popover,
ScrollArea,
createStyles,
useMantineTheme,
} from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { Calendar } from '@mantine/dates';
import { showNotification } from '@mantine/notifications';
import { IconCalendar as CalendarIcon, IconCheck as Check } from '@tabler/icons';
import { useConfig } from '../../../tools/state';
import { IModule } from '../modules';
import { IconCalendar as CalendarIcon } from '@tabler/icons';
import axios from 'axios';
import { useConfig } from '../../tools/state';
import { IModule } from '../ModuleTypes';
import {
SonarrMediaDisplay,
RadarrMediaDisplay,
LidarrMediaDisplay,
ReadarrMediaDisplay,
} from './MediaDisplay';
} from '../common';
import { serviceItem } from '../../tools/types';
import { useColorTheme } from '../../tools/color';
export const CalendarModule: IModule = {
title: 'Calendar',
@@ -19,116 +29,125 @@ export const CalendarModule: IModule = {
'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
icon: CalendarIcon,
component: CalendarComponent,
options: {
sundaystart: {
name: 'Start the week on Sunday',
value: false,
},
},
};
export default function CalendarComponent(props: any) {
const { config } = useConfig();
const theme = useMantineTheme();
const { secondaryColor } = useColorTheme();
const useStyles = createStyles((theme) => ({
weekend: {
color: `${secondaryColor} !important`,
},
}));
const [sonarrMedias, setSonarrMedias] = useState([] as any);
const [lidarrMedias, setLidarrMedias] = useState([] as any);
const [radarrMedias, setRadarrMedias] = useState([] as any);
const [readarrMedias, setReadarrMedias] = useState([] as any);
const sonarrServices = config.services.filter((service) => service.type === 'Sonarr');
const radarrServices = config.services.filter((service) => service.type === 'Radarr');
const lidarrServices = config.services.filter((service) => service.type === 'Lidarr');
const readarrServices = config.services.filter((service) => service.type === 'Readarr');
const today = new Date();
const { classes, cx } = useStyles();
function getMedias(service: serviceItem | undefined, type: string) {
if (!service || !service.apiKey) {
return Promise.resolve({ data: [] });
}
return axios.post(`/api/modules/calendar?type=${type}`, { id: service.id });
}
useEffect(() => {
// Filter only sonarr and radarr services
const filtered = config.services.filter(
(service) =>
service.type === 'Sonarr' ||
service.type === 'Radarr' ||
service.type === 'Lidarr' ||
service.type === 'Readarr'
);
// Get the url and apiKey for all Sonarr and Radarr services
const sonarrService = filtered.filter((service) => service.type === 'Sonarr').at(0);
const radarrService = filtered.filter((service) => service.type === 'Radarr').at(0);
const lidarrService = filtered.filter((service) => service.type === 'Lidarr').at(0);
const readarrService = filtered.filter((service) => service.type === 'Readarr').at(0);
const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
const lastMonth = new Date(new Date().setMonth(new Date().getMonth() - 2)).toISOString();
if (sonarrService && sonarrService.apiKey) {
const baseUrl = new URL(sonarrService.url).origin;
fetch(
`${baseUrl}/api/calendar?apikey=${sonarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
).then((response) => {
response.ok &&
response.json().then((data) => {
setSonarrMedias(data);
showNotification({
title: 'Sonarr',
icon: <Check />,
color: 'green',
autoClose: 1500,
radius: 'md',
message: `Loaded ${data.length} releases`,
});
});
});
}
if (radarrService && radarrService.apiKey) {
const baseUrl = new URL(radarrService.url).origin;
fetch(
`${baseUrl}/api/v3/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
).then((response) => {
response.ok &&
response.json().then((data) => {
setRadarrMedias(data);
showNotification({
title: 'Radarr',
icon: <Check />,
color: 'green',
autoClose: 1500,
radius: 'md',
message: `Loaded ${data.length} releases`,
});
});
});
}
if (lidarrService && lidarrService.apiKey) {
const baseUrl = new URL(lidarrService.url).origin;
fetch(
`${baseUrl}/api/v1/calendar?apikey=${lidarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
).then((response) => {
response.ok &&
response.json().then((data) => {
setLidarrMedias(data);
showNotification({
title: 'Lidarr',
icon: <Check />,
color: 'green',
autoClose: 1500,
radius: 'md',
message: `Loaded ${data.length} releases`,
});
});
});
}
if (readarrService && readarrService.apiKey) {
const baseUrl = new URL(readarrService.url).origin;
fetch(
`${baseUrl}/api/v1/calendar?apikey=${readarrService?.apiKey}&end=${nextMonth}&start=${lastMonth}`
).then((response) => {
response.ok &&
response.json().then((data) => {
setReadarrMedias(data);
showNotification({
title: 'Readarr',
icon: <Check />,
color: 'green',
autoClose: 1500,
radius: 'md',
message: `Loaded ${data.length} releases`,
});
});
});
}
// Create each Sonarr service and get the medias
const currentSonarrMedias: any[] = [];
Promise.all(
sonarrServices.map((service) =>
getMedias(service, 'sonarr')
.then((res) => {
currentSonarrMedias.push(...res.data);
})
.catch(() => {
currentSonarrMedias.push([]);
})
)
).then(() => {
setSonarrMedias(currentSonarrMedias);
});
const currentRadarrMedias: any[] = [];
Promise.all(
radarrServices.map((service) =>
getMedias(service, 'radarr')
.then((res) => {
currentRadarrMedias.push(...res.data);
})
.catch(() => {
currentRadarrMedias.push([]);
})
)
).then(() => {
setRadarrMedias(currentRadarrMedias);
});
const currentLidarrMedias: any[] = [];
Promise.all(
lidarrServices.map((service) =>
getMedias(service, 'lidarr')
.then((res) => {
currentLidarrMedias.push(...res.data);
})
.catch(() => {
currentLidarrMedias.push([]);
})
)
).then(() => {
setLidarrMedias(currentLidarrMedias);
});
const currentReadarrMedias: any[] = [];
Promise.all(
readarrServices.map((service) =>
getMedias(service, 'readarr')
.then((res) => {
currentReadarrMedias.push(...res.data);
})
.catch(() => {
currentReadarrMedias.push([]);
})
)
).then(() => {
setReadarrMedias(currentReadarrMedias);
});
}, [config.services]);
if (sonarrMedias === undefined && radarrMedias === undefined) {
return <Calendar />;
}
const weekStartsAtSunday =
(config?.modules?.[CalendarModule.title]?.options?.sundaystart?.value as boolean) ?? false;
return (
<Calendar
firstDayOfWeek={weekStartsAtSunday ? 'sunday' : 'monday'}
onChange={(day: any) => {}}
dayStyle={(date) =>
date.getDay() === today.getDay() && date.getDate() === today.getDate()
? {
backgroundColor:
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
}
: {}
}
styles={{
calendarHeader: {
marginRight: 15,
marginLeft: 15,
},
}}
allowLevelChange={false}
dayClassName={(date, modifiers) => cx({ [classes.weekend]: modifiers.weekend })}
renderDay={(renderdate) => (
<DayComponent
renderdate={renderdate}
@@ -152,29 +171,25 @@ function DayComponent(props: any) {
}: { renderdate: Date; sonarrmedias: []; radarrmedias: []; lidarrmedias: []; readarrmedias: [] } =
props;
const [opened, setOpened] = useState(false);
const theme = useMantineTheme();
const day = renderdate.getDate();
const readarrFiltered = readarrmedias.filter((media: any) => {
const date = new Date(media.releaseDate);
return date.getDate() === day && date.getMonth() === renderdate.getMonth();
return date.toDateString() === renderdate.toDateString();
});
const lidarrFiltered = lidarrmedias.filter((media: any) => {
const date = new Date(media.releaseDate);
// Return true if the date is renerdate without counting hours and minutes
return date.getDate() === day && date.getMonth() === renderdate.getMonth();
return date.toDateString() === renderdate.toDateString();
});
const sonarrFiltered = sonarrmedias.filter((media: any) => {
const date = new Date(media.airDate);
// Return true if the date is renerdate without counting hours and minutes
return date.getDate() === day && date.getMonth() === renderdate.getMonth();
const date = new Date(media.airDateUtc);
return date.toDateString() === renderdate.toDateString();
});
const radarrFiltered = radarrmedias.filter((media: any) => {
const date = new Date(media.inCinemas);
// Return true if the date is renerdate without counting hours and minutes
return date.getDate() === day && date.getMonth() === renderdate.getMonth();
return date.toDateString() === renderdate.toDateString();
});
if (
sonarrFiltered.length === 0 &&
@@ -244,7 +259,7 @@ function DayComponent(props: any) {
/>
)}
<Popover
position="left"
position="bottom"
radius="lg"
shadow="xl"
transition="pop"
@@ -253,7 +268,7 @@ function DayComponent(props: any) {
boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
},
}}
width={700}
width="auto"
onClose={() => setOpened(false)}
opened={opened}
target={day}
@@ -274,12 +289,18 @@ function DayComponent(props: any) {
{index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
</React.Fragment>
))}
{sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && (
<Divider variant="dashed" my="xl" />
)}
{lidarrFiltered.map((media: any, index: number) => (
<React.Fragment key={index}>
<LidarrMediaDisplay media={media} />
{index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
</React.Fragment>
))}
{lidarrFiltered.length > 0 && readarrFiltered.length > 0 && (
<Divider variant="dashed" my="xl" />
)}
{readarrFiltered.map((media: any, index: number) => (
<React.Fragment key={index}>
<ReadarrMediaDisplay media={media} />

0
src/components/modules/calendar/index.ts → src/modules/calendar/index.ts
View File

0
src/components/modules/calendar/mediaExample.ts → src/modules/calendar/mediaExample.ts
View File

43
src/components/modules/calendar/MediaDisplay.tsx → src/modules/common/MediaDisplay.tsx
View File

@@ -7,12 +7,12 @@ import {
ActionIcon,
Anchor,
ScrollArea,
Tooltip,
GroupProps,
createStyles,
} from '@mantine/core';
import { IconLink, IconPlayerPlay } from '@tabler/icons';
import { useConfig } from '../../../tools/state';
import { serviceItem } from '../../../tools/types';
import { useMediaQuery } from '@mantine/hooks';
import { IconLink as Link } from '@tabler/icons';
import { useConfig } from '../../tools/state';
import { serviceItem } from '../../tools/types';
export interface IMedia {
overview: string;
@@ -25,15 +25,26 @@ export interface IMedia {
plexUrl?: string;
episodeNumber?: number;
}
export function MediaDisplay(
props: GroupProps & React.RefAttributes<HTMLDivElement> & { media: IMedia }
) {
const useStyles = createStyles((theme) => ({
overview: {
[theme.fn.largerThan('sm')]: {
width: 400,
},
},
}));
export function MediaDisplay(props: { media: IMedia }) {
const { media }: { media: IMedia } = props;
const { classes, cx } = useStyles();
const phone = useMediaQuery('(min-width: 800px)');
return (
<Group {...props} position="apart">
<Text>
{media.poster && (
<Image
width={phone ? 250 : 100}
height={phone ? 400 : 160}
style={{
float: 'right',
}}
@@ -41,12 +52,10 @@ export function MediaDisplay(
fit="cover"
src={media.poster}
alt={media.title}
width={250}
height={400}
/>
)}
<Group direction="column">
<Group style={{ minWidth: 400 }} align="end">
<Group direction="column" style={{ minWidth: phone ? 450 : '65vw' }}>
<Group noWrap mr="sm" className={classes.overview}>
<Title order={3}>{media.title}</Title>
{media.plexUrl && (
<Tooltip label="Open in Plex">
@@ -74,7 +83,7 @@ export function MediaDisplay(
<Text
style={{
textAlign: 'center',
color: '#a0aec0',
color: 'gray',
}}
>
New release from {media.artist}
@@ -84,7 +93,7 @@ export function MediaDisplay(
<Text
style={{
textAlign: 'center',
color: '#a0aec0',
color: 'gray',
}}
>
Season {media.seasonNumber} {media.episodeNumber && `episode ${media.episodeNumber}`}
@@ -92,9 +101,9 @@ export function MediaDisplay(
)}
</Group>
<Group direction="column" position="apart">
<ScrollArea style={{ height: 250 }}>{media.overview}</ScrollArea>
<ScrollArea style={{ height: 280, maxWidth: 700 }}>{media.overview}</ScrollArea>
<Group align="center" position="center" spacing="xs">
{media.genres.map((genre: string, i: number) => (
{media.genres.slice(-5).map((genre: string, i: number) => (
<Badge size="sm" key={i}>
{genre}
</Badge>
@@ -145,7 +154,7 @@ export function LidarrMediaDisplay(props: any) {
}
const baseUrl = new URL(lidarr.url).origin;
// Remove '/' from the end of the lidarr url
const fullLink = `${baseUrl}${poster.url}`;
const fullLink = poster ? `${baseUrl}${poster.url}` : undefined;
// Return a movie poster containting the title and the description
return (
<MediaDisplay

1
src/modules/common/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './MediaDisplay';

233
src/modules/dashdot/DashdotModule.tsx Normal file
View File

@@ -0,0 +1,233 @@
import { createStyles, useMantineColorScheme, useMantineTheme } from '@mantine/core';
import { IconCalendar as CalendarIcon } from '@tabler/icons';
import axios from 'axios';
import { useEffect, useState } from 'react';
import { useConfig } from '../../tools/state';
import { serviceItem } from '../../tools/types';
import { IModule } from '../ModuleTypes';
const asModule = <T extends IModule>(t: T) => t;
export const DashdotModule = asModule({
title: 'Dash.',
description: 'A module for displaying the graphs of your running Dash. instance.',
icon: CalendarIcon,
component: DashdotComponent,
options: {
cpuMultiView: {
name: 'CPU Multi-Core View',
value: false,
},
storageMultiView: {
name: 'Storage Multi-Drive View',
value: false,
},
useCompactView: {
name: 'Use Compact View',
value: false,
},
graphs: {
name: 'Graphs',
value: ['CPU', 'RAM', 'Storage', 'Network'],
options: ['CPU', 'RAM', 'Storage', 'Network', 'GPU'],
},
},
});
const useStyles = createStyles((theme, _params) => ({
heading: {
marginTop: 0,
marginBottom: 10,
},
table: {
display: 'table',
},
tableRow: {
display: 'table-row',
},
tableLabel: {
display: 'table-cell',
paddingRight: 10,
},
tableValue: {
display: 'table-cell',
whiteSpace: 'pre-wrap',
paddingBottom: 5,
},
graphsContainer: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
rowGap: 10,
columnGap: 10,
},
iframe: {
flex: '1 0 auto',
maxWidth: '100%',
height: '140px',
borderRadius: theme.radius.lg,
},
}));
const bpsPrettyPrint = (bits?: number) =>
!bits
? '-'
: bits > 1000 * 1000 * 1000
? `${(bits / 1000 / 1000 / 1000).toFixed(1)} Gb/s`
: bits > 1000 * 1000
? `${(bits / 1000 / 1000).toFixed(1)} Mb/s`
: bits > 1000
? `${(bits / 1000).toFixed(1)} Kb/s`
: `${bits.toFixed(1)} b/s`;
const bytePrettyPrint = (byte: number): string =>
byte > 1024 * 1024 * 1024
? `${(byte / 1024 / 1024 / 1024).toFixed(1)} GiB`
: byte > 1024 * 1024
? `${(byte / 1024 / 1024).toFixed(1)} MiB`
: byte > 1024
? `${(byte / 1024).toFixed(1)} KiB`
: `${byte.toFixed(1)} B`;
const useJson = (service: serviceItem | undefined, url: string) => {
const [data, setData] = useState<any | undefined>();
const doRequest = async () => {
try {
const resp = await axios.get(url, { baseURL: service?.url });
setData(resp.data);
// eslint-disable-next-line no-empty
} catch (e) {}
};
useEffect(() => {
if (service?.url) {
doRequest();
}
}, [service?.url]);
return data;
};
export function DashdotComponent() {
const { config } = useConfig();
const theme = useMantineTheme();
const { classes } = useStyles();
const { colorScheme } = useMantineColorScheme();
const dashConfig = config.modules?.[DashdotModule.title]
.options as typeof DashdotModule['options'];
const isCompact = dashConfig?.useCompactView?.value ?? false;
const dashdotService = config.services.filter((service) => service.type === 'Dash.')[0];
const enabledGraphs = dashConfig?.graphs?.value ?? ['CPU', 'RAM', 'Storage', 'Network'];
const cpuEnabled = enabledGraphs.includes('CPU');
const storageEnabled = enabledGraphs.includes('Storage');
const ramEnabled = enabledGraphs.includes('RAM');
const networkEnabled = enabledGraphs.includes('Network');
const gpuEnabled = enabledGraphs.includes('GPU');
const info = useJson(dashdotService, '/info');
const storageLoad = useJson(dashdotService, '/load/storage');
const totalUsed =
(storageLoad?.layout as any[])?.reduce((acc, curr) => (curr.load ?? 0) + acc, 0) ?? 0;
const totalSize =
(info?.storage?.layout as any[])?.reduce((acc, curr) => (curr.size ?? 0) + acc, 0) ?? 0;
const graphs = [
{
name: 'CPU',
enabled: cpuEnabled,
params: {
multiView: dashConfig?.cpuMultiView?.value ?? false,
},
},
{
name: 'Storage',
enabled: storageEnabled && !isCompact,
params: {
multiView: dashConfig?.storageMultiView?.value ?? false,
},
},
{
name: 'RAM',
enabled: ramEnabled,
},
{
name: 'Network',
enabled: networkEnabled,
spanTwo: true,
},
{
name: 'GPU',
enabled: gpuEnabled,
spanTwo: true,
},
].filter((g) => g.enabled);
return (
<div>
<h2 className={classes.heading}>Dash.</h2>
{!dashdotService ? (
<p>No dash. service found. Please add one to your Homarr dashboard.</p>
) : !info ? (
<p>Cannot acquire information from dash. - are you running the latest version?</p>
) : (
<div className={classes.graphsContainer}>
<div className={classes.table}>
{storageEnabled && isCompact && (
<div className={classes.tableRow}>
<p className={classes.tableLabel}>Storage:</p>
<p className={classes.tableValue}>
{((100 * totalUsed) / (totalSize || 1)).toFixed(1)}%{'\n'}
{bytePrettyPrint(totalUsed)} / {bytePrettyPrint(totalSize)}
</p>
</div>
)}
{networkEnabled && (
<div className={classes.tableRow}>
<p className={classes.tableLabel}>Network:</p>
<p className={classes.tableValue}>
{bpsPrettyPrint(info?.network?.speedUp)} Up{'\n'}
{bpsPrettyPrint(info?.network?.speedDown)} Down
</p>
</div>
)}
</div>
{graphs.map((graph) => (
<iframe
className={classes.iframe}
style={
isCompact
? {
width: graph.spanTwo ? '100%' : 'calc(50% - 5px)',
}
: undefined
}
key={graph.name}
title={graph.name}
src={`${
dashdotService.url
}?singleGraphMode=true&graph=${graph.name.toLowerCase()}&theme=${colorScheme}&surface=${(colorScheme ===
'dark'
? theme.colors.dark[7]
: theme.colors.gray[0]
).substring(1)}${isCompact ? '&gap=10' : '&gap=5'}&innerRadius=${theme.radius.lg}${
graph.params
? `&${Object.entries(graph.params)
.map(([key, value]) => `${key}=${value.toString()}`)
.join('&')}`
: ''
}`}
frameBorder="0"
allowTransparency
/>
))}
</div>
)}
</div>
);
}

1
src/modules/dashdot/index.ts Normal file
View File

@@ -0,0 +1 @@
export { DashdotModule } from './DashdotModule';

10
src/components/modules/date/DateModule.tsx → src/modules/date/DateModule.tsx
View File

@@ -2,8 +2,9 @@ import { Group, Text, Title } from '@mantine/core';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { IconClock as Clock } from '@tabler/icons';
import { useConfig } from '../../../tools/state';
import { IModule } from '../modules';
import { useConfig } from '../../tools/state';
import { IModule } from '../ModuleTypes';
import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
export const DateModule: IModule = {
title: 'Date',
@@ -20,13 +21,14 @@ export const DateModule: IModule = {
export default function DateComponent(props: any) {
const [date, setDate] = useState(new Date());
const setSafeInterval = useSetSafeInterval();
const { config } = useConfig();
const isFullTime = config?.modules?.[DateModule.title]?.options?.full?.value ?? false;
const isFullTime = config?.modules?.[DateModule.title]?.options?.full?.value ?? true;
const formatString = isFullTime ? 'HH:mm' : 'h:mm A';
// Change date on minute change
// Note: Using 10 000ms instead of 1000ms to chill a little :)
useEffect(() => {
setInterval(() => {
setSafeInterval(() => {
setDate(new Date());
}, 1000 * 60);
}, []);

0
src/components/modules/date/index.ts → src/modules/date/index.ts
View File

164
src/modules/docker/ContainerActionBar.tsx Normal file
View File

@@ -0,0 +1,164 @@
import { Button, Group, Modal, Title } from '@mantine/core';
import { useBooleanToggle } from '@mantine/hooks';
import { showNotification, updateNotification } from '@mantine/notifications';
import {
IconCheck,
IconPlayerPlay,
IconPlayerStop,
IconPlus,
IconRefresh,
IconRotateClockwise,
IconTrash,
} from '@tabler/icons';
import axios from 'axios';
import Dockerode from 'dockerode';
import { tryMatchService } from '../../tools/addToHomarr';
import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
function sendDockerCommand(
action: string,
containerId: string,
containerName: string,
reload: () => void
) {
showNotification({
id: containerId,
loading: true,
title: `${action}ing container ${containerName}`,
message: undefined,
autoClose: false,
disallowClose: true,
});
axios
.get(`/api/docker/container/${containerId}?action=${action}`)
.then((res) => {
updateNotification({
id: containerId,
title: `Container ${containerName} ${action}ed`,
message: `Your container was successfully ${action}ed`,
icon: <IconCheck />,
autoClose: 2000,
});
})
.catch((err) => {
updateNotification({
id: containerId,
color: 'red',
title: 'There was an error',
message: err.response.data.reason,
autoClose: 2000,
});
})
.finally(() => {
reload();
});
}
export interface ContainerActionBarProps {
selected: Dockerode.ContainerInfo[];
reload: () => void;
}
export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
const [opened, setOpened] = useBooleanToggle(false);
return (
<Group>
<Modal
size="xl"
radius="md"
opened={opened}
onClose={() => setOpened(false)}
title="Add service"
>
<AddAppShelfItemForm
setOpened={setOpened}
{...tryMatchService(selected.at(0))}
message="Add service to homarr"
/>
</Modal>
<Button
leftIcon={<IconRotateClockwise />}
onClick={() =>
Promise.all(
selected.map((container) =>
sendDockerCommand('restart', container.Id, container.Names[0].substring(1), reload)
)
)
}
variant="light"
color="orange"
radius="md"
>
Restart
</Button>
<Button
leftIcon={<IconPlayerStop />}
onClick={() =>
Promise.all(
selected.map((container) =>
sendDockerCommand('stop', container.Id, container.Names[0].substring(1), reload)
)
)
}
variant="light"
color="red"
radius="md"
>
Stop
</Button>
<Button
leftIcon={<IconPlayerPlay />}
onClick={() =>
Promise.all(
selected.map((container) =>
sendDockerCommand('start', container.Id, container.Names[0].substring(1), reload)
)
)
}
variant="light"
color="green"
radius="md"
>
Start
</Button>
<Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" radius="md">
Refresh data
</Button>
<Button
leftIcon={<IconPlus />}
color="indigo"
variant="light"
radius="md"
onClick={() => {
if (selected.length !== 1) {
showNotification({
autoClose: 5000,
title: <Title order={5}>Please only add one service at a time!</Title>,
color: 'red',
message: undefined,
});
} else {
setOpened(true);
}
}}
>
Add to Homarr
</Button>
<Button
leftIcon={<IconTrash />}
color="red"
variant="light"
radius="md"
onClick={() =>
Promise.all(
selected.map((container) =>
sendDockerCommand('remove', container.Id, container.Names[0].substring(1), reload)
)
)
}
>
Remove
</Button>
</Group>
);
}

49
src/modules/docker/ContainerState.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { Badge, BadgeVariant, MantineSize } from '@mantine/core';
import Dockerode from 'dockerode';
export interface ContainerStateProps {
state: Dockerode.ContainerInfo['State'];
}
export default function ContainerState(props: ContainerStateProps) {
const { state } = props;
const options: {
size: MantineSize;
radius: MantineSize;
variant: BadgeVariant;
} = {
size: 'md',
radius: 'md',
variant: 'outline',
};
switch (state) {
case 'running': {
return (
<Badge color="green" {...options}>
Running
</Badge>
);
}
case 'created': {
return (
<Badge color="cyan" {...options}>
Created
</Badge>
);
}
case 'exited': {
return (
<Badge color="red" {...options}>
Stopped
</Badge>
);
}
default: {
return (
<Badge color="purple" {...options}>
Unknown
</Badge>
);
}
}
}

84
src/modules/docker/DockerModule.tsx Normal file
View File

@@ -0,0 +1,84 @@
import { ActionIcon, Drawer, Group, LoadingOverlay, Text } from '@mantine/core';
import axios from 'axios';
import { useEffect, useState } from 'react';
import Docker from 'dockerode';
import { IconBrandDocker, IconX } from '@tabler/icons';
import { showNotification } from '@mantine/notifications';
import ContainerActionBar from './ContainerActionBar';
import DockerTable from './DockerTable';
import { useConfig } from '../../tools/state';
import { IModule } from '../ModuleTypes';
export const DockerModule: IModule = {
title: 'Docker',
description: 'Allows you to easily manage your torrents',
icon: IconBrandDocker,
component: DockerMenuButton,
};
export default function DockerMenuButton(props: any) {
const [opened, setOpened] = useState(false);
const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
const [visible, setVisible] = useState(false);
const { config } = useConfig();
const moduleEnabled = config.modules?.[DockerModule.title]?.enabled ?? false;
useEffect(() => {
reload();
}, [config.modules]);
function reload() {
if (!moduleEnabled) {
return;
}
setVisible(true);
setTimeout(() => {
axios
.get('/api/docker/containers')
.then((res) => {
setContainers(res.data);
setSelection([]);
setVisible(false);
})
.catch(() =>
// Send an Error notification
showNotification({
autoClose: 1500,
title: <Text>Docker integration failed</Text>,
color: 'red',
icon: <IconX />,
message: 'Did you forget to mount the docker socket ?',
})
);
}, 300);
}
const exists = config.modules?.[DockerModule.title]?.enabled ?? false;
if (!exists) {
return null;
}
// Check if the user has at least one container
if (containers.length < 1) return null;
return (
<>
<Drawer opened={opened} onClose={() => setOpened(false)} padding="xl" size="full">
<ContainerActionBar selected={selection} reload={reload} />
<div style={{ position: 'relative' }}>
<LoadingOverlay transitionDuration={500} visible={visible} />
<DockerTable containers={containers} selection={selection} setSelection={setSelection} />
</div>
</Drawer>
<Group position="center">
<ActionIcon
variant="default"
radius="md"
size="xl"
color="blue"
onClick={() => setOpened(true)}
>
<IconBrandDocker />
</ActionIcon>
</Group>
</>
);
}

125
src/modules/docker/DockerTable.tsx Normal file
View File

@@ -0,0 +1,125 @@
import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
import { IconSearch } from '@tabler/icons';
import Dockerode from 'dockerode';
import { useEffect, useState } from 'react';
import ContainerState from './ContainerState';
const useStyles = createStyles((theme) => ({
rowSelected: {
backgroundColor:
theme.colorScheme === 'dark'
? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
: theme.colors[theme.primaryColor][0],
},
}));
export default function DockerTable({
containers,
selection,
setSelection,
}: {
setSelection: any;
containers: Dockerode.ContainerInfo[];
selection: Dockerode.ContainerInfo[];
}) {
const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
const { classes, cx } = useStyles();
const [search, setSearch] = useState('');
useEffect(() => {
setContainers(containers);
}, [containers]);
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.currentTarget;
setSearch(value);
setContainers(filterContainers(containers, value));
};
function filterContainers(data: Dockerode.ContainerInfo[], search: string) {
const query = search.toLowerCase().trim();
return data.filter((item) =>
item.Names.some((name) => name.toLowerCase().includes(query) || item.Image.includes(query))
);
}
const toggleRow = (container: Dockerode.ContainerInfo) =>
setSelection((current: Dockerode.ContainerInfo[]) =>
current.includes(container) ? current.filter((c) => c !== container) : [...current, container]
);
const toggleAll = () =>
setSelection((current: any) =>
current.length === usedContainers.length ? [] : usedContainers.map((c) => c)
);
const rows = usedContainers.map((element) => {
const selected = selection.includes(element);
return (
<tr key={element.Id} className={cx({ [classes.rowSelected]: selected })}>
<td>
<Checkbox
checked={selection.includes(element)}
onChange={() => toggleRow(element)}
transitionDuration={0}
/>
</td>
<td>{element.Names[0].replace('/', '')}</td>
<td>{element.Image}</td>
<td>
<Group>
{element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
// Remove duplicates with filter function
.filter(
(port, index, self) =>
index === self.findIndex((t) => t.PrivatePort === port.PrivatePort)
)
.slice(-3)
.map((port) => (
<Badge key={port.PrivatePort} variant="outline">
{port.PrivatePort}:{port.PublicPort}
</Badge>
))}
{element.Ports.length > 3 && (
<Badge variant="filled">{element.Ports.length - 3} more</Badge>
)}
</Group>
</td>
<td>
<ContainerState state={element.State} />
</td>
</tr>
);
});
return (
<ScrollArea style={{ height: '80vh' }}>
<TextInput
placeholder="Search by container or image name"
mt="md"
icon={<IconSearch size={14} />}
value={search}
onChange={handleSearchChange}
/>
<Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
<caption>your docker containers</caption>
<thead>
<tr>
<th style={{ width: 40 }}>
<Checkbox
onChange={toggleAll}
checked={selection.length === usedContainers.length}
indeterminate={selection.length > 0 && selection.length !== usedContainers.length}
transitionDuration={0}
/>
</th>
<th>Name</th>
<th>Image</th>
<th>Ports</th>
<th>State</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</Table>
</ScrollArea>
);
}

1
src/modules/docker/index.ts Normal file
View File

@@ -0,0 +1 @@
export { DockerModule } from './DockerModule';

209
src/modules/downloads/DownloadsModule.tsx Normal file
View File

@@ -0,0 +1,209 @@
import {
Table,
Text,
Tooltip,
Title,
Group,
Progress,
Skeleton,
ScrollArea,
Center,
Image,
} from '@mantine/core';
import { IconDownload as Download } from '@tabler/icons';
import { useEffect, useState } from 'react';
import axios from 'axios';
import { NormalizedTorrent } from '@ctrl/shared-torrent';
import { useViewportSize } from '@mantine/hooks';
import { showNotification } from '@mantine/notifications';
import { IModule } from '../ModuleTypes';
import { useConfig } from '../../tools/state';
import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
import { humanFileSize } from '../../tools/humanFileSize';
export const DownloadsModule: IModule = {
title: 'Torrent',
description: 'Show the current download speed of supported services',
icon: Download,
component: DownloadComponent,
options: {
hidecomplete: {
name: 'Hide completed torrents',
value: false,
},
},
};
export default function DownloadComponent() {
const { config } = useConfig();
const { height, width } = useViewportSize();
const downloadServices =
config.services.filter(
(service) =>
service.type === 'qBittorrent' ||
service.type === 'Transmission' ||
service.type === 'Deluge'
) ?? [];
const hideComplete: boolean =
(config?.modules?.[DownloadsModule.title]?.options?.hidecomplete?.value as boolean) ?? false;
const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
const setSafeInterval = useSetSafeInterval();
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setIsLoading(true);
if (downloadServices.length === 0) return;
const interval = setInterval(() => {
// Send one request with each download service inside
axios
.post('/api/modules/downloads')
.then((response) => {
setTorrents(response.data);
setIsLoading(false);
})
.catch((error) => {
setTorrents([]);
// eslint-disable-next-line no-console
console.error('Error while fetching torrents', error.response.data);
setIsLoading(false);
showNotification({
title: 'Error fetching torrents',
autoClose: 1000,
disallowClose: true,
id: 'fail-torrent-downloads-module',
color: 'red',
message:
'Please check your config for any potential errors, check the console for more info',
});
clearInterval(interval);
});
}, 5000);
}, []);
if (downloadServices.length === 0) {
return (
<Group direction="column">
<Title order={3}>No supported download clients found!</Title>
<Group>
<Text>Add a download service to view your current downloads...</Text>
<AddItemShelfButton />
</Group>
</Group>
);
}
if (isLoading) {
return (
<>
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
</>
);
}
const DEVICE_WIDTH = 576;
const ths = (
<tr>
<th>Name</th>
<th>Size</th>
{width > 576 ? <th>Down</th> : ''}
{width > 576 ? <th>Up</th> : ''}
<th>ETA</th>
<th>Progress</th>
</tr>
);
// Convert Seconds to readable format.
function calculateETA(givenSeconds: number) {
// If its superior than one day return > 1 day
if (givenSeconds > 86400) {
return '> 1 day';
}
// Transform the givenSeconds into a readable format. e.g. 1h 2m 3s
const hours = Math.floor(givenSeconds / 3600);
const minutes = Math.floor((givenSeconds % 3600) / 60);
const seconds = Math.floor(givenSeconds % 60);
// Only show hours if it's greater than 0.
const hoursString = hours > 0 ? `${hours}h ` : '';
const minutesString = minutes > 0 ? `${minutes}m ` : '';
const secondsString = seconds > 0 ? `${seconds}s` : '';
return `${hoursString}${minutesString}${secondsString}`;
}
// Loop over qBittorrent torrents merging with deluge torrents
const rows = torrents
.filter((torrent) => !(torrent.progress === 1 && hideComplete))
.map((torrent) => {
const downloadSpeed = torrent.downloadSpeed / 1024 / 1024;
const uploadSpeed = torrent.uploadSpeed / 1024 / 1024;
const size = torrent.totalSelected;
return (
<tr key={torrent.id}>
<td>
<Tooltip position="top" label={torrent.name}>
<Text
style={{
maxWidth: '30vw',
}}
size="xs"
lineClamp={1}
>
{torrent.name}
</Text>
</Tooltip>
</td>
<td>
<Text size="xs">{humanFileSize(size)}</Text>
</td>
{width > 576 ? (
<td>
<Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
</td>
) : (
''
)}
{width > 576 ? (
<td>
<Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
</td>
) : (
''
)}
<td>
<Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
</td>
<td>
<Text>{(torrent.progress * 100).toFixed(1)}%</Text>
<Progress
radius="lg"
color={
torrent.progress === 1 ? 'green' : torrent.state === 'paused' ? 'yellow' : 'blue'
}
value={torrent.progress * 100}
size="lg"
/>
</td>
</tr>
);
});
const easteregg = (
<Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Image fit="cover" height={300} src="https://danjohnvelasco.github.io/images/empty.png" />
</Center>
);
return (
<Group noWrap grow direction="column" mt="xl">
<ScrollArea sx={{ height: 300 }}>
{rows.length > 0 ? (
<Table highlightOnHover>
<thead>{ths}</thead>
<tbody>{rows}</tbody>
</Table>
) : (
easteregg
)}
</ScrollArea>
</Group>
);
}

107
src/components/modules/downloads/TotalDownloadsModule.tsx → src/modules/downloads/TotalDownloadsModule.tsx
View File

@@ -6,44 +6,15 @@ import { NormalizedTorrent } from '@ctrl/shared-torrent';
import { linearGradientDef } from '@nivo/core';
import { Datum, ResponsiveLine } from '@nivo/line';
import { useListState } from '@mantine/hooks';
import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
import { useConfig } from '../../../tools/state';
import { IModule } from '../modules';
/**
* Format bytes as human-readable text.
*
* @param bytes Number of bytes.
* @param si True to use metric (SI) units, aka powers of 1000. False to use
* binary (IEC), aka powers of 1024.
* @param dp Number of decimal places to display.
*
* @return Formatted string.
*/
function humanFileSize(initialBytes: number, si = true, dp = 1) {
const thresh = si ? 1000 : 1024;
let bytes = initialBytes;
if (Math.abs(bytes) < thresh) {
return `${bytes} B`;
}
const units = si
? ['kb', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
let u = -1;
const r = 10 ** dp;
do {
bytes /= thresh;
u += 1;
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
return `${bytes.toFixed(dp)} ${units[u]}`;
}
import { showNotification } from '@mantine/notifications';
import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
import { useConfig } from '../../tools/state';
import { humanFileSize } from '../../tools/humanFileSize';
import { IModule } from '../ModuleTypes';
import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
export const TotalDownloadsModule: IModule = {
title: 'Download speed',
title: 'Download Speed',
description: 'Show the current download speed of supported services',
icon: Download,
component: TotalDownloadsComponent,
@@ -56,42 +27,46 @@ interface torrentHistory {
}
export default function TotalDownloadsComponent() {
const setSafeInterval = useSetSafeInterval();
const { config } = useConfig();
const qBittorrentService = config.services
.filter((service) => service.type === 'qBittorrent')
.at(0);
const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
const downloadServices =
config.services.filter(
(service) =>
service.type === 'qBittorrent' ||
service.type === 'Transmission' ||
service.type === 'Deluge'
) ?? [];
const [delugeTorrents, setDelugeTorrents] = useState<NormalizedTorrent[]>([]);
const [torrentHistory, torrentHistoryHandlers] = useListState<torrentHistory>([]);
const [qBittorrentTorrents, setqBittorrentTorrents] = useState<NormalizedTorrent[]>([]);
const torrents: NormalizedTorrent[] = [];
delugeTorrents.forEach((delugeTorrent) =>
torrents.push({ ...delugeTorrent, progress: delugeTorrent.progress / 100 })
);
qBittorrentTorrents.forEach((torrent) => torrents.push(torrent));
const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
useEffect(() => {
const interval = setInterval(() => {
// Get the current download speed of qBittorrent.
if (qBittorrentService) {
axios
.post('/api/modules/downloads?dlclient=qbit', { ...qBittorrentService })
.then((res) => {
setqBittorrentTorrents(res.data.torrents);
const interval = setSafeInterval(() => {
// Send one request with each download service inside
axios
.post('/api/modules/downloads')
.then((response) => {
setTorrents(response.data);
})
.catch((error) => {
setTorrents([]);
// eslint-disable-next-line no-console
console.error('Error while fetching torrents', error.response.data);
showNotification({
title: 'Torrent speed module failed to fetch torrents',
autoClose: 1000,
disallowClose: true,
id: 'fail-torrent-speed-module',
color: 'red',
message:
'Error fetching torrents, please check your config for any potential errors, check the console for more info',
});
if (delugeService) {
axios.post('/api/modules/downloads?dlclient=deluge', { ...delugeService }).then((res) => {
setDelugeTorrents(res.data.torrents);
});
}
}
clearInterval(interval);
});
}, 1000);
}, [config.modules]);
}, [config.services]);
useEffect(() => {
torrentHistoryHandlers.append({
@@ -101,12 +76,12 @@ export default function TotalDownloadsComponent() {
});
}, [totalDownloadSpeed, totalUploadSpeed]);
if (!qBittorrentService && !delugeService) {
if (downloadServices.length === 0) {
return (
<Group direction="column">
<Title order={3}>Critical: No qBittorrent/Deluge instance found in services.</Title>
<Title order={4}>No supported download clients found!</Title>
<Group noWrap>
<Title order={5}>Add a qBittorrent/Deluge service to view current downloads</Title>
<Text>Add a download service to view your current downloads...</Text>
<AddItemShelfButton />
</Group>
</Group>

0
src/components/modules/downloads/index.ts → src/modules/downloads/index.ts
View File

10
src/components/modules/index.ts → src/modules/index.ts
View File

@@ -1,6 +1,8 @@
export * from './date';
export * from './calendar';
export * from './search';
export * from './ping';
export * from './weather';
export * from './dashdot';
export * from './date';
export * from './downloads';
export * from './ping';
export * from './search';
export * from './weather';
export * from './docker';

103
src/components/modules/moduleWrapper.tsx → src/modules/moduleWrapper.tsx
View File

@@ -1,10 +1,18 @@
import { Button, Card, Group, Menu, Switch, TextInput, useMantineTheme } from '@mantine/core';
import { useConfig } from '../../tools/state';
import { IModule } from './modules';
import {
Button,
Card,
Group,
Menu,
MultiSelect,
Switch,
TextInput,
useMantineColorScheme,
} from '@mantine/core';
import { useConfig } from '../tools/state';
import { IModule } from './ModuleTypes';
function getItems(module: IModule) {
const { config, setConfig } = useConfig();
const enabledModules = config.modules ?? {};
const items: JSX.Element[] = [];
if (module.options) {
const keys = Object.keys(module.options);
@@ -15,6 +23,38 @@ function getItems(module: IModule) {
types.forEach((type, index) => {
const optionName = `${module.title}.${keys[index]}`;
const moduleInConfig = config.modules?.[module.title];
if (type === 'object') {
items.push(
<MultiSelect
label={module.options?.[keys[index]].name}
data={module.options?.[keys[index]].options ?? []}
defaultValue={
(moduleInConfig?.options?.[keys[index]]?.value as string[]) ??
(values[index].value as string[]) ??
[]
}
searchable
onChange={(value) => {
setConfig({
...config,
modules: {
...config.modules,
[module.title]: {
...moduleInConfig,
options: {
...moduleInConfig?.options,
[keys[index]]: {
...moduleInConfig?.options?.[keys[index]],
value,
},
},
},
},
});
}}
/>
);
}
if (type === 'string') {
items.push(
<form
@@ -44,7 +84,11 @@ function getItems(module: IModule) {
id={optionName}
name={optionName}
label={values[index].name}
defaultValue={(moduleInConfig?.options?.[keys[index]]?.value as string) ?? ''}
defaultValue={
(moduleInConfig?.options?.[keys[index]]?.value as string) ??
(values[index].value as string) ??
''
}
onChange={(e) => {}}
/>
@@ -59,7 +103,9 @@ function getItems(module: IModule) {
<Switch
defaultChecked={
// Set default checked to the value of the option if it exists
(moduleInConfig?.options?.[keys[index]]?.value as boolean) ?? false
(moduleInConfig?.options?.[keys[index]]?.value as boolean) ??
(values[index].value as boolean) ??
false
}
key={keys[index]}
onClick={(e) => {
@@ -91,18 +137,50 @@ function getItems(module: IModule) {
export function ModuleWrapper(props: any) {
const { module }: { module: IModule } = props;
const { colorScheme } = useMantineColorScheme();
const { config, setConfig } = useConfig();
const enabledModules = config.modules ?? {};
// Remove 'Module' from enabled modules titles
const isShown = enabledModules[module.title]?.enabled ?? false;
const theme = useMantineTheme();
const items: JSX.Element[] = getItems(module);
if (!isShown) {
return null;
}
return (
<Card {...props} hidden={!isShown} withBorder radius="lg" shadow="sm">
<Card
{...props}
hidden={!isShown}
withBorder
radius="lg"
shadow="sm"
style={{
background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
${(config.settings.appOpacity || 100) / 100}`,
borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
${(config.settings.appOpacity || 100) / 100}`,
}}
>
<ModuleMenu
module={module}
styles={{
root: {
position: 'absolute',
top: 12,
right: 12,
},
}}
/>
<module.component />
</Card>
);
}
export function ModuleMenu(props: any) {
const { module, styles } = props;
const items: JSX.Element[] = getItems(module);
return (
<>
{module.options && (
<Menu
size="lg"
@@ -112,9 +190,7 @@ export function ModuleWrapper(props: any) {
position="left"
styles={{
root: {
position: 'absolute',
top: 15,
right: 15,
...props?.styles?.root,
},
body: {
// Add shadow and elevation to the body
@@ -128,7 +204,6 @@ export function ModuleWrapper(props: any) {
))}
</Menu>
)}
<module.component />
</Card>
</>
);
}

43
src/components/modules/ping/PingModule.tsx → src/modules/ping/PingModule.tsx
View File

@@ -1,10 +1,10 @@
import { Indicator, Tooltip } from '@mantine/core';
import axios from 'axios';
import axios, { AxiosResponse } from 'axios';
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import { IconPlug as Plug } from '@tabler/icons';
import { useConfig } from '../../../tools/state';
import { IModule } from '../modules';
import { useConfig } from '../../tools/state';
import { IModule } from '../ModuleTypes';
export const PingModule: IModule = {
title: 'Ping Services',
@@ -19,20 +19,39 @@ export default function PingComponent(props: any) {
const { url }: { url: string } = props;
const [isOnline, setOnline] = useState<State>('loading');
const [response, setResponse] = useState(500);
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(() => {
if (!exists) {
return;
}
axios
.get('/api/modules/ping', { params: { url } })
.then(() => {
setOnline('online');
.then((response) => {
statusCheck(response);
})
.catch(() => {
setOnline('down');
.catch((error) => {
statusCheck(error.response);
});
}, []);
}, [config.modules?.[PingModule.title]?.enabled]);
if (!exists) {
return null;
}
@@ -40,7 +59,13 @@ export default function PingComponent(props: any) {
<Tooltip
radius="lg"
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
animate={{

0
src/components/modules/ping/index.ts → src/modules/ping/index.ts
View File

0
src/components/modules/readme.md → src/modules/readme.md
View File

100
src/components/modules/search/SearchModule.tsx → src/modules/search/SearchModule.tsx
View File

@@ -1,10 +1,4 @@
import {
Kbd,
createStyles,
Text,
Popover,
TextInput,
} from '@mantine/core';
import { Kbd, createStyles, Autocomplete } from '@mantine/core';
import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
import { useEffect, useRef, useState } from 'react';
import {
@@ -13,9 +7,8 @@ import {
IconDownload as Download,
} from '@tabler/icons';
import axios from 'axios';
import { useConfig } from '../../../tools/state';
import { IModule } from '../modules';
import OverseerrMediaDisplay from '../overseerr/OverseerrMediaDisplay';
import { useConfig } from '../../tools/state';
import { IModule } from '../ModuleTypes';
const useStyles = createStyles((theme) => ({
hide: {
@@ -42,8 +35,6 @@ export default function SearchBar(props: any) {
const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q=';
const textInput = useRef<HTMLInputElement>();
// Find a service with the type of 'Overseerr'
const service = config.services.find((s) => s.type === 'Overseerr');
const form = useForm({
initialValues: {
query: '',
@@ -51,19 +42,12 @@ export default function SearchBar(props: any) {
});
const [debounced, cancel] = useDebouncedValue(form.values.query, 250);
const [data, setData] = useState([]);
const [results, setResults] = useState<any[]>([]);
useEffect(() => {
if (form.values.query !== debounced || form.values.query === '') return;
setOpened(false);
setOpenedResults(true);
if (service) {
const serviceUrl = new URL(service.url);
axios
.post(`/api/modules/overseerr?query=${form.values.query}`, {
service,
})
.then((res) => setData(res.data.results ?? []));
}
axios
.get(`/api/modules/search?q=${form.values.query}`)
.then((res) => setResults(res.data ?? []));
}, [debounced]);
useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
const { classes, cx } = useStyles();
@@ -83,7 +67,10 @@ export default function SearchBar(props: any) {
return null;
}
// Data with label as item.name
const autocompleteData = results.map((result) => ({
label: result.phrase,
value: result.phrase,
}));
return (
<form
onChange={() => {
@@ -110,53 +97,32 @@ export default function SearchBar(props: any) {
} else if (isTorrent) {
window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
} else {
window.open(`${queryUrl}${values.query}`);
window.open(
`${
queryUrl.includes('%s')
? queryUrl.replace('%s', values.query)
: queryUrl + values.query
}`
);
}
}, 20);
})}
>
<Popover
opened={results}
target={
<Popover
opened={opened}
position="bottom"
placement="start"
width={260}
withArrow
radius="md"
trapFocus={false}
transition="pop-bottom-right"
onFocusCapture={() => setOpened(true)}
onBlurCapture={() => setOpened(false)}
target={
<TextInput
variant="filled"
icon={icon}
ref={textInput}
rightSectionWidth={90}
rightSection={rightSection}
radius="md"
size="md"
styles={{ rightSection: { pointerEvents: 'none' } }}
placeholder="Search the web..."
{...props}
{...form.getInputProps('query')}
/>
}
>
<Text>
tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on
YouTube or for a Torrent respectively.
</Text>
</Popover>
}
>
{/* Loop on the first 5 items of data */}
{data.slice(0, 5).map((item, index) => (
<OverseerrMediaDisplay key={index} media={item} />
))}
</Popover>
<Autocomplete
autoFocus
variant="filled"
data={autocompleteData}
icon={icon}
ref={textInput}
rightSectionWidth={90}
rightSection={rightSection}
radius="md"
size="md"
styles={{ rightSection: { pointerEvents: 'none' } }}
placeholder="Search the web..."
{...props}
{...form.getInputProps('query')}
/>
</form>
);
}

0
src/components/modules/search/index.ts → src/modules/search/index.ts
View File

0
src/components/modules/weather/WeatherInterface.ts → src/modules/weather/WeatherInterface.ts
View File

27
src/components/modules/weather/WeatherModule.tsx → src/modules/weather/WeatherModule.tsx
View File

@@ -1,4 +1,4 @@
import { Group, Space, Title, Tooltip } from '@mantine/core';
import { Group, Space, Title, Tooltip, Skeleton } from '@mantine/core';
import axios from 'axios';
import { useEffect, useState } from 'react';
import {
@@ -13,12 +13,12 @@ import {
IconSnowflake as Snowflake,
IconSun as Sun,
} from '@tabler/icons';
import { useConfig } from '../../../tools/state';
import { IModule } from '../modules';
import { useConfig } from '../../tools/state';
import { IModule } from '../ModuleTypes';
import { WeatherResponse } from './WeatherInterface';
export const WeatherModule: IModule = {
title: 'Weather (beta)',
title: 'Weather',
description: 'Look up the current weather in your location',
icon: Sun,
component: WeatherComponent,
@@ -29,7 +29,7 @@ export const WeatherModule: IModule = {
},
location: {
name: 'Current location',
value: '',
value: 'Paris',
},
},
};
@@ -135,7 +135,7 @@ export default function WeatherComponent(props: any) {
const { config } = useConfig();
const [weather, setWeather] = useState({} as WeatherResponse);
const cityInput: string =
(config?.modules?.[WeatherModule.title]?.options?.location?.value as string) ?? '';
(config?.modules?.[WeatherModule.title]?.options?.location?.value as string) ?? 'Paris';
const isFahrenheit: boolean =
(config?.modules?.[WeatherModule.title]?.options?.freedomunit?.value as boolean) ?? false;
@@ -157,10 +157,21 @@ export default function WeatherComponent(props: any) {
});
}, [cityInput]);
if (!weather.current_weather) {
return null;
return (
<>
<Skeleton height={40} width={100} mb="xl" />
<Group noWrap direction="row">
<Skeleton height={50} circle />
<Group>
<Skeleton height={25} width={70} mr="lg" />
<Skeleton height={25} width={70} />
</Group>
</Group>
</>
);
}
function usePerferedUnit(value: number): string {
return isFahrenheit ? `${(value * (9 / 5)).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
return isFahrenheit ? `${(value * (9 / 5) + 32).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
}
return (
<Group p="sm" spacing="xs" direction="column">

0
src/components/modules/weather/index.ts → src/modules/weather/index.ts
View File

4
src/pages/404.tsx
View File

@@ -58,7 +58,7 @@ const useStyles = createStyles((theme) => ({
},
}));
export function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
const theme = useMantineTheme();
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362 145" {...props}>
@@ -70,7 +70,7 @@ export function Illustration(props: React.ComponentPropsWithoutRef<'svg'>) {
);
}
export default function NothingFoundBackground() {
export default function Custom404() {
const { classes } = useStyles();
return (

5
src/pages/[slug].tsx
View File

@@ -6,6 +6,7 @@ import AppShelf from '../components/AppShelf/AppShelf';
import LoadConfigComponent from '../components/Config/LoadConfig';
import { Config } from '../tools/types';
import { useConfig } from '../tools/state';
import Layout from '../components/layout/Layout';
export async function getServerSideProps(
context: GetServerSidePropsContext
@@ -46,9 +47,9 @@ export default function HomePage(props: any) {
setConfig(initialConfig);
}, [initialConfig]);
return (
<>
<Layout>
<AppShelf />
<LoadConfigComponent />
</>
</Layout>
);
}

60
src/pages/_app.tsx
View File

@@ -1,51 +1,67 @@
import { GetServerSidePropsContext } from 'next';
import { useState } from 'react';
import { AppProps } from 'next/app';
import { getCookie, setCookies } from 'cookies-next';
import { getCookie, setCookie } from 'cookies-next';
import Head from 'next/head';
import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from '@mantine/core';
import { NotificationsProvider } from '@mantine/notifications';
import { useHotkeys } from '@mantine/hooks';
import Layout from '../components/layout/Layout';
import { ConfigProvider } from '../tools/state';
import { theme } from '../tools/theme';
import { styles } from '../tools/styles';
import { ColorTheme } from '../tools/color';
export default function App(props: AppProps & { colorScheme: ColorScheme }) {
export default function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
const { Component, pageProps } = props;
const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');
const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');
const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);
const colorTheme = {
primaryColor,
secondaryColor,
setPrimaryColor,
setSecondaryColor,
primaryShade,
setPrimaryShade,
};
const toggleColorScheme = (value?: ColorScheme) => {
const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
setColorScheme(nextColorScheme);
setCookies('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
setCookie('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
};
useHotkeys([['mod+J', () => toggleColorScheme()]]);
return (
<>
<Head>
<title>Homarr 🦞</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<link rel="shortcut icon" href="/favicon.svg" />
</Head>
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<MantineProvider
theme={{
...theme,
colorScheme,
}}
withGlobalStyles
withNormalizeCSS
>
<NotificationsProvider limit={4} position="bottom-left">
<ConfigProvider>
<Layout>
<ColorTheme.Provider value={colorTheme}>
<MantineProvider
theme={{
...theme,
primaryColor,
primaryShade,
colorScheme,
}}
styles={{
...styles,
}}
withGlobalStyles
withNormalizeCSS
>
<NotificationsProvider limit={4} position="bottom-left">
<ConfigProvider>
<Component {...pageProps} />
</Layout>
</ConfigProvider>
</NotificationsProvider>
</MantineProvider>
</ConfigProvider>
</NotificationsProvider>
</MantineProvider>
</ColorTheme.Provider>
</ColorSchemeProvider>
</>
);

16
src/pages/_middleware.ts Normal file
View File

@@ -0,0 +1,16 @@
import { NextFetchEvent, NextRequest, NextResponse } from 'next/server';
// eslint-disable-next-line consistent-return
export function middleware(req: NextRequest, ev: NextFetchEvent) {
const isCorrectPassword = req.cookies.password === process.env.PASSWORD;
const url = req.nextUrl.clone();
if (
!isCorrectPassword &&
url.pathname !== '/login' &&
process.env.PASSWORD &&
url.pathname !== '/api/configs/tryPassword'
) {
url.pathname = '/login';
return NextResponse.rewrite(url);
}
}

25
src/pages/api/configs/tryPassword.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { NextApiRequest, NextApiResponse } from 'next';
function Post(req: NextApiRequest, res: NextApiResponse) {
const { tried } = req.body;
// Try to match the password with the PASSWORD env variable
if (tried === process.env.PASSWORD) {
return res.status(200).json({
success: true,
});
}
return res.status(200).json({
success: false,
});
}
export default async (req: NextApiRequest, res: NextApiResponse) => {
// Filter out if the reuqest is a POST or a GET
if (req.method === 'POST') {
return Post(req, res);
}
return res.status(405).json({
statusCode: 405,
message: 'Method not allowed',
});
};

58
src/pages/api/docker/container/[id].tsx Normal file
View File

@@ -0,0 +1,58 @@
import { NextApiRequest, NextApiResponse } from 'next';
import Docker from 'dockerode';
const docker = new Docker();
async function Get(req: NextApiRequest, res: NextApiResponse) {
// Get the slug of the request
const { id } = req.query as { id: string };
const { action } = req.query;
// Get the action on the request (start, stop, restart)
if (action !== 'start' && action !== 'stop' && action !== 'restart' && action !== 'remove') {
return res.status(400).json({
statusCode: 400,
message: 'Invalid action',
});
}
if (!id) {
return res.status(400).json({
message: 'Missing ID',
});
}
// Get the container with the ID
const container = docker.getContainer(id);
const startAction = async () => {
switch (action) {
case 'remove':
return container.remove();
case 'start':
return container.start();
case 'stop':
return container.stop();
case 'restart':
return container.restart();
default:
return Promise;
}
};
try {
await startAction();
return res.status(200).json({
statusCode: 200,
message: `Container ${id} ${action}ed`,
});
} catch (err) {
return res.status(500).json(err);
}
}
export default async (req: NextApiRequest, res: NextApiResponse) => {
// Filter out if the reuqest is a Put or a GET
if (req.method === 'GET') {
return Get(req, res);
}
return res.status(405).json({
statusCode: 405,
message: 'Method not allowed',
});
};

24
src/pages/api/docker/containers.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { NextApiRequest, NextApiResponse } from 'next';
import Docker from 'dockerode';
async function Get(req: NextApiRequest, res: NextApiResponse) {
try {
const docker = new Docker();
const containers = await docker.listContainers({ all: true });
res.status(200).json(containers);
} catch (err) {
res.status(500).json({ err });
}
}
export default async (req: NextApiRequest, res: NextApiResponse) => {
// Filter out if the reuqest is a POST or a GET
if (req.method === 'GET') {
return Get(req, res);
}
return res.status(405).json({
statusCode: 405,
message: 'Method not allowed',
});
};

83
src/pages/api/modules/calendar.ts Normal file
View File

@@ -0,0 +1,83 @@
import axios from 'axios';
import { getCookie } from 'cookies-next';
import { NextApiRequest, NextApiResponse } from 'next';
import { getConfig } from '../../../tools/getConfig';
import { Config } from '../../../tools/types';
async function Post(req: NextApiRequest, res: NextApiResponse) {
// Parse req.body as a ServiceItem
const { id } = req.body;
const { type } = req.query;
const configName = getCookie('config-name', { req });
const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
// Find service with serviceId in config
const service = config.services.find((service) => service.id === id);
if (!service) {
return res.status(500).json({
statusCode: 500,
message: 'Missing service',
});
}
const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
const lastMonth = new Date(new Date().setMonth(new Date().getMonth() - 2)).toISOString();
const TypeToUrl: { service: string; url: string }[] = [
{
service: 'sonarr',
url: '/api/calendar',
},
{
service: 'radarr',
url: '/api/v3/calendar',
},
{
service: 'lidarr',
url: '/api/v1/calendar',
},
{
service: 'readarr',
url: '/api/v1/calendar',
},
];
if (!type) {
return res.status(400).json({
message: 'Missing required parameter in url: type',
});
}
if (!service) {
return res.status(400).json({
message: 'Missing required parameter in body: service',
});
}
// Match the type to the correct url
const url = TypeToUrl.find((x) => x.service === type);
if (!url) {
return res.status(400).json({
message: 'Invalid type',
});
}
// Get the origin URL
let { 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}`;
return axios
.get(`${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`)
.then((response) => res.status(200).json(response.data))
.catch((e) => res.status(500).json(e));
// // Make a request to the URL
// const response = await axios.get(url);
// // Return the response
}
export default async (req: NextApiRequest, res: NextApiResponse) => {
// Filter out if the reuqest is a POST or a GET
if (req.method === 'POST') {
return Post(req, res);
}
return res.status(405).json({
statusCode: 405,
message: 'Method not allowed',
});
};

84
src/pages/api/modules/downloads.ts
View File

@@ -1,42 +1,66 @@
import { Deluge } from '@ctrl/deluge';
import { QBittorrent } from '@ctrl/qbittorrent';
import { NormalizedTorrent } from '@ctrl/shared-torrent';
import { Transmission } from '@ctrl/transmission';
import { getCookie } from 'cookies-next';
import { NextApiRequest, NextApiResponse } from 'next';
import { getConfig } from '../../../tools/getConfig';
import { Config } from '../../../tools/types';
async function Post(req: NextApiRequest, res: NextApiResponse) {
// Get the type of service from the request url
const { dlclient } = req.query;
const { body } = req;
// Get login, password and url from the body
const { username, password, url } = body;
if (!dlclient || (!username && !password) || !url) {
return res.status(400).json({
error: 'Wrong request',
const configName = getCookie('config-name', { req });
const { config }: { config: Config } = getConfig(configName?.toString() ?? 'default').props;
const qBittorrentServices = config.services.filter((service) => service.type === 'qBittorrent');
const delugeServices = config.services.filter((service) => service.type === 'Deluge');
const transmissionServices = config.services.filter((service) => service.type === 'Transmission');
const torrents: NormalizedTorrent[] = [];
if (!qBittorrentServices && !delugeServices && !transmissionServices) {
return res.status(500).json({
statusCode: 500,
message: 'Missing services',
});
}
let client: Deluge | QBittorrent;
switch (dlclient) {
case 'qbit':
client = new QBittorrent({
baseUrl: new URL(url).origin,
username,
password,
});
break;
case 'deluge':
client = new Deluge({
baseUrl: new URL(url).origin,
password,
});
break;
default:
return res.status(400).json({
error: 'Wrong request',
});
try {
await Promise.all(
qBittorrentServices.map((service) =>
new QBittorrent({
baseUrl: service.url,
username: service.username,
password: service.password,
})
.getAllData()
.then((e) => torrents.push(...e.torrents))
)
);
await Promise.all(
delugeServices.map((service) =>
new Deluge({
baseUrl: service.url,
password: 'password' in service ? service.password : '',
})
.getAllData()
.then((e) => torrents.push(...e.torrents))
)
);
// Map transmissionServices
await Promise.all(
transmissionServices.map((service) =>
new Transmission({
baseUrl: service.url,
username: 'username' in service ? service.username : '',
password: 'password' in service ? service.password : '',
})
.getAllData()
.then((e) => torrents.push(...e.torrents))
)
);
} catch (e: any) {
return res.status(401).json(e);
}
const data = await client.getAllData();
res.status(200).json({
torrents: data.torrents,
});
return res.status(200).json(torrents);
}
export default async (req: NextApiRequest, res: NextApiResponse) => {

8
src/pages/api/modules/ping.ts
View File

@@ -7,10 +7,14 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
await axios
.get(url as string)
.then((response) => {
res.status(200).json(response.data);
res.status(response.status).json(response.statusText);
})
.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
// const response = await axios.get(url);

19
src/pages/api/modules/search.ts Normal file
View File

@@ -0,0 +1,19 @@
import axios from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';
async function Get(req: NextApiRequest, res: NextApiResponse) {
const { q } = req.query;
const response = await axios.get(`https://duckduckgo.com/ac/?q=${q}`);
res.status(200).json(response.data);
}
export default async (req: NextApiRequest, res: NextApiResponse) => {
// Filter out if the reuqest is a POST or a GET
if (req.method === 'GET') {
return Get(req, res);
}
return res.status(405).json({
statusCode: 405,
message: 'Method not allowed',
});
};

13
src/pages/index.tsx
View File

@@ -1,4 +1,4 @@
import { getCookie, setCookies } from 'cookies-next';
import { getCookie, setCookie } from 'cookies-next';
import { GetServerSidePropsContext } from 'next';
import { useEffect } from 'react';
import AppShelf from '../components/AppShelf/AppShelf';
@@ -7,6 +7,8 @@ import { Config } from '../tools/types';
import { useConfig } from '../tools/state';
import { migrateToIdConfig } from '../tools/migrate';
import { getConfig } from '../tools/getConfig';
import { useColorTheme } from '../tools/color';
import Layout from '../components/layout/Layout';
export async function getServerSideProps({
req,
@@ -14,7 +16,7 @@ export async function getServerSideProps({
}: GetServerSidePropsContext): Promise<{ props: { config: Config } }> {
let cookie = getCookie('config-name', { req, res });
if (!cookie) {
setCookies('config-name', 'default', {
setCookie('config-name', 'default', {
req,
res,
maxAge: 60 * 60 * 24 * 30,
@@ -28,14 +30,17 @@ export async function getServerSideProps({
export default function HomePage(props: any) {
const { config: initialConfig }: { config: Config } = props;
const { setConfig } = useConfig();
const { setPrimaryColor, setSecondaryColor } = useColorTheme();
useEffect(() => {
const migratedConfig = migrateToIdConfig(initialConfig);
setPrimaryColor(migratedConfig.settings.primaryColor || 'red');
setSecondaryColor(migratedConfig.settings.secondaryColor || 'orange');
setConfig(migratedConfig);
}, [initialConfig]);
return (
<>
<Layout>
<AppShelf />
<LoadConfigComponent />
</>
</Layout>
);
}

115
src/pages/login.tsx Normal file
View File

@@ -0,0 +1,115 @@
import React from 'react';
import { PasswordInput, Anchor, Paper, Title, Text, Container, Group, Button } from '@mantine/core';
import { setCookie } from 'cookies-next';
import { useForm } from '@mantine/hooks';
import { showNotification, updateNotification } from '@mantine/notifications';
import axios from 'axios';
import { IconCheck, IconX } from '@tabler/icons';
import { useRouter } from 'next/router';
// TODO: Add links to the wiki articles about the login process.
export default function AuthenticationTitle() {
const router = useRouter();
const form = useForm({
initialValues: {
password: '',
},
});
return (
<Container
size="lg"
style={{
height: '100vh',
display: 'flex',
width: '100%',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Group>
<Title
align="center"
sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
>
Welcome back!
</Title>
</Group>
<Text color="dimmed" size="sm" align="center" mt={5}>
Please enter the{' '}
<Anchor<'a'> href="#" size="sm" onClick={(event) => event.preventDefault()}>
password
</Anchor>
</Text>
<Paper
withBorder
shadow="md"
p={30}
mt={30}
radius="md"
style={{ width: '100%', maxWidth: 420 }}
>
<form
onSubmit={form.onSubmit((values) => {
setCookie('password', values.password, {
maxAge: 60 * 60 * 24 * 30,
sameSite: 'lax',
});
showNotification({
id: 'load-data',
loading: true,
title: 'Checking your password',
message: 'Your password is being checked...',
autoClose: false,
disallowClose: true,
});
axios
.post('/api/configs/tryPassword', {
tried: values.password,
})
.then((res) => {
setTimeout(() => {
if (res.data.success === true) {
router.push('/');
updateNotification({
id: 'load-data',
color: 'teal',
title: 'Password correct, redirecting you...',
message: undefined,
icon: <IconCheck />,
autoClose: 1000,
});
}
if (res.data.success === false) {
updateNotification({
id: 'load-data',
color: 'red',
title: 'Password is wrong, please try again.',
message: undefined,
icon: <IconX />,
autoClose: 2000,
});
}
}, 500);
});
})}
>
<PasswordInput
id="password"
label="Password"
placeholder="Your password"
required
autoFocus
mt="md"
{...form.getInputProps('password')}
/>
<Button fullWidth type="submit" mt="xl">
Sign in
</Button>
</form>
</Paper>
</Container>
);
}

57
src/tools/addToHomarr.ts Normal file
View File

@@ -0,0 +1,57 @@
import Dockerode from 'dockerode';
import { Config, MatchingImages, ServiceType, tryMatchPort } from './types';
async function MatchIcon(name: string) {
const res = await fetch(
`https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
.replace(/\s+/g, '-')
.toLowerCase()}.png`
);
return res.ok ? res.url : '/favicon.svg';
}
function tryMatchType(imageName: string): ServiceType {
// Try to find imageName inside MatchingImages
const match = MatchingImages.find(({ image }) => imageName.includes(image));
if (match) {
return match.type;
}
return 'Other';
}
export function tryMatchService(container: Dockerode.ContainerInfo | undefined) {
if (container === undefined) return {};
const name = container.Names[0].substring(1);
const type = tryMatchType(container.Image);
const port = tryMatchPort(type.toLowerCase());
return {
name,
id: container.Id,
type: tryMatchType(container.Image),
url: `localhost${port ? `:${port.value}` : ''}`,
icon: `https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/${name
.replace(/\s+/g, '-')
.toLowerCase()}.png`,
};
}
export default async function addToHomarr(
container: Dockerode.ContainerInfo,
config: Config,
setConfig: (newconfig: Config) => void
) {
setConfig({
...config,
services: [
...config.services,
{
name: container.Names[0].substring(1),
id: container.Id,
type: tryMatchType(container.Image),
url: `localhost:${container.Ports.at(0)?.PublicPort}`,
icon: await MatchIcon(container.Names[0].substring(1)),
},
],
});
}

28
src/tools/color.ts Normal file
View File

@@ -0,0 +1,28 @@
import { createContext, useContext } from 'react';
import { MantineTheme } from '@mantine/core';
type colorThemeContextType = {
primaryColor: MantineTheme['primaryColor'];
secondaryColor: MantineTheme['primaryColor'];
primaryShade: MantineTheme['primaryShade'];
setPrimaryColor: (color: MantineTheme['primaryColor']) => void;
setSecondaryColor: (color: MantineTheme['primaryColor']) => void;
setPrimaryShade: (shade: MantineTheme['primaryShade']) => void;
};
export const ColorTheme = createContext<colorThemeContextType>({
primaryColor: 'red',
secondaryColor: 'orange',
primaryShade: 6,
setPrimaryColor: () => {},
setSecondaryColor: () => {},
setPrimaryShade: () => {},
});
export function useColorTheme() {
const context = useContext(ColorTheme);
if (context === undefined) {
throw new Error('useColorTheme must be used within a ColorTheme.Provider');
}
return context;
}

6
src/tools/getConfig.ts
View File

@@ -14,7 +14,11 @@ export function getConfig(name: string) {
settings: {
searchUrl: 'https://www.google.com/search?q=',
},
modules: {},
modules: {
'Search Bar': {
enabled: true,
},
},
},
},
};

22
src/tools/hooks/useSetSafeInterval.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { useEffect, useRef } from 'react';
export function useSetSafeInterval() {
const timers = useRef<NodeJS.Timer[]>([]);
function setSafeInterval(callback: () => void, delay: number) {
const newInterval = setInterval(callback, delay);
timers.current.push(newInterval);
return newInterval;
}
useEffect(
() => () => {
timers.current.forEach((t) => {
clearInterval(t);
});
},
[]
);
return setSafeInterval;
}

31
src/tools/humanFileSize.ts Normal file
View File

@@ -0,0 +1,31 @@
/**
* Format bytes as human-readable text.
*
* @param bytes Number of bytes.
* @param si True to use metric (SI) units, aka powers of 1000. False to use
* binary (IEC), aka powers of 1024.
* @param dp Number of decimal places to display.
*
* @return Formatted string.
*/
export function humanFileSize(initialBytes: number, si = true, dp = 1) {
const thresh = si ? 1000 : 1024;
let bytes = initialBytes;
if (Math.abs(bytes) < thresh) {
return `${bytes} B`;
}
const units = si
? ['kb', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
let u = -1;
const r = 10 ** dp;
do {
bytes /= thresh;
u += 1;
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
return `${bytes.toFixed(dp)} ${units[u]}`;
}

12
src/tools/styles.ts Normal file
View File

@@ -0,0 +1,12 @@
import { MantineProviderProps } from '@mantine/core';
export const styles: MantineProviderProps['styles'] = {
Checkbox: {
input: { cursor: 'pointer' },
label: { cursor: 'pointer' },
},
Switch: {
input: { cursor: 'pointer' },
label: { cursor: 'pointer' },
},
};

133
src/tools/types.ts
View File

@@ -1,7 +1,18 @@
import { OptionValues } from '../components/modules/modules';
import { MantineTheme } from '@mantine/core';
import { OptionValues } from '../modules/ModuleTypes';
export interface Settings {
searchUrl: string;
title?: string;
logo?: string;
favicon?: string;
primaryColor?: MantineTheme['primaryColor'];
secondaryColor?: MantineTheme['primaryColor'];
primaryShade?: MantineTheme['primaryShade'];
background?: string;
appOpacity?: number;
widgetPosition?: string;
appCardWidth?: number;
}
export interface Config {
@@ -21,29 +32,134 @@ 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 = [
'Other',
'Emby',
'Dash.',
'Deluge',
'Emby',
'Lidarr',
'Plex',
'qBittorrent',
'Radarr',
'Readarr',
'Sonarr',
'qBittorrent',
'Overseerr',
'Transmission',
];
export type ServiceType =
| 'Other'
| 'Emby'
| 'Dash.'
| 'Deluge'
| 'Emby'
| 'Lidarr'
| 'Plex'
| 'qBittorrent'
| 'Radarr'
| 'Readarr'
| 'Sonarr'
| 'qBittorrent'
| 'Overseerr';
| 'Transmission';
export function tryMatchPort(name: string, form?: any) {
// Match name with portmap key
const port = portmap.find((p) => p.name === name.toLowerCase());
if (form && port) {
form.setFieldValue('url', `http://localhost:${port.value}`);
}
return port;
}
export const portmap = [
{ name: 'qbittorrent', value: '8080' },
{ name: 'sonarr', value: '8989' },
{ name: 'radarr', value: '7878' },
{ name: 'lidarr', value: '8686' },
{ name: 'readarr', value: '8787' },
{ name: 'deluge', value: '8112' },
{ name: 'transmission', value: '9091' },
{ name: 'dash.', value: '3001' },
];
export const MatchingImages: {
image: string;
type: ServiceType;
}[] = [
//Official images
{ image: 'mauricenino/dashdot', type: 'Dash.' },
{ image: 'emby/embyserver', type: 'Emby' },
{ image: 'plexinc/pms-docker', type: 'Plex' },
//Lidarr images
{ image: 'hotio/lidarr', type: 'Lidarr' },
{ image: 'ghcr.io/hotio/lidarr', type: 'Lidarr' },
{ image: 'cr.hotio.dev/hotio/lidarr', type: 'Lidarr' },
// Plex
{ image: 'hotio/plex', type: 'Plex' },
{ image: 'ghcr.io/hotio/plex', type: 'Plex' },
{ image: 'cr.hotio.dev/hotio/plex', type: 'Plex' },
// qbittorrent
{ image: 'hotio/qbittorrent', type: 'qBittorrent' },
{ image: 'ghcr.io/hotio/qbittorrent', type: 'qBittorrent' },
{ image: 'cr.hotio.dev/hotio/qbittorrent', type: 'qBittorrent' },
// Radarr
{ image: 'hotio/radarr', type: 'Radarr' },
{ image: 'ghcr.io/hotio/radarr', type: 'Radarr' },
{ image: 'cr.hotio.dev/hotio/radarr', type: 'Radarr' },
// Readarr
{ image: 'hotio/readarr', type: 'Readarr' },
{ image: 'ghcr.io/hotio/readarr', type: 'Readarr' },
{ image: 'cr.hotio.dev/hotio/readarr', type: 'Readarr' },
// Sonarr
{ image: 'hotio/sonarr', type: 'Sonarr' },
{ image: 'ghcr.io/hotio/sonarr', type: 'Sonarr' },
{ image: 'cr.hotio.dev/hotio/sonarr', type: 'Sonarr' },
//LinuxServer images
{ image: 'lscr.io/linuxserver/deluge', type: 'Deluge' },
{ image: 'lscr.io/linuxserver/emby', type: 'Emby' },
{ image: 'lscr.io/linuxserver/lidarr', type: 'Lidarr' },
{ image: 'lscr.io/linuxserver/plex', type: 'Plex' },
{ image: 'lscr.io/linuxserver/qbittorrent', type: 'qBittorrent' },
{ image: 'lscr.io/linuxserver/radarr', type: 'Radarr' },
{ image: 'lscr.io/linuxserver/readarr', type: 'Readarr' },
{ image: 'lscr.io/linuxserver/sonarr', type: 'Sonarr' },
{ image: 'lscr.io/linuxserver/transmission', type: 'Transmission' },
// LinuxServer but on Docker Hub
{ image: 'linuxserver/deluge', type: 'Deluge' },
{ image: 'linuxserver/emby', type: 'Emby' },
{ image: 'linuxserver/lidarr', type: 'Lidarr' },
{ image: 'linuxserver/plex', type: 'Plex' },
{ image: 'linuxserver/qbittorrent', type: 'qBittorrent' },
{ image: 'linuxserver/radarr', type: 'Radarr' },
{ image: 'linuxserver/readarr', type: 'Readarr' },
{ image: 'linuxserver/sonarr', type: 'Sonarr' },
{ image: 'linuxserver/transmission', type: 'Transmission' },
//High usage
{ image: 'markusmcnugen/qbittorrentvpn', type: 'qBittorrent' },
{ image: 'haugene/transmission-openvpn', type: 'Transmission' },
];
export interface serviceItem {
id: string;
@@ -55,4 +171,7 @@ export interface serviceItem {
apiKey?: string;
password?: string;
username?: string;
openedUrl?: string;
newTab?: boolean;
status?: string[];
}

11318
yarn.lock
View File

File diff suppressed because it is too large Load Diff