mirror of
https://github.com/Myxelium/Bridge-Multi.git
synced 2026-04-09 05:09:39 +00:00
Fix status bar
This commit is contained in:
Geomitron
@@ -17,7 +17,6 @@ import { StatusBarComponent } from './components/browse/status-bar/status-bar.co
|
||||
import { SettingsComponent } from './components/settings/settings.component'
|
||||
import { ToolbarComponent } from './components/toolbar/toolbar.component'
|
||||
import { CheckboxDirective } from './core/directives/checkbox.directive'
|
||||
import { ProgressBarDirective } from './core/directives/progress-bar.directive'
|
||||
import { RemoveStyleTagsPipe } from './core/pipes/remove-style-tags.pipe'
|
||||
|
||||
@NgModule({
|
||||
@@ -33,7 +32,6 @@ import { RemoveStyleTagsPipe } from './core/pipes/remove-style-tags.pipe'
|
||||
ChartSidebarMenutComponent,
|
||||
ResultTableRowComponent,
|
||||
DownloadsModalComponent,
|
||||
ProgressBarDirective,
|
||||
CheckboxDirective,
|
||||
RemoveStyleTagsPipe,
|
||||
SettingsComponent,
|
||||
|
||||
@@ -7,7 +7,11 @@
|
||||
<div class="form-control w-full">
|
||||
<input type="text" [formControl]="searchControl" placeholder="Search..." class="input input-bordered pr-14" />
|
||||
</div>
|
||||
<i class="bi bi-search -ml-9"></i>
|
||||
@if (searchLoading) {
|
||||
<span class="loading loading-spinner loading-sm self-center -ml-9"></span>
|
||||
} @else {
|
||||
<i class="bi bi-search -ml-9"></i>
|
||||
}
|
||||
</div>
|
||||
<div class="flex">
|
||||
<!-- Instrument Dropdown -->
|
||||
|
||||
@@ -67,6 +67,9 @@ export class SearchBarComponent implements OnInit, AfterViewInit {
|
||||
get instrument() {
|
||||
return this.searchService.instrument.value
|
||||
}
|
||||
get searchLoading() {
|
||||
return this.searchService.searchLoading
|
||||
}
|
||||
setInstrument(instrument: Instrument | null, event: MouseEvent) {
|
||||
this.searchService.instrument.setValue(instrument)
|
||||
if (event.target instanceof HTMLElement) {
|
||||
|
||||
@@ -14,11 +14,7 @@
|
||||
</div>
|
||||
|
||||
<div id="downloadProgressDiv">
|
||||
<div id="downloadProgressBar" appProgressBar [percent]="download.percent" class="ui small progress">
|
||||
<div class="bar" [style.height]="download.type === 'error' ? '-webkit-fill-available' : undefined">
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
<progress [value]="download.percent" max="100" class="progress w-96" [class.progress-error]="download.type === 'error'"></progress>
|
||||
<button *ngIf="download.type === 'error'" class="ui right attached labeled compact icon button" (click)="retryDownload(download.versionID)">
|
||||
<i class="redo icon"></i>
|
||||
Retry
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
#downloadTitle,
|
||||
#downloadText {
|
||||
display: flex;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
#downloadText {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#downloadProgressDiv {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#downloadProgressBar {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
.bar {
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
i.close.icon, a {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -6,7 +6,6 @@ import { DownloadService } from '../../../../core/services/download.service'
|
||||
@Component({
|
||||
selector: 'app-downloads-modal',
|
||||
templateUrl: './downloads-modal.component.html',
|
||||
styleUrls: ['./downloads-modal.component.scss'],
|
||||
})
|
||||
export class DownloadsModalComponent {
|
||||
|
||||
|
||||
@@ -1,37 +1,15 @@
|
||||
<div id="bottomMenu" class="ui bottom borderless menu border-t border-t-neutral">
|
||||
<div *ngIf="(searchService.groupedSongs?.length ?? 0) > 0" class="item">
|
||||
{{ searchService.groupedSongs.length }}{{ allResultsVisible ? '' : '+' }} Result{{ searchService.groupedSongs.length === 1 ? '' : 's' }}
|
||||
<div class="border-t border-t-neutral p-2 flex gap-2 items-center">
|
||||
<div *ngIf="searchService.songsResponse">
|
||||
{{ searchService.songsResponse.found }} Result{{ searchService.songsResponse.found === 1 ? '' : 's' }}
|
||||
</div>
|
||||
<div class="item">
|
||||
<button *ngIf="selectedResults.length > 1" (click)="downloadSelected()" class="ui positive button">
|
||||
Download {{ selectedResults.length }} Results
|
||||
<div class="flex-1">
|
||||
<button *ngIf="selectedGroupIds.length > 1" (click)="downloadSelected()" class="btn btn-sm btn-primary">
|
||||
Download {{ selectedGroupIds.length }} Results
|
||||
</button>
|
||||
</div>
|
||||
<a *ngIf="downloading" class="item right" (click)="showDownloads()">
|
||||
<div #progressBar appProgressBar [percent]="percent" class="ui progress" [style.background-color]="error ? 'indianred' : undefined">
|
||||
<div class="bar">
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div id="selectedModal" class="ui modal">
|
||||
<div class="header">Some selected songs have more than one chart!</div>
|
||||
<div class="scrolling content">
|
||||
<div class="ui segments">
|
||||
<div class="ui segment" *ngFor="let chartGroup of chartGroups">
|
||||
<p *ngFor="let chart of chartGroup">
|
||||
{{ chart.chartName }} <b>[{{ chart.charters }}]</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="ui approve button" (click)="downloadAllCharts()">Download all charts for each song</div>
|
||||
<div class="ui cancel button" (click)="deselectSongsWithMultipleCharts()">Deselect these songs</div>
|
||||
<div class="ui cancel button">Cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
<button *ngIf="downloading" (click)="showDownloads()" class="btn btn-sm btn-ghost w-[30vw]">
|
||||
<progress [value]="percent" max="100" class="progress h-3 rounded-md" [class.progress-error]="error"></progress>
|
||||
</button>
|
||||
|
||||
<div id="downloadsModal" class="ui modal">
|
||||
<i class="inside close icon"></i>
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
.ui.progress {
|
||||
margin: 0;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
#downloadsModal {
|
||||
.header {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.ui.positive.button {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ChangeDetectorRef, Component } from '@angular/core'
|
||||
|
||||
import { groupBy } from '../../../../../src-shared/UtilFunctions'
|
||||
import { keys, pickBy } from 'lodash'
|
||||
|
||||
import { DownloadService } from '../../../core/services/download.service'
|
||||
import { SearchService } from '../../../core/services/search.service'
|
||||
import { SelectionService } from '../../../core/services/selection.service'
|
||||
@@ -8,7 +9,6 @@ import { SelectionService } from '../../../core/services/selection.service'
|
||||
@Component({
|
||||
selector: 'app-status-bar',
|
||||
templateUrl: './status-bar.component.html',
|
||||
styleUrls: ['./status-bar.component.scss'],
|
||||
})
|
||||
export class StatusBarComponent {
|
||||
|
||||
@@ -39,12 +39,8 @@ export class StatusBarComponent {
|
||||
})
|
||||
}
|
||||
|
||||
get allResultsVisible() {
|
||||
return false // this.searchService.allResultsVisible
|
||||
}
|
||||
|
||||
get selectedResults() {
|
||||
return this.selectionService.getSelectedResults()
|
||||
get selectedGroupIds() {
|
||||
return keys(pickBy(this.selectionService.selections)).map(k => Number(k))
|
||||
}
|
||||
|
||||
showDownloads() {
|
||||
@@ -53,52 +49,52 @@ export class StatusBarComponent {
|
||||
}
|
||||
|
||||
async downloadSelected() {
|
||||
this.chartGroups = []
|
||||
// TODO
|
||||
// this.batchResults = await window.electron.invoke.getBatchSongDetails(this.selectedResults.map(result => result.id))
|
||||
const versionGroups = groupBy(this.batchResults, 'songID')
|
||||
for (const versionGroup of versionGroups) {
|
||||
if (versionGroup.findIndex(version => version.chartID !== versionGroup[0].chartID) !== -1) {
|
||||
// Must have multiple charts of this song
|
||||
this.chartGroups.push(versionGroup.filter(version => version.versionID === version.latestVersionID))
|
||||
}
|
||||
}
|
||||
// this.chartGroups = []
|
||||
// // TODO
|
||||
// // this.batchResults = await window.electron.invoke.getBatchSongDetails(this.selectedResults.map(result => result.id))
|
||||
// const versionGroups = groupBy(this.batchResults, 'songID')
|
||||
// for (const versionGroup of versionGroups) {
|
||||
// if (versionGroup.findIndex(version => version.chartID !== versionGroup[0].chartID) !== -1) {
|
||||
// // Must have multiple charts of this song
|
||||
// this.chartGroups.push(versionGroup.filter(version => version.versionID === version.latestVersionID))
|
||||
// }
|
||||
// }
|
||||
|
||||
if (this.chartGroups.length === 0) {
|
||||
for (const versions of versionGroups) {
|
||||
// this.searchService.sortChart(versions)
|
||||
const downloadVersion = versions[0]
|
||||
const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
|
||||
this.downloadService.addDownload(
|
||||
downloadVersion.versionID, {
|
||||
chartName: downloadVersion.chartName,
|
||||
artist: downloadSong.artist,
|
||||
charter: downloadVersion.charters,
|
||||
driveData: downloadVersion.driveData,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// TODO
|
||||
// $('#selectedModal').modal('show')
|
||||
// [download all charts for each song] [deselect these songs] [X]
|
||||
}
|
||||
// if (this.chartGroups.length === 0) {
|
||||
// for (const versions of versionGroups) {
|
||||
// // this.searchService.sortChart(versions)
|
||||
// const downloadVersion = versions[0]
|
||||
// const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
|
||||
// this.downloadService.addDownload(
|
||||
// downloadVersion.versionID, {
|
||||
// chartName: downloadVersion.chartName,
|
||||
// artist: downloadSong.artist,
|
||||
// charter: downloadVersion.charters,
|
||||
// driveData: downloadVersion.driveData,
|
||||
// })
|
||||
// }
|
||||
// } else {
|
||||
// // TODO
|
||||
// // $('#selectedModal').modal('show')
|
||||
// // [download all charts for each song] [deselect these songs] [X]
|
||||
// }
|
||||
}
|
||||
|
||||
downloadAllCharts() {
|
||||
const songChartGroups = groupBy(this.batchResults, 'songID', 'chartID')
|
||||
for (const chart of songChartGroups) {
|
||||
// this.searchService.sortChart(chart)
|
||||
const downloadVersion = chart[0]
|
||||
const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
|
||||
this.downloadService.addDownload(
|
||||
downloadVersion.versionID, {
|
||||
chartName: downloadVersion.chartName,
|
||||
artist: downloadSong.artist,
|
||||
charter: downloadVersion.charters,
|
||||
driveData: downloadVersion.driveData,
|
||||
}
|
||||
)
|
||||
}
|
||||
// const songChartGroups = groupBy(this.batchResults, 'songID', 'chartID')
|
||||
// for (const chart of songChartGroups) {
|
||||
// // this.searchService.sortChart(chart)
|
||||
// const downloadVersion = chart[0]
|
||||
// const downloadSong = this.selectedResults.find(song => song.id === downloadVersion.songID)!
|
||||
// this.downloadService.addDownload(
|
||||
// downloadVersion.versionID, {
|
||||
// chartName: downloadVersion.chartName,
|
||||
// artist: downloadSong.artist,
|
||||
// charter: downloadVersion.charters,
|
||||
// driveData: downloadVersion.driveData,
|
||||
// }
|
||||
// )
|
||||
// }
|
||||
}
|
||||
|
||||
deselectSongsWithMultipleCharts() {
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import { Directive, ElementRef, Input } from '@angular/core'
|
||||
|
||||
@Directive({
|
||||
selector: '[appProgressBar]',
|
||||
})
|
||||
export class ProgressBarDirective {
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
private _$progressBar: any
|
||||
|
||||
progress: (percent: number) => void
|
||||
|
||||
@Input() set percent(percent: number) {
|
||||
this.progress(percent)
|
||||
}
|
||||
|
||||
constructor(private element: ElementRef) {
|
||||
// TODO
|
||||
// this.progress = throttle((percent: number) => this.$progressBar.progress('set').percent(percent), 100)
|
||||
}
|
||||
|
||||
// private get $progressBar() {
|
||||
// if (!this._$progressBar) {
|
||||
// this._$progressBar = $(this.element.nativeElement)
|
||||
// }
|
||||
// return this._$progressBar
|
||||
// }
|
||||
}
|
||||
Reference in New Issue
Block a user