mirror of
https://github.com/iib0011/omni-tools.git
synced 2025-12-29 16:16:02 +00:00
389 lines
12 KiB
TypeScript
389 lines
12 KiB
TypeScript
|
import { Box, Typography, Paper } from '@mui/material';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import ToolContent from '@components/ToolContent';
|
||
|
|
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
|
||
|
|
import SelectWithDesc from '@components/options/SelectWithDesc';
|
||
|
|
import {
|
||
|
|
calculateTimeBetweenDates,
|
||
|
|
formatTimeDifference,
|
||
|
|
getTimeWithTimezone
|
||
|
|
} from './service';
|
||
|
|
import * as Yup from 'yup';
|
||
|
|
import { CardExampleType } from '@components/examples/ToolExamples';
|
||
|
|
|
||
|
|
type TimeUnit =
|
||
|
|
| 'milliseconds'
|
||
|
|
| 'seconds'
|
||
|
|
| 'minutes'
|
||
|
|
| 'hours'
|
||
|
|
| 'days'
|
||
|
|
| 'months'
|
||
|
|
| 'years';
|
||
|
|
|
||
|
|
type InitialValuesType = {
|
||
|
|
startDate: string;
|
||
|
|
startTime: string;
|
||
|
|
endDate: string;
|
||
|
|
endTime: string;
|
||
|
|
startTimezone: string;
|
||
|
|
endTimezone: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Helper function to format time based on largest unit
|
||
|
|
const formatTimeWithLargestUnit = (
|
||
|
|
difference: any,
|
||
|
|
largestUnit: TimeUnit
|
||
|
|
): string => {
|
||
|
|
const unitHierarchy: TimeUnit[] = [
|
||
|
|
'years',
|
||
|
|
'months',
|
||
|
|
'days',
|
||
|
|
'hours',
|
||
|
|
'minutes',
|
||
|
|
'seconds',
|
||
|
|
'milliseconds'
|
||
|
|
];
|
||
|
|
|
||
|
|
const largestUnitIndex = unitHierarchy.indexOf(largestUnit);
|
||
|
|
const unitsToInclude = unitHierarchy.slice(largestUnitIndex);
|
||
|
|
|
||
|
|
// Make a deep copy of the difference object to avoid modifying the original
|
||
|
|
const convertedDifference = { ...difference };
|
||
|
|
|
||
|
|
// Constants for time conversions - more precise values
|
||
|
|
const HOURS_PER_DAY = 24;
|
||
|
|
const DAYS_PER_MONTH = 30; // Approximation
|
||
|
|
const MONTHS_PER_YEAR = 12;
|
||
|
|
const DAYS_PER_YEAR = 365; // Approximation
|
||
|
|
const MINUTES_PER_HOUR = 60;
|
||
|
|
const SECONDS_PER_MINUTE = 60;
|
||
|
|
const MS_PER_SECOND = 1000;
|
||
|
|
|
||
|
|
// Apply conversions based on the selected largest unit
|
||
|
|
if (largestUnit === 'months') {
|
||
|
|
// Convert years to months
|
||
|
|
convertedDifference.months += convertedDifference.years * MONTHS_PER_YEAR;
|
||
|
|
convertedDifference.years = 0;
|
||
|
|
} else if (largestUnit === 'days') {
|
||
|
|
// Convert years and months to days
|
||
|
|
convertedDifference.days +=
|
||
|
|
convertedDifference.years * DAYS_PER_YEAR +
|
||
|
|
convertedDifference.months * DAYS_PER_MONTH;
|
||
|
|
convertedDifference.months = 0;
|
||
|
|
convertedDifference.years = 0;
|
||
|
|
} else if (largestUnit === 'hours') {
|
||
|
|
// Convert years, months, and days to hours
|
||
|
|
convertedDifference.hours +=
|
||
|
|
convertedDifference.years * DAYS_PER_YEAR * HOURS_PER_DAY +
|
||
|
|
convertedDifference.months * DAYS_PER_MONTH * HOURS_PER_DAY +
|
||
|
|
convertedDifference.days * HOURS_PER_DAY;
|
||
|
|
convertedDifference.days = 0;
|
||
|
|
convertedDifference.months = 0;
|
||
|
|
convertedDifference.years = 0;
|
||
|
|
} else if (largestUnit === 'minutes') {
|
||
|
|
// Convert years, months, days, and hours to minutes
|
||
|
|
convertedDifference.minutes +=
|
||
|
|
convertedDifference.years *
|
||
|
|
DAYS_PER_YEAR *
|
||
|
|
HOURS_PER_DAY *
|
||
|
|
MINUTES_PER_HOUR +
|
||
|
|
convertedDifference.months *
|
||
|
|
DAYS_PER_MONTH *
|
||
|
|
HOURS_PER_DAY *
|
||
|
|
MINUTES_PER_HOUR +
|
||
|
|
convertedDifference.days * HOURS_PER_DAY * MINUTES_PER_HOUR +
|
||
|
|
convertedDifference.hours * MINUTES_PER_HOUR;
|
||
|
|
convertedDifference.hours = 0;
|
||
|
|
convertedDifference.days = 0;
|
||
|
|
convertedDifference.months = 0;
|
||
|
|
convertedDifference.years = 0;
|
||
|
|
} else if (largestUnit === 'seconds') {
|
||
|
|
// Convert years, months, days, hours, and minutes to seconds
|
||
|
|
convertedDifference.seconds +=
|
||
|
|
convertedDifference.years *
|
||
|
|
DAYS_PER_YEAR *
|
||
|
|
HOURS_PER_DAY *
|
||
|
|
MINUTES_PER_HOUR *
|
||
|
|
SECONDS_PER_MINUTE +
|
||
|
|
convertedDifference.months *
|
||
|
|
DAYS_PER_MONTH *
|
||
|
|
HOURS_PER_DAY *
|
||
|
|
MINUTES_PER_HOUR *
|
||
|
|
SECONDS_PER_MINUTE +
|
||
|
|
convertedDifference.days *
|
||
|
|
HOURS_PER_DAY *
|
||
|
|
MINUTES_PER_HOUR *
|
||
|
|
SECONDS_PER_MINUTE +
|
||
|
|
convertedDifference.hours * MINUTES_PER_HOUR * SECONDS_PER_MINUTE +
|
||
|
|
convertedDifference.minutes * SECONDS_PER_MINUTE;
|
||
|
|
convertedDifference.minutes = 0;
|
||
|
|
convertedDifference.hours = 0;
|
||
|
|
convertedDifference.days = 0;
|
||
|
|
convertedDifference.months = 0;
|
||
|
|
convertedDifference.years = 0;
|
||
|
|
} else if (largestUnit === 'milliseconds') {
|
||
|
|
// Convert everything to milliseconds
|
||
|
|
convertedDifference.milliseconds +=
|
||
|
|
convertedDifference.years *
|
||
|
|
DAYS_PER_YEAR *
|
||
|
|
HOURS_PER_DAY *
|
||
|
|
MINUTES_PER_HOUR *
|
||
|
|
SECONDS_PER_MINUTE *
|
||
|
|
MS_PER_SECOND +
|
||
|
|
convertedDifference.months *
|
||
|
|
DAYS_PER_MONTH *
|
||
|
|
HOURS_PER_DAY *
|
||
|
|
MINUTES_PER_HOUR *
|
||
|
|
SECONDS_PER_MINUTE *
|
||
|
|
MS_PER_SECOND +
|
||
|
|
convertedDifference.days *
|
||
|
|
HOURS_PER_DAY *
|
||
|
|
MINUTES_PER_HOUR *
|
||
|
|
SECONDS_PER_MINUTE *
|
||
|
|
MS_PER_SECOND +
|
||
|
|
convertedDifference.hours *
|
||
|
|
MINUTES_PER_HOUR *
|
||
|
|
SECONDS_PER_MINUTE *
|
||
|
|
MS_PER_SECOND +
|
||
|
|
convertedDifference.minutes * SECONDS_PER_MINUTE * MS_PER_SECOND +
|
||
|
|
convertedDifference.seconds * MS_PER_SECOND;
|
||
|
|
convertedDifference.seconds = 0;
|
||
|
|
convertedDifference.minutes = 0;
|
||
|
|
convertedDifference.hours = 0;
|
||
|
|
convertedDifference.days = 0;
|
||
|
|
convertedDifference.months = 0;
|
||
|
|
convertedDifference.years = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
return formatTimeDifference(convertedDifference, unitsToInclude);
|
||
|
|
};
|
||
|
|
|
||
|
|
const initialValues: InitialValuesType = {
|
||
|
|
startDate: new Date().toISOString().split('T')[0],
|
||
|
|
startTime: '00:00',
|
||
|
|
endDate: new Date().toISOString().split('T')[0],
|
||
|
|
endTime: '12:00',
|
||
|
|
startTimezone: 'local',
|
||
|
|
endTimezone: 'local'
|
||
|
|
};
|
||
|
|
|
||
|
|
const validationSchema = Yup.object({
|
||
|
|
startDate: Yup.string().required('Start date is required'),
|
||
|
|
startTime: Yup.string().required('Start time is required'),
|
||
|
|
endDate: Yup.string().required('End date is required'),
|
||
|
|
endTime: Yup.string().required('End time is required'),
|
||
|
|
startTimezone: Yup.string(),
|
||
|
|
endTimezone: Yup.string()
|
||
|
|
});
|
||
|
|
|
||
|
|
const timezoneOptions = [
|
||
|
|
{ value: 'local', label: 'Local Time' },
|
||
|
|
{ value: 'GMT+0000', label: 'GMT+0000 (UTC)' },
|
||
|
|
{ value: 'GMT-0500', label: 'GMT-0500 (Eastern Standard Time)' },
|
||
|
|
{ value: 'GMT-0600', label: 'GMT-0600 (Central Standard Time)' },
|
||
|
|
{ value: 'GMT-0700', label: 'GMT-0700 (Mountain Standard Time)' },
|
||
|
|
{ value: 'GMT-0800', label: 'GMT-0800 (Pacific Standard Time)' },
|
||
|
|
{ value: 'GMT+0100', label: 'GMT+0100 (Central European Time)' },
|
||
|
|
{ value: 'GMT+0200', label: 'GMT+0200 (Eastern European Time)' },
|
||
|
|
{ value: 'GMT+0530', label: 'GMT+0530 (Indian Standard Time)' },
|
||
|
|
{ value: 'GMT+0800', label: 'GMT+0800 (China Standard Time)' },
|
||
|
|
{ value: 'GMT+0900', label: 'GMT+0900 (Japan Standard Time)' },
|
||
|
|
{ value: 'GMT+1000', label: 'GMT+1000 (Australian Eastern Standard Time)' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const exampleCards: CardExampleType<InitialValuesType>[] = [
|
||
|
|
{
|
||
|
|
title: 'One Year Difference',
|
||
|
|
description: 'Calculate the time between dates that are one year apart',
|
||
|
|
sampleOptions: {
|
||
|
|
startDate: '2023-01-01',
|
||
|
|
startTime: '12:00',
|
||
|
|
endDate: '2024-01-01',
|
||
|
|
endTime: '12:00',
|
||
|
|
startTimezone: 'local',
|
||
|
|
endTimezone: 'local'
|
||
|
|
},
|
||
|
|
sampleResult: '1 year'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Different Timezones',
|
||
|
|
description: 'Calculate the time difference between New York and London',
|
||
|
|
sampleOptions: {
|
||
|
|
startDate: '2023-01-01',
|
||
|
|
startTime: '12:00',
|
||
|
|
endDate: '2023-01-01',
|
||
|
|
endTime: '12:00',
|
||
|
|
startTimezone: 'GMT-0500',
|
||
|
|
endTimezone: 'GMT+0000'
|
||
|
|
},
|
||
|
|
sampleResult: '5 hours'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Detailed Time Breakdown',
|
||
|
|
description: 'Show a detailed breakdown of a time difference',
|
||
|
|
sampleOptions: {
|
||
|
|
startDate: '2023-01-01',
|
||
|
|
startTime: '09:30',
|
||
|
|
endDate: '2023-01-03',
|
||
|
|
endTime: '14:45',
|
||
|
|
startTimezone: 'local',
|
||
|
|
endTimezone: 'local'
|
||
|
|
},
|
||
|
|
sampleResult: '2 days, 5 hours, 15 minutes'
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function TimeBetweenDates() {
|
||
|
|
const [result, setResult] = useState<string>('');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ToolContent
|
||
|
|
inputComponent={null}
|
||
|
|
resultComponent={
|
||
|
|
result ? (
|
||
|
|
<Paper
|
||
|
|
elevation={3}
|
||
|
|
sx={{
|
||
|
|
p: 3,
|
||
|
|
borderLeft: '5px solid',
|
||
|
|
borderColor: 'primary.main',
|
||
|
|
bgcolor: 'background.paper',
|
||
|
|
maxWidth: '100%',
|
||
|
|
mx: 'auto'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography
|
||
|
|
variant="h4"
|
||
|
|
align="center"
|
||
|
|
sx={{ fontWeight: 'bold', color: 'primary.main' }}
|
||
|
|
>
|
||
|
|
{result}
|
||
|
|
</Typography>
|
||
|
|
</Paper>
|
||
|
|
) : null
|
||
|
|
}
|
||
|
|
initialValues={initialValues}
|
||
|
|
validationSchema={validationSchema}
|
||
|
|
exampleCards={exampleCards}
|
||
|
|
toolInfo={{
|
||
|
|
title: 'Time Between Dates Calculator',
|
||
|
|
description:
|
||
|
|
'Calculate the exact time difference between two dates and times, with support for different timezones. This tool provides a detailed breakdown of the time difference in various units (years, months, days, hours, minutes, and seconds).'
|
||
|
|
}}
|
||
|
|
getGroups={({ values, updateField }) => [
|
||
|
|
{
|
||
|
|
title: 'Start Date & Time',
|
||
|
|
component: (
|
||
|
|
<Box>
|
||
|
|
<TextFieldWithDesc
|
||
|
|
description="Start Date"
|
||
|
|
value={values.startDate}
|
||
|
|
onOwnChange={(val) => updateField('startDate', val)}
|
||
|
|
type="date"
|
||
|
|
/>
|
||
|
|
<TextFieldWithDesc
|
||
|
|
description="Start Time"
|
||
|
|
value={values.startTime}
|
||
|
|
onOwnChange={(val) => updateField('startTime', val)}
|
||
|
|
type="time"
|
||
|
|
/>
|
||
|
|
<SelectWithDesc
|
||
|
|
description="Start Timezone"
|
||
|
|
selected={values.startTimezone}
|
||
|
|
onChange={(val: string) => updateField('startTimezone', val)}
|
||
|
|
options={timezoneOptions}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'End Date & Time',
|
||
|
|
component: (
|
||
|
|
<Box>
|
||
|
|
<TextFieldWithDesc
|
||
|
|
description="End Date"
|
||
|
|
value={values.endDate}
|
||
|
|
onOwnChange={(val) => updateField('endDate', val)}
|
||
|
|
type="date"
|
||
|
|
/>
|
||
|
|
<TextFieldWithDesc
|
||
|
|
description="End Time"
|
||
|
|
value={values.endTime}
|
||
|
|
onOwnChange={(val) => updateField('endTime', val)}
|
||
|
|
type="time"
|
||
|
|
/>
|
||
|
|
<SelectWithDesc
|
||
|
|
description="End Timezone"
|
||
|
|
selected={values.endTimezone}
|
||
|
|
onChange={(val: string) => updateField('endTimezone', val)}
|
||
|
|
options={timezoneOptions}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
]}
|
||
|
|
compute={(values) => {
|
||
|
|
try {
|
||
|
|
// Create Date objects with timezone consideration
|
||
|
|
const startDateTime = getTimeWithTimezone(
|
||
|
|
values.startDate,
|
||
|
|
values.startTime,
|
||
|
|
values.startTimezone
|
||
|
|
);
|
||
|
|
|
||
|
|
const endDateTime = getTimeWithTimezone(
|
||
|
|
values.endDate,
|
||
|
|
values.endTime,
|
||
|
|
values.endTimezone
|
||
|
|
);
|
||
|
|
|
||
|
|
// Calculate time difference
|
||
|
|
const difference = calculateTimeBetweenDates(
|
||
|
|
startDateTime,
|
||
|
|
endDateTime
|
||
|
|
);
|
||
|
|
|
||
|
|
// Format the result - use 'years' as the default largest unit
|
||
|
|
if (typeof difference === 'number') {
|
||
|
|
setResult(`${difference} milliseconds`);
|
||
|
|
} else {
|
||
|
|
// Auto-determine the best unit to display based on the time difference
|
||
|
|
let bestUnit: TimeUnit = 'years';
|
||
|
|
|
||
|
|
if (difference.years > 0) {
|
||
|
|
bestUnit = 'years';
|
||
|
|
} else if (difference.months > 0) {
|
||
|
|
bestUnit = 'months';
|
||
|
|
} else if (difference.days > 0) {
|
||
|
|
bestUnit = 'days';
|
||
|
|
} else if (difference.hours > 0) {
|
||
|
|
bestUnit = 'hours';
|
||
|
|
} else if (difference.minutes > 0) {
|
||
|
|
bestUnit = 'minutes';
|
||
|
|
} else if (difference.seconds > 0) {
|
||
|
|
bestUnit = 'seconds';
|
||
|
|
} else {
|
||
|
|
bestUnit = 'milliseconds';
|
||
|
|
}
|
||
|
|
|
||
|
|
const formattedDifference = formatTimeWithLargestUnit(
|
||
|
|
difference,
|
||
|
|
bestUnit
|
||
|
|
);
|
||
|
|
|
||
|
|
setResult(formattedDifference);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
setResult(
|
||
|
|
`Error: ${
|
||
|
|
error instanceof Error
|
||
|
|
? error.message
|
||
|
|
: 'Failed to calculate time difference'
|
||
|
|
}`
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|