mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-12 03:56:15 -08:00
140 lines
5.7 KiB
HTML
140 lines
5.7 KiB
HTML
<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>
|