File size: 2,904 Bytes
88bf46c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27e40c0
88bf46c
 
 
 
 
 
 
 
 
 
 
27e40c0
88bf46c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import {Component, OnInit} from '@angular/core';
import {AppStateService} from "../../../state_management/services/app-state.service";
import {map} from "rxjs";
import {AdminLoginComponent} from "./admin-login/admin-login.component";
import {AsyncPipe, DecimalPipe, NgIf} from "@angular/common";
import {MatButton} from "@angular/material/button";
import {MatCard, MatCardContent} from "@angular/material/card";
import {ControlPanelEntry} from "../../../state_management/models/control-panel-entry.model";
import {
  MatCell,
  MatCellDef,
  MatColumnDef,
  MatHeaderCell, MatHeaderCellDef,
  MatHeaderRow,
  MatHeaderRowDef,
  MatRow, MatRowDef, MatTable, MatTableDataSource
} from "@angular/material/table";
import {FormsModule} from "@angular/forms";

@Component({
  selector: 'app-control-panel',
  standalone: true,
  imports: [
    AdminLoginComponent,
    NgIf,
    AsyncPipe,
    MatButton,
    MatCard,
    MatCardContent,
    MatCell,
    MatCellDef,
    MatColumnDef,
    MatHeaderCell,
    MatHeaderRow,
    MatHeaderRowDef,
    MatRow,
    MatRowDef,
    MatTable,
    FormsModule,
    MatHeaderCellDef,
    DecimalPipe
  ],
  templateUrl: './control-panel.component.html',
  styleUrl: './control-panel.component.css'
})
export class ControlPanelComponent implements OnInit {

  authenticationState = this.stateService.state$.pipe(
    map(state => state.adminSessionStatus)
  );

  submissions = this.stateService.state$.pipe(
    map(
      state => state.controlPanelSubmissions
    )
  );

  dataSource = new MatTableDataSource<ControlPanelEntry>();

  displayedColumns: string[] = [
    'team', 'task', 'dataset', 'model', 'link', 'email',
    'status', 'time', 'is_public', 'accuracy', 'precision',
    'recall', 'f1_score', 'actions' // Including 'actions' for edit/delete/save buttons
  ];

  editingState: { [key: number]: boolean } = {};

  constructor(private stateService: AppStateService) {
  }

  ngOnInit() {
    this.submissions.subscribe(
      data => {
        this.dataSource.data = data;
      }
    )
    this.refresh();
  }

  refresh() {
    this.stateService.refreshControlPanel();
  }

  editRow(entry: ControlPanelEntry) {
    this.editingState[entry.id] = true;
  }

  saveEdit(entry: ControlPanelEntry) {
    this.editingState[entry.id] = false;
    // Modify the entry in the local data source
    const index = this.dataSource.data.findIndex(e => e.id === entry.id);
    this.dataSource.data[index] = entry;
    this.stateService.updateSubmission(entry);
  }

  deleteRow(id: number) {
    // remove the entry from the local data source
    this.dataSource.data = this.dataSource.data.filter(entry => entry.id !== id);
    this.stateService.deleteSubmission(id);
  }

  isEditing(entry: ControlPanelEntry): boolean {
    return this.editingState[entry.id] || false;
  }

  cancelEdit(entry: ControlPanelEntry) {
    this.editingState[entry.id] = false;
  }

}