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