Add mdi icons

frontend/ng-karaoqueue/angular.json

@@ -21,7 +21,12 @@
             "aot": false,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+               {
+                 "glob": "mdi.svg",
+                 "input": "node_modules/@mdi/angular-material/",
+                 "output": "/assets/"
+               }
             ],
             "styles": [
               "src/custom-theme.scss",
@@ -87,7 +92,12 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "mdi.svg",
+                "input": "node_modules/@mdi/angular-material/",
+                "output": "/assets/"
+              }
             ],
             "styles": [
               "./app/custom-theme.scss",

frontend/ng-karaoqueue/package-lock.json

@@ -2613,6 +2613,11 @@
       "integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==",
       "dev": true
     },
+    "@mdi/angular-material": {
+      "version": "5.0.45",
+      "resolved": "https://registry.npmjs.org/@mdi/angular-material/-/angular-material-5.0.45.tgz",
+      "integrity": "sha512-HGwZRWIk5FhnTERgKMrM/vDct0OEOkZi4lYKuaPsRz2ZAXUOr4amSEMe35uS6M6C0gsOk9ji+y5a1VU0RMnydA=="
+    },
     "@ngtools/webpack": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.0.5.tgz",
@@ -10684,6 +10689,14 @@
         "aproba": "^1.1.1"
       }
     },
+    "runtime-config-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/runtime-config-loader/-/runtime-config-loader-2.0.0.tgz",
+      "integrity": "sha512-RsGycyZCVIZOatFkIkh85APS4LAZhZwTmMPjMN534F3AgrvIYimz9SaQhyOoIM8hIKw4UidPi2VkMu0FZd+t1A==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "rxjs": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",

frontend/ng-karaoqueue/package.json

@@ -22,7 +22,9 @@
     "@angular/platform-browser": "~9.0.5",
     "@angular/platform-browser-dynamic": "~9.0.5",
     "@angular/router": "~9.0.5",
+    "@mdi/angular-material": "^5.0.45",
     "hammerjs": "^2.0.8",
+    "runtime-config-loader": "^2.0.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.11.1",
     "zone.js": "~0.10.2"

frontend/ng-karaoqueue/src/app/app.module.ts

@@ -1,24 +1,54 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTableModule } from '@angular/material/table';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
-import { LayoutModule } from '@angular/cdk/layout';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { MatButtonModule } from '@angular/material/button';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatIconModule } from '@angular/material/icon';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTreeModule } from '@angular/material/tree';
 
 import { HttpClientModule } from '@angular/common/http';
+
+
 import { EntryListingComponent } from './entry-listing/entry-listing.component';
 import { SongSearchComponent } from './song-search/song-search.component';
 
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
+
+import { RuntimeConfigLoaderModule } from 'runtime-config-loader';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -29,19 +59,49 @@ import { SongSearchComponent } from './song-search/song-search.component';
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    MatSliderModule,
-    MatToolbarModule,
-    MatTableModule,
-    MatPaginatorModule,
-    MatSortModule,
-    LayoutModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
     MatButtonModule,
-    MatSidenavModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
     MatIconModule,
+    MatInputModule,
     MatListModule,
-    HttpClientModule
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+    HttpClientModule,
+    RuntimeConfigLoaderModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
+    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
+  }
+}