x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-11 11:06:16 -08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): split settings component into sections

Browse Source 
Entire-Checkpoint: c2cea9c530e6
This commit is contained in:
4gray committed 2026-05-01 20:16:32 +02:00
1 parent d24c67c6e8
commit c51d8161ea
22 files changed
+1759 -1581
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/app/settings/settings-remote-control-section.component.html
+139
View File
@@ -0,0 +1,139 @@
<section
class="settings-group"
[class.settings-group--active]="activeSection() === 'remote-control'"
id="remote-control"
[formGroup]="form()"
>
<header class="settings-group__header">
<div class="settings-group__header-icon">
<mat-icon>settings_remote</mat-icon>
</div>
<div class="settings-group__header-text">
<h3>{{ 'SETTINGS.REMOTE_CONTROL' | translate }}</h3>
<p>{{ 'SETTINGS.REMOTE_CONTROL_DESCRIPTION' | translate }}</p>
</div>
</header>
<div class="setting-item">
<div class="setting-item__meta">
<h4>{{ 'SETTINGS.REMOTE_CONTROL' | translate }}</h4>
<p>{{ 'SETTINGS.REMOTE_CONTROL_DESCRIPTION' | translate }}</p>
</div>
<div class="setting-item__control setting-item__toggle">
<mat-checkbox
formControlName="remoteControl"
data-test-id="remote-control-enabled"
></mat-checkbox>
</div>
</div>
@if (form().value.remoteControl === true) {
<div class="setting-item">
<div class="setting-item__meta">
<h4>{{ 'SETTINGS.REMOTE_CONTROL_PORT' | translate }}</h4>
<p>
{{ 'SETTINGS.REMOTE_CONTROL_PORT_DESCRIPTION' | translate }}
</p>
</div>
<div class="setting-item__control">
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-label>{{
'SETTINGS.PORT_RANGE_LABEL' | translate
}}</mat-label>
<input
matInput
type="number"
id="remoteControlPort"
data-test-id="remote-control-port"
formControlName="remoteControlPort"
min="1"
max="65535"
step="1"
/>
@if (
form().get('remoteControlPort')?.hasError('required')
) {
<mat-error>{{
'SETTINGS.PORT_REQUIRED' | translate
}}</mat-error>
}
@if (form().get('remoteControlPort')?.hasError('min')) {
<mat-error>{{
'SETTINGS.PORT_MIN' | translate
}}</mat-error>
}
@if (form().get('remoteControlPort')?.hasError('max')) {
<mat-error>{{
'SETTINGS.PORT_MAX' | translate
}}</mat-error>
}
@if (form().get('remoteControlPort')?.hasError('pattern')) {
<mat-error>{{
'SETTINGS.PORT_PATTERN' | translate
}}</mat-error>
}
</mat-form-field>
</div>
</div>
@if (localIpAddresses().length > 0) {
<div class="setting-item">
<div class="setting-item__meta">
<h4>{{ 'SETTINGS.REMOTE_CONTROL_URL' | translate }}</h4>
<p>
{{
'SETTINGS.REMOTE_CONTROL_URL_DESCRIPTION'
| translate
}}
</p>
</div>
<div class="setting-item__control remote-control-urls">
@for (ip of localIpAddresses(); track ip) {
<div class="remote-control-url-item">
<div class="url-row">
<a
[href]="
'http://' +
ip +
':' +
form().value.remoteControlPort
"
target="_blank"
class="remote-control-url"
>
http://{{ ip }}:{{
form().value.remoteControlPort
}}
</a>
<button
mat-icon-button
type="button"
(click)="toggleQrCode.emit(ip)"
[matTooltip]="
'SETTINGS.SHOW_QR_CODE' | translate
"
>
<mat-icon>qr_code_2</mat-icon>
</button>
</div>
@if (visibleQrCodeIp() === ip) {
<div class="qr-code-container">
<qrcode
[qrdata]="
'http://' +
ip +
':' +
form().value.remoteControlPort
"
[width]="150"
errorCorrectionLevel="M"
></qrcode>
</div>
}
</div>
}
</div>
</div>
}
}
</section>