Initial Browse UI and initial song search

src/app/app.component.html

@@ -1,2 +1,4 @@
-<app-toolbar></app-toolbar>
-<router-outlet></router-outlet>
+<div style="display: flex; flex-direction: column; height: 100%;">
+  <app-toolbar></app-toolbar>
+  <router-outlet></router-outlet>
+</div>

src/app/app.module.ts

@@ -4,13 +4,21 @@ import { NgModule } from '@angular/core'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { ToolbarComponent } from './components/toolbar/toolbar.component'
-import { BrowseComponent } from './components/browse/browse.component'
+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'
 
 @NgModule({
   declarations: [
     AppComponent,
     ToolbarComponent,
-    BrowseComponent
+    BrowseComponent,
+    SearchBarComponent,
+    StatusBarComponent,
+    ResultTableComponent,
+    ChartSidebarComponent
   ],
   imports: [
     BrowserModule,

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

@@ -1 +1,12 @@
-<p>browse works!</p>
+<app-search-bar (resultsUpdated)="resultTable.results = $event"></app-search-bar>
+<div class="ui celled two column grid">
+  <div class="row">
+    <div class="column twelve wide">
+      <app-result-table #resultTable></app-result-table>
+    </div>
+    <div id="sidebar-column" class="column four wide">
+      <app-chart-sidebar></app-chart-sidebar>
+    </div>
+  </div>
+</div>
+<app-status-bar></app-status-bar>

src/app/components/browse/browse.component.scss

@@ -0,0 +1,16 @@
+:host {
+  display: contents;
+}
+
+.ui.celled.grid {
+  flex-grow: 1;
+  margin: 0;
+}
+
+#sidebar-column {
+  display: flex;
+}
+
+.ui.celled.grid > .row > .column {
+  padding: 0;
+}

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

@@ -0,0 +1,31 @@
+<div class="ui fluid card">
+  <div class="ui placeholder">
+    <div class="square image"></div>
+  </div>
+  <div 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="0">Chart 2</div>
+    </div>
+  </div>
+  <div id="textPanel" class="content">
+    <span class="header">Funknitium-99</span>
+    <div class="meta">
+      <span>Fearofdark</span>
+    </div>
+  </div>
+  <div class="ui positive buttons">
+    <div class="ui button">Download Latest</div>
+    <div id="versionButton" class="ui floating dropdown icon button">
+      <i class="dropdown icon"></i>
+      <div class="menu">
+        <div class="item">Version 1</div>
+        <div class="item">Version 2</div>
+        <div class="item">Version 3</div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+:host {
+  display: contents;
+}
+
+.ui.card {
+  display: flex;
+  flex-direction: column;
+}
+
+#textPanel {
+  flex-grow: 1;
+}
+
+#versionButton {
+  max-width: 30px;
+}

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

@@ -0,0 +1,15 @@
+import { Component, AfterViewInit } from '@angular/core'
+
+@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()
+  }
+}

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

@@ -0,0 +1,30 @@
+<table class="ui unstackable selectable single line striped celled table">
+  <thead>
+    <tr>
+      <th class="collapsing">
+        <div class="ui checkbox">
+          <input type="checkbox">
+        </div>
+      </th>
+      <th>Name</th>
+      <th>Artist</th>
+      <th>Album</th>
+      <th>Genre</th>
+      <th>Year</th>
+    </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>
+      <td>{{result.year}}</td>
+    </tr>
+  </tbody>
+</table>

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

@@ -0,0 +1,4 @@
+.ui.checkbox {
+  display: block;
+  max-width: 17px;
+}

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

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

src/app/components/browse/search-bar/search-bar.component.html

@@ -0,0 +1,26 @@
+<div class="ui bottom attached borderless menu">
+  <div class="item">
+    <!-- TODO: refactor this html into multiple sub-components -->
+    <!-- TODO: add advanced search -->
+    <div class="ui icon input">
+      <input #searchBox type="text" placeholder=" Search..." (keyup.enter)="onSearch(searchBox.value)">
+      <i class="search icon"></i>
+    </div>
+  </div>
+    <div #typeDropdown class="ui item dropdown">
+      Type <i class="dropdown icon"></i>
+      <div class="menu">
+        <!-- TODO: revise what items are displayed -->
+        <a class="item">Any</a>
+        <a class="item">Name</a>
+        <a class="item">Artist</a>
+        <a class="item">Album</a>
+        <a class="item">Genre</a>
+        <a class="item">Year</a>
+        <a class="item">Charter</a>
+      </div>
+  </div>
+  <div class="item right">
+    <button class="ui positive disabled button">Bulk Download</button>
+  </div>
+</div>

