projects/cobbler-frontend/src/app/user/preferences/preferences.component.ts
| 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>