Add configurable columns

This commit is contained in:
Geomitron
2024-07-12 13:22:43 -05:00
parent 452111c1ef
commit 91e80aed52
8 changed files with 174 additions and 28 deletions

View File

@@ -142,6 +142,44 @@
</div>
</div>
<div class="form-control">
<div class="label">
<span class="label-text">Table Columns</span>
</div>
<div class="flex gap-2">
<label class="label cursor-pointer" for="artistColumn">
<input id="artistColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="artistColumn" />
Artist
</label>
<label class="label cursor-pointer" for="albumColumn">
<input id="albumColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="albumColumn" />
Album
</label>
<label class="label cursor-pointer" for="genreColumn">
<input id="genreColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="genreColumn" />
Genre
</label>
<label class="label cursor-pointer" for="yearColumn">
<input id="yearColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="yearColumn" />
Year
</label>
</div>
<div class="flex gap-2">
<label class="label cursor-pointer" for="charterColumn">
<input id="charterColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="charterColumn" />
Charter
</label>
<label class="label cursor-pointer" for="lengthColumn">
<input id="lengthColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="lengthColumn" />
Length
</label>
<label class="label cursor-pointer" for="difficultyColumn">
<input id="difficultyColumn" type="checkbox" checked="checked" class="checkbox mr-1" [formControl]="difficultyColumn" />
Difficulty
</label>
</div>
</div>
<div class="absolute bottom-8 left-8 flex">
<a class="btn btn-link" (click)="openUrl('https://github.com/Geomitron/Bridge')"><i class="bi bi-github text-2xl"></i>Github</a>
<a class="btn btn-link" (click)="openUrl('https://discord.gg/cqaUXGm')"><i class="bi bi-discord text-2xl"></i>Discord</a>

View File

@@ -15,6 +15,14 @@ export class SettingsComponent implements OnInit {
public isSng: FormControl<boolean>
public isCompactTable: FormControl<boolean>
public artistColumn: FormControl<boolean>
public albumColumn: FormControl<boolean>
public genreColumn: FormControl<boolean>
public yearColumn: FormControl<boolean>
public charterColumn: FormControl<boolean>
public lengthColumn: FormControl<boolean>
public difficultyColumn: FormControl<boolean>
updateAvailable: 'yes' | 'no' | 'error' = 'no'
loginClicked = false
downloadUpdateText = 'Download Update'
@@ -28,10 +36,28 @@ export class SettingsComponent implements OnInit {
public settingsService: SettingsService,
private ref: ChangeDetectorRef
) {
this.isSng = new FormControl<boolean>(settingsService.isSng, { nonNullable: true })
const ss = settingsService
this.isSng = new FormControl<boolean>(ss.isSng, { nonNullable: true })
this.isSng.valueChanges.subscribe(value => settingsService.isSng = value)
this.isCompactTable = new FormControl<boolean>(settingsService.isCompactTable, { nonNullable: true })
this.isCompactTable.valueChanges.subscribe(value => settingsService.isCompactTable = value)
this.isCompactTable.valueChanges.subscribe(value => ss.isCompactTable = value)
this.artistColumn = new FormControl<boolean>(ss.visibleColumns.includes('artist'), { nonNullable: true })
this.albumColumn = new FormControl<boolean>(ss.visibleColumns.includes('album'), { nonNullable: true })
this.genreColumn = new FormControl<boolean>(ss.visibleColumns.includes('genre'), { nonNullable: true })
this.yearColumn = new FormControl<boolean>(ss.visibleColumns.includes('year'), { nonNullable: true })
this.charterColumn = new FormControl<boolean>(ss.visibleColumns.includes('charter'), { nonNullable: true })
this.lengthColumn = new FormControl<boolean>(ss.visibleColumns.includes('length'), { nonNullable: true })
this.difficultyColumn = new FormControl<boolean>(ss.visibleColumns.includes('difficulty'), { nonNullable: true })
this.artistColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('artist') : ss.removeVisibleColumn('artist'))
this.albumColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('album') : ss.removeVisibleColumn('album'))
this.genreColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('genre') : ss.removeVisibleColumn('genre'))
this.yearColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('year') : ss.removeVisibleColumn('year'))
this.charterColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('charter') : ss.removeVisibleColumn('charter'))
this.lengthColumn.valueChanges.subscribe(value => value ? ss.addVisibleColumn('length') : ss.removeVisibleColumn('length'))
this.difficultyColumn.valueChanges
.subscribe(value => value ? ss.addVisibleColumn('difficulty') : ss.removeVisibleColumn('difficulty'))
}
async ngOnInit() {