Cobbler Frontend Docs
  1. Components
  2. PreferencesComponent

File

projects/cobbler-frontend/src/app/user/preferences/preferences.component.ts

Metadata

selector cobbler-preferences
standalone true
imports MatExpansionModule FormsModule MatInputModule MatFormFieldModule MatSelectModule MatOptionModule MatSlideToggleModule
templateUrl ./preferences.component.html
styleUrl ./preferences.component.scss 
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatOptionModule } from '@angular/material/core';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@Component({
  selector: 'cobbler-preferences',
  standalone: true,
  imports: [
    MatExpansionModule,
    FormsModule,
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    MatOptionModule,
    MatSlideToggleModule,
  ],
  templateUrl: './preferences.component.html',
  styleUrl: './preferences.component.scss',
})
export class PreferencesComponent {}

<h1>User Preferences</h1>

<mat-accordion multi="true">
  <mat-expansion-panel [expanded]="true">
    <mat-expansion-panel-header>
      <mat-panel-title>User Information</mat-panel-title>
    </mat-expansion-panel-header>
    <p>User information is not retrievable with Cobbler 3.3.x.</p>
  </mat-expansion-panel>
  <mat-expansion-panel [expanded]="true">
    <mat-expansion-panel-header>
      <mat-panel-title>User Preferences</mat-panel-title>
    </mat-expansion-panel-header>
    <form class="preferences-form">
      <mat-slide-toggle class="pad-bottom" [disabled]="true"
        >Dark Mode</mat-slide-toggle
      >
      <mat-form-field class="full-width">
        <mat-label>Language</mat-label>
        <mat-select value="english" [disabled]="true">
          <mat-option value="english">English</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field class="full-width">
        <mat-label>Date Format</mat-label>
        <!-- TODO: Switch to autocomplete once more then one format is supported -->
        <input matInput value="DD/MM/YYYY" readonly />
      </mat-form-field>
      <mat-form-field class="full-width">
        <mat-label>Number Format (floating point separator)</mat-label>
        <mat-select value="comma" [disabled]="true">
          <mat-option value="comma">Comma</mat-option>
          <mat-option value="dot">Dot</mat-option>
        </mat-select>
      </mat-form-field>
    </form>
  </mat-expansion-panel>
</mat-accordion>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""