src/app/components/browse/search-bar/search-bar.component.ts

@@ -0,0 +1,24 @@
+import { Component, AfterViewInit, Output, EventEmitter } from '@angular/core'
+import { ElectronService } from 'src/app/core/services/electron.service'
+import { SearchType, SongResult } from 'src/electron/shared/interfaces/search.interface'
+
+@Component({
+  selector: 'app-search-bar',
+  templateUrl: './search-bar.component.html',
+  styleUrls: ['./search-bar.component.scss']
+})
+export class SearchBarComponent implements AfterViewInit {
+  @Output() resultsUpdated = new EventEmitter<SongResult[]>()
+
+  constructor(private electronService: ElectronService) { }
+
+  ngAfterViewInit() {
+    $('.ui.dropdown').dropdown()
+  }
+
+  async onSearch(query: string) {
+    const results = await this.electronService.invoke('song-search', { query, type: SearchType.Any })
+
+    this.resultsUpdated.emit(results)
+  }
+}

src/app/components/browse/status-bar/status-bar.component.html

@@ -0,0 +1,14 @@
+<div class="ui bottom borderless menu">
+  <div class="item">42 Results</div>
+  <div class="item">
+    <button class="ui positive button">Download Selected</button>
+  </div>
+
+  <a class="item right">
+    <div #progressBar class="ui progress">
+      <div class="bar">
+        <div class="progress"></div>
+      </div>
+    </div>
+  </a>
+</div>

src/app/components/browse/status-bar/status-bar.component.scss

@@ -0,0 +1,4 @@
+.ui.progress {
+  margin: 0;
+  min-width: 200px;
+}

src/app/components/browse/status-bar/status-bar.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-status-bar',
+  templateUrl: './status-bar.component.html',
+  styleUrls: ['./status-bar.component.scss']
+})
+export class StatusBarComponent {
+
+  constructor() { }
+
+}

src/app/components/toolbar/toolbar.component.html

@@ -1,4 +1,4 @@
-<div class="ui top fixed menu">
+<div class="ui top menu">
   <a class="item" routerLinkActive="active" routerLink="/browse">Browse</a>
   <a class="item" routerLinkActive="active" routerLink="/library">Library</a>
   <a class="item" routerLinkActive="active" routerLink="/settings">Settings</a>

src/assets/semantic/jqueryImport.js

@@ -1,2 +1,2 @@
 // @ts-nocheck BS that is required for semantic to work
-window.jQuery = require('jquery')
+window.jQuery = $ = require('jquery')

src/electron/ipc/SearchHandler.ipc.ts

@@ -0,0 +1,31 @@
+import { IPCHandler } from '../shared/IPCHandler'
+import Database from '../shared/Database'
+import { SongSearch, SearchType, SongResult } from '../shared/interfaces/search.interface'
+import { escape } from 'mysql'
+
+export default class SearchHandler implements IPCHandler<'song-search'> {
+  event: 'song-search' = 'song-search'
+  // TODO: add method documentation
+
+  async handler(search: SongSearch) {
+    const db = await Database.getInstance()
+
+    return db.sendQuery(this.getSearchQuery(search)) as Promise<SongResult[]>
+  }
+
+  private getSearchQuery(search: SongSearch) {
+    switch(search.type) {
+      case SearchType.Any: return this.getGeneralSearchQuery(search.query)
+      default: return '<<<ERROR>>>' // TODO: add more search types
+    }
+  }
+
+  private getGeneralSearchQuery(searchString: string) {
+    return `
+      SELECT id, name, artist, album, genre, year
+      FROM Song
+      WHERE MATCH (name,artist,album,genre) AGAINST (${escape(searchString)}) > 0
+      LIMIT ${20} OFFSET ${0};
+    ` // TODO: add parameters for the limit and offset
+  }
+}

src/electron/ipc/TestHandler.ipc.ts

@@ -1,11 +0,0 @@
-import { IPCHandler } from '../shared/IPCHandler'
-import { TestInput } from '../shared/interfaces/test.interface'
-
-export default class TestHandler implements IPCHandler<'test-event-A'> {
-  event = 'test-event-A' as 'test-event-A'
-  async handler(data: TestInput) {
-    await new Promise<void>((resolve) => setTimeout(() => resolve(), 3000))
-
-    return `Processed data with value1 = ${data.value1} and value2 + 5 = ${data.value2 + 5}`
-  }
-}

src/electron/shared/Database.ts

