Skip to content

Commit 620296b

Browse files
costa-alexcosta-alex
committed
feat: enhance configuration and trainer road components with improved layout and styling
1 parent 8b5a4d7 commit 620296b

5 files changed

Lines changed: 444 additions & 273 deletions

File tree

‎ui/src/app/configuration/configuration.component.html‎

Lines changed: 210 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,143 +1,223 @@
1-
<mat-progress-bar *ngIf="inProgress" mode="query"></mat-progress-bar>
2-
3-
<form [formGroup]="formGroup" novalidate (ngSubmit)="onSubmit()">
4-
<div>
5-
<h2 class="config-section-title">
6-
Intervals.icu
7-
8-
<a
9-
class="help-link"
10-
href="https://github.com/costa-alex/tp2intervals?tab=readme-ov-file#intervalsicu"
11-
target="_blank"
12-
rel="noopener noreferrer"
13-
matTooltip="How to configure"
14-
matTooltipPosition="right">
15-
16-
<mat-icon>help_outline</mat-icon>
17-
18-
</a>
19-
</h2>
20-
21-
<mat-form-field class="full-width">
22-
<mat-label>Intervals API Key</mat-label>
23-
<input matInput placeholder="123456qwerty123456qwerty1" formControlName="intervals.api-key">
24-
</mat-form-field>
25-
26-
<mat-form-field class="full-width">
27-
<mat-label>Intervals Athlete Id</mat-label>
28-
<input matInput placeholder="i00000" formControlName="intervals.athlete-id">
29-
</mat-form-field>
30-
31-
<mat-accordion>
32-
<mat-expansion-panel>
33-
<mat-expansion-panel-header>
34-
<mat-panel-title>
35-
Advanced properties
36-
</mat-panel-title>
1+
<div class="configuration-page app-panel-page">
2+
3+
<div *ngIf="inProgress" class="loading-container app-panel-container">
4+
<mat-progress-bar mode="query"></mat-progress-bar>
5+
</div>
6+
7+
<form
8+
class="content-container app-panel-container"
9+
[formGroup]="formGroup"
10+
novalidate
11+
(ngSubmit)="onSubmit()">
12+
13+
<mat-accordion multi class="config-accordion app-panel-accordion">
14+
15+
<mat-expansion-panel class="config-panel app-panel-card" [expanded]="true">
16+
<mat-expansion-panel-header class="config-header app-panel-card-header">
17+
<div class="config-header-content app-panel-card-header-content">
18+
<div class="config-icon app-panel-card-icon">
19+
<mat-icon>monitor_heart</mat-icon>
20+
</div>
21+
22+
<div class="config-text app-panel-card-text">
23+
<h2 class="config-title app-panel-card-title">Intervals.icu</h2>
24+
<div class="config-description app-panel-card-description">
25+
Configure your connection and workout conversion settings.
26+
</div>
27+
</div>
28+
</div>
3729
</mat-expansion-panel-header>
3830

39-
<mat-form-field class="full-width">
40-
<mat-label>Intervals Power range percentage</mat-label>
41-
<input matInput type="number" placeholder="5.0" formControlName="intervals.power-range">
42-
</mat-form-field>
31+
<div class="panel-content">
32+
<div class="panel-help">
33+
<a
34+
class="help-link"
35+
href="https://github.com/costa-alex/tp2intervals?tab=readme-ov-file#intervalsicu"
36+
target="_blank"
37+
rel="noopener noreferrer">
38+
<mat-icon>help_outline</mat-icon>
39+
<span>How to configure</span>
40+
</a>
41+
</div>
42+
43+
<mat-form-field class="full-width">
44+
<mat-label>Intervals API Key</mat-label>
45+
<input matInput placeholder="123456qwerty123456qwerty1" formControlName="intervals.api-key">
46+
</mat-form-field>
47+
48+
<mat-form-field class="full-width">
49+
<mat-label>Intervals Athlete Id</mat-label>
50+
<input matInput placeholder="i00000" formControlName="intervals.athlete-id">
51+
</mat-form-field>
52+
53+
<mat-accordion class="advanced-accordion">
54+
<mat-expansion-panel class="advanced-panel">
55+
<mat-expansion-panel-header>
56+
<mat-panel-title class="advanced-title">
57+
<mat-icon>tune</mat-icon>
58+
<span>Advanced properties</span>
59+
</mat-panel-title>
60+
</mat-expansion-panel-header>
61+
62+
<mat-form-field class="full-width">
63+
<mat-label>Intervals Power range percentage</mat-label>
64+
<input matInput type="number" placeholder="5.0" formControlName="intervals.power-range">
65+
</mat-form-field>
66+
67+
<mat-form-field class="full-width">
68+
<mat-label>Intervals HR range percentage</mat-label>
69+
<input matInput type="number" placeholder="5.0" formControlName="intervals.hr-range">
70+
</mat-form-field>
71+
72+
<mat-form-field class="full-width">
73+
<mat-label>Intervals Pace range percentage</mat-label>
74+
<input matInput type="number" placeholder="5.0" formControlName="intervals.pace-range">
75+
</mat-form-field>
76+
</mat-expansion-panel>
77+
</mat-accordion>
78+
</div>
79+
</mat-expansion-panel>
4380

