Skip to content

Commit 242c95d

Browse files
author
motorox
committed
UI fixes in event module
1 parent 9e6aa8a commit 242c95d

File tree

8 files changed

+161
-63
lines changed

8 files changed

+161
-63
lines changed

‎HamEvent/ClientApp/src/app/event/event-routing.module.ts‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,30 +24,15 @@ const eventRoutes: Routes = [
2424
title: "routing: Top"
2525
},
2626
{
27+
path: ":id/live",
28+
component: DashboardComponent,
29+
title: "routing: Top"
30+
}, {
2731
path: '',
2832
pathMatch: 'full',
2933
component: EventComponent,
3034
},
3135
];
32-
const routes: Routes = [
33-
{
34-
path: '',
35-
component: EventComponent,
36-
children: [
37-
{
38-
path: '',
39-
pathMatch: 'full',
40-
redirectTo: 'dashboard'
41-
},
42-
43-
{
44-
path: "dashboard",
45-
component: DashboardComponent,
46-
title: "routing: Dashboard"
47-
},
48-
]
49-
}
50-
];
5136

5237
@NgModule({
5338
imports: [RouterModule.forChild(eventRoutes)],

‎HamEvent/ClientApp/src/app/event/event.component.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.tab-content-wrapper {
2+
padding: 20px;
3+
/* Ensures the content within the tab is nicely centered or spaced */
4+
max-width: 800px;
5+
margin: auto;
6+
}
7+
8+
.event-card {
9+
/* Adds some margin around the card within the tab */
10+
margin-top: 15px;
11+
}
12+
13+
.details-section {
14+
display: flex;
15+
justify-content: space-between; /* Spaces date and location evenly */
16+
gap: 20px; /* Space between the two detail items */
17+
margin-bottom: 20px;
18+
flex-wrap: wrap; /* Allows items to wrap on smaller screens */
19+
}
20+
21+
.detail-item {
22+
display: flex;
23+
align-items: center; /* Aligns icon and text vertically */
24+
}
25+
26+
.detail-item mat-icon {
27+
margin-right: 10px;
28+
/* Optional: Adjust icon size slightly */
29+
}
30+
31+
.description {
32+
margin-top: 20px;
33+
line-height: 1.5;
34+
}
35+
36+
/* Optional: Make the card header stand out */
37+
mat-card-title {
38+
font-size: 1.5rem;
39+
font-weight: bold;
40+
}

‎HamEvent/ClientApp/src/app/event/event.component.html‎

Lines changed: 87 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,45 @@
55
<div class="mat-elevation-z8 page-header" *ngIf="event">
66
<mat-tab-group dynamicHeight (selectedTabChange)="tabClick($event)">
77
<mat-tab label="{{event.name}}">
8-
<ng-template mat-tab-label>
9-
<!--<mat-icon class="example-tab-icon">thumb_up</mat-icon>-->
10-
{{event.name}}
11-
</ng-template>
12-
<mat-divider></mat-divider>
13-
<p>Start date: {{event.startDate | date:'medium'}}</p>
14-
<p>End date: {{event.endDate | date:'medium'}}</p>
15-
16-
<mat-divider></mat-divider>
8+
9+
<div class="tab-content-wrapper">
10+
<mat-card class="event-card">
11+
<mat-card-header>
12+
<mat-card-title>{{ event.name }}</mat-card-title>
13+
<mat-card-subtitle>Amateur Radio Event</mat-card-subtitle>
14+
</mat-card-header>
15+
16+
<mat-card-content>
17+
<div class="details-section">
18+
<!-- Date and Location side-by-side using CSS Flexbox -->
19+
<div class="detail-item">
20+
<mat-icon color="primary">event</mat-icon>
21+
<span>
22+
**Start:** {{ event.startDate | date: 'full' }} <br>
23+
**End:** {{ event.endDate | date: 'full' }}
24+
</span>
25+
</div>
26+
27+
<div class="detail-item">
28+
<mat-icon color="primary">location_on</mat-icon>
29+
<span>Timisoara KQT Club</span>
30+
</div>
31+
</div>
32+
33+
<mat-divider></mat-divider>
34+
35+
<p class="description">
36+
{{ event.description }}
37+
</p>
38+
39+
</mat-card-content>
40+
41+
<mat-card-actions>
42+
<button mat-raised-button color="accent">Participate Now</button>
43+
</mat-card-actions>
44+
</mat-card>
45+
</div>
46+
1747
<!--<form role="search" (ngSubmit)="submitForm()" [formGroup]="searchForm">
1848
<div class="input-group">
1949
<input type="search" class="form-control" placeholder="{{'Callsign 2' | translate}}" formControlName="search">
@@ -39,10 +69,7 @@ <h5 class="card-title">{{'Download Diploma' | translate}}</h5>
3969
<input matEndDate placeholder="End date">
4070
</mat-date-range-input>
4171
<mat-date-range-picker #picker></mat-date-range-picker>-->
42-
4372
<!--<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>-->
44-
<mat-divider></mat-divider>
45-
<p class="page-description" [innerHTML]="event.description"></p>
4673
</mat-tab>
4774

4875

@@ -52,7 +79,7 @@ <h5 class="card-title">{{'Download Diploma' | translate}}</h5>
5279
</mat-tab>
5380
<mat-tab label="{{ 'Logs' | translate}}">
5481
<ng-template mat-tab-label><mat-icon class="example-tab-icon">notes</mat-icon>{{ 'Logs' | translate}}</ng-template>
55-
<table mat-table [dataSource]="logs" class="mat-elevation-z8 page-table">
82+
<table id="logs" mat-table [dataSource]="logs" class="mat-elevation-z8 page-table">
5683
<!-- Name Column -->
5784
<!--<mat-text-column name="callsign1"></mat-text-column>-->
5885

@@ -96,7 +123,53 @@ <h5 class="card-title">{{'Download Diploma' | translate}}</h5>
96123
</mat-tab>
97124
<mat-tab label="{{ 'Rankings' | translate}}">
98125
<ng-template mat-tab-label><mat-icon class="example-tab-icon">star</mat-icon>{{ 'Rankings' | translate}}</ng-template>
99-
Content 3
126+
<table id="top" mat-table [dataSource]="top" class="mat-elevation-z8 page-table">
127+
<!-- Name Column -->
128+
<!--<mat-text-column name="callsign1"></mat-text-column>-->
129+
130+
<ng-container matColumnDef="callsign1">
131+
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Callsign 1' | translate}}</th>
132+
<td mat-cell *matCellDef="let element">{{element.callsign}}</td>
133+
</ng-container>
134+
135+
<!-- Count Column -->
136+
<ng-container matColumnDef="count">
137+
<th mat-header-cell *matHeaderCellDef>{{'Count' | translate}}</th>
138+
<td mat-cell *matCellDef="let element">{{element.count}}</td>
139+
</ng-container>
140+
141+
<!-- Symbol Column -->
142+
<ng-container matColumnDef="mode">
143+
<th mat-header-cell *matHeaderCellDef>{{'Mode' | translate}}</th>
144+
<td mat-cell *matCellDef="let element">{{element.mode}}</td>
145+
</ng-container>
146+
147+
<!-- Name Column -->
148+
<ng-container matColumnDef="band">
149+
<th mat-header-cell *matHeaderCellDef>{{'Band' | translate}}</th>
150+
<td mat-cell *matCellDef="let element">{{element.band}}</td>
151+
</ng-container>
152+
153+
<!-- Weight Column -->
154+
<ng-container matColumnDef="points">
155+
<th mat-header-cell *matHeaderCellDef>{{'Points' | translate}}</th>
156+
<td mat-cell *matCellDef="let element">{{element.points}}</td>
157+
</ng-container>
158+
159+
<!-- Weight Column -->
160+
<ng-container matColumnDef="rank">
161+
<th mat-header-cell *matHeaderCellDef>{{'Rank' | translate}}</th>
162+
<td mat-cell *matCellDef="let element">{{element.rank}}</td>
163+
</ng-container>
164+
165+
<tr mat-header-row *matHeaderRowDef="displayedColumnsTop"></tr>
166+
<tr mat-row *matRowDef="let row; columns: displayedColumnsTop;"
167+
class="element-row"></tr>
168+
</table>
169+
<mat-paginator [pageSizeOptions]="[5, 10, 20]"
170+
showFirstLastButtons
171+
aria-label="Select page of periodic elements">
172+
</mat-paginator>
100173
</mat-tab>
101174
</mat-tab-group>
102175

‎HamEvent/ClientApp/src/app/event/event.component.ts‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,15 @@ import { TranslateModule } from '@ngx-translate/core';
1616
import { QSO, QSOsService } from '../qsos.service';
1717
import { MatTableModule, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatTableDataSource } from '@angular/material/table';
1818
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
19+
import { MatCardModule } from '@angular/material/card';
1920

2021

2122
@Component({
2223
selector: 'app-event',
2324
templateUrl: './event.component.html',
2425
styleUrls: ['./event.component.css'],
2526
standalone: true,
26-
imports: [MatTableModule, NgIf, ResponsiveToolbarComponent, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DatePipe, TranslateModule, MatPaginatorModule, NgIf, ResponsiveToolbarComponent, RouterLink, MatIconModule, MatDivider, DatePipe, MatTabsModule, MatProgressBarModule, MatTable, TranslateModule]
27+
imports: [MatCardModule, MatTableModule, NgIf, ResponsiveToolbarComponent, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DatePipe, TranslateModule, MatPaginatorModule, NgIf, ResponsiveToolbarComponent, RouterLink, MatIconModule, MatDivider, DatePipe, MatTabsModule, MatProgressBarModule, MatTable, TranslateModule]
2728
})
2829
export class EventComponent implements OnInit {
2930

@@ -32,10 +33,12 @@ export class EventComponent implements OnInit {
3233
public searchInput = '';
3334
public loaded = true;
3435
public logs: QSO[] = [];
35-
page: number = 1;
36+
public top: QSO[] = [];
37+
page: number = 0;
3638
count: number = 0;
37-
tableSize: number = 10;
39+
tableSize: number = 20;
3840
displayedColumns: string[] = ['callsign1', 'callsign2', 'mode', 'band', 'timestamp'];
41+
displayedColumnsTop: string[] = ['callsign1', 'count', 'mode', 'band', 'points', 'rank'];
3942
@ViewChild(MatTable) table!: MatTable<HamEvent>;
4043
@ViewChild(MatPaginator) paginator!: MatPaginator;
4144

@@ -105,9 +108,28 @@ export class EventComponent implements OnInit {
105108
);
106109
}
107110

111+
loadTop() {
112+
this.qsosService.getTop(this.eventId, this.searchInput, this.page, this.tableSize).subscribe(
113+
(response) => {
114+
this.top = response.data;
115+
//this.dataSource = response.data;
116+
this.count = response.count;
117+
this.loaded = true;
118+
this.table.renderRows();
119+
120+
console.log(response);
121+
},
122+
(error) => {
123+
console.log(error);
124+
}
125+
);
126+
}
127+
108128
tabClick(tab: any) {
109129
console.log(tab);
110130
if (tab.index == 2)
111131
this.loadData();
132+
if (tab.index == 3)
133+
this.loadTop();
112134
}
113135
}

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,8 @@ export function createTranslateLoader(http: HttpClient) {
2727
}
2828

2929
@NgModule({
30-
imports: [EventRoutingModule, RouterModule, ReactiveFormsModule, NgxPaginationModule, CommonModule,
31-
TranslateModule.forRoot({
32-
defaultLanguage: 'en',
33-
loader: {
34-
provide: TranslateLoader,
35-
useFactory: (createTranslateLoader),
36-
deps: [HttpClient]
37-
}
38-
}),
30+
imports: [EventRoutingModule, RouterModule, ReactiveFormsModule, NgxPaginationModule, CommonModule,
31+
TranslateModule.forChild(),
3932
FormsModule,
4033
FlexLayoutModule,
4134
MatTableModule,

‎HamEvent/ClientApp/src/app/event/responsive-toolbar/responsive-toolbar.component.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,3 @@
1111
{{item.label | translate}}
1212
</button>
1313
</mat-toolbar>
14-
15-
{{ 'Language' | translate}}

‎HamEvent/ClientApp/src/app/event/responsive-toolbar/responsive-toolbar.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export interface MenuItem {
2020
}
2121

2222
@Component({
23-
selector: "app-responsive-toolbar",
24-
templateUrl: "./responsive-toolbar.component.html",
25-
styleUrls: ["./responsive-toolbar.component.css"],
23+
selector: "app-responsive-toolbar",
24+
templateUrl: "./responsive-toolbar.component.html",
25+
styleUrls: ["./responsive-toolbar.component.css"],
2626
standalone: true,
2727
imports: [MatToolbar, FlexModule, MatButton, RouterLink, MatIcon, NgFor, NgClass, ExtendedModule, NgIf, TranslateModule]
2828
})

‎HamEvent/ClientApp/src/app/nav-menu/nav-menu.component.html‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,6 @@
11
<mat-toolbar color="primary">
22
<img class="hamware-logo" src="static/radio-icon.png" alt="hamware logo" />
3-
<!--<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
4-
<mat-icon>menu</mat-icon>
5-
</button>-->
63
<a mat-button routerLink="/">{{'HamEvent' | translate}}</a>
74
<span class="nav-spacer"></span>
8-
<!--<button mat-button (click)="changeSiteLanguage('en')">EN</button>
9-
<button mat-button (click)="changeSiteLanguage('es')">ES</button>
10-
<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
11-
<mat-icon>favorite</mat-icon>
12-
</button>
13-
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
14-
<mat-icon>share</mat-icon>
15-
</button>
16-
<mat-icon class="example-icon" aria-hidden="false" aria-label="Example user verified icon">verified_user</mat-icon>-->
17-
185
<app-language-selector class="lang-sel"></app-language-selector>
196
</mat-toolbar>

0 commit comments

Comments
 (0)