diff --git a/nise-frontend/src/app/view-user/view-user.component.ts b/nise-frontend/src/app/view-user/view-user.component.ts
index c02e323..eb965e2 100644
--- a/nise-frontend/src/app/view-user/view-user.component.ts
+++ b/nise-frontend/src/app/view-user/view-user.component.ts
@@ -11,6 +11,7 @@ import {Title} from "@angular/platform-browser";
import {RxStompService} from "../../corelib/stomp/stomp.service";
import {Message} from "@stomp/stompjs/esm6";
import {CuteLoadingComponent} from "../../corelib/components/cute-loading/cute-loading.component";
+import {differenceInDays, differenceInHours} from "date-fns/fp";
interface UserInfo {
user_details: UserDetails;
@@ -37,6 +38,8 @@ interface UserInfo {
})
export class ViewUserComponent implements OnInit, OnChanges, OnDestroy {
+ userUpdateIntervalHours = 4
+
isLoading = false;
notFound = false;
userId: string | null = null;
@@ -94,6 +97,27 @@ export class ViewUserComponent implements OnInit, OnChanges, OnDestroy {
this.liveUserSub?.unsubscribe();
}
+ calculateTimeAgo(dateStr: string): string {
+ const inputDate = new Date(dateStr);
+ const now = new Date();
+
+ if (isNaN(inputDate.getTime())) {
+ return "???";
+ }
+
+ const difference = Math.abs(differenceInHours(now, inputDate)); // Use absolute value
+
+ if (difference < 1) {
+ return "recently";
+ } else if (difference < 24) {
+ return `${difference}h ago`;
+ } else {
+ const days = differenceInDays(now, inputDate);
+ const hours = difference % 24;
+ return `${days}d ${hours}h ago`;
+ }
+ }
+
addUserToQueue(): void {
const body = {
userId: this.userInfo?.user_details.user_id
diff --git a/nise-frontend/src/assets/style.css b/nise-frontend/src/assets/style.css
index 5943fe0..17597b0 100644
--- a/nise-frontend/src/assets/style.css
+++ b/nise-frontend/src/assets/style.css
@@ -151,6 +151,17 @@ a.btn-success:hover {
border: 1px dotted #2af171;
}
+.btn-info {
+ padding: 2px;
+ color: #3498db;
+ border: 1px dotted #3498db;
+}
+
+.btn-info:hover {
+ color: #3498db;
+ border: 1px dotted #3498db;
+}
+
.btn-warning {
padding: 2px;
color: #f1c40f;