44-
<mat-form-field class="full-width">
45-
<mat-label>Intervals HR range percentage</mat-label>
46-
<input matInput type="number" placeholder="5.0" formControlName="intervals.hr-range">
47-
</mat-form-field>
81+
<mat-expansion-panel class="config-panel app-panel-card" [expanded]="true">
82+
<mat-expansion-panel-header class="config-header app-panel-card-header">
83+
<div class="config-header-content app-panel-card-header-content">
84+
<div class="config-icon app-panel-card-icon">
85+
<mat-icon>show_chart</mat-icon>
86+
</div>
87+
88+
<div class="config-text app-panel-card-text">
89+
<h2 class="config-title app-panel-card-title">TrainingPeaks</h2>
90+
<div class="config-description app-panel-card-description">
91+
Add the authentication details used to connect your account.
92+
</div>
93+
</div>
94+
</div>
95+
</mat-expansion-panel-header>
4896

49-
<mat-form-field class="full-width">
50-
<mat-label>Intervals Pace range percentage</mat-label>
51-
<input matInput type="number" placeholder="5.0" formControlName="intervals.pace-range">
52-
</mat-form-field>
97+
<div class="panel-content">
98+
<div class="panel-help">
99+
<a
100+
class="help-link"
101+
href="https://github.com/costa-alex/tp2intervals?tab=readme-ov-file#trainingpeaks"
102+
target="_blank"
103+
rel="noopener noreferrer">
104+
<mat-icon>help_outline</mat-icon>
105+
<span>How to configure</span>
106+
</a>
107+
</div>
108+
109+
<mat-form-field class="full-width">
110+
<mat-label>TrainingPeaks Auth Cookie</mat-label>
111+
<input matInput placeholder="Production_tpAuth=very_long_string" formControlName="training-peaks.auth-cookie">
112+
@if (formGroup.controls['training-peaks.auth-cookie'].errors?.['pattern']) {
113+
<mat-error>Must be in format Production_tpAuth=[a-zA-Z0-9-_]*</mat-error>
114+
}
115+
</mat-form-field>
116+
</div>
53117
</mat-expansion-panel>
54-
</mat-accordion>
55-
</div>
56118

57-
<div>
58-
<h2 class="config-section-title">
59-
TrainingPeaks
60-
<a
61-
class="help-link"
62-
href="https://github.com/costa-alex/tp2intervals?tab=readme-ov-file#trainingpeaks"
63-
target="_blank"
64-
rel="noopener noreferrer"
65-
matTooltip="How to configure"
66-
matTooltipPosition="right">
67-
68-
<mat-icon>help_outline</mat-icon>
69-
70-
</a>
71-
</h2>
72-
73-
<mat-form-field class="full-width">
74-
<mat-label>TrainingPeaks Auth Cookie</mat-label>
75-
<input matInput placeholder="Production_tpAuth=very_long_string" formControlName="training-peaks.auth-cookie">
76-
@if (formGroup.controls['training-peaks.auth-cookie'].errors?.['pattern']) {
77-
<mat-error>Must be in format Production_tpAuth=[a-zA-Z0-9-_]*</mat-error>
78-
}
79-
</mat-form-field>
80-
</div>
119+
<mat-expansion-panel class="config-panel app-panel-card" [expanded]="true">
120+
<mat-expansion-panel-header class="config-header app-panel-card-header">
121+
<div class="config-header-content app-panel-card-header-content">
122+
<div class="config-icon app-panel-card-icon">
123+
<mat-icon>directions_bike</mat-icon>
124+
</div>
125+
126+
<div class="config-text app-panel-card-text">
127+
<h2 class="config-title app-panel-card-title">TrainerRoad</h2>
128+
<div class="config-description app-panel-card-description">
129+
Configure authentication and workout description options.
130+
</div>
131+
</div>
132+
</div>
133+
</mat-expansion-panel-header>
81134

