master
parent
a26af8f20c
commit
153b59ba61
|
@ -1,61 +0,0 @@
|
||||||
import { Tooltip } from "antd";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { FormatDatetime } from "../../utils";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
// Calculate elapsed time in seconds, minutes, hours, or days
|
|
||||||
function calculatedTimeAgo(startTime, t) {
|
|
||||||
const currentTime = new Date();
|
|
||||||
const elapsedMilliseconds = currentTime - new Date(startTime);
|
|
||||||
|
|
||||||
let timeAgoText;
|
|
||||||
|
|
||||||
if (elapsedMilliseconds < 60000) {
|
|
||||||
const secondsAgo = Math.floor(elapsedMilliseconds / 1000);
|
|
||||||
timeAgoText =
|
|
||||||
secondsAgo === 0
|
|
||||||
? "just now"
|
|
||||||
: secondsAgo === 1
|
|
||||||
? t("liveTimeAgo.second", { count: secondsAgo })
|
|
||||||
: t("liveTimeAgo.second_plural", { count: secondsAgo });
|
|
||||||
} else if (elapsedMilliseconds < 3600000) {
|
|
||||||
const minutesAgo = Math.floor(elapsedMilliseconds / 60000);
|
|
||||||
timeAgoText =
|
|
||||||
minutesAgo === 1
|
|
||||||
? t("liveTimeAgo.minute", { count: minutesAgo })
|
|
||||||
: t("liveTimeAgo.minute_plural", { count: minutesAgo });
|
|
||||||
} else if (elapsedMilliseconds < 86400000) {
|
|
||||||
const hoursAgo = Math.floor(elapsedMilliseconds / 3600000);
|
|
||||||
timeAgoText =
|
|
||||||
hoursAgo === 1
|
|
||||||
? t("liveTimeAgo.hour", { count: hoursAgo })
|
|
||||||
: t("liveTimeAgo.hour_plural", { count: hoursAgo });
|
|
||||||
} else {
|
|
||||||
const daysAgo = Math.floor(elapsedMilliseconds / 86400000);
|
|
||||||
timeAgoText =
|
|
||||||
daysAgo === 1
|
|
||||||
? t("liveTimeAgo.day", { count: daysAgo })
|
|
||||||
: t("liveTimeAgo.day_plural", { count: daysAgo });
|
|
||||||
}
|
|
||||||
|
|
||||||
return timeAgoText;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function LiveTimeAgo({ startTime }) {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [timeAgo, setTimeAgo] = useState(calculatedTimeAgo(startTime, t));
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
setTimeAgo(calculatedTimeAgo(startTime, t));
|
|
||||||
}, 1000); // Update every second
|
|
||||||
|
|
||||||
return () => clearInterval(interval); // Clean up on component unmount
|
|
||||||
}, [startTime]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tooltip title={FormatDatetime(startTime)}>
|
|
||||||
<span>{timeAgo}</span>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -1,50 +0,0 @@
|
||||||
import { UserOutlined } from "@ant-design/icons";
|
|
||||||
import { Avatar, Tooltip } from "antd";
|
|
||||||
import { Constants } from "../../utils";
|
|
||||||
|
|
||||||
export function MyAvatar({
|
|
||||||
avatarWidth,
|
|
||||||
avatar,
|
|
||||||
tooltip,
|
|
||||||
tooltipTitle,
|
|
||||||
allUsers,
|
|
||||||
userId,
|
|
||||||
}) {
|
|
||||||
if (!avatar) {
|
|
||||||
if (allUsers && userId) {
|
|
||||||
const user = allUsers.find((u) => u.Id === userId);
|
|
||||||
if (user) {
|
|
||||||
avatar = user.Avatar;
|
|
||||||
tooltipTitle = user.Username;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const avatarContent = avatar ? (
|
|
||||||
<Avatar
|
|
||||||
size={avatarWidth}
|
|
||||||
src={Constants.STATIC_CONTENT_ADDRESS + "avatars/" + avatar}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Avatar size={avatarWidth} icon={<UserOutlined />} />
|
|
||||||
);
|
|
||||||
|
|
||||||
return tooltip ? (
|
|
||||||
<Tooltip placement="top" trigger="hover" title={tooltipTitle}>
|
|
||||||
{avatarContent}
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
avatarContent
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function MyUserAvatar({ avatar, size = "default" }) {
|
|
||||||
if (avatar === "") return <Avatar icon={<UserOutlined />} size={size} />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Avatar
|
|
||||||
src={Constants.STATIC_CONTENT_ADDRESS + "avatars/" + avatar}
|
|
||||||
size={size}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -1,37 +0,0 @@
|
||||||
import { EditOutlined } from "@ant-design/icons";
|
|
||||||
import { Input, Typography } from "antd";
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
export default function MyTypography({ value, setValue, maxLength }) {
|
|
||||||
const [editing, setEditing] = useState(false);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
|
||||||
gap: 10,
|
|
||||||
marginRight: 26,
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{editing ? (
|
|
||||||
<Input
|
|
||||||
value={value}
|
|
||||||
onChange={(e) => setValue(e.target.value)}
|
|
||||||
maxLength={maxLength}
|
|
||||||
showCount
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Typography.Title level={3} style={{ margin: 0 }}>
|
|
||||||
{value}
|
|
||||||
</Typography.Title>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<EditOutlined
|
|
||||||
style={{ fontSize: 24 }}
|
|
||||||
onClick={() => setEditing(!editing)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
Loading…
Reference in New Issue