Files
openstapps/src/app/modules/settings/item/settings-item.html
2023-01-13 18:14:05 +00:00

103 lines
3.5 KiB
HTML

<!--
~ Copyright (C) 2022 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<ion-card *ngIf="setting">
<ion-card-header
*ngIf="
{
name: ('name' | thingTranslate: setting | titlecase),
desc: ('description' | thingTranslate: setting | titlecase)
};
let vals
"
>
<ion-card-subtitle>
{{ vals.name }}
<ion-icon *ngIf="compactView" name="info" (click)="presentAlert(vals.name, vals.desc)"></ion-icon>
</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-note *ngIf="!compactView">{{ 'description' | thingTranslate: setting | titlecase }}</ion-note>
<div [ngSwitch]="setting.inputType" *ngIf="isVisible">
<ion-item *ngSwitchCase="'number'">
<ion-label></ion-label>
<ion-input
type="number"
[(ngModel)]="setting.value"
value="{{ setting.value }}"
(ionChange)="settingChanged()"
></ion-input>
</ion-item>
<ion-item *ngSwitchCase="'text'">
<ion-label></ion-label>
<ion-input
type="text"
[(ngModel)]="setting.value"
value="{{ setting.value }}"
(ionChange)="settingChanged()"
></ion-input>
</ion-item>
<ion-item *ngSwitchCase="'password'">
<ion-label></ion-label>
<ion-input
type="password"
[(ngModel)]="setting.value"
value="{{ setting.value }}"
(ionChange)="settingChanged()"
></ion-input>
</ion-item>
<ion-item *ngSwitchCase="'single choice'">
<ion-label></ion-label>
<!-- if values are boolean show as toggle -->
<ion-toggle
*ngIf="typeOf(setting.defaultValue) === 'boolean'"
[(ngModel)]="setting.value"
(ionChange)="settingChanged()"
></ion-toggle>
<!-- else show select input -->
<ion-select
*ngIf="typeOf(setting.defaultValue) !== 'boolean'"
interface="popover"
[(ngModel)]="setting.value"
(ionChange)="settingChanged()"
>
<ion-select-option *ngFor="let val of setting.values; index as i" [value]="val">
<div *ngIf="typeOf(val) !== 'number'">
{{ ('values' | thingTranslate: setting)[i] | titlecase }}
</div>
<div *ngIf="typeOf(val) === 'number'">{{ val }}</div>
</ion-select-option>
</ion-select>
</ion-item>
<ion-item *ngSwitchCase="'multiple choice'">
<ion-label></ion-label>
<ion-select [(ngModel)]="setting.value" multiple="true" (ionChange)="settingChanged()">
<ion-select-option *ngFor="let val of setting.values; index as i" [value]="val">
<div *ngIf="typeOf(val) !== 'number'">
{{ ('values' | thingTranslate: setting)[i] | titlecase }}
</div>
<div *ngIf="typeOf(val) === 'number'">{{ val }}</div>
</ion-select-option>
</ion-select>
</ion-item>
</div>
</ion-card-content>
</ion-card>