mirror of
https://github.com/Myxelium/Bridge-Multi.git
synced 2026-04-13 06:50:35 +00:00
Update to Angular v17 syntax
This commit is contained in:
Geomitron
@@ -1,4 +1,6 @@
|
|||||||
<div *ngIf="settingsLoaded" class="flex flex-col h-screen">
|
@if (settingsLoaded) {
|
||||||
<app-toolbar></app-toolbar>
|
<div class="flex flex-col h-screen">
|
||||||
<router-outlet></router-outlet>
|
<app-toolbar></app-toolbar>
|
||||||
</div>
|
<router-outlet></router-outlet>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|||||||
@@ -16,7 +16,6 @@ import { DownloadsModalComponent } from './components/browse/status-bar/download
|
|||||||
import { StatusBarComponent } from './components/browse/status-bar/status-bar.component'
|
import { StatusBarComponent } from './components/browse/status-bar/status-bar.component'
|
||||||
import { SettingsComponent } from './components/settings/settings.component'
|
import { SettingsComponent } from './components/settings/settings.component'
|
||||||
import { ToolbarComponent } from './components/toolbar/toolbar.component'
|
import { ToolbarComponent } from './components/toolbar/toolbar.component'
|
||||||
import { CheckboxDirective } from './core/directives/checkbox.directive'
|
|
||||||
import { RemoveStyleTagsPipe } from './core/pipes/remove-style-tags.pipe'
|
import { RemoveStyleTagsPipe } from './core/pipes/remove-style-tags.pipe'
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
@@ -32,7 +31,6 @@ import { RemoveStyleTagsPipe } from './core/pipes/remove-style-tags.pipe'
|
|||||||
ChartSidebarMenutComponent,
|
ChartSidebarMenutComponent,
|
||||||
ResultTableRowComponent,
|
ResultTableRowComponent,
|
||||||
DownloadsModalComponent,
|
DownloadsModalComponent,
|
||||||
CheckboxDirective,
|
|
||||||
RemoveStyleTagsPipe,
|
RemoveStyleTagsPipe,
|
||||||
SettingsComponent,
|
SettingsComponent,
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -113,10 +113,11 @@
|
|||||||
<ul>
|
<ul>
|
||||||
@for (breadcrumb of getVersionBreadcrumbs(version); track $index) {
|
@for (breadcrumb of getVersionBreadcrumbs(version); track $index) {
|
||||||
<li>
|
<li>
|
||||||
<ng-container *ngIf="breadcrumb.link">
|
@if (breadcrumb.link) {
|
||||||
<a (click)="openUrl(breadcrumb.link)" class="link link-hover">{{ breadcrumb.name }}</a>
|
<a (click)="openUrl(breadcrumb.link)" class="link link-hover">{{ breadcrumb.name }}</a>
|
||||||
</ng-container>
|
} @else {
|
||||||
<ng-container *ngIf="!breadcrumb.link">{{ breadcrumb.name }}</ng-container>
|
{{ breadcrumb.name }}
|
||||||
|
}
|
||||||
</li>
|
</li>
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -1,134 +1,136 @@
|
|||||||
<div class="flex h-full flex-col" *ngIf="selectedChart">
|
@if (selectedChart) {
|
||||||
<div class="relative">
|
<div class="flex h-full flex-col">
|
||||||
@if (albumArtMd5) {
|
<div class="relative">
|
||||||
@if (hasIcons && icon) {
|
@if (albumArtMd5) {
|
||||||
<div class="tooltip absolute bottom-3 left-3" [attr.data-tip]="iconTooltip">
|
@if (hasIcons && icon) {
|
||||||
<img
|
<div class="tooltip absolute bottom-3 left-3" [attr.data-tip]="iconTooltip">
|
||||||
class="w-16"
|
<img
|
||||||
src="https://clonehero.gitlab.io/sources/icons/{{ icon }}"
|
class="w-16"
|
||||||
[alt]="selectedChart.icon"
|
src="https://clonehero.gitlab.io/sources/icons/{{ icon }}"
|
||||||
(load)="iconLoading = false"
|
[alt]="selectedChart.icon"
|
||||||
(error)="iconLoading = false"
|
(load)="iconLoading = false"
|
||||||
[class.hidden]="iconLoading" />
|
(error)="iconLoading = false"
|
||||||
</div>
|
[class.hidden]="iconLoading" />
|
||||||
}
|
|
||||||
@if (albumLoading) {
|
|
||||||
<div class="skeleton w-full aspect-square"></div>
|
|
||||||
}
|
|
||||||
<img
|
|
||||||
src="https://files.enchor.us/{{ albumArtMd5 }}.jpg"
|
|
||||||
alt="Album art"
|
|
||||||
(load)="albumLoading = false"
|
|
||||||
(error)="albumLoading = false"
|
|
||||||
[class.hidden]="albumLoading" />
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-1 p-2 gap-1 justify-between overflow-x-hidden overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
|
|
||||||
<div class="flex flex-1 flex-col gap-1">
|
|
||||||
<div>
|
|
||||||
<!-- TODO: Change this to a dropdown if there is more than one chart -->
|
|
||||||
<b>Charter: </b>
|
|
||||||
<a class="link link-hover" (click)="onSourceLinkClicked()">{{ selectedChart.charter | removeStyleTags }}</a>
|
|
||||||
</div>
|
|
||||||
<div class="whitespace-nowrap">
|
|
||||||
<span class="font-bold">Length:</span>
|
|
||||||
{{ effectiveLength }} (+{{ extraLengthSeconds }}s)
|
|
||||||
<div
|
|
||||||
class="tooltip tooltip-bottom cursor-help [text-wrap:balance]"
|
|
||||||
data-tip="The time between the first and last note. The second value is the extra time at the start and end of the song without notes.">
|
|
||||||
<i class="bi bi-info-circle text-xs"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-wrap">
|
|
||||||
<div class="flex-1">
|
|
||||||
@if (hasIssues) {
|
|
||||||
<div class="dropdown dropdown-hover">
|
|
||||||
<label tabindex="0" class="cursor-help"><i class="bi bi-exclamation-triangle text-lg -my-3 ml-1"></i> Issues Detected</label>
|
|
||||||
<div tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box min-w-max">
|
|
||||||
@if (metadataIssues.length > 0) {
|
|
||||||
<div class="menu-title">Metadata Issues Found:</div>
|
|
||||||
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
|
||||||
<li *ngFor="let issue of metadataIssues" class="list-item">{{ getMetadataIssueText(issue) }}</li>
|
|
||||||
</ul>
|
|
||||||
}
|
|
||||||
@if (folderIssues.length > 0) {
|
|
||||||
<div class="menu-title">Chart Folder Issues Found:</div>
|
|
||||||
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
|
||||||
<li *ngFor="let issue of folderIssues" class="list-item">{{ getFolderIssueText(issue) }}</li>
|
|
||||||
</ul>
|
|
||||||
}
|
|
||||||
@if (chartIssues.length > 0) {
|
|
||||||
<div class="menu-title">Chart Issues Found:</div>
|
|
||||||
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
|
||||||
<li *ngFor="let issue of chartIssues" class="list-item">{{ getChartIssueText(issue) }}</li>
|
|
||||||
</ul>
|
|
||||||
}
|
|
||||||
@for (trackIssues of trackIssuesGroups; track $index) {
|
|
||||||
<div class="menu-title">{{ trackIssues.groupName }}</div>
|
|
||||||
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
|
||||||
<li *ngFor="let issue of trackIssues.issues" class="list-item">{{ getTrackIssueText(issue) }}</li>
|
|
||||||
</ul>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
@if (selectedChart.modchart) {
|
|
||||||
<div><i class="bi bi-star text-lg -my-3 ml-1"></i> Modchart</div>
|
|
||||||
}
|
|
||||||
@for (pair of boolProperties; track $index) {
|
|
||||||
<p class="flex items-center">
|
|
||||||
<i class="bi text-2xl -my-3" [ngClass]="pair.value ? 'bi-check2' : 'bi-x'" [ngStyle]="{ color: pair.value ? 'green' : 'red' }"> </i>
|
|
||||||
<span class="ml-1 whitespace-nowrap" [class.font-bold]="pair.value">{{ pair.text }}</span>
|
|
||||||
</p>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-1 flex-col gap-1">
|
|
||||||
<div
|
|
||||||
class="flex flex-wrap gap-1 max-h-40 min-h-[44px] max-w-[234px] overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
|
|
||||||
@if (selectedChart.notesData.hasVocals) {
|
|
||||||
<app-chart-sidebar-instrument [chart]="selectedChart" instrument="vocals" />
|
|
||||||
}
|
|
||||||
@for (instrument of instruments; track $index) {
|
|
||||||
<app-chart-sidebar-instrument [chart]="selectedChart" [instrument]="instrument" />
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-1 flex-col">
|
|
||||||
@if (instruments.length > 1 || difficulties.length > 1) {
|
|
||||||
<div class="flex flex-wrap gap-1">
|
|
||||||
@if (instruments.length > 1) {
|
|
||||||
<select class="select select-bordered select-sm grow-[40]" [formControl]="instrumentDropdown">
|
|
||||||
@for (instrument of instruments; track $index) {
|
|
||||||
<option [value]="instrument">{{ shortInstrumentDisplay(instrument) }}</option>
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
}
|
|
||||||
@if (difficulties.length > 1) {
|
|
||||||
<select class="select select-bordered select-sm flex-1" [formControl]="difficultyDropdown">
|
|
||||||
@for (difficulty of difficulties; track $index) {
|
|
||||||
<option [value]="difficulty">{{ difficultyDisplay(difficulty) }}</option>
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
<p class="font-bold whitespace-nowrap">Average NPS: {{ averageNps || 'N/A' }}</p>
|
@if (albumLoading) {
|
||||||
<p class="font-bold whitespace-nowrap">Maximum NPS: {{ maximumNps }}</p>
|
<div class="skeleton w-full aspect-square"></div>
|
||||||
<p class="font-bold whitespace-nowrap">Note Count: {{ noteCount }}</p>
|
}
|
||||||
|
<img
|
||||||
|
src="https://files.enchor.us/{{ albumArtMd5 }}.jpg"
|
||||||
|
alt="Album art"
|
||||||
|
(load)="albumLoading = false"
|
||||||
|
(error)="albumLoading = false"
|
||||||
|
[class.hidden]="albumLoading" />
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex flex-1 p-2 gap-1 justify-between overflow-x-hidden overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
|
||||||
|
<div class="flex flex-1 flex-col gap-1">
|
||||||
|
<div>
|
||||||
|
<!-- TODO: Change this to a dropdown if there is more than one chart -->
|
||||||
|
<b>Charter: </b>
|
||||||
|
<a class="link link-hover" (click)="onSourceLinkClicked()">{{ selectedChart.charter | removeStyleTags }}</a>
|
||||||
|
</div>
|
||||||
|
<div class="whitespace-nowrap">
|
||||||
|
<span class="font-bold">Length:</span>
|
||||||
|
{{ effectiveLength }} (+{{ extraLengthSeconds }}s)
|
||||||
|
<div
|
||||||
|
class="tooltip tooltip-bottom cursor-help [text-wrap:balance]"
|
||||||
|
data-tip="The time between the first and last note. The second value is the extra time at the start and end of the song without notes.">
|
||||||
|
<i class="bi bi-info-circle text-xs"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap">
|
||||||
|
<div class="flex-1">
|
||||||
|
@if (hasIssues) {
|
||||||
|
<div class="dropdown dropdown-hover">
|
||||||
|
<label tabindex="0" class="cursor-help"><i class="bi bi-exclamation-triangle text-lg -my-3 ml-1"></i> Issues Detected</label>
|
||||||
|
<div tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box min-w-max">
|
||||||
|
@if (metadataIssues.length > 0) {
|
||||||
|
<div class="menu-title">Metadata Issues Found:</div>
|
||||||
|
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
||||||
|
<li *ngFor="let issue of metadataIssues" class="list-item">{{ getMetadataIssueText(issue) }}</li>
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
@if (folderIssues.length > 0) {
|
||||||
|
<div class="menu-title">Chart Folder Issues Found:</div>
|
||||||
|
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
||||||
|
<li *ngFor="let issue of folderIssues" class="list-item">{{ getFolderIssueText(issue) }}</li>
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
@if (chartIssues.length > 0) {
|
||||||
|
<div class="menu-title">Chart Issues Found:</div>
|
||||||
|
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
||||||
|
<li *ngFor="let issue of chartIssues" class="list-item">{{ getChartIssueText(issue) }}</li>
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
@for (trackIssues of trackIssuesGroups; track $index) {
|
||||||
|
<div class="menu-title">{{ trackIssues.groupName }}</div>
|
||||||
|
<ul class="list-disc ml-9 min-w-[246px] max-w-[min(26.1vw,444px)]">
|
||||||
|
<li *ngFor="let issue of trackIssues.issues" class="list-item">{{ getTrackIssueText(issue) }}</li>
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
@if (selectedChart.modchart) {
|
||||||
|
<div><i class="bi bi-star text-lg -my-3 ml-1"></i> Modchart</div>
|
||||||
|
}
|
||||||
|
@for (pair of boolProperties; track $index) {
|
||||||
|
<p class="flex items-center">
|
||||||
|
<i class="bi text-2xl -my-3" [ngClass]="pair.value ? 'bi-check2' : 'bi-x'" [ngStyle]="{ color: pair.value ? 'green' : 'red' }"> </i>
|
||||||
|
<span class="ml-1 whitespace-nowrap" [class.font-bold]="pair.value">{{ pair.text }}</span>
|
||||||
|
</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-1 flex-col gap-1">
|
||||||
|
<div
|
||||||
|
class="flex flex-wrap gap-1 max-h-40 min-h-[44px] max-w-[234px] overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
|
||||||
|
@if (selectedChart.notesData.hasVocals) {
|
||||||
|
<app-chart-sidebar-instrument [chart]="selectedChart" instrument="vocals" />
|
||||||
|
}
|
||||||
|
@for (instrument of instruments; track $index) {
|
||||||
|
<app-chart-sidebar-instrument [chart]="selectedChart" [instrument]="instrument" />
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-1 flex-col">
|
||||||
|
@if (instruments.length > 1 || difficulties.length > 1) {
|
||||||
|
<div class="flex flex-wrap gap-1">
|
||||||
|
@if (instruments.length > 1) {
|
||||||
|
<select class="select select-bordered select-sm grow-[40]" [formControl]="instrumentDropdown">
|
||||||
|
@for (instrument of instruments; track $index) {
|
||||||
|
<option [value]="instrument">{{ shortInstrumentDisplay(instrument) }}</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
}
|
||||||
|
@if (difficulties.length > 1) {
|
||||||
|
<select class="select select-bordered select-sm flex-1" [formControl]="difficultyDropdown">
|
||||||
|
@for (difficulty of difficulties; track $index) {
|
||||||
|
<option [value]="difficulty">{{ difficultyDisplay(difficulty) }}</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<p class="font-bold whitespace-nowrap">Average NPS: {{ averageNps || 'N/A' }}</p>
|
||||||
|
<p class="font-bold whitespace-nowrap">Maximum NPS: {{ maximumNps }}</p>
|
||||||
|
<p class="font-bold whitespace-nowrap">Note Count: {{ noteCount }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="join">
|
||||||
|
<button class="btn rounded-md flex-1 join-item btn-primary" (click)="onDownloadClicked()">Download</button>
|
||||||
|
<div
|
||||||
|
#menu
|
||||||
|
class="cursor-pointer bg-neutral rounded-md join-item dropdown dropdown-top dropdown-end p-1 flex items-center"
|
||||||
|
(click)="showMenu()"
|
||||||
|
[class.dropdown-open]="menuVisible">
|
||||||
|
<i class="bi bi-three-dots text-2xl px-1 text-neutral-content"></i>
|
||||||
|
<app-chart-sidebar-menu [chartVersions]="charts![0]" (selectedVersionChanges)="selectedChart = $event" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="join">
|
}
|
||||||
<button class="btn rounded-md flex-1 join-item btn-primary" (click)="onDownloadClicked()">Download</button>
|
|
||||||
<div
|
|
||||||
#menu
|
|
||||||
class="cursor-pointer bg-neutral rounded-md join-item dropdown dropdown-top dropdown-end p-1 flex items-center"
|
|
||||||
(click)="showMenu()"
|
|
||||||
[class.dropdown-open]="menuVisible">
|
|
||||||
<i class="bi bi-three-dots text-2xl px-1 text-neutral-content"></i>
|
|
||||||
<app-chart-sidebar-menu [chartVersions]="charts![0]" (selectedVersionChanges)="selectedChart = $event" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
import { Component, EventEmitter, HostBinding, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'
|
import { Component, EventEmitter, HostBinding, OnInit, Output, QueryList, ViewChildren } from '@angular/core'
|
||||||
|
|
||||||
import { sortBy } from 'lodash'
|
import { sortBy } from 'lodash'
|
||||||
import { SettingsService } from 'src-angular/app/core/services/settings.service'
|
import { SettingsService } from 'src-angular/app/core/services/settings.service'
|
||||||
import { ChartData } from 'src-shared/interfaces/search.interface'
|
import { ChartData } from 'src-shared/interfaces/search.interface'
|
||||||
|
|
||||||
import { CheckboxDirective } from '../../../core/directives/checkbox.directive'
|
|
||||||
import { SearchService } from '../../../core/services/search.service'
|
import { SearchService } from '../../../core/services/search.service'
|
||||||
import { SelectionService } from '../../../core/services/selection.service'
|
import { SelectionService } from '../../../core/services/selection.service'
|
||||||
import { ResultTableRowComponent } from './result-table-row/result-table-row.component'
|
import { ResultTableRowComponent } from './result-table-row/result-table-row.component'
|
||||||
@@ -18,7 +17,6 @@ export class ResultTableComponent implements OnInit {
|
|||||||
|
|
||||||
@Output() rowClicked = new EventEmitter<ChartData[]>()
|
@Output() rowClicked = new EventEmitter<ChartData[]>()
|
||||||
|
|
||||||
@ViewChild(CheckboxDirective, { static: true }) checkboxColumn: CheckboxDirective
|
|
||||||
@ViewChildren('tableRow') tableRows: QueryList<ResultTableRowComponent>
|
@ViewChildren('tableRow') tableRows: QueryList<ResultTableRowComponent>
|
||||||
|
|
||||||
activeSong: ChartData[] | null = null
|
activeSong: ChartData[] | null = null
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<div class="flex flex-col gap-4 min-h-0">
|
<div class="flex flex-col gap-4 min-h-0">
|
||||||
<div
|
<div
|
||||||
class="flex flex-col gap-1 p-1 overflow-y-auto max-h-[75vh] scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
|
class="flex flex-col gap-2 p-1 overflow-y-auto max-h-[75vh] scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
|
||||||
@for (download of downloadService.downloads; track download.md5) {
|
@for (download of downloadService.downloads; track download.md5) {
|
||||||
<div
|
<div
|
||||||
class="card bg-neutral text-neutral-content shadow-xl"
|
class="card bg-neutral text-neutral-content shadow-xl"
|
||||||
@@ -46,16 +46,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="downloadTitle">
|
|
||||||
<span style="flex-grow: 1"></span>
|
|
||||||
<i class="inside right close icon" (click)="downloadService.cancelDownload(download.md5)"></i>
|
|
||||||
</div>
|
|
||||||
<div id="downloadText">
|
|
||||||
<span style="flex-grow: 1"></span>
|
|
||||||
<span *ngIf="!download.isPath" class="description"></span>
|
|
||||||
<span *ngIf="download.isPath" class="description"> </span>
|
|
||||||
</div>
|
|
||||||
<div id="downloadProgressDiv"></div>
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="downloadService.completedCount > 1" class="flex justify-end">
|
<div *ngIf="downloadService.completedCount > 1" class="flex justify-end">
|
||||||
|
|||||||
@@ -10,9 +10,9 @@
|
|||||||
readonly
|
readonly
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="No directory selected!" />
|
placeholder="No directory selected!" />
|
||||||
<button *ngIf="settingsService.libraryDirectory !== undefined" (click)="openLibraryDirectory()" class="join-item btn btn-neutral">
|
@if (settingsService.libraryDirectory !== undefined) {
|
||||||
Open Folder
|
<button (click)="openLibraryDirectory()" class="join-item btn btn-neutral">Open Folder</button>
|
||||||
</button>
|
}
|
||||||
<button (click)="getLibraryDirectory()" class="join-item btn btn-primary">Choose</button>
|
<button (click)="getLibraryDirectory()" class="join-item btn btn-primary">Choose</button>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
@@ -1,39 +0,0 @@
|
|||||||
import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'
|
|
||||||
|
|
||||||
@Directive({
|
|
||||||
selector: '[appCheckbox]',
|
|
||||||
})
|
|
||||||
export class CheckboxDirective {
|
|
||||||
@Output() checked = new EventEmitter<boolean>()
|
|
||||||
|
|
||||||
_isChecked = false
|
|
||||||
|
|
||||||
constructor(private checkbox: ElementRef) { }
|
|
||||||
|
|
||||||
// ngAfterViewInit() {
|
|
||||||
// TODO
|
|
||||||
// $(this.checkbox.nativeElement).checkbox({
|
|
||||||
// onChecked: () => {
|
|
||||||
// this.checked.emit(true)
|
|
||||||
// this._isChecked = true
|
|
||||||
// },
|
|
||||||
// onUnchecked: () => {
|
|
||||||
// this.checked.emit(false)
|
|
||||||
// this._isChecked = false
|
|
||||||
// },
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
check(isChecked: boolean) {
|
|
||||||
this._isChecked = isChecked
|
|
||||||
if (isChecked) {
|
|
||||||
this.checkbox.nativeElement.checked = true
|
|
||||||
} else {
|
|
||||||
this.checkbox.nativeElement.checked = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get isChecked() {
|
|
||||||
return this._isChecked
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user