feat: convert-seconds-to-time

src/pages/tools/time/convert-seconds-to-time/convert-seconcds-to-time.service.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { convertSecondsToTime } from './service';
+
+describe('convertSecondsToTime', () => {
+  it('should convert seconds to a formatted time string', () => {
+    const result = convertSecondsToTime('3661', true);
+    expect(result).toBe('01:01:01');
+  });
+
+  it('should handle zero seconds', () => {
+    const result = convertSecondsToTime('0', true);
+    expect(result).toBe('00:00:00');
+  });
+
+  it('should handle seconds less than a minute', () => {
+    const result = convertSecondsToTime('45', true);
+    expect(result).toBe('00:00:45');
+  });
+
+  it('should handle seconds equal to a full minute', () => {
+    const result = convertSecondsToTime('60', true);
+    expect(result).toBe('00:01:00');
+  });
+
+  it('should handle seconds equal to a full hour', () => {
+    const result = convertSecondsToTime('3600', true);
+    expect(result).toBe('01:00:00');
+  });
+  it('should handle seconds equal to a full hour without padding', () => {
+    const result = convertSecondsToTime('3600', false);
+    expect(result).toBe('1:0:0');
+  });
+
+  it('should handle large numbers of seconds with padding', () => {
+    const result = convertSecondsToTime('7325', true);
+    expect(result).toBe('02:02:05');
+  });
+  it('should handle large numbers of seconds without padding', () => {
+    const result = convertSecondsToTime('7325', false);
+    expect(result).toBe('2:2:5');
+  });
+  it('should handle numbers of seconds on multilines without padding', () => {
+    const result = convertSecondsToTime('7325\n3600\n5c\n60', false);
+    expect(result).toBe('2:2:5\n1:0:0\n\n0:1:0');
+  });
+  it('should handle numbers of seconds on multilines with padding', () => {
+    const result = convertSecondsToTime('7325\n3600\n5c\n60', true);
+    expect(result).toBe('02:02:05\n01:00:00\n\n00:01:00');
+  });
+});

src/pages/tools/time/convert-seconds-to-time/index.tsx

@@ -0,0 +1,111 @@
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import { convertSecondsToTime } from './service';
+
+const initialValues = {
+  paddingFlag: false
+};
+type InitialValuesType = typeof initialValues;
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: '1 Second, 1 Minute, 1 Hour',
+    description:
+      "In this example, we convert 1 second, 60 seconds, and 3600 seconds to clock format. We don't use the zero-padding option and get three simple output values – 0:0:1 for 1 second, 0:1:0 for 60 seconds (1 minute), and 1:0:0 for 3600 seconds (1 hour).",
+    sampleText: `1
+60
+3600`,
+    sampleResult: `0:0:1
+0:1:0
+1:0:0`,
+    sampleOptions: { paddingFlag: false }
+  },
+  {
+    title: 'HH:MM:SS Digital Clock',
+    description:
+      "In this example, we enable the padding option and output digital clock time in the format HH:MM:SS. The first two integer timestamps don't contain a full minute and the third timestamp doesn't contain a full hour, there we get zeros in the minutes or hours positions in output.",
+    sampleText: `0
+46
+890
+18305
+40271
+86399`,
+    sampleResult: `00:00:00
+00:00:46
+00:14:50
+05:05:05
+11:11:11
+23:59:59`,
+    sampleOptions: { paddingFlag: true }
+  },
+  {
+    title: 'More Than a Day',
+    description:
+      "The values of all input seconds in this example are greater than the number of seconds in a day (86400 seconds). As our algorithm doesn't limit the time to just 23:59:59 hours, it can find the exact number of hours in large inputs.",
+    sampleText: `86401
+123456
+2159999
+
+3600000
+101010101`,
+    sampleResult: `24:00:01
+34:17:36
+599:59:59
+
+1000:00:00
+28058:21:41`,
+    sampleOptions: { paddingFlag: true }
+  }
+];
+
+export default function SecondsToTime({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  const compute = (optionsValues: typeof initialValues, input: string) => {
+    setResult(convertSecondsToTime(input, optionsValues.paddingFlag));
+  };
+
+  const getGroups: GetGroupsType<InitialValuesType> | null = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Time Padding',
+      component: (
+        <Box>
+          <CheckboxWithDesc
+            onChange={(val) => updateField('paddingFlag', val)}
+            checked={values.paddingFlag}
+            title={'Add Padding'}
+            description={'Add zero padding to hours, minutes, and seconds.'}
+          />
+        </Box>
+      )
+    }
+  ];
+
+  return (
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={<ToolTextInput value={input} onChange={setInput} />}
+      resultComponent={<ToolTextResult value={result} />}
+      initialValues={initialValues}
+      getGroups={getGroups}
+      setInput={setInput}
+      compute={compute}
+      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      exampleCards={exampleCards}
+    />
+  );
+}

