Sidebar chart display

src/app/app.module.ts

@@ -8,7 +8,8 @@ import { BrowseComponent } from './components/browse/browse.component';
 import { SearchBarComponent } from './components/browse/search-bar/search-bar.component';
 import { StatusBarComponent } from './components/browse/status-bar/status-bar.component';
 import { ResultTableComponent } from './components/browse/result-table/result-table.component';
-import { ChartSidebarComponent } from './components/browse/chart-sidebar/chart-sidebar.component'
+import { ChartSidebarComponent } from './components/browse/chart-sidebar/chart-sidebar.component';
+import { ResultTableRowComponent } from './components/browse/result-table/result-table-row/result-table-row.component'
 
 @NgModule({
   declarations: [
@@ -18,7 +19,8 @@ import { ChartSidebarComponent } from './components/browse/chart-sidebar/chart-s
     SearchBarComponent,
     StatusBarComponent,
     ResultTableComponent,
-    ChartSidebarComponent
+    ChartSidebarComponent,
+    ResultTableRowComponent
   ],
   imports: [
     BrowserModule,

src/app/components/browse/browse.component.html

@@ -2,10 +2,10 @@
 <div class="ui celled two column grid">
   <div id="table-row" class="row">
     <div id="table-column" class="column twelve wide">
-      <app-result-table #resultTable></app-result-table>
+      <app-result-table #resultTable (rowClicked)="chartSidebar.onRowClicked($event)"></app-result-table>
     </div>
     <div id="sidebar-column" class="column four wide">
-      <app-chart-sidebar></app-chart-sidebar>
+      <app-chart-sidebar #chartSidebar></app-chart-sidebar>
     </div>
   </div>
 </div>

src/app/components/browse/browse.component.ts

@@ -12,5 +12,4 @@ export class BrowseComponent implements OnInit {
   ngOnInit() {
     console.log('Browse component loaded.')
   }
-
 }

src/app/components/browse/chart-sidebar/chart-sidebar.component.html

@@ -2,20 +2,27 @@
   <div class="ui placeholder">
     <div class="square image"></div>
   </div>
-  <div class="ui fluid selection dropdown">
+  <div id="chartDropdown" class="ui fluid selection dropdown">
     <input type="hidden" name="Chart">
     <i class="dropdown icon"></i>
     <div class="default text">Chart</div>
     <div class="menu">
-      <div class="item" data-value="1">Chart 1</div>
+      <div class="item" data-value="1">
+        <h4 class="ui header">Chart1</h4>
+        <div>row2</div>
+      </div>
       <div class="item" data-value="0">Chart 2</div>
     </div>
   </div>
   <div id="textPanel" class="content">
-    <span class="header">Funknitium-99</span>
-    <div class="meta">
-      <span>Fearofdark</span>
+    <span class="header">{{selectedVersion?.avTagName}}</span>
+    <div *ngIf="selectedVersion" class="description">
+      <div>{{charterPlural}} {{selectedVersion?.charters}}</div>
+      <div *ngIf="selectedVersion?.tags">Tags: {{selectedVersion.tags}}</div>
+      <div>Audio Length: {{getSongLength()}}</div>
+      <!-- TODO: add difficulty icons -->
     </div>
+
   </div>
   <div class="ui positive buttons">
     <div class="ui button">Download Latest</div>

src/app/components/browse/chart-sidebar/chart-sidebar.component.ts

@@ -1,15 +1,86 @@
-import { Component, AfterViewInit } from '@angular/core'
+import { Component } from '@angular/core'
+import { SongResult } from 'src/electron/shared/interfaces/search.interface'
+import { ElectronService } from 'src/app/core/services/electron.service'
+import { VersionResult } from 'src/electron/shared/interfaces/songDetails.interface'
 
 @Component({
   selector: 'app-chart-sidebar',
   templateUrl: './chart-sidebar.component.html',
   styleUrls: ['./chart-sidebar.component.scss']
 })
-export class ChartSidebarComponent implements AfterViewInit {
-  
-  constructor() { }
-  
-  ngAfterViewInit() {
-    $('.ui.dropdown').dropdown()
+export class ChartSidebarComponent {
+
+  selectedVersion: VersionResult
+  charterPlural: string
+
+  private charts: { chartID: number, versions: VersionResult[] }[]
+
+  constructor(private electronService: ElectronService) { }
+
+  async onRowClicked(result: SongResult) {
+    const results = await this.electronService.invoke('song-details', result.id)
+
+    // Group results by chartID
+    this.charts = []
+    for (const result of results) {
+      const matchingChart = this.charts.find(chart => chart.chartID == result.chartID)
+      if (matchingChart != undefined) {
+        matchingChart.versions.push(result)
+      } else {
+        this.charts.push({ chartID: result.chartID, versions: [result] })
+      }
+    }
+
+    this.initChartDropdown()
+  }
+
+  /**
+   * Initializes the chart dropdown from <this.charts> (or removes it if there's only one chart)
+   */
+  private initChartDropdown() {
+    const $chartDropdown = $('#chartDropdown')
+    if (this.charts.length < 2) {
+      $chartDropdown.hide()
+      this.switchChart(this.charts[0].chartID)
+    } else {
+      const values = this.charts.map(chart => {
+        const version = chart.versions[0]
+        return {
+          value: chart.chartID,
+          text: version.avTagName,
+          name: `${version.avTagName} <b>[${version.charters}]</b>`
+        }
+      })
+      $chartDropdown.dropdown('setup menu', { values })
+      $chartDropdown.dropdown('setting', 'onChange', (chartID: number) => this.switchChart(chartID))
+      $chartDropdown.dropdown('set selected', values[0].value)
+      $chartDropdown.show()
+    }
+  }
+
+  /**
+   * Updates the sidebar to display the metadata for the chart with <chartID>.
+   * @param chartID The ID of the chart to display.
+   */
+  private switchChart(chartID: number) {
+    const chart = this.charts.find(chart => chart.chartID == chartID)
+    this.selectedVersion = chart.versions[0]
+    this.charterPlural = this.selectedVersion.charterIDs.split('&').length == 1 ? 'Charter:' : 'Charters:'
+    //TODO init version dropdown
+  }
+
+  getSongLength() {
+    if (this.selectedVersion.song_length == 0) {
+      return 'Unknown'
+    }
+    let seconds = Math.round(this.selectedVersion.song_length / 1000)
+    let minutes = Math.floor(seconds / 60)
+    let hours = 0
+    while (minutes > 59) {
+      hours++
+      minutes -= 60
+    }
+    seconds = Math.floor(seconds % 60)
+    return `${hours == 0 ? '' : hours + ':'}${minutes == 0 ? '' : minutes + ':'}${seconds < 10 ? '0' + seconds : seconds}`
   }
 }

src/app/components/browse/result-table/result-table-row/result-table-row.component.html

@@ -0,0 +1,9 @@
+<td>
+  <div class="ui checkbox">
+    <input type="checkbox">
+  </div>
+</td>
+<td>{{result.name}}</td>
+<td>{{result.artist}}</td>
+<td>{{result.album}}</td>
+<td>{{result.genre}}</td>

src/app/components/browse/result-table/result-table-row/result-table-row.component.scss

@@ -0,0 +1,3 @@
+.ui.checkbox {
+  display: block;
+}

src/app/components/browse/result-table/result-table-row/result-table-row.component.ts

@@ -0,0 +1,17 @@
+import { Component, AfterViewInit, Input } from '@angular/core'
+import { SongResult } from 'src/electron/shared/interfaces/search.interface'
+
+@Component({
+  selector: 'tr[app-result-table-row]',
+  templateUrl: './result-table-row.component.html',
+  styleUrls: ['./result-table-row.component.scss']
+})
+export class ResultTableRowComponent implements AfterViewInit {
+  @Input() result: SongResult
+
+  constructor() { }
+  
+  ngAfterViewInit() {
+    $('.ui.checkbox').checkbox()
+  }
+}

src/app/components/browse/result-table/result-table.component.html

@@ -17,16 +17,10 @@
     </tr>
   </thead>
   <tbody>
-    <tr *ngFor="let result of results">
-      <td>
-        <div class="ui checkbox">
-          <input type="checkbox">
-        </div>
-      </td>
-      <td>{{result.name}}</td>
-      <td>{{result.artist}}</td>
-      <td>{{result.album}}</td>
-      <td>{{result.genre}}</td>
-    </tr>
+    <tr
+    app-result-table-row
+    *ngFor="let result of results"
+    (click)="onRowClicked(result)"
+    [result]="result"></tr>
   </tbody>
 </table>

src/app/components/browse/result-table/result-table.component.ts

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, Input } from '@angular/core'
+import { Component, AfterViewInit, Input, Output, EventEmitter } from '@angular/core'
 import { SongResult } from 'src/electron/shared/interfaces/search.interface'
 
 @Component({
@@ -9,9 +9,15 @@ import { SongResult } from 'src/electron/shared/interfaces/search.interface'
 export class ResultTableComponent implements AfterViewInit {
   @Input() results: SongResult[]
 
+  @Output() rowClicked = new EventEmitter<SongResult>()
+
   constructor() { }
   
   ngAfterViewInit() {
     $('.ui.checkbox').checkbox()
   }
+
+  onRowClicked(result: SongResult) {
+    this.rowClicked.emit(result)
+  }
 }