82-
<div>
83-
<h2 class="config-section-title">
84-
TrainerRoad
85-
<a
86-
class="help-link"
87-
href="https://github.com/costa-alex/tp2intervals?tab=readme-ov-file#trainerroad"
88-
target="_blank"
89-
rel="noopener noreferrer"
90-
matTooltip="How to configure"
91-
matTooltipPosition="right">
92-
93-
<mat-icon>help_outline</mat-icon>
94-
95-
</a>
96-
</h2>
97-
98-
<mat-form-field class="full-width">
99-
<mat-label>TrainerRoad Auth Cookie</mat-label>
100-
<input matInput placeholder="TrainerRoadAuth=very_long_string" formControlName="trainer-road.auth-cookie">
101-
@if (formGroup.controls['trainer-road.auth-cookie'].errors?.['pattern']) {
102-
<mat-error>Must be in format SharedTrainerRoadAuth=...</mat-error>
103-
}
104-
</mat-form-field>
105-
106-
<mat-checkbox class="form-checkbox" formControlName="trainer-road.remove-html-tags">
107-
Remove HTML tags from description
108-
</mat-checkbox>
109-
<i class="bi bi-stars beta-icon"
110-
matTooltip="Beta feature"
111-
matTooltipPosition="right"></i>
112-
</div>
135+
<div class="panel-content">
136+
<div class="panel-help">
137+
<a
138+
class="help-link"
139+
href="https://github.com/costa-alex/tp2intervals?tab=readme-ov-file#trainerroad"
140+
target="_blank"
141+
rel="noopener noreferrer">
142+
<mat-icon>help_outline</mat-icon>
143+
<span>How to configure</span>
144+
</a>
145+
</div>
146+
147+
<mat-form-field class="full-width">
148+
<mat-label>TrainerRoad Auth Cookie</mat-label>
149+
<input matInput placeholder="TrainerRoadAuth=very_long_string" formControlName="trainer-road.auth-cookie">
150+
@if (formGroup.controls['trainer-road.auth-cookie'].errors?.['pattern']) {
151+
<mat-error>Must be in format SharedTrainerRoadAuth=...</mat-error>
152+
}
153+
</mat-form-field>
154+
155+
<div class="checkbox-line">
156+
<mat-checkbox formControlName="trainer-road.remove-html-tags">
157+
Remove HTML tags from description
158+
</mat-checkbox>
159+
<span
160+
class="beta-indicator"
161+
matTooltip="Beta feature"
162+
matTooltipPosition="right"
163+
aria-label="Beta feature"
164+
tabindex="0">
165+
<mat-icon>auto_awesome</mat-icon>
166+
</span>
167+
</div>
168+
</div>
169+
</mat-expansion-panel>
113170

114-
<div>
115-
<h2>General</h2>
171+
<mat-expansion-panel class="config-panel app-panel-card" [expanded]="true">
172+
<mat-expansion-panel-header class="config-header app-panel-card-header">
173+
<div class="config-header-content app-panel-card-header-content">
174+
<div class="config-icon app-panel-card-icon">
175+
<mat-icon>settings</mat-icon>
176+
</div>
177+
178+
<div class="config-text app-panel-card-text">
179+
<h2 class="config-title app-panel-card-title">General</h2>
180+
<div class="config-description app-panel-card-description">
181+
Control application diagnostics and other global options.
182+
</div>
183+
</div>
184+
</div>
185+
</mat-expansion-panel-header>
116186

117-
<div class="row">
118-
<mat-checkbox class="form-checkbox" formControlName="general.debug-mode">
119-
Debug Mode
120-
</mat-checkbox>
121-
</div>
187+
<div class="panel-content general-content">
188+
<mat-checkbox formControlName="general.debug-mode">
189+
Debug Mode
190+
</mat-checkbox>
191+
192+
<div *ngIf="formGroup.controls['general.debug-mode'].value" class="log-location">
193+
<div class="log-location-title">
194+
<mat-icon>description</mat-icon>
195+
<span>Log location</span>
196+
</div>
197+
198+
<div class="log-location-list">
199+
<div><span>Linux</span><code>~/.config/tp2intervals/logs/main.log</code></div>
200+
<div><span>MacOS</span><code>~/Library/Logs/tp2intervals/main.log</code></div>
201+
<div><span>Windows</span><code>%USERPROFILE%\AppData\Roaming\tp2intervals\logs\main.log</code></div>
202+
<div><span>JAR</span><code>./tp2intervals.log</code></div>
203+
</div>
204+
</div>
205+
</div>
206+
</mat-expansion-panel>
122207

123-
<div *ngIf="formGroup.controls['general.debug-mode'].value" class="row" style="margin-bottom: 20px">
124-
Log location:<br>
125-
Linux: ~/.config/tp2intervals/logs/main.log<br>
126-
MacOS: ~/Library/Logs/tp2intervals/main.log<br>
127-
Windows: %USERPROFILE%\AppData\Roaming\tp2intervals\logs\main.log<br>
128-
JAR: ./tp2intervals.log<br>
208+
</mat-accordion>
209+
210+
<div class="form-actions">
211+
<button
212+
mat-raised-button
213+
color="primary"
214+
type="submit"
215+
[disabled]="formGroup.invalid || inProgress">
216+
<mat-icon>save</mat-icon>
217+
<span>Confirm</span>
218+
</button>
129219
</div>
130-
</div>
131220

132-
<div class="row action-button-section">
133-
<button
134-
mat-raised-button
135-
color="primary"
136-
type="submit"
137-
[disabled]="formGroup.invalid || inProgress"
138-
>
139-
Confirm
140-
</button>
141-
</div>
221+
</form>
142222

143-
</form>
223+
</div>

0 commit comments

Comments
 (0)