@@ -0,0 +1,74 @@
+import { Connection, createConnection } from 'mysql'
+import { failQuery } from './ErrorMessages'
+
+export default class Database {
+
+  // Singleton
+  private static database: Database
+  private constructor() { }
+  static async getInstance() {
+    if (this.database == undefined) {
+      this.database = new Database()
+    }
+    await this.database.initDatabaseConnection()
+    return this.database
+  }
+
+  private conn: Connection
+
+  /**
+  * Constructs a database connection to the chartmanager database.
+  */
+  private async initDatabaseConnection() {
+    this.conn = createConnection({
+      host: 'chartmanager.cdtrqnlcxz86.us-east-1.rds.amazonaws.com',
+      port: 3306,
+      user: 'standarduser',
+      password: 'E4OZXWDPiX9exUpMhcQq', // Note: this login is read-only
+      database: 'chartmanagerdatabase',
+      multipleStatements: true,
+      charset: 'utf8mb4',
+      typeCast: (field, next) => { // Convert 1/0 to true/false
+        if (field.type == 'TINY' && field.length == 1) {
+          return (field.string() == '1') // 1 = true, 0 = false
+        } else {
+          return next()
+        }
+      }
+    })
+
+    return new Promise<void>((resolve, reject) => {
+      this.conn.connect(err => {
+        if (err) {
+          reject(`Failed to connect to database: ${err}`)
+          return
+        } else {
+          resolve()
+        }
+      })
+    })
+  }
+
+  /**
+   * Sends <query> to the database.
+   * @param query The query string to be sent.
+   * @param queryStatement The nth response statement to be returned.
+   * @returns one of the responses as type <ResponseType[]>, or an empty array if the query fails.
+   */
+  async sendQuery<ResponseType>(query: string, queryStatement?: number) {
+    return new Promise<ResponseType[]>(resolve => {
+      this.conn.query(query, (err, results) => {
+        if (err) {
+          failQuery(query, err)
+          resolve([])
+          return
+        }
+        if (queryStatement !== undefined) {
+          resolve(results[queryStatement - 1])
+        } else {
+          resolve(results)
+        }
+      })
+    })
+  }
+}

src/electron/shared/ErrorMessages.ts

@@ -0,0 +1,124 @@
+import { red } from 'cli-color'
+import { getRelativeFilepath } from './UtilFunctions'
+
+// TODO: add better error reporting (through the UI)
+
+/**
+ * Displays an error message for reading files in the song folder
+ */
+export function failReadRelative(filepath: string, error: any) {
+  console.error(`${red('ERROR:')} Failed to read files inside song folder (${getRelativeFilepath(filepath)}):\n${error}`)
+}
+
+/**
+ * Displays an error message for reading files
+ */
+export function failRead(filepath: string, error: any) {
+  console.error(`${red('ERROR:')} Failed to read files inside song folder (${filepath}):\n${error}`)
+}
+
+/**
+ * Displays an error message for writing files
+ */
+export function failWrite(filepath: string, error: any) {
+  console.error(`${red('ERROR:')} Failed to write to file (${getRelativeFilepath(filepath)}):\n${error}`)
+}
+
+/**
+ * Displays an error message for opening files
+ */
+export function failOpen(filepath: string, error: any) {
+  console.error(`${red('ERROR:')} Failed to open file (${getRelativeFilepath(filepath)}):\n${error}`)
+}
+
+/**
+ * Displays an error message for deleting folders
+ */
+export function failDelete(filepath: string, error: any) {
+  console.error(`${red('ERROR:')} Failed to delete folder (${getRelativeFilepath(filepath)}):\n${error}`)
+}
+
+/**
+ * Displays an error message for opening text files
+ */
+export function failEncoding(filepath: string, error: any) {
+  console.error(`${red('ERROR:')} Failed to read text file (${getRelativeFilepath(filepath)
+    }):\nJavaScript cannot parse using the detected text encoding of (${error})`)
+}
+
+/**
+ * Displays an error message for failing to parse an .ini file
+ */
+export function failParse(filepath: string, error: any) {
+  console.error(`${red('ERROR:')} Failed to parse ini file (${getRelativeFilepath(filepath)}):\n${error}`)
+}
+
+/**
+ * Displays an error message for processing a query
+ */
+export function failQuery(query: string, error: any) {
+  console.error(`${red('ERROR:')} Failed to execute query:\n${query}\nWith error:\n${error}`)
+}
+
+/**
+ * Displays an error message for connecting to the database
+ */
+export function failDatabase(error: any) {
+  console.error(`${red('ERROR:')} Failed to connect to database:\n${error}`)
+}
+
+/**
+ * Displays an error message for connecting to the database
+ */
+export function failTimeout(type: string, url: string, maxAttempts: number) {
+  console.error(`${red('ERROR:')} Failed to connect to download server at (\n${url}) after ${maxAttempts} retry attempts. [type=${type}]`)
+}
+
+/**
+ * Displays an error message for connecting to the database
+ */
+export function failResponse(statusCode: string, url: string) {
+  console.error(`${red('ERROR:')} Failed to connect to download server at (\n${url}) [statusCode=${statusCode}]`)
+}
+
+/**
+ * Displays an error message for processing audio files
+ */
+export function failFFMPEG(audioFile: string, error: any) {
+  console.error(`${red('ERROR:')} Failed to process audio file (${getRelativeFilepath(audioFile)}):\n${error}`)
+}
+
+/**
+ * Displays an error message for failing to create multiple threads
+ */
+export function failMultithread(error: any) {
+  console.error(`${red('ERROR:')} Failed to create multiple threads:\n${error}`)
+}
+
+/**
+ * Displays an error message for replacing files
+ */
+export function failReplace(filepath: string, error: any) {
+  console.error(`${red('ERROR:')} Failed to rewrite file (${getRelativeFilepath(filepath)}):\n${error}`)
+}
+
+/**
+ * Displays an error message for downloading charts
+ */
+export function failDownload(error: any) {
+  console.error(`${red('ERROR:')} Failed to download chart:\n${error}`)
+}
+
+/**
+ * Displays an error message for reading files
+ */
+export function failScan(filepath: string) {
+  console.error(`${red('ERROR:')} The specified library folder contains no files (${filepath})`)
+}
+
+/**
+ * Displays an error message for failing to unzip an archived file
+ */
+export function failUnzip(filepath: string, error: any) {
+  console.error(`${red('ERROR:')} Failed to extract archive at (${filepath}):\n${error}`)
+}

