SolarEnergy/central_frontend/src/widgets/TimeWidget.tsx

import { Tooltip } from "@mui/material";
import { format } from "date-and-time";
import { time } from "../utils/DateUtils";

export function formatDate(time: number): string {
  const t = new Date();
  t.setTime(1000 * time);
  return format(t, "DD/MM/YYYY HH:mm:ss");
}

export function timeDiff(a: number, b: number): string {
  let diff = b - a;

  if (diff === 0) return "now";
  if (diff === 1) return "1 second";

  if (diff < 60) {
    return `${diff} seconds`;
  }

  diff = Math.floor(diff / 60);

  if (diff === 1) return "1 minute";
  if (diff < 60) {
    return `${diff} minutes`;
  }

  diff = Math.floor(diff / 60);

  if (diff === 1) return "1 hour";
  if (diff < 24) {
    return `${diff} hours`;
  }

  const diffDays = Math.floor(diff / 24);

  if (diffDays === 1) return "1 day";
  if (diffDays < 31) {
    return `${diffDays} days`;
  }

  diff = Math.floor(diffDays / 31);

  if (diff < 12) {
    return `${diff} month`;
  }

  const diffYears = Math.floor(diffDays / 365);

  if (diffYears === 1) return "1 year";
  return `${diffYears} years`;
}

export function timeDiffFromNow(t: number, future?: boolean): string {
  return future ? timeDiff(time(), t) : timeDiff(t, time());
}

export function TimeWidget(p: {
  time?: number;
  diff?: boolean;
  future?: boolean;
}): React.ReactElement {
  if (!p.time) return <></>;
  return (
    <Tooltip
      title={formatDate(p.diff ? new Date().getTime() / 1000 - p.time : p.time)}
      arrow
    >
      <span>
        {p.diff ? timeDiff(0, p.time) : timeDiffFromNow(p.time, p.future)}
      </span>
    </Tooltip>
  );
}