openstapps/frontend/app/src/app/modules/settings/item/settings-item.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/>.
-->

@if (setting) {
  <ion-card>
    @if (
      {
        name: ('name' | thingTranslate: setting | titlecase),
        desc: ('description' | thingTranslate: setting | titlecase)
      };
      as vals
    ) {
      <ion-card-header>
        <ion-card-subtitle>
          {{ vals.name }}
          @if (compactView) {
            <ion-icon name="info" (click)="presentAlert(vals.name, vals.desc)"></ion-icon>
          }
        </ion-card-subtitle>
      </ion-card-header>
    }
    <ion-card-content>
      @if (!compactView) {
        <ion-note>{{ 'description' | thingTranslate: setting }}</ion-note>
      }
      @if (isVisible) {
        <div>
          @switch (setting.inputType) {
            @case ('number') {
              <ion-item>
                <ion-input
                  type="number"
                  [(ngModel)]="setting.value"
                  value="{{ setting.value }}"
                  (ionChange)="settingChanged()"
                ></ion-input>
              </ion-item>
            }
            @case ('text') {
              <ion-item>
                <ion-input
                  type="text"
                  [(ngModel)]="setting.value"
                  value="{{ setting.value }}"
                  (ionChange)="settingChanged()"
                ></ion-input>
              </ion-item>
            }
            @case ('password') {
              <ion-item>
                <ion-input
                  type="password"
                  [(ngModel)]="setting.value"
                  value="{{ setting.value }}"
                  (ionChange)="settingChanged()"
                ></ion-input>
              </ion-item>
            }
            @case ('single choice') {
              <ion-item>
                <!--    if values are boolean show as toggle    -->
                @if (typeOf(setting.defaultValue) === 'boolean') {
                  <ion-toggle [(ngModel)]="setting.value" (ionChange)="settingChanged()"></ion-toggle>
                }
                <!--    else show select input    -->
                @if (typeOf(setting.defaultValue) !== 'boolean') {
                  <ion-select interface="popover" [(ngModel)]="setting.value" (ionChange)="settingChanged()">
                    @for (val of setting.values; track val; let i = $index) {
                      <ion-select-option [value]="val">
                        @if (typeOf(val) !== 'number') {
                          <div>{{ $any(('values' | thingTranslate: setting)?.[i]) | titlecase }}</div>
                        }
                        @if (typeOf(val) === 'number') {
                          <div>{{ val }}</div>
                        }
                      </ion-select-option>
                    }
                  </ion-select>
                }
              </ion-item>
            }
            @case ('multiple choice') {
              <ion-item>
                <ion-select [(ngModel)]="setting.value" multiple="true" (ionChange)="settingChanged()">
                  @for (val of setting.values; track val; let i = $index) {
                    <ion-select-option [value]="val">
                      @if (typeOf(val) !== 'number') {
                        <div>{{ $any(('values' | thingTranslate: setting)?.[i]) | titlecase }}</div>
                      }
                      @if (typeOf(val) === 'number') {
                        <div>{{ val }}</div>
                      }
                    </ion-select-option>
                  }
                </ion-select>
              </ion-item>
            }
          }
        </div>
      }
    </ion-card-content>
  </ion-card>
}