Skip to content

Commit d08088e

Browse files
LimZiJiaLimZiJia
committed
Add webpage for history
Branch has not merged with history service, so although history service is made, it is not being used.
1 parent d69f7d6 commit d08088e

File tree

4 files changed

+147
-5
lines changed

4 files changed

+147
-5
lines changed

‎frontend/src/_services/history.service.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Injectable } from '@angular/core';
2+
import { HttpClient } from '@angular/common/http';
3+
import { Observable } from 'rxjs';
4+
import { map } from 'rxjs/operators';
5+
import { MatchingHistory } from '../app/account/history/history.model';
6+
import { ApiService } from './api.service';
7+
8+
@Injectable({
9+
providedIn: 'root',
10+
})
11+
export class HistoryService extends ApiService {
12+
protected apiPath = 'history';
13+
14+
constructor(private http: HttpClient) {
15+
super();
16+
}
17+
18+
getHistories(): Observable<MatchingHistory[]> {
19+
return this.http
20+
.get<{ status: string; message: string; data: any[] }>(`${this.apiUrl}`)
21+
.pipe(
22+
map(response => response.data.map(item => ({
23+
id: item._id,
24+
collaborator: item.collaborator.username,
25+
question: item.question.title,
26+
topics: item.question.topics,
27+
difficulty: item.question.difficulty,
28+
status: item.status,
29+
time: item.createdAt,
30+
})))
31+
);
32+
}
33+
}

‎frontend/src/app/account/history/history.component.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<div class="table-container">
2+
<p-table
3+
sortField="time"
4+
[sortOrder]="1"
5+
[value]="histories"
6+
datakey="id"
7+
[tableStyle]="{ 'table-layout': 'auto', width: '100%', 'text-align': 'center' }"
8+
[paginator]="true"
9+
[rows]="10"
10+
[rowsPerPageOptions]="[10, 25, 50]"
11+
styleClass="p-datatable-gridlines-striped">
12+
<ng-template pTemplate="caption">
13+
<div class="flex">
14+
<h3 class="m-0">Matching History</h3>
15+
</div>
16+
</ng-template>
17+
<ng-template pTemplate="header" let-columns>
18+
<tr>
19+
<th style="width: 25%">Question</th>
20+
<th style="width: 10%">Difficulty</th>
21+
<th style="width: 30%">Topics</th>
22+
<th style="width: 12%">Collaborator</th>
23+
<th style="width: 8%">Status</th>
24+
<th style="width: 15%">Time</th>
25+
</tr>
26+
</ng-template>
27+
<ng-template pTemplate="body" let-history>
28+
<tr>
29+
<td>{{ history.question }}</td>
30+
<td>{{ history.difficulty }}</td>
31+
<td>{{ history.topics.join(', ') }}</td>
32+
<td>{{ history.collaborator }}</td>
33+
<td>
34+
<i *ngIf="history.status === 'COMPLETED'" class="pi pi-check" style="color: green;"></i>
35+
<i *ngIf="history.status === 'FORFEITED'" class="pi pi-times" style="color: red;"></i>
36+
</td>
37+
<td>{{ history.time | date:'short' }}</td>
38+
</tr>
39+
</ng-template>
40+
</p-table>
41+
</div>

‎frontend/src/app/account/history/history.component.ts‎

Lines changed: 64 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,76 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
2+
import { TableModule } from 'primeng/table';
3+
import { CommonModule } from '@angular/common';
4+
import { MatchingHistory } from './history.model';
5+
import { HistoryService } from '../../../_services/history.service';
26
import { MessageService } from 'primeng/api';
3-
import { AuthenticationService } from '../../../_services/authentication.service';
47

58
@Component({
69
standalone: true,
7-
imports: [],
10+
imports: [
11+
TableModule,
12+
CommonModule,
13+
],
814
providers: [MessageService],
915
templateUrl: './history.component.html',
1016
styleUrl: './history.component.css',
1117
})
12-
export class HistoryComponent {
18+
export class HistoryComponent implements OnInit {
19+
histories: MatchingHistory[] = [];
20+
loading = true;
21+
22+
dummyHistories: MatchingHistory[] = [
23+
{
24+
id: 1,
25+
collaborator: 'userabc',
26+
question: 'Roman to Integer',
27+
difficulty: 'Easy',
28+
topics: ['Algorithms', 'Data Structures', 'Strings', 'Arrays'],
29+
status: 'COMPLETED',
30+
time: '2024-10-31T09:26:01.743Z',
31+
},
32+
{
33+
id: 2,
34+
collaborator: 'userdef',
35+
question: 'Two Sum',
36+
difficulty: 'Medium',
37+
topics: ['Data Structures'],
38+
status: 'FORFEITED',
39+
time: '2024-11-01T10:15:30.123Z',
40+
},
41+
{
42+
id: 3,
43+
collaborator: 'userghi',
44+
question: 'Longest Substring Without Repeating Characters',
45+
difficulty: 'Hard',
46+
topics: ['Strings'],
47+
status: 'COMPLETED',
48+
time: '2023-11-02T11:45:00.789Z',
49+
},
50+
];
51+
1352
constructor(
14-
private authenticationService: AuthenticationService,
53+
private historyService: HistoryService,
54+
private messageService: MessageService,
1555
) {}
1656

57+
ngOnInit() {
58+
this.histories = this.dummyHistories;
59+
// this.historyService.getHistories().subscribe({
60+
// next: (data) => {
61+
// this.histories = data;
62+
// this.loading = false;
63+
// },
64+
// error: () => {
65+
// this.histories = [];
66+
// this.loading = false;
67+
// this.messageService.add({
68+
// severity: 'error',
69+
// summary: 'Error',
70+
// detail: 'Failed to load data. Please try again later.',
71+
// life: 3000,
72+
// });
73+
// },
74+
// });
75+
}
1776
}

‎frontend/src/app/account/history/history.model.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export interface MatchingHistory {
2+
id: number;
3+
collaborator: string; // collaborator username
4+
question: string; // question title
5+
difficulty: string; // question difficulty
6+
topics: string[]; // question topics
7+
status: string; // status of the session
8+
time: string; // time of the session
9+
}

0 commit comments

Comments
 (0)