src/electron/shared/IPCHandler.ts

@@ -1,5 +1,5 @@
-import TestHandler from '../ipc/TestHandler.ipc'
-import { TestInput } from './interfaces/test.interface'
+import SearchHandler from '../ipc/SearchHandler.ipc'
+import { SongSearch, SongResult } from './interfaces/search.interface'
 
 /**
  * To add a new IPC listener:
@@ -11,14 +11,14 @@ import { TestInput } from './interfaces/test.interface'
 
 export function getIPCHandlers(): IPCHandler<keyof IPCEvents>[] {
   return [
-    new TestHandler()
+    new SearchHandler()
   ]
 }
 
 export type IPCEvents = {
-  ['test-event-A']: {
-    input: TestInput
-    output: string
+  ['song-search']: {
+    input: SongSearch
+    output: SongResult[]
   }
   ['test-event-B']: {
     input: number

src/electron/shared/Settings.ts

@@ -0,0 +1,19 @@
+export class Settings {
+
+  // Singleton
+  private constructor() { }
+  private static settings: Settings
+  static async getInstance() {
+    if (this.settings == undefined) {
+      this.settings = new Settings()
+    }
+    await this.settings.initSettings()
+    return this.settings
+  }
+
+  songsFolderPath: string
+
+  private async initSettings() {
+    // TODO: load settings from settings file or set defaults
+  }
+}

src/electron/shared/UtilFunctions.ts

@@ -0,0 +1,15 @@
+import { basename } from 'path'
+import { Settings } from './Settings'
+
+const settings = Settings.getInstance()
+
+/**
+ * @param absoluteFilepath The absolute filepath to a folder
+ * @returns The relative filepath from the scanned folder to <absoluteFilepath>
+ */
+export function getRelativeFilepath(absoluteFilepath: string) {
+  // TODO: figure out how these functions should use <settings> (like an async initialization script that
+  //          loads everything and connects to the database, etc...)
+  // return basename(scanSettings.songsFolderPath) + absoluteFilepath.substring(scanSettings.songsFolderPath.length)
+  return absoluteFilepath
+}

src/electron/shared/interfaces/search.interface.ts

@@ -0,0 +1,17 @@
+export interface SongSearch {
+  query: string
+  type: SearchType
+}
+
+export enum SearchType {
+  'Any', 'Name', 'Artist', 'Album', 'Genre', 'Year', 'Charter'
+}
+
+export interface SongResult {
+  id: number
+  name: string
+  artist: string
+  album: string
+  genre: string
+  year: string
+}

src/electron/shared/interfaces/test.interface.ts

@@ -1,4 +0,0 @@
-export interface TestInput {
-  value1: string
-  value2: number
-}

src/typings.d.ts

@@ -6,6 +6,7 @@ interface NodeModule {
 
 // @ts-ignore
 declare var window: Window
+declare var $: any
 interface Window {
   process: any
   require: any