From 4e7d3edb5fefbe2f39ff22f4bdbdf9cf1b2a0209 Mon Sep 17 00:00:00 2001 From: Manuel Ruwe Date: Wed, 24 Aug 2022 19:51:54 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20i18n=20translation=20for=20modules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../locales/de/modules/calendar-module.json | 11 +++++ public/locales/de/modules/ping-module.json | 4 ++ .../locales/en/modules/calendar-module.json | 11 +++++ public/locales/en/modules/common.json | 5 +++ public/locales/en/modules/dashdot-module.json | 28 ++++++++++++ public/locales/en/modules/date-module.json | 11 +++++ public/locales/en/modules/docker-module.json | 4 ++ .../locales/en/modules/downloads-module.json | 9 ++++ .../locales/en/modules/overseerr-module.json | 4 ++ public/locales/en/modules/search-module.json | 4 ++ .../en/modules/total-downloads-module.json | 6 +++ public/locales/en/modules/weather-module.json | 12 ++++++ src/components/Settings/ModuleEnabler.tsx | 43 +++++++++++-------- src/modules/ModuleTypes.d.ts | 1 + src/modules/calendar/CalendarModule.tsx | 8 ++-- src/modules/dashdot/DashdotModule.tsx | 23 ++++++---- src/modules/date/DateModule.tsx | 7 +-- src/modules/docker/DockerModule.tsx | 5 ++- src/modules/downloads/DownloadsModule.tsx | 9 ++-- .../downloads/TotalDownloadsModule.tsx | 5 ++- src/modules/moduleWrapper.tsx | 9 +++- src/modules/overseerr/OverseerrModule.tsx | 5 ++- src/modules/ping/PingModule.tsx | 7 +-- src/modules/search/SearchModule.tsx | 5 ++- src/modules/weather/WeatherModule.tsx | 9 ++-- src/pages/index.tsx | 4 ++ 26 files changed, 194 insertions(+), 55 deletions(-) create mode 100644 public/locales/de/modules/calendar-module.json create mode 100644 public/locales/en/modules/calendar-module.json create mode 100644 public/locales/en/modules/common.json create mode 100644 public/locales/en/modules/date-module.json create mode 100644 public/locales/en/modules/total-downloads-module.json diff --git a/public/locales/de/modules/calendar-module.json b/public/locales/de/modules/calendar-module.json new file mode 100644 index 000000000..e9337497f --- /dev/null +++ b/public/locales/de/modules/calendar-module.json @@ -0,0 +1,11 @@ +{ + "descriptor": { + "name": "Kalender", + "description": "Ein Kalender Modul welches bevorstehende Shows anzeigt. Es interagiert mit der API von Sonarr, Radarr, Readarr und Lidarr.", + "settings": { + "sundayStart": { + "label": "Wochenstart am Sonntag" + } + } + } +} \ No newline at end of file diff --git a/public/locales/de/modules/ping-module.json b/public/locales/de/modules/ping-module.json index 8cffe4e90..645e2dd61 100644 --- a/public/locales/de/modules/ping-module.json +++ b/public/locales/de/modules/ping-module.json @@ -1,4 +1,8 @@ { + "descriptor": { + "name": "Ping Services", + "description": "Pings your services and shows their status as an indicator" + }, "states": { "online": "Online {{response}}", "offline": "Offline {{response}}", diff --git a/public/locales/en/modules/calendar-module.json b/public/locales/en/modules/calendar-module.json new file mode 100644 index 000000000..d470eabe9 --- /dev/null +++ b/public/locales/en/modules/calendar-module.json @@ -0,0 +1,11 @@ +{ + "descriptor": { + "name": "Calendar", + "description": "A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.", + "settings": { + "sundayStart": { + "label": "Start the week on Sunday" + } + } + } +} \ No newline at end of file diff --git a/public/locales/en/modules/common.json b/public/locales/en/modules/common.json new file mode 100644 index 000000000..3f4b36b03 --- /dev/null +++ b/public/locales/en/modules/common.json @@ -0,0 +1,5 @@ +{ + "settings": { + "label": "Settings" + } +} \ No newline at end of file diff --git a/public/locales/en/modules/dashdot-module.json b/public/locales/en/modules/dashdot-module.json index ceb6b305a..77caf974e 100644 --- a/public/locales/en/modules/dashdot-module.json +++ b/public/locales/en/modules/dashdot-module.json @@ -1,4 +1,32 @@ { + "descriptor": { + "name": "Dash.", + "description": "A module for displaying the graphs of your running Dash. instance.", + "settings": { + "cpuMultiView": { + "label": "CPU Multi-Core View" + }, + "storageMultiView": { + "label": "Storage Multi-Drive View" + }, + "useCompactView": { + "label": "Use Compact View" + }, + "graphs": { + "label": "Graphs", + "options": { + "cpu": "CPU", + "ram": "RAM", + "storage": "Storage", + "network": "Network", + "gpu": "GPU" + } + }, + "url": { + "label": "Dash. URL" + } + } + }, "card": { "title": "Dash.", "errors": { diff --git a/public/locales/en/modules/date-module.json b/public/locales/en/modules/date-module.json new file mode 100644 index 000000000..521e220a4 --- /dev/null +++ b/public/locales/en/modules/date-module.json @@ -0,0 +1,11 @@ +{ + "descriptor": { + "name": "Date", + "description": "Show the current time and date in a card", + "settings": { + "display24HourFormat": { + "label": "Display full time (24-hour)" + } + } + } +} \ No newline at end of file diff --git a/public/locales/en/modules/docker-module.json b/public/locales/en/modules/docker-module.json index 44fe76e17..a4d738b61 100644 --- a/public/locales/en/modules/docker-module.json +++ b/public/locales/en/modules/docker-module.json @@ -1,4 +1,8 @@ { + "descriptor": { + "name": "Docker", + "description": "Allows you to easily manage your torrents" + }, "search": { "placeholder": "Search by container or image name" }, diff --git a/public/locales/en/modules/downloads-module.json b/public/locales/en/modules/downloads-module.json index 1158423e2..7e8970a92 100644 --- a/public/locales/en/modules/downloads-module.json +++ b/public/locales/en/modules/downloads-module.json @@ -1,4 +1,13 @@ { + "descriptor": { + "name": "Torrent", + "description": "Show the current download speed of supported services", + "settings": { + "hideComplete": { + "label": "Hide completed torrents" + } + } + }, "card": { "table": { "header": { diff --git a/public/locales/en/modules/overseerr-module.json b/public/locales/en/modules/overseerr-module.json index 9d259613f..ed9df1477 100644 --- a/public/locales/en/modules/overseerr-module.json +++ b/public/locales/en/modules/overseerr-module.json @@ -1,4 +1,8 @@ { + "descriptor": { + "name": "Overseerr", + "description": "Allows you to search and add media from Overseerr/Jellyseerr" + }, "popup": { "item": { "buttons": { diff --git a/public/locales/en/modules/search-module.json b/public/locales/en/modules/search-module.json index 209dad2fc..0258afd59 100644 --- a/public/locales/en/modules/search-module.json +++ b/public/locales/en/modules/search-module.json @@ -1,4 +1,8 @@ { + "descriptor": { + "name": "Search Bar", + "description": "Search bar to search the web, youtube, torrents or overseerr" + }, "input": { "placeholder": "Search the web..." } diff --git a/public/locales/en/modules/total-downloads-module.json b/public/locales/en/modules/total-downloads-module.json new file mode 100644 index 000000000..ab0c23c98 --- /dev/null +++ b/public/locales/en/modules/total-downloads-module.json @@ -0,0 +1,6 @@ +{ + "descriptor": { + "name": "Download Speed", + "description": "Show the current download speed of supported services" + } +} \ No newline at end of file diff --git a/public/locales/en/modules/weather-module.json b/public/locales/en/modules/weather-module.json index 81c82d7cc..c0aec151a 100644 --- a/public/locales/en/modules/weather-module.json +++ b/public/locales/en/modules/weather-module.json @@ -1,4 +1,16 @@ { + "descriptor": { + "name": "Weather", + "description": "Look up the current weather in your location", + "settings": { + "displayInFahrenheit": { + "label": "Display in Fahrenheit" + }, + "location": { + "label": "Weather location" + } + } + }, "card": { "weatherDescriptions": { "clear": "Clear", diff --git a/src/components/Settings/ModuleEnabler.tsx b/src/components/Settings/ModuleEnabler.tsx index 1600636bc..6379eefb6 100644 --- a/src/components/Settings/ModuleEnabler.tsx +++ b/src/components/Settings/ModuleEnabler.tsx @@ -11,26 +11,31 @@ export default function ModuleEnabler(props: any) { {t('title')} - {modules.map((module) => ( - { - setConfig({ - ...config, - modules: { - ...config.modules, - [module.title]: { - ...config.modules?.[module.title], - enabled: e.currentTarget.checked, + {modules.map((module) => { + const { t: translationModules } = useTranslation(module.translationNamespace); + return ( + { + setConfig({ + ...config, + modules: { + ...config.modules, + [module.title]: { + ...config.modules?.[module.title], + enabled: e.currentTarget.checked, + }, }, - }, - }); - }} - /> - ))} + }); + }} + /> + ); + })} ); diff --git a/src/modules/ModuleTypes.d.ts b/src/modules/ModuleTypes.d.ts index 5ba0c6373..d1b31d54f 100644 --- a/src/modules/ModuleTypes.d.ts +++ b/src/modules/ModuleTypes.d.ts @@ -11,6 +11,7 @@ export interface IModule { icon: TablerIcon; component: React.ComponentType; options?: Option; + translationNamespace: string; } interface Option { diff --git a/src/modules/calendar/CalendarModule.tsx b/src/modules/calendar/CalendarModule.tsx index 896faa940..a793fd6d2 100644 --- a/src/modules/calendar/CalendarModule.tsx +++ b/src/modules/calendar/CalendarModule.tsx @@ -25,17 +25,17 @@ import { serviceItem } from '../../tools/types'; import { useColorTheme } from '../../tools/color'; export const CalendarModule: IModule = { - title: 'Calendar', - description: - 'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.', + title: 'descriptor.name', + description: 'descriptor.description', icon: CalendarIcon, component: CalendarComponent, options: { sundaystart: { - name: 'Start the week on Sunday', + name: 'descriptor.settings.sundayStart.label', value: false, }, }, + translationNamespace: 'modules/calendar-module', }; export default function CalendarComponent(props: any) { diff --git a/src/modules/dashdot/DashdotModule.tsx b/src/modules/dashdot/DashdotModule.tsx index 483c5b46f..46e168060 100644 --- a/src/modules/dashdot/DashdotModule.tsx +++ b/src/modules/dashdot/DashdotModule.tsx @@ -9,33 +9,40 @@ import { IModule } from '../ModuleTypes'; const asModule = (t: T) => t; export const DashdotModule = asModule({ - title: 'Dash.', - description: 'A module for displaying the graphs of your running Dash. instance.', + title: 'descriptor.name', + description: 'descriptor.description', icon: CalendarIcon, component: DashdotComponent, options: { cpuMultiView: { - name: 'CPU Multi-Core View', + name: 'descriptor.settings.cpuMultiView.label', value: false, }, storageMultiView: { - name: 'Storage Multi-Drive View', + name: 'descriptor.settings.storageMultiView.label', value: false, }, useCompactView: { - name: 'Use Compact View', + name: 'descriptor.settings.useCompactView.label', value: false, }, graphs: { - name: 'Graphs', + name: 'descriptor.settings.graphs.label', value: ['CPU', 'RAM', 'Storage', 'Network'], - options: ['CPU', 'RAM', 'Storage', 'Network', 'GPU'], + options: [ + 'descriptor.settings.graphs.options.cpu', + 'descriptor.settings.graphs.options.ram', + 'descriptor.settings.graphs.options.storage', + 'descriptor.settings.graphs.options.network', + 'descriptor.settings.graphs.options.GPU', + ], }, url: { - name: 'Dash. URL', + name: 'descriptor.settings.url.label', value: '', }, }, + translationNamespace: 'modules/dashdot-module', }); const useStyles = createStyles((theme, _params) => ({ diff --git a/src/modules/date/DateModule.tsx b/src/modules/date/DateModule.tsx index 72a83fba8..ee8282215 100644 --- a/src/modules/date/DateModule.tsx +++ b/src/modules/date/DateModule.tsx @@ -7,16 +7,17 @@ import { IModule } from '../ModuleTypes'; import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval'; export const DateModule: IModule = { - title: 'Date', - description: 'Show the current time and date in a card', + title: 'descriptor.name', + description: 'descriptor.description', icon: Clock, component: DateComponent, options: { full: { - name: 'Display full time (24-hour)', + name: 'descriptor.settings.display24HourFormat.label', value: true, }, }, + translationNamespace: 'modules/date-module', }; export default function DateComponent(props: any) { diff --git a/src/modules/docker/DockerModule.tsx b/src/modules/docker/DockerModule.tsx index 7ef03daaa..2e89a48d4 100644 --- a/src/modules/docker/DockerModule.tsx +++ b/src/modules/docker/DockerModule.tsx @@ -12,10 +12,11 @@ import { useConfig } from '../../tools/state'; import { IModule } from '../ModuleTypes'; export const DockerModule: IModule = { - title: 'Docker', - description: 'Allows you to easily manage your torrents', + title: 'descriptor.name', + description: 'descriptor.description', icon: IconBrandDocker, component: DockerMenuButton, + translationNamespace: 'modules/docker-module', }; export default function DockerMenuButton(props: any) { diff --git a/src/modules/downloads/DownloadsModule.tsx b/src/modules/downloads/DownloadsModule.tsx index 18712c50f..9babcdc19 100644 --- a/src/modules/downloads/DownloadsModule.tsx +++ b/src/modules/downloads/DownloadsModule.tsx @@ -15,24 +15,25 @@ import axios from 'axios'; import { NormalizedTorrent } from '@ctrl/shared-torrent'; import { useViewportSize } from '@mantine/hooks'; import { showNotification } from '@mantine/notifications'; +import { useTranslation } from 'next-i18next'; 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'; -import { useTranslation } from 'next-i18next'; export const DownloadsModule: IModule = { - title: 'Torrent', - description: 'Show the current download speed of supported services', + title: 'descriptor.name', + description: 'descriptor.description', icon: Download, component: DownloadComponent, options: { hidecomplete: { - name: 'Hide completed torrents', + name: 'descriptor.settings.hideComplete', value: false, }, }, + translationNamespace: 'modules/downloads-module', }; export default function DownloadComponent() { diff --git a/src/modules/downloads/TotalDownloadsModule.tsx b/src/modules/downloads/TotalDownloadsModule.tsx index 88c6aabea..12b4b5600 100644 --- a/src/modules/downloads/TotalDownloadsModule.tsx +++ b/src/modules/downloads/TotalDownloadsModule.tsx @@ -15,10 +15,11 @@ import { IModule } from '../ModuleTypes'; import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval'; export const TotalDownloadsModule: IModule = { - title: 'Download Speed', - description: 'Show the current download speed of supported services', + title: 'descriptor.name', + description: 'descriptor.description', icon: Download, component: TotalDownloadsComponent, + translationNamespace: 'modules/total-downloads-module', }; interface torrentHistory { diff --git a/src/modules/moduleWrapper.tsx b/src/modules/moduleWrapper.tsx index 90e958f91..17bdb105f 100644 --- a/src/modules/moduleWrapper.tsx +++ b/src/modules/moduleWrapper.tsx @@ -11,12 +11,15 @@ import { } from '@mantine/core'; import { IconAdjustments } from '@tabler/icons'; import { motion } from 'framer-motion'; +import { useTranslation } from 'next-i18next'; import { useState } from 'react'; import { useConfig } from '../tools/state'; import { IModule } from './ModuleTypes'; function getItems(module: IModule) { const { config, setConfig } = useConfig(); + const { t } = useTranslation(module.translationNamespace); + const items: JSX.Element[] = []; if (module.options) { const keys = Object.keys(module.options); @@ -130,7 +133,7 @@ function getItems(module: IModule) { }, }); }} - label={values[index].name} + label={t(values[index].name)} /> ); } @@ -148,6 +151,7 @@ export function ModuleWrapper(props: any) { const isShown = enabledModules[module.title]?.enabled ?? false; //TODO: fix the hover problem const [hovering, setHovering] = useState(false); + const { t } = useTranslation('modules'); if (!isShown) { return null; @@ -186,6 +190,7 @@ export function ModuleWrapper(props: any) { export function ModuleMenu(props: any) { const { module, styles, hovered } = props; const items: JSX.Element[] = getItems(module); + const { t } = useTranslation('modules/common'); return ( <> {module.options && ( @@ -217,7 +222,7 @@ export function ModuleMenu(props: any) { - Settings + {t('settings.label')} {items.map((item) => ( {item} ))} diff --git a/src/modules/overseerr/OverseerrModule.tsx b/src/modules/overseerr/OverseerrModule.tsx index 1fe9a39c7..86bfac0b8 100644 --- a/src/modules/overseerr/OverseerrModule.tsx +++ b/src/modules/overseerr/OverseerrModule.tsx @@ -3,10 +3,11 @@ import { OverseerrMediaDisplay } from '../common'; import { IModule } from '../ModuleTypes'; export const OverseerrModule: IModule = { - title: 'Overseerr', - description: 'Allows you to search and add media from Overseerr/Jellyseerr', + title: 'descriptor.name', + description: 'descriptor.description', icon: IconEyeglass, component: OverseerrMediaDisplay, + translationNamespace: 'modules/overseerr-module', }; export interface OverseerSearchProps { diff --git a/src/modules/ping/PingModule.tsx b/src/modules/ping/PingModule.tsx index fd7468124..94f0d207e 100644 --- a/src/modules/ping/PingModule.tsx +++ b/src/modules/ping/PingModule.tsx @@ -3,15 +3,16 @@ import axios, { AxiosResponse } from 'axios'; import { motion } from 'framer-motion'; import { useEffect, useState } from 'react'; import { IconPlug as Plug } from '@tabler/icons'; +import { useTranslation } from 'next-i18next'; import { useConfig } from '../../tools/state'; import { IModule } from '../ModuleTypes'; -import { useTranslation } from 'next-i18next'; export const PingModule: IModule = { - title: 'Ping Services', - description: 'Pings your services and shows their status as an indicator', + title: 'descriptor.name', + description: 'descriptor.description', icon: Plug, component: PingComponent, + translationNamespace: 'modules/ping-module', }; export default function PingComponent(props: any) { diff --git a/src/modules/search/SearchModule.tsx b/src/modules/search/SearchModule.tsx index dfea8029f..c5c66c677 100644 --- a/src/modules/search/SearchModule.tsx +++ b/src/modules/search/SearchModule.tsx @@ -27,10 +27,11 @@ const useStyles = createStyles((theme) => ({ })); export const SearchModule: IModule = { - title: 'Search Bar', - description: 'Search bar to search the web, youtube, torrents or overseerr', + title: 'descriptor.name', + description: 'descriptor.description', icon: Search, component: SearchBar, + translationNamespace: 'modules/search-module', }; export default function SearchBar(props: any) { diff --git a/src/modules/weather/WeatherModule.tsx b/src/modules/weather/WeatherModule.tsx index 930b17405..756f9b6ba 100644 --- a/src/modules/weather/WeatherModule.tsx +++ b/src/modules/weather/WeatherModule.tsx @@ -19,20 +19,21 @@ import { IModule } from '../ModuleTypes'; import { WeatherResponse } from './WeatherInterface'; export const WeatherModule: IModule = { - title: 'Weather', - description: 'Look up the current weather in your location', + title: 'descriptor.name', + description: 'descriptor.description', icon: Sun, component: WeatherComponent, options: { freedomunit: { - name: 'Display in Fahrenheit', + name: 'descriptor.settings.displayInFahrenheit.label', value: false, }, location: { - name: 'Current location', + name: 'descriptor.settings.location.label', value: 'Paris', }, }, + translationNamespace: 'modules/weather-module', }; // 0 Clear sky diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e52fd7ac1..7d454dfa1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -45,6 +45,10 @@ export async function getServerSideProps({ 'settings/customization/shade-selector', 'settings/customization/app-width', 'settings/customization/opacity-selector', + 'modules/common', + 'modules/date-module', + 'modules/calendar-module', + 'modules/total-downloads-module', 'modules/search-module', 'modules/downloads-module', 'modules/weather-module',