src/pages/tools/time/convert-seconds-to-time/meta.ts

@@ -0,0 +1,15 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('time', {
+  path: 'convert-seconds-to-time',
+  name: 'Convert Seconds to Time',
+  icon: 'fluent-mdl2:time-picker',
+  description:
+    'With this browser-based application, you can convert seconds to clock time. Given the seconds input value, it converts them into full hours (H), minutes (M), and seconds (S) and prints them in human-readable clock format (H:M:S or HH:MM:SS) in the output field.',
+  shortDescription: 'Quicky convert seconds to clock time in H:M:S format.',
+  keywords: ['convert', 'seconds', 'time', 'clock'],
+  longDescription:
+    'This is a quick online utility for converting seconds to H:M:S or HH:MM:SS digital clock time format. It calculates the number of full hours, full minutes, and remaining seconds from the input seconds and outputs regular clock time. For example, 100 seconds is 1 minute and 40 seconds so we get the clock time 00:01:40. To convert seconds to human-readable time we use the Euclidean division algorithm, also known as a division with remainder. If "n" is the input seconds value, then the hours "h" are calculated from the formula n = 3600×h + r, where r is the remainder of dividing n by 3600. Minutes "m" are calculated from the formula r = 60×m + s, and seconds "s" is the remainder of dividing r by 60. For example, if the input n = 4000, then 4000 = 3600×1 + 400. From here we find that the full hours value is 1. Next, the remaining 400 seconds are equal to 60×6 + 40. From here, there are 6 full minutes and 40 more remaining seconds. Thus, we find that 4000 seconds in human time 1 hour, 6 minutes, and 40 seconds. By default, the program outputs the clock time in a padded HH:MM:SS format (i.e. 01:06:40) but you can also disable the padding option and get just H:M:S (i.e. 1:6:40). Timeabulous!',
+  component: lazy(() => import('./index'))
+});

src/pages/tools/time/convert-seconds-to-time/service.ts

@@ -0,0 +1,32 @@
+import { containsOnlyDigits } from '@utils/string';
+
+function compute(seconds: string, paddingFlag: boolean): string {
+  if (!containsOnlyDigits(seconds)) {
+    return '';
+  }
+  const hours = Math.floor(Number(seconds) / 3600);
+  const minutes = Math.floor((Number(seconds) % 3600) / 60);
+  const secs = Number(seconds) % 60;
+  return paddingFlag
+    ? [hours, minutes, secs]
+        .map((unit) => String(unit).padStart(2, '0')) // Ensures two-digit format
+        .join(':')
+    : [hours, minutes, secs].join(':');
+}
+
+export function convertSecondsToTime(
+  input: string,
+  paddingFlag: boolean
+): string {
+  const result: string[] = [];
+
+  const lines = input.split('\n');
+
+  lines.forEach((line) => {
+    const seconds = line.trim();
+    const time = compute(seconds, paddingFlag);
+    result.push(time);
+  });
+
+  return result.join('\n');
+}

src/pages/tools/time/index.ts

@@ -1,4 +1,5 @@
 import { tool as daysDoHours } from './convert-days-to-hours/meta';
 import { tool as hoursToDays } from './convert-hours-to-days/meta';
+import { tool as convertSecondsToTime } from './convert-seconds-to-time/meta';
 
-export const timeTools = [daysDoHours, hoursToDays];
+export const timeTools = [daysDoHours, hoursToDays, convertSecondsToTime];