Skip to content

Commit 4ba8158

Browse files
author
motorox
committed
Merge branch 'MaterialDesign' into updateversions
2 parents 5ff6205 + 97e5195 commit 4ba8158

13 files changed

+451
-98
lines changed

‎HamEvent/ClientApp/src/app/admin/admin-home.component.css‎

Lines changed: 83 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,3 @@
1-
.admin-table-container {
2-
background: #fff;
3-
border-radius: 12px;
4-
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
5-
padding: 2rem;
6-
max-width: 900px;
7-
margin: 2rem auto;
8-
}
9-
10-
.admin-table {
11-
width: 100%;
12-
border-collapse: collapse;
13-
background: #fff;
14-
}
15-
16-
.admin-table th, .admin-table td {
17-
border: 1px solid #bbb;
18-
padding: 0.5rem 0.75rem;
19-
text-align: left;
20-
background: #fff;
21-
}
22-
23-
.admin-table th {
24-
background: #f5f5f5;
25-
font-weight: 600;
26-
}
27-
28-
.admin-table tr:nth-child(even) {
29-
background: #f9f9f9;
30-
}
31-
32-
.admin-pagination {
33-
margin-top: 1rem;
34-
text-align: center;
35-
}
361

372
.admin-pagination button {
383
background: #1976d2;
@@ -62,3 +27,86 @@
6227
.create-event-btn {
6328
margin-top: 1.5rem;
6429
}
30+
31+
.admin-title {
32+
text-align: center;
33+
margin-top: 2rem;
34+
color: #1976d2;
35+
font-weight: 600;
36+
}
37+
38+
.admin-welcome {
39+
text-align: center;
40+
margin-bottom: 2rem;
41+
color: #444;
42+
}
43+
44+
.admin-table-container {
45+
background: #fff;
46+
border-radius: 12px;
47+
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
48+
padding: 2rem;
49+
max-width: 1100px;
50+
margin: 2rem auto;
51+
}
52+
53+
.admin-table {
54+
width: 100%;
55+
border-collapse: collapse;
56+
background: #fff;
57+
}
58+
59+
.admin-table th, .admin-table td {
60+
border: 1px solid #bbb;
61+
padding: 0.5rem 0.75rem;
62+
text-align: left;
63+
background: #fff;
64+
}
65+
66+
.admin-table th {
67+
background: #f5f5f5;
68+
font-weight: 600;
69+
}
70+
71+
.admin-table tr:nth-child(even) {
72+
background: #f9f9f9;
73+
}
74+
75+
.admin-table-link {
76+
cursor: pointer;
77+
transition: background 0.2s;
78+
}
79+
80+
.admin-table-link:hover {
81+
background: #e3f2fd;
82+
}
83+
84+
.admin-table-qso-link {
85+
cursor: pointer;
86+
color: #1976d2;
87+
font-weight: bold;
88+
text-align: center;
89+
background: #e3f2fd;
90+
transition: background 0.2s, color 0.2s;
91+
}
92+
93+
.admin-table-qso-link:hover {
94+
background: #bbdefb;
95+
color: #0d47a1;
96+
}
97+
98+
.qso-count-link {
99+
text-decoration: underline;
100+
}
101+
102+
.create-event-btn {
103+
margin-bottom: 1.5rem;
104+
display: block;
105+
margin-left: auto;
106+
margin-right: auto;
107+
}
108+
109+
.admin-pagination {
110+
margin-top: 1rem;
111+
text-align: center;
112+
}

‎HamEvent/ClientApp/src/app/admin/admin-home.component.html‎

Lines changed: 56 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,64 @@
1-
<h2>Admin Home</h2>
2-
<p>Welcome to the admin area {{ 'Home' | translate}}.</p>
1+
<h2 class="admin-title">Admin Home</h2>
2+
<p class="admin-welcome">Welcome to the admin area {{ 'Home' | translate }}.</p>
33

4+
<button mat-raised-button color="primary" class="create-event-btn" (click)="createEvent()">
5+
{{ 'Create New Event' | translate }}
6+
</button>
7+
8+
<h2 class="admin-title">Admin Events</h2>
49
<div class="admin-table-container">
5-
<table *ngIf="loaded && events.length" class="admin-table">
6-
<thead>
7-
<tr>
8-
<th>Name</th>
9-
<th>Start Date</th>
10-
<th>Description</th>
11-
<th>Email</th>
12-
<th>Days</th>
13-
<th>QSOs Count</th>
14-
</tr>
15-
</thead>
16-
<tbody>
17-
<tr *ngFor="let event of events"
18-
(click)="gotoEvent(event)"
19-
class="admin-table-row">
20-
<td>{{ event.name }}</td>
21-
<td>{{ event.startDate | date: 'short' }}</td>
22-
<td>{{ event.description }}</td>
23-
<td>{{ event.email }}</td>
24-
<td>{{ event.days }}</td>
25-
<td>{{ event.count }}</td>
26-
</tr>
27-
</tbody>
10+
<table mat-table [dataSource]="events" class="admin-table mat-elevation-z2" *ngIf="loaded && events.length">
11+
<!-- Name Column -->
12+
<ng-container matColumnDef="name">
13+
<th mat-header-cell *matHeaderCellDef>{{ 'Name' | translate }}</th>
14+
<td mat-cell *matCellDef="let event" (click)="gotoEvent(event)" class="admin-table-link">
15+
{{ event.name }}
16+
</td>
17+
</ng-container>
18+
<!-- Start Date Column -->
19+
<ng-container matColumnDef="startDate">
20+
<th mat-header-cell *matHeaderCellDef>{{ 'Start Date' | translate }}</th>
21+
<td mat-cell *matCellDef="let event" (click)="gotoEvent(event)" class="admin-table-link">
22+
{{ event.startDate | date: 'short' }}
23+
</td>
24+
</ng-container>
25+
<!-- Description Column -->
26+
<ng-container matColumnDef="description">
27+
<th mat-header-cell *matHeaderCellDef>{{ 'Description' | translate }}</th>
28+
<td mat-cell *matCellDef="let event" (click)="gotoEvent(event)" class="admin-table-link">
29+
{{ event.description }}
30+
</td>
31+
</ng-container>
32+
<!-- Email Column -->
33+
<ng-container matColumnDef="email">
34+
<th mat-header-cell *matHeaderCellDef>{{ 'Email' | translate }}</th>
35+
<td mat-cell *matCellDef="let event" (click)="gotoEvent(event)" class="admin-table-link">
36+
{{ event.email }}
37+
</td>
38+
</ng-container>
39+
<!-- Days Column -->
40+
<ng-container matColumnDef="days">
41+
<th mat-header-cell *matHeaderCellDef>{{ 'Days' | translate }}</th>
42+
<td mat-cell *matCellDef="let event" (click)="gotoEvent(event)" class="admin-table-link">
43+
{{ event.days }}
44+
</td>
45+
</ng-container>
46+
<!-- QSOs Count Column -->
47+
<ng-container matColumnDef="count">
48+
<th mat-header-cell *matHeaderCellDef>{{ 'QSOs Count' | translate }}</th>
49+
<td mat-cell *matCellDef="let event" (click)="gotoQSOs(event)" class="admin-table-qso-link">
50+
<span class="qso-count-link">{{ event.count }}</span>
51+
</td>
52+
</ng-container>
53+
54+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
55+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
2856
</table>
2957
<p *ngIf="loaded && !events.length"><em>No events found.</em></p>
3058
<p *ngIf="!loaded"><em>Loading...</em></p>
31-
<div class="admin-pagination" *ngIf="count > 10">
32-
<button (click)="onPageChange(page - 1)" [disabled]="page === 1">&lt;</button>
59+
<div class="admin-pagination" *ngIf="count > tableSize">
60+
<button mat-stroked-button (click)="onPageChange(page - 1)" [disabled]="page === 1">&lt;</button>
3361
<span>Page {{page}} of {{totalPages}}</span>
34-
<button (click)="onPageChange(page + 1)" [disabled]="page === totalPages">&gt;</button>
62+
<button mat-stroked-button (click)="onPageChange(page + 1)" [disabled]="page === totalPages">&gt;</button>
3563
</div>
36-
<button mat-raised-button color="primary" class="create-event-btn" (click)="createEvent()">
37-
{{ 'Create New Event' | translate }}
38-
</button>
3964
</div>

‎HamEvent/ClientApp/src/app/admin/admin-home.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export class AdminHomeComponent implements OnInit {
1515
page = 1;
1616
tableSize = 10;
1717
count = 0;
18+
displayedColumns: string[] = ['name', 'startDate', 'description', 'email', 'days', 'count'];
1819

1920
constructor(private eventsService: EventsService, private router: Router) { }
2021
ngOnInit() {
@@ -51,6 +52,10 @@ export class AdminHomeComponent implements OnInit {
5152
this.router.navigate(['admin', event.id, 'edit']);
5253
}
5354

55+
gotoQSOs(event: HamEvent) {
56+
this.router.navigate(['admin', event.id, 'qsos']);
57+
}
58+
5459
//ngOnInit() {
5560
// this.eventsService.getAllEvents(1, 10).subscribe(
5661
// (response) => {

‎HamEvent/ClientApp/src/app/admin/admin.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { TranslateModule } from '@ngx-translate/core';
88
import { AdminEventComponent } from './adminevent/adminevent.component';
99
import { AdminQSOsComponent } from './adminqsos/adminqsos.component';
1010
import { MatButtonModule } from '@angular/material/button';
11+
import { MatTableModule } from '@angular/material/table';
1112

1213
const routes: Routes = [
1314
{
@@ -33,7 +34,7 @@ const routes: Routes = [
3334
];
3435

3536
@NgModule({
36-
imports: [CommonModule, RouterModule.forChild(routes), TranslateModule.forChild(), MatButtonModule],
37+
imports: [CommonModule, RouterModule.forChild(routes), TranslateModule.forChild(), MatButtonModule, MatTableModule],
3738
declarations: [AdminHomeComponent],
3839
providers: [AdminGuard]
3940
})

‎HamEvent/ClientApp/src/app/admin/adminqsos/adminqsos.component.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.admin-qsos-card {
2+
max-width: 1100px;
3+
margin: 2rem auto;
4+
padding: 1rem 2rem;
5+
}
6+
7+
.full-width {
8+
width: 100%;
9+
}
10+
11+
.actions {
12+
display: flex;
13+
flex-wrap: wrap;
14+
gap: 1rem;
15+
margin-bottom: 1.5rem;
16+
}
17+
18+
.search-form {
19+
margin-bottom: 1.5rem;
20+
}
21+
22+
.admin-table {
23+
width: 100%;
24+
margin-bottom: 1rem;
25+
}

‎HamEvent/ClientApp/src/app/admin/adminqsos/adminqsos.component.html‎

Lines changed: 81 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<div class="px-4 text-center border-bottom">
2-
<p *ngIf="!event"><em>{{'Loading...' | translate}}</em></p>
32
<h1 class="display-4 fw-bold text-body-emphasis" *ngIf="event">{{event.name}}</h1>
4-
<div class="col mx-auto" *ngIf="event">
3+
<!--<div class="col mx-auto" *ngIf="event">
54
<p [innerHTML]="event.description"></p>
6-
5+
76
<nav class="navbar navbar-expand navbar-light bg-light">
87
<div class="container-fluid">
98
<div class="collapse navbar-collapse" id="topnavbar">
@@ -57,10 +56,10 @@ <h1 class="display-4 fw-bold text-body-emphasis" *ngIf="event">{{event.name}}</h
5756
<thead>
5857
<tr>
5958
<th>{{'Callsign 1' | translate}}</th>
60-
<th>{{'Callsign 2' | translate}}</th>
61-
<!--<th>RST1</th>
62-
<th>RST2</th>-->
63-
<th>{{'Mode' | translate}}</th>
59+
<th>{{'Callsign 2' | translate}}</th>-->
60+
<!--<th>RST1</th>
61+
<th>RST2</th>-->
62+
<!--<th>{{'Mode' | translate}}</th>
6463
<th>{{'Band' | translate}}</th>
6564
<th>{{'Timestamp' | translate}}</th>
6665
<th>{{'Action' | translate}}</th>
@@ -110,7 +109,81 @@ <h1 class="display-4 fw-bold text-body-emphasis" *ngIf="event">{{event.name}}</h
110109
(pageChange)="onTableDataChange($event)">
111110
</pagination-controls>
112111
</div>
113-
</div>
112+
</div>-->
114113

115114
</div>
116115

116+
<mat-card class="admin-qsos-card">
117+
<mat-card-title>{{ 'Admin QSOs' | translate }}</mat-card-title>
118+
<mat-card-content>
119+
<form [formGroup]="searchForm" (ngSubmit)="submitForm()" class="search-form">
120+
<mat-form-field appearance="outline" class="full-width">
121+
<mat-label>{{ 'Search' | translate }}</mat-label>
122+
<input matInput formControlName="search" placeholder="{{ 'Search QSOs' | translate }}">
123+
<button mat-icon-button matSuffix type="submit">
124+
<mat-icon>search</mat-icon>
125+
</button>
126+
</mat-form-field>
127+
</form>
128+
129+
<div class="actions">
130+
<button mat-raised-button color="primary" (click)="exportall()">{{ 'Export All' | translate }}</button>
131+
<button mat-raised-button color="accent" (click)="genPdf()">{{ 'Generate PDF' | translate }}</button>
132+
<button mat-raised-button color="warn" (click)="deleteall()">{{ 'Delete All' | translate }}</button>
133+
<button mat-stroked-button (click)="edit()">{{ 'Edit Event' | translate }}</button>
134+
<button mat-stroked-button (click)="top()">{{ 'Top' | translate }}</button>
135+
<button mat-stroked-button (click)="live()">{{ 'Live' | translate }}</button>
136+
</div>
137+
138+
<mat-progress-bar *ngIf="!loaded" mode="indeterminate"></mat-progress-bar>
139+
140+
<div *ngIf="loaded && QSOs.length">
141+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z2 admin-table">
142+
143+
<!-- Example columns, adjust as needed -->
144+
<ng-container matColumnDef="callsign1">
145+
<th mat-header-cell *matHeaderCellDef>Callsign</th>
146+
<td mat-cell *matCellDef="let qso">{{ qso.callsign1 }}</td>
147+
</ng-container>
148+
<ng-container matColumnDef="callsign2">
149+
<th mat-header-cell *matHeaderCellDef>Participant</th>
150+
<td mat-cell *matCellDef="let qso">{{ qso.callsign2 }}</td>
151+
</ng-container>
152+
<ng-container matColumnDef="mode">
153+
<th mat-header-cell *matHeaderCellDef>Mode</th>
154+
<td mat-cell *matCellDef="let qso">{{ qso.mode }}</td>
155+
</ng-container>
156+
<ng-container matColumnDef="band">
157+
<th mat-header-cell *matHeaderCellDef>Band</th>
158+
<td mat-cell *matCellDef="let qso">{{ qso.band }}</td>
159+
</ng-container>
160+
<ng-container matColumnDef="date">
161+
<th mat-header-cell *matHeaderCellDef>Timestamp</th>
162+
<td mat-cell *matCellDef="let qso">{{ qso.timestamp | date:'short' }}</td>
163+
</ng-container>
164+
<ng-container matColumnDef="actions">
165+
<th mat-header-cell *matHeaderCellDef>{{ 'Actions' | translate }}</th>
166+
<td mat-cell *matCellDef="let qso">
167+
<button mat-icon-button color="primary" (click)="editQSO(qso)">
168+
<mat-icon>edit</mat-icon>
169+
</button>
170+
<button mat-icon-button color="warn" (click)="delete(qso)">
171+
<mat-icon>delete</mat-icon>
172+
</button>
173+
</td>
174+
</ng-container>
175+
176+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
177+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
178+
</table>
179+
180+
<mat-paginator [length]="count"
181+
[pageSize]="tableSize"
182+
[pageIndex]="page - 1"
183+
[pageSizeOptions]="[10, 25, 50]"
184+
(page)="onMatPageChange($event)">
185+
</mat-paginator>
186+
</div>
187+
<p *ngIf="loaded && !QSOs.length"><em>{{ 'No QSOs found.' | translate }}</em></p>
188+
</mat-card-content>
189+
</mat-card>

0 commit comments

Comments
 (0)