mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-11 07:55:52 +01:00
✨ Option to show time for a city (#1236)
This commit is contained in:
Tagaishi
GitHub
@@ -67,9 +67,12 @@
|
||||
"dockerode": "^3.3.2",
|
||||
"fily-publish-gridstack": "^0.0.13",
|
||||
"framer-motion": "^10.0.0",
|
||||
"geo-tz": "^7.0.7",
|
||||
"html-entities": "^2.3.3",
|
||||
"i18next": "^22.5.1",
|
||||
"js-file-download": "^0.4.12",
|
||||
"moment": "^2.29.4",
|
||||
"moment-timezone": "^0.5.43",
|
||||
"next": "13.4.10",
|
||||
"next-i18next": "^13.0.0",
|
||||
"nzbget-api": "^0.0.3",
|
||||
|
||||
@@ -6,6 +6,27 @@
|
||||
"title": "Settings for Date and Time widget",
|
||||
"display24HourFormat": {
|
||||
"label": "Display full time (24-hour)"
|
||||
},
|
||||
"dateFormat": {
|
||||
"label": "Date formatting",
|
||||
"data": {
|
||||
"hide": "Hide Date"
|
||||
}
|
||||
},
|
||||
"enableTimezone": {
|
||||
"label": "Display a custom Timezone"
|
||||
},
|
||||
"timezoneLocation": {
|
||||
"label": "Timezone Location"
|
||||
},
|
||||
"titleState": {
|
||||
"label": "City title",
|
||||
"info": "In case you activate the Timezone option, the name of the city and the timezone code can be shown.<br/>You can also show the city alone or even show none.",
|
||||
"data": {
|
||||
"both": "City and Timezone",
|
||||
"city": "City only",
|
||||
"none": "None"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,13 +19,13 @@ import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons-react'
|
||||
import { Trans, useTranslation } from 'next-i18next';
|
||||
import { FC, useState } from 'react';
|
||||
|
||||
import { InfoCard } from '../../../InfoCard/InfoCard';
|
||||
import { useConfigContext } from '../../../../config/provider';
|
||||
import { useConfigStore } from '../../../../config/store';
|
||||
import { mapObject } from '../../../../tools/client/objects';
|
||||
import Widgets from '../../../../widgets';
|
||||
import type { IDraggableListInputValue, IWidgetOptionValue } from '../../../../widgets/widgets';
|
||||
import { IWidget } from '../../../../widgets/widgets';
|
||||
import { InfoCard } from '../../../InfoCard/InfoCard';
|
||||
import { DraggableList } from './Inputs/DraggableList';
|
||||
import { LocationSelection } from './Inputs/LocationSelection';
|
||||
import { StaticDraggableList } from './Inputs/StaticDraggableList';
|
||||
@@ -148,15 +148,17 @@ const WidgetOptionTypeSwitch: FC<{
|
||||
onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
|
||||
{...option.inputProps}
|
||||
/>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link} />}
|
||||
</Group>
|
||||
);
|
||||
case 'text':
|
||||
return (
|
||||
<Stack spacing={0}>
|
||||
<Group align="center" spacing="sm">
|
||||
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
|
||||
<Text size="0.875rem" weight="500">
|
||||
{t(`descriptor.settings.${key}.label`)}
|
||||
</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link} />}
|
||||
</Group>
|
||||
<TextInput
|
||||
value={value as string}
|
||||
@@ -169,8 +171,10 @@ const WidgetOptionTypeSwitch: FC<{
|
||||
return (
|
||||
<Stack spacing={0}>
|
||||
<Group align="center" spacing="sm">
|
||||
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
|
||||
<Text size="0.875rem" weight="500">
|
||||
{t(`descriptor.settings.${key}.label`)}
|
||||
</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link} />}
|
||||
</Group>
|
||||
<MultiSelect
|
||||
data={option.data}
|
||||
@@ -183,15 +187,26 @@ const WidgetOptionTypeSwitch: FC<{
|
||||
</Stack>
|
||||
);
|
||||
case 'select':
|
||||
const items = typeof option.data === 'function' ? option.data() : option.data;
|
||||
const data = items.map((dataType) => {
|
||||
return !dataType.label
|
||||
? {
|
||||
value: dataType.value,
|
||||
label: t(`descriptor.settings.${key}.data.${dataType.value}`),
|
||||
}
|
||||
: dataType;
|
||||
});
|
||||
return (
|
||||
<Stack spacing={0}>
|
||||
<Group align="center" spacing="sm">
|
||||
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
|
||||
<Text size="0.875rem" weight="500">
|
||||
{t(`descriptor.settings.${key}.label`)}
|
||||
</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link} />}
|
||||
</Group>
|
||||
<Select
|
||||
defaultValue={option.defaultValue}
|
||||
data={option.data}
|
||||
data={data}
|
||||
value={value as string}
|
||||
onChange={(v) => handleChange(key, v ?? option.defaultValue)}
|
||||
withinPortal
|
||||
@@ -203,8 +218,10 @@ const WidgetOptionTypeSwitch: FC<{
|
||||
return (
|
||||
<Stack spacing={0}>
|
||||
<Group align="center" spacing="sm">
|
||||
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
|
||||
<Text size="0.875rem" weight="500">
|
||||
{t(`descriptor.settings.${key}.label`)}
|
||||
</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link} />}
|
||||
</Group>
|
||||
<NumberInput
|
||||
value={value as number}
|
||||
@@ -217,8 +234,10 @@ const WidgetOptionTypeSwitch: FC<{
|
||||
return (
|
||||
<Stack spacing={0}>
|
||||
<Group align="center" spacing="sm">
|
||||
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
|
||||
<Text size="0.875rem" weight="500">
|
||||
{t(`descriptor.settings.${key}.label`)}
|
||||
</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link} />}
|
||||
</Group>
|
||||
<Slider
|
||||
label={value}
|
||||
@@ -270,7 +289,7 @@ const WidgetOptionTypeSwitch: FC<{
|
||||
<Stack spacing="xs">
|
||||
<Group align="center" spacing="sm">
|
||||
<Text>{t(`descriptor.settings.${key}.label`)}</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link} />}
|
||||
</Group>
|
||||
<StaticDraggableList
|
||||
value={typedVal}
|
||||
@@ -298,8 +317,10 @@ const WidgetOptionTypeSwitch: FC<{
|
||||
return (
|
||||
<Stack spacing={0}>
|
||||
<Group align="center" spacing="sm">
|
||||
<Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
|
||||
<Text size="0.875rem" weight="500">
|
||||
{t(`descriptor.settings.${key}.label`)}
|
||||
</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link} />}
|
||||
</Group>
|
||||
<MultiSelect
|
||||
data={value.map((name: any) => ({ value: name, label: name }))}
|
||||
@@ -324,7 +345,7 @@ const WidgetOptionTypeSwitch: FC<{
|
||||
<Stack spacing="xs">
|
||||
<Group align="center" spacing="sm">
|
||||
<Text>{t(`descriptor.settings.${key}.label`)}</Text>
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
|
||||
{info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link} />}
|
||||
</Group>
|
||||
<DraggableList
|
||||
items={Array.from(value).map((v: any) => ({
|
||||
|
||||
@@ -8,12 +8,15 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
||||
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
|
||||
import Consola from 'consola';
|
||||
import { getCookie } from 'cookies-next';
|
||||
import moment from 'moment-timezone';
|
||||
import { GetServerSidePropsContext } from 'next';
|
||||
import { appWithTranslation } from 'next-i18next';
|
||||
import { AppProps } from 'next/app';
|
||||
import Head from 'next/head';
|
||||
import { useEffect, useState } from 'react';
|
||||
import 'video.js/dist/video-js.css';
|
||||
import { getLanguageByCode } from '~/tools/language';
|
||||
import { ConfigType } from '~/types/config';
|
||||
import { api } from '~/utils/api';
|
||||
|
||||
import nextI18nextConfig from '../../next-i18next.config';
|
||||
@@ -35,7 +38,6 @@ import {
|
||||
getServiceSidePackageAttributes,
|
||||
} from '../tools/server/getPackageVersion';
|
||||
import { theme } from '../tools/server/theme/theme';
|
||||
import { ConfigType } from '~/types/config';
|
||||
|
||||
function App(
|
||||
this: any,
|
||||
@@ -46,13 +48,24 @@ function App(
|
||||
defaultColorScheme: ColorScheme;
|
||||
config?: ConfigType;
|
||||
configName?: string;
|
||||
locale: string;
|
||||
}>
|
||||
) {
|
||||
const { Component, pageProps } = props;
|
||||
// TODO: make mapping from our locales to moment locales
|
||||
const language = getLanguageByCode(pageProps.locale);
|
||||
require('moment/locale/' + language.momentLocale);
|
||||
moment.locale(language.momentLocale);
|
||||
|
||||
const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>(props.pageProps.config?.settings.customization.colors.primary || 'red');
|
||||
const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>(props.pageProps.config?.settings.customization.colors.secondary || 'orange');
|
||||
const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(props.pageProps.config?.settings.customization.colors.shade || 6);
|
||||
const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>(
|
||||
props.pageProps.config?.settings.customization.colors.primary || 'red'
|
||||
);
|
||||
const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>(
|
||||
props.pageProps.config?.settings.customization.colors.secondary || 'orange'
|
||||
);
|
||||
const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(
|
||||
props.pageProps.config?.settings.customization.colors.shade || 6
|
||||
);
|
||||
const colorTheme = {
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
@@ -172,6 +185,7 @@ App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => {
|
||||
packageAttributes: getServiceSidePackageAttributes(),
|
||||
editModeEnabled: !disableEditMode,
|
||||
defaultColorScheme: colorScheme,
|
||||
locale: ctx.locale ?? 'en',
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@@ -12,6 +12,7 @@ import { mediaRequestsRouter } from './routers/media-request';
|
||||
import { mediaServerRouter } from './routers/media-server';
|
||||
import { overseerrRouter } from './routers/overseerr';
|
||||
import { rssRouter } from './routers/rss';
|
||||
import { timezoneRouter } from './routers/timezone';
|
||||
import { usenetRouter } from './routers/usenet/router';
|
||||
import { weatherRouter } from './routers/weather';
|
||||
|
||||
@@ -22,18 +23,19 @@ import { weatherRouter } from './routers/weather';
|
||||
*/
|
||||
export const rootRouter = createTRPCRouter({
|
||||
app: appRouter,
|
||||
rss: rssRouter,
|
||||
calendar: calendarRouter,
|
||||
config: configRouter,
|
||||
docker: dockerRouter,
|
||||
icon: iconRouter,
|
||||
dashDot: dashDotRouter,
|
||||
dnsHole: dnsHoleRouter,
|
||||
docker: dockerRouter,
|
||||
download: downloadRouter,
|
||||
icon: iconRouter,
|
||||
mediaRequest: mediaRequestsRouter,
|
||||
mediaServer: mediaServerRouter,
|
||||
overseerr: overseerrRouter,
|
||||
rss: rssRouter,
|
||||
timezone: timezoneRouter,
|
||||
usenet: usenetRouter,
|
||||
calendar: calendarRouter,
|
||||
weather: weatherRouter,
|
||||
});
|
||||
|
||||
|
||||
17
src/server/api/routers/timezone.ts
Normal file
17
src/server/api/routers/timezone.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { z } from 'zod';
|
||||
import { find } from 'geo-tz'
|
||||
|
||||
import { createTRPCRouter, publicProcedure } from '../trpc';
|
||||
|
||||
export const timezoneRouter = createTRPCRouter({
|
||||
at: publicProcedure
|
||||
.input(
|
||||
z.object({
|
||||
longitude: z.number(),
|
||||
latitude: z.number(),
|
||||
})
|
||||
)
|
||||
.query(async ({ input }) => {
|
||||
return find(input.latitude,input.longitude)[0];
|
||||
}),
|
||||
})
|
||||
@@ -1,16 +1,10 @@
|
||||
export class Language {
|
||||
export type Language = {
|
||||
shortName: string;
|
||||
originalName: string;
|
||||
translatedName: string;
|
||||
emoji: string;
|
||||
|
||||
constructor(shortName: string, originalName: string, translatedName: string, emoji: string) {
|
||||
this.shortName = shortName;
|
||||
this.originalName = originalName;
|
||||
this.translatedName = translatedName;
|
||||
this.emoji = emoji;
|
||||
}
|
||||
}
|
||||
momentLocale: string;
|
||||
};
|
||||
|
||||
export const languages: Language[] = [
|
||||
{
|
||||
@@ -18,12 +12,14 @@ export const languages: Language[] = [
|
||||
originalName: 'Deutsch',
|
||||
translatedName: 'German',
|
||||
emoji: '🇩🇪',
|
||||
momentLocale: 'de',
|
||||
},
|
||||
{
|
||||
shortName: 'en',
|
||||
originalName: 'English',
|
||||
translatedName: 'English',
|
||||
emoji: '🇬🇧',
|
||||
momentLocale: 'en-gb',
|
||||
},
|
||||
// Danish
|
||||
{
|
||||
@@ -31,6 +27,7 @@ export const languages: Language[] = [
|
||||
originalName: 'Dansk',
|
||||
translatedName: 'Danish',
|
||||
emoji: '🇩🇰',
|
||||
momentLocale: 'da',
|
||||
},
|
||||
// Hebrew
|
||||
{
|
||||
@@ -38,42 +35,49 @@ export const languages: Language[] = [
|
||||
originalName: 'עברית',
|
||||
translatedName: 'Hebrew',
|
||||
emoji: '🇮🇱',
|
||||
momentLocale: 'he',
|
||||
},
|
||||
{
|
||||
shortName: 'es',
|
||||
originalName: 'Español',
|
||||
translatedName: 'Spanish',
|
||||
emoji: '🇪🇸',
|
||||
momentLocale: 'es',
|
||||
},
|
||||
{
|
||||
shortName: 'fr',
|
||||
originalName: 'Français',
|
||||
translatedName: 'French',
|
||||
emoji: '🇫🇷',
|
||||
momentLocale: 'fr',
|
||||
},
|
||||
{
|
||||
shortName: 'it',
|
||||
originalName: 'Italiano',
|
||||
translatedName: 'Italian',
|
||||
emoji: '🇮🇹',
|
||||
momentLocale: 'it',
|
||||
},
|
||||
{
|
||||
shortName: 'ja',
|
||||
originalName: '日本語',
|
||||
translatedName: 'Japanese',
|
||||
emoji: '🇯🇵',
|
||||
momentLocale: 'ja',
|
||||
},
|
||||
{
|
||||
shortName: 'ko',
|
||||
originalName: '한국어',
|
||||
translatedName: 'Korean',
|
||||
emoji: '🇰🇷',
|
||||
momentLocale: 'ko',
|
||||
},
|
||||
{
|
||||
shortName: 'lol',
|
||||
originalName: 'LOLCAT',
|
||||
translatedName: 'LOLCAT',
|
||||
emoji: '🐱',
|
||||
momentLocale: 'en-gb',
|
||||
},
|
||||
// Norwegian
|
||||
{
|
||||
@@ -81,6 +85,7 @@ export const languages: Language[] = [
|
||||
originalName: 'Norsk',
|
||||
translatedName: 'Norwegian',
|
||||
emoji: '🇳🇴',
|
||||
momentLocale: 'nb',
|
||||
},
|
||||
// Slovak
|
||||
{
|
||||
@@ -88,36 +93,42 @@ export const languages: Language[] = [
|
||||
originalName: 'Slovenčina',
|
||||
translatedName: 'Slovak',
|
||||
emoji: '🇸🇰',
|
||||
momentLocale: 'sk',
|
||||
},
|
||||
{
|
||||
shortName: 'nl',
|
||||
originalName: 'Nederlands',
|
||||
translatedName: 'Dutch',
|
||||
emoji: '🇳🇱',
|
||||
momentLocale: 'nl',
|
||||
},
|
||||
{
|
||||
shortName: 'pl',
|
||||
originalName: 'Polski',
|
||||
translatedName: 'Polish',
|
||||
emoji: '🇵🇱',
|
||||
momentLocale: 'pl',
|
||||
},
|
||||
{
|
||||
shortName: 'pt',
|
||||
originalName: 'Português',
|
||||
translatedName: 'Portuguese',
|
||||
emoji: '🇵🇹',
|
||||
momentLocale: 'pt',
|
||||
},
|
||||
{
|
||||
shortName: 'ru',
|
||||
originalName: 'Русский',
|
||||
translatedName: 'Russian',
|
||||
emoji: '🇷🇺',
|
||||
momentLocale: 'ru',
|
||||
},
|
||||
{
|
||||
shortName: 'sl',
|
||||
originalName: 'Slovenščina',
|
||||
translatedName: 'Slovenian',
|
||||
emoji: '🇸🇮',
|
||||
momentLocale: 'sl',
|
||||
},
|
||||
|
||||
{
|
||||
@@ -125,12 +136,14 @@ export const languages: Language[] = [
|
||||
originalName: 'Svenska',
|
||||
translatedName: 'Swedish',
|
||||
emoji: '🇸🇪',
|
||||
momentLocale: 'sv',
|
||||
},
|
||||
{
|
||||
shortName: 'uk',
|
||||
originalName: 'Українська',
|
||||
translatedName: 'Ukrainian',
|
||||
emoji: '🇺🇦',
|
||||
momentLocale: 'uk',
|
||||
},
|
||||
// Vietnamese
|
||||
{
|
||||
@@ -138,37 +151,42 @@ export const languages: Language[] = [
|
||||
originalName: 'Tiếng Việt',
|
||||
translatedName: 'Vietnamese',
|
||||
emoji: '🇻🇳',
|
||||
momentLocale: 'vi',
|
||||
},
|
||||
{
|
||||
shortName: 'zh',
|
||||
originalName: '中文',
|
||||
translatedName: 'Chinese',
|
||||
emoji: '🇨🇳',
|
||||
momentLocale: 'zh-cn',
|
||||
},
|
||||
{
|
||||
shortName: 'el',
|
||||
originalName: 'Ελληνικά',
|
||||
translatedName: 'Greek',
|
||||
emoji: '🇬🇷',
|
||||
momentLocale: 'el',
|
||||
},
|
||||
{
|
||||
shortName: 'tr',
|
||||
originalName: 'Türkçe',
|
||||
translatedName: 'Turkish',
|
||||
emoji: '🇹🇷',
|
||||
momentLocale: 'tr',
|
||||
},
|
||||
{
|
||||
shortName: 'lv',
|
||||
originalName: 'Latvian',
|
||||
translatedName: 'Latvian',
|
||||
emoji: '🇱🇻',
|
||||
momentLocale: 'lv',
|
||||
},
|
||||
// Croatian
|
||||
{
|
||||
shortName: 'hr',
|
||||
originalName: 'Hrvatski',
|
||||
translatedName: 'Croatian',
|
||||
emoji: '🇭🇷',
|
||||
momentLocale: 'hr',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import { Stack, Text, Title } from '@mantine/core';
|
||||
import { Stack, Text, createStyles } from '@mantine/core';
|
||||
import { useElementSize } from '@mantine/hooks';
|
||||
import { IconClock } from '@tabler/icons-react';
|
||||
import dayjs from 'dayjs';
|
||||
import moment from 'moment-timezone';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { getLanguageByCode } from '~/tools/language';
|
||||
import { api } from '~/utils/api';
|
||||
|
||||
import { useSetSafeInterval } from '../../hooks/useSetSafeInterval';
|
||||
import { defineWidget } from '../helper';
|
||||
@@ -16,6 +19,39 @@ const definition = defineWidget({
|
||||
type: 'switch',
|
||||
defaultValue: false,
|
||||
},
|
||||
dateFormat: {
|
||||
type: 'select',
|
||||
defaultValue: 'dddd, MMMM D',
|
||||
data: () => [
|
||||
{ value: 'hide' },
|
||||
{ value: 'dddd, MMMM D', label: moment().format('dddd, MMMM D') },
|
||||
{ value: 'dddd, D MMMM', label: moment().format('dddd, D MMMM') },
|
||||
{ value: 'MMM D', label: moment().format('MMM D') },
|
||||
{ value: 'D MMM', label: moment().format('D MMM') },
|
||||
{ value: 'DD/MM/YYYY', label: moment().format('DD/MM/YYYY') },
|
||||
{ value: 'MM/DD/YYYY', label: moment().format('MM/DD/YYYY') },
|
||||
{ value: 'DD/MM', label: moment().format('DD/MM') },
|
||||
{ value: 'MM/DD', label: moment().format('MM/DD') },
|
||||
],
|
||||
},
|
||||
enableTimezone: {
|
||||
type: 'switch',
|
||||
defaultValue: false,
|
||||
},
|
||||
timezoneLocation: {
|
||||
type: 'location',
|
||||
defaultValue: {
|
||||
name: 'Paris',
|
||||
latitude: 48.85341,
|
||||
longitude: 2.3488,
|
||||
},
|
||||
},
|
||||
titleState: {
|
||||
type: 'select',
|
||||
defaultValue: 'both',
|
||||
data: [{ value: 'both' }, { value: 'city' }, { value: 'none' }],
|
||||
info: true,
|
||||
},
|
||||
},
|
||||
gridstack: {
|
||||
minWidth: 1,
|
||||
@@ -33,52 +69,102 @@ interface DateTileProps {
|
||||
}
|
||||
|
||||
function DateTile({ widget }: DateTileProps) {
|
||||
const date = useDateState();
|
||||
const date = useDateState(
|
||||
widget.properties.enableTimezone ? widget.properties.timezoneLocation : undefined
|
||||
);
|
||||
const formatString = widget.properties.display24HourFormat ? 'HH:mm' : 'h:mm A';
|
||||
const { width, ref } = useElementSize();
|
||||
const { ref, width } = useElementSize();
|
||||
const { cx, classes } = useStyles();
|
||||
|
||||
return (
|
||||
<Stack ref={ref} spacing="xs" justify="space-around" align="center" style={{ height: '100%' }}>
|
||||
<Title>{dayjs(date).format(formatString)}</Title>
|
||||
{width > 200 && <Text size="lg">{dayjs(date).format('dddd, MMMM D')}</Text>}
|
||||
<Stack ref={ref} className={cx(classes.wrapper, 'dashboard-tile-clock-wrapper')}>
|
||||
{widget.properties.enableTimezone && widget.properties.titleState !== 'none' && (
|
||||
<Text
|
||||
size={width < 150 ? 'sm' : 'lg'}
|
||||
className={cx(classes.extras, 'dashboard-tile-clock-city')}
|
||||
>
|
||||
{widget.properties.timezoneLocation.name}
|
||||
{widget.properties.titleState === 'both' && moment(date).format(' (z)')}
|
||||
</Text>
|
||||
)}
|
||||
<Text className={cx(classes.clock, 'dashboard-tile-clock-hour')}>
|
||||
{moment(date).format(formatString)}
|
||||
</Text>
|
||||
{!widget.properties.dateFormat.includes('hide') && (
|
||||
<Text
|
||||
size={width < 150 ? 'sm' : 'lg'}
|
||||
pt="0.2rem"
|
||||
className={cx(classes.extras, 'dashboard-tile-clock-date')}
|
||||
>
|
||||
{moment(date).format(widget.properties.dateFormat)}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
const useStyles = createStyles(()=>({
|
||||
wrapper:{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-evenly',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
gap: 0,
|
||||
},
|
||||
clock:{
|
||||
lineHeight: '1',
|
||||
whiteSpace: 'nowrap',
|
||||
fontWeight: 700,
|
||||
fontSize: '2.125rem',
|
||||
},
|
||||
extras:{
|
||||
lineHeight: '1',
|
||||
whiteSpace: 'nowrap',
|
||||
}
|
||||
}))
|
||||
|
||||
/**
|
||||
* State which updates when the minute is changing
|
||||
* @returns current date updated every new minute
|
||||
*/
|
||||
const useDateState = () => {
|
||||
const [date, setDate] = useState(new Date());
|
||||
const useDateState = (location?: { latitude: number; longitude: number }) => {
|
||||
//Gets a timezone from user input location. If location is undefined, then it means it's a local timezone so keep undefined
|
||||
const { data: timezone } = api.timezone.at.useQuery(location!, {
|
||||
enabled: location !== undefined,
|
||||
});
|
||||
const { locale } = useRouter();
|
||||
const [date, setDate] = useState(getNewDate(timezone));
|
||||
const setSafeInterval = useSetSafeInterval();
|
||||
const timeoutRef = useRef<NodeJS.Timeout>(); // reference for initial timeout until first minute change
|
||||
useEffect(() => {
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
setDate(new Date());
|
||||
// Starts intervall which update the date every minute
|
||||
const language = getLanguageByCode(locale ?? 'en');
|
||||
moment.locale(language.momentLocale);
|
||||
setDate(getNewDate(timezone));
|
||||
timeoutRef.current = setTimeout(
|
||||
() => {
|
||||
setDate(getNewDate(timezone));
|
||||
// Starts interval which update the date every minute
|
||||
setSafeInterval(() => {
|
||||
setDate(new Date());
|
||||
setDate(getNewDate(timezone));
|
||||
}, 1000 * 60);
|
||||
}, getMsUntilNextMinute());
|
||||
//1 minute - current seconds and milliseconds count
|
||||
},
|
||||
1000 * 60 - (1000 * moment().seconds() + moment().milliseconds())
|
||||
);
|
||||
|
||||
return () => timeoutRef.current && clearTimeout(timeoutRef.current);
|
||||
}, []);
|
||||
}, [timezone, locale]);
|
||||
|
||||
return date;
|
||||
};
|
||||
|
||||
// calculates the amount of milliseconds until next minute starts.
|
||||
const getMsUntilNextMinute = () => {
|
||||
const now = new Date();
|
||||
const nextMinute = new Date(
|
||||
now.getFullYear(),
|
||||
now.getMonth(),
|
||||
now.getDate(),
|
||||
now.getHours(),
|
||||
now.getMinutes() + 1
|
||||
);
|
||||
return nextMinute.getTime() - now.getTime();
|
||||
//Returns a local date if no inputs or returns date from input zone
|
||||
const getNewDate = (timezone?: string) => {
|
||||
if (timezone) {
|
||||
return moment().tz(timezone);
|
||||
}
|
||||
return moment();
|
||||
};
|
||||
|
||||
export default definition;
|
||||
|
||||
@@ -42,18 +42,19 @@ export type IWidgetOptionValue = (
|
||||
| IDraggableEditableListInputValue<any>
|
||||
| IMultipleTextInputOptionValue
|
||||
| ILocationOptionValue
|
||||
) & ICommonWidgetOptions;
|
||||
) &
|
||||
ICommonWidgetOptions;
|
||||
|
||||
// Interface for data type
|
||||
interface DataType {
|
||||
label: string;
|
||||
label?: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface ICommonWidgetOptions {
|
||||
info?: boolean;
|
||||
infoLink?: string;
|
||||
};
|
||||
}
|
||||
|
||||
// will show a multi-select with specified data
|
||||
export type IMultiSelectOptionValue = {
|
||||
@@ -67,7 +68,7 @@ export type IMultiSelectOptionValue = {
|
||||
export type ISelectOptionValue = {
|
||||
type: 'select';
|
||||
defaultValue: string;
|
||||
data: DataType[];
|
||||
data: DataType[] | (() => DataType[]);
|
||||
inputProps?: Partial<SelectProps>;
|
||||
};
|
||||
|
||||
|
||||
196
yarn.lock
196
yarn.lock
@@ -2311,6 +2311,32 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@turf/boolean-point-in-polygon@npm:^6.5.0":
|
||||
version: 6.5.0
|
||||
resolution: "@turf/boolean-point-in-polygon@npm:6.5.0"
|
||||
dependencies:
|
||||
"@turf/helpers": ^6.5.0
|
||||
"@turf/invariant": ^6.5.0
|
||||
checksum: 624e54d9956b8f9d955285065f44c80ae66cd4a87e5d893f85871009b62ad9721cca520245a56f8c4401467767c153dda58f67fec0968e3971c7bb3a39617105
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@turf/helpers@npm:^6.5.0":
|
||||
version: 6.5.0
|
||||
resolution: "@turf/helpers@npm:6.5.0"
|
||||
checksum: d57f746351357838c654e0a9b98be3285a14b447504fd6d59753d90c6d437410bb24805d61c65b612827f07f6c2ade823bb7e56e41a1a946217abccfbd64c117
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@turf/invariant@npm:^6.5.0":
|
||||
version: 6.5.0
|
||||
resolution: "@turf/invariant@npm:6.5.0"
|
||||
dependencies:
|
||||
"@turf/helpers": ^6.5.0
|
||||
checksum: f45109ee41429d4aab49db9cfcc68f832cadf18b16c1b2c7031f0a6e52545bc4d64d0efd0a980f4d05f22532ed89d6e915aeaab9db44865898d4d030221d968e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/aria-query@npm:^5.0.1":
|
||||
version: 5.0.1
|
||||
resolution: "@types/aria-query@npm:5.0.1"
|
||||
@@ -3332,6 +3358,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"array-source@npm:0.0":
|
||||
version: 0.0.4
|
||||
resolution: "array-source@npm:0.0.4"
|
||||
checksum: 35478c6a02f0262c86bbe7761a1b7a6385d76df3aa0623cb90d596a49c4f1bff1a9609a1e31ac7140c921c8546b287eb6129e54d0f1d79a0a29d84e18a31d626
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"array-union@npm:^2.1.0":
|
||||
version: 2.1.0
|
||||
resolution: "array-union@npm:2.1.0"
|
||||
@@ -3557,6 +3590,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"buffer-from@npm:^1.0.0":
|
||||
version: 1.1.2
|
||||
resolution: "buffer-from@npm:1.1.2"
|
||||
checksum: 0448524a562b37d4d7ed9efd91685a5b77a50672c556ea254ac9a6d30e3403a517d8981f10e565db24e8339413b43c97ca2951f10e399c6125a0d8911f5679bb
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"buffer-from@npm:~0.1.1":
|
||||
version: 0.1.2
|
||||
resolution: "buffer-from@npm:0.1.2"
|
||||
@@ -3913,7 +3953,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"commander@npm:^2.20.3":
|
||||
"commander@npm:2, commander@npm:^2.20.3":
|
||||
version: 2.20.3
|
||||
resolution: "commander@npm:2.20.3"
|
||||
checksum: ab8c07884e42c3a8dbc5dd9592c606176c7eb5c1ca5ff274bcf907039b2c41de3626f684ea75ccf4d361ba004bbaff1f577d5384c155f3871e456bdf27becf9e
|
||||
@@ -3941,6 +3981,18 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"concat-stream@npm:^2.0.0":
|
||||
version: 2.0.0
|
||||
resolution: "concat-stream@npm:2.0.0"
|
||||
dependencies:
|
||||
buffer-from: ^1.0.0
|
||||
inherits: ^2.0.3
|
||||
readable-stream: ^3.0.2
|
||||
typedarray: ^0.0.6
|
||||
checksum: d7f75d48f0ecd356c1545d87e22f57b488172811b1181d96021c7c4b14ab8855f5313280263dca44bb06e5222f274d047da3e290a38841ef87b59719bde967c7
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"consola@npm:^3.0.0":
|
||||
version: 3.2.3
|
||||
resolution: "consola@npm:3.2.3"
|
||||
@@ -5306,6 +5358,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"file-source@npm:0.6":
|
||||
version: 0.6.1
|
||||
resolution: "file-source@npm:0.6.1"
|
||||
dependencies:
|
||||
stream-source: 0.3
|
||||
checksum: db27232df214b27ddd7026bbd202caf0bde31123811ebac0a9772d6a41735efdc3ee8050661f56d02d43811bde79938adb5ed8cbfe5f813c7cd09b86d19b6c84
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"fill-range@npm:^7.0.1":
|
||||
version: 7.0.1
|
||||
resolution: "fill-range@npm:7.0.1"
|
||||
@@ -5532,6 +5593,33 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"geo-tz@npm:^7.0.7":
|
||||
version: 7.0.7
|
||||
resolution: "geo-tz@npm:7.0.7"
|
||||
dependencies:
|
||||
"@turf/boolean-point-in-polygon": ^6.5.0
|
||||
"@turf/helpers": ^6.5.0
|
||||
geobuf: ^3.0.2
|
||||
pbf: ^3.2.1
|
||||
checksum: 3edd225887cedcab4b372bc3ae4b35f27f8b325b797a91d8d7385cb73d566edcfd479e99599d8d08ec850e5cdaab30ad2fa6e5c0d0b4044c6bce3a06a8a1c87f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"geobuf@npm:^3.0.2":
|
||||
version: 3.0.2
|
||||
resolution: "geobuf@npm:3.0.2"
|
||||
dependencies:
|
||||
concat-stream: ^2.0.0
|
||||
pbf: ^3.2.1
|
||||
shapefile: ~0.6.6
|
||||
bin:
|
||||
geobuf2json: bin/geobuf2json
|
||||
json2geobuf: bin/json2geobuf
|
||||
shp2geobuf: bin/shp2geobuf
|
||||
checksum: 956f8dd2a86c593ce7124595512c45bcfc6570af8b9232645ed3b1feaa8db25c052d633d1eb836496a272dd8615436e3ff0ccb9dc866b4e75682ab15e9a2e3ed
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"get-caller-file@npm:^2.0.5":
|
||||
version: 2.0.5
|
||||
resolution: "get-caller-file@npm:2.0.5"
|
||||
@@ -5972,10 +6060,13 @@ __metadata:
|
||||
eslint-plugin-vitest: ^0.2.0
|
||||
fily-publish-gridstack: ^0.0.13
|
||||
framer-motion: ^10.0.0
|
||||
geo-tz: ^7.0.7
|
||||
happy-dom: ^10.0.0
|
||||
html-entities: ^2.3.3
|
||||
i18next: ^22.5.1
|
||||
js-file-download: ^0.4.12
|
||||
moment: ^2.29.4
|
||||
moment-timezone: ^0.5.43
|
||||
next: 13.4.10
|
||||
next-i18next: ^13.0.0
|
||||
node-mocks-http: ^1.12.2
|
||||
@@ -6174,7 +6265,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"ieee754@npm:^1.1.13":
|
||||
"ieee754@npm:^1.1.12, ieee754@npm:^1.1.13":
|
||||
version: 1.2.1
|
||||
resolution: "ieee754@npm:1.2.1"
|
||||
checksum: 5144c0c9815e54ada181d80a0b810221a253562422e7c6c3a60b1901154184f49326ec239d618c416c1c5945a2e197107aee8d986a3dd836b53dffefd99b5e7e
|
||||
@@ -7368,6 +7459,22 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"moment-timezone@npm:^0.5.43":
|
||||
version: 0.5.43
|
||||
resolution: "moment-timezone@npm:0.5.43"
|
||||
dependencies:
|
||||
moment: ^2.29.4
|
||||
checksum: 8075c897ed8a044f992ef26fe8cdbcad80caf974251db424cae157473cca03be2830de8c74d99341b76edae59f148c9d9d19c1c1d9363259085688ec1cf508d0
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"moment@npm:^2.29.4":
|
||||
version: 2.29.4
|
||||
resolution: "moment@npm:2.29.4"
|
||||
checksum: 0ec3f9c2bcba38dc2451b1daed5daded747f17610b92427bebe1d08d48d8b7bdd8d9197500b072d14e326dd0ccf3e326b9e3d07c5895d3d49e39b6803b76e80e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"mpd-parser@npm:^1.0.1, mpd-parser@npm:^1.1.1":
|
||||
version: 1.1.1
|
||||
resolution: "mpd-parser@npm:1.1.1"
|
||||
@@ -7980,6 +8087,16 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"path-source@npm:0.1":
|
||||
version: 0.1.3
|
||||
resolution: "path-source@npm:0.1.3"
|
||||
dependencies:
|
||||
array-source: 0.0
|
||||
file-source: 0.6
|
||||
checksum: 131eb109e146cb68e04228fc47665735d091e6cb852f13b7f90b5aaa185abbefecb6030a6213a834d59fe1c5426bf2aa9b63f138d42798d8a4024d028c879184
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"path-type@npm:^4.0.0":
|
||||
version: 4.0.0
|
||||
resolution: "path-type@npm:4.0.0"
|
||||
@@ -8001,6 +8118,18 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"pbf@npm:^3.2.1":
|
||||
version: 3.2.1
|
||||
resolution: "pbf@npm:3.2.1"
|
||||
dependencies:
|
||||
ieee754: ^1.1.12
|
||||
resolve-protobuf-schema: ^2.1.0
|
||||
bin:
|
||||
pbf: bin/pbf
|
||||
checksum: 8033f5e21fffdc485e85d50bbff07ab3313c6841c3630a4ba9bc9e82d2e9005ab92000a1a90cb911223caa44316293e367bab607dd8110d5c771e6c8aaad63e1
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"picocolors@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "picocolors@npm:1.0.0"
|
||||
@@ -8340,6 +8469,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"protocol-buffers-schema@npm:^3.3.1":
|
||||
version: 3.6.0
|
||||
resolution: "protocol-buffers-schema@npm:3.6.0"
|
||||
checksum: 8713b5770f6745ddbcdf3bbd03ee020624d506233bb567927a6615a6f69a5bd620a5f49597f34f4115792b853a4c9cb9e2d5d6b930a1c04bf198023e45c1c349
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"proxy-from-env@npm:^1.1.0":
|
||||
version: 1.1.0
|
||||
resolution: "proxy-from-env@npm:1.1.0"
|
||||
@@ -8614,7 +8750,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.5.0, readable-stream@npm:^3.6.0":
|
||||
"readable-stream@npm:^3.0.2, readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.5.0, readable-stream@npm:^3.6.0":
|
||||
version: 3.6.2
|
||||
resolution: "readable-stream@npm:3.6.2"
|
||||
dependencies:
|
||||
@@ -8716,6 +8852,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"resolve-protobuf-schema@npm:^2.1.0":
|
||||
version: 2.1.0
|
||||
resolution: "resolve-protobuf-schema@npm:2.1.0"
|
||||
dependencies:
|
||||
protocol-buffers-schema: ^3.3.1
|
||||
checksum: 88fffab2a3757888884a36f9aa4e24be5186b01820a8c26297dc1ce406b9daf776594926bdf524c2c8e8e5b0aba8ac48362b6584cdecc9a7083215ebca01c599
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"resolve@npm:^1.19.0, resolve@npm:^1.22.1":
|
||||
version: 1.22.3
|
||||
resolution: "resolve@npm:1.22.3"
|
||||
@@ -8976,6 +9121,23 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"shapefile@npm:~0.6.6":
|
||||
version: 0.6.6
|
||||
resolution: "shapefile@npm:0.6.6"
|
||||
dependencies:
|
||||
array-source: 0.0
|
||||
commander: 2
|
||||
path-source: 0.1
|
||||
slice-source: 0.4
|
||||
stream-source: 0.3
|
||||
text-encoding: ^0.6.4
|
||||
bin:
|
||||
dbf2json: bin/dbf2json
|
||||
shp2json: bin/shp2json
|
||||
checksum: 97ccf5412e8baad7a22e71700473f4b5aeab2d200093081dd8d77e180cc58e885127ce4f3b85897cd7fd49206084bace9b05c8591605f9912ba2cab0e93b427f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"shebang-command@npm:^2.0.0":
|
||||
version: 2.0.0
|
||||
resolution: "shebang-command@npm:2.0.0"
|
||||
@@ -9053,6 +9215,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"slice-source@npm:0.4":
|
||||
version: 0.4.1
|
||||
resolution: "slice-source@npm:0.4.1"
|
||||
checksum: ce360e1e488e86bb5c5202cf44627a5bd3dbe4203bc2d4c98e558eb8a49b97999cf9d31a916559ffc5c8b896116d4204e73a80c698e450375682aa0a5df8f805
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"smart-buffer@npm:^4.2.0":
|
||||
version: 4.2.0
|
||||
resolution: "smart-buffer@npm:4.2.0"
|
||||
@@ -9160,6 +9329,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"stream-source@npm:0.3":
|
||||
version: 0.3.5
|
||||
resolution: "stream-source@npm:0.3.5"
|
||||
checksum: 65a0e0a38014dcfa6e219e92d83bde5fe716cf16df339e9d7e951525c0d129771416de4d77c3389c38cdd20a43d9575f90cc91041d6fa0c2f053b989780e3591
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"streamsearch@npm:^1.1.0":
|
||||
version: 1.1.0
|
||||
resolution: "streamsearch@npm:1.1.0"
|
||||
@@ -9456,6 +9632,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"text-encoding@npm:^0.6.4":
|
||||
version: 0.6.4
|
||||
resolution: "text-encoding@npm:0.6.4"
|
||||
checksum: 12616521dc62442657be3130a705506ebc6f081a68f70b335b514de3b57619754a7acb4a95a19243acfd84e226768e80be5380b43f4890e91f74c950a4e01d8d
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"text-table@npm:^0.2.0":
|
||||
version: 0.2.0
|
||||
resolution: "text-table@npm:0.2.0"
|
||||
@@ -9800,6 +9983,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"typedarray@npm:^0.0.6":
|
||||
version: 0.0.6
|
||||
resolution: "typedarray@npm:0.0.6"
|
||||
checksum: 33b39f3d0e8463985eeaeeacc3cb2e28bc3dfaf2a5ed219628c0b629d5d7b810b0eb2165f9f607c34871d5daa92ba1dc69f49051cf7d578b4cbd26c340b9d1b1
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"typescript@npm:^5.1.0":
|
||||
version: 5.1.6
|
||||
resolution: "typescript@npm:5.1.6"
|
||||
|
||||
Reference in New Issue
Block a user