Update Everything

Update Angular packages 'dependencies' and 'devDependencies' version prefix to '^' instead of '~'.

.vscode/settings.json

@@ -1,3 +1,9 @@
 {
-    "python.pythonPath": "/usr/bin/python"
+    "python.pythonPath": "/usr/bin/python",
+    "files.exclude": {
+        "**/.classpath": true,
+        "**/.project": true,
+        "**/.settings": true,
+        "**/.factorypath": true
+    }
 }

.vscode/tasks.json

@@ -1,5 +1,5 @@
 {
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // See https://go.microsoft.com/fwlink/?LinkId=733558 
     // for the documentation about the tasks.json format
     "version": "2.0.0",
     "tasks": [
@@ -8,6 +8,15 @@
             "type": "shell",
             "command": "echo \"$(git rev-parse --abbrev-ref HEAD)-$(git describe)\"> ${workspaceFolder}/backend/.version",
             "problemMatcher": []
+        },
+        {
+            "label": "Start Frontend",
+            "type": "npm",
+            "script": "start",
+            "path": "frontend/ng-karaoqueue/",
+            "problemMatcher": [
+                "$tsc"
+            ]
         }
     ]
 }

KaraokeWarkeliste.code-workspace

@@ -0,0 +1,13 @@
+{
+	"folders": [
+		{
+			"path": "./frontend/ng-karaoqueue"
+		},
+		{
+			"path": "backend"
+		},
+		{
+			"path": "docs"
+		}
+	]
+}

backend/docker/Dockerfile

@@ -8,4 +8,4 @@ RUN pip install Flask-BasicAuth
 
 RUN pip install bs4
 
-COPY ./app /app
+COPY ../app /app

docs/swagger.yaml

@@ -0,0 +1,392 @@
+openapi: 3.0.2
+info:
+  title: Karaoqueue API
+  version: '0.0.1'
+servers:
+  - url: 'http://localhost:3000/api'
+    description: Local Test sever instance
+  - url: 'https://karaoke.phillipathome.dynv6.net/api'
+    description: Production API    
+
+paths:
+  /queue:
+    get:
+      summary: 'Fetch entry Queue content'
+      description: 'Fetch entry Queue'
+      parameters:
+        - name: index
+          in: query
+          description: Position from which on to return results
+          required: false
+          schema: 
+            type: integer
+        - name: limit
+          in: query
+          description: How many items to return at one time (max 100, default 20)
+          required: false
+          schema:
+            type: integer
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/QueueEntry'
+        '400':
+          description: Invalid request. Check your parameters.
+        '404':
+          description: No Entries found in specified range.
+        '5XX':
+          description: Unexpected error.
+    post:
+      description: 'Add entry to Queue'
+      summary: 'Add entry to Queue'
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                singer_name:
+                  type: string
+                song_id:
+                  type: integer
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  entry_id:
+                    type: string
+                    format: bson.ObjectID
+                    pattern: '/^[a-f\d]{24}$/i'
+                  entry_auth:
+                    type: string
+        '400':
+          description: Malformed request.
+        '405':
+          description: Currently not accepting entries.
+    delete:
+      summary: 'Clear queue'
+      security:
+        - cookieAuth: []
+      responses:
+        '200':
+          description: OK. Successfully cleared Queue
+        '401':
+          description: Not Authorized
+      
+      description: clear queue
+  /queue/{entry_id}:
+    get:
+      summary: GET single queue entry
+      parameters:
+        - in: path
+          name: entry_id
+          schema:
+            type: integer
+          required: true
+          description: ID of the Entry to get
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/QueueEntry'
+    patch:
+      summary: Change entry
+      security:
+        - cookieAuth: []      
+      parameters:
+        - in: path
+          name: entry_id
+          schema:
+            type: string
+            format: bson.ObjectID
+            pattern: '/^[a-f\d]{24}$/i'
+          required: true
+          description: >
+            ID of the entry to modify. One of the following is needed:
+              - Proper Bearer-Token authorization
+              - The entry_auth string corresponding to the entry
+      requestBody:
+        required: false
+        content:
+          application/json:
+            schema: 
+              type: object
+              required:
+                - entry_auth
+              properties:
+                singer_name:
+                  type: string
+                song_id:
+                  type: integer
+                entry_auth:
+                  type: string
+      responses:
+        '200':
+          description: OK
+        '404':
+          description: Entry not found
+        '405':
+          description: Method not allowed. Check your entry_auth or authorization.
+    delete:
+      summary: 'Delete entry'
+      security:
+        - cookieAuth: []
+      parameters:
+        - in: path
+          name: entry_id
+          schema:
+            type: string
+            format: bson.ObjectID
+            pattern: '/^[a-f\d]{24}$/i'
+          required: true
+          description: >
+            ID of the entry to modify.  One of the following is needed:
+              - Proper Bearer-Token authorization
+              - The entry_auth string corresponding to the entry
+      requestBody:
+        required: false
+        content:
+          application/json:
+            schema:
+              type: object
+              required:
+                - entry_auth
+              properties:
+                entry_auth:
+                  type: string
+      responses:
+        '200':
+          description: OK
+        '404':
+          description: Entry not found
+        '405':
+          description: Method not allowed. Check your entry_auth or authorization.
+
+
+  /songs:
+    get:
+      summary: Search in Songs
+      parameters:
+        - in: query
+          name: query
+          schema:
+            type: string
+          required: true
+        - name: limit
+          in: query
+          description: How many items to return at one time (max 100, default 20)
+          required: false
+          schema:
+            type: integer
+      responses:
+        '200':
+          description: OK. An array of Songs according to the Query string.
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/SongEntry'
+        '400':
+          description: Malformed Request
+    put:
+      summary: Update Song Database
+      description: >
+        Trigger an update of the database using the source CSV defined
+        in the config.
+      security:
+        - cookieAuth: []
+      responses:
+        '200': 
+          description: OK. Songs have been updated
+        '401':
+          description: Authorization required. Check your auth.
+  /statistics:
+    get:
+      summary: Statistics about the Database
+      responses:
+        '200':
+          description: Statistics as JSON
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  num_songs:
+                    type: integer
+                  num_entries:
+                    type: integer
+
+  /auth/login:
+    post:
+      summary: Logs in and returns the authentication  cookie
+      requestBody:
+        required: true
+        description: A JSON object containing the login and password.
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/LoginRequest'
+      security: []    # no authentication
+      responses:
+        '200':
+          description: >
+            Successfully authenticated.
+            The session ID is returned in a cookie named `jwt`. You need to include this cookie in subsequent requests.
+          headers: 
+            Set-Cookie:
+              schema: 
+                type: string
+                example: jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiJhZG1pbiIsImlhdCI6MTYwMTY1MDYwNSwiZXhwIjoxNjAxNjU0MjA1fQ.uGvOlBAZdbPT8U9s7jEt5PUWyxLrpgaf02EoPVC_Zlsd; Path=/; HttpOnly
+  /auth/logout:
+    get:
+      summary: Logs the user out and invalidates the session on the server
+      security:
+        - cookieAuth: []
+      responses:
+        '200':
+          description: OK.
+        '401':
+          description: Authorization required.
+
+  /rpc/end_event:
+    get:
+      summary: End the current event
+      description: Locks entries and does not allow reopening without reset
+      security:
+        - cookieAuth: []
+      responses:
+        '200':
+          description: OK.
+        
+  /rpc/start_event:
+    get:
+      summary: Start new event. Clears entries and stats.
+      description: Sets up a clean state.
+      security:
+        - cookieAuth: []
+      responses:
+        '200':
+          description: OK.
+  
+  /rpc/enable_registration:
+    get:
+      summary: Enables registration in the queue
+      description: Makes it possible for guests to register in the queue.
+      security:
+        - cookieAuth: []
+      responses:
+        '200':
+          description: OK.
+      
+    
+  /rpc/disable_registration:
+    get:
+      summary: Disables registration in the queue
+      description: Makes it impossible for guests to register in the queue.
+      security:
+        - cookieAuth: []
+      responses:
+        '200':
+          description: OK.
+
+  /rpc/get_playstats:
+    get:
+      summary: Get stats of played songs in the current event.
+      description: Returns the stats for the current evening as JSON
+      security:
+        - cookieAuth: []
+      responses:
+        '200':
+          description: OK.
+
+  /rpc/download_playstats:
+    get:
+      summary: Get stats of played songs in the current event for download.
+      description: Returns the stats for the current evening as PDF (for example for GEMA)
+      security:
+        - cookieAuth: []
+      responses:
+        '200':
+          description: OK.
+
+  /rpc/entry_fulfilled:
+    get:
+      summary: Mark an entry as fulfilled.
+      description:  Mark an entry as fulfilled. This adds it to the statistics.
+      security:
+        - cookieAuth: []
+      responses:
+        '200':
+          description: OK.
+      parameters:
+        - in: query
+          name: entry_id
+          schema:
+            type: string
+          description: The id of the entry to mark as done.
+
+
+
+components:
+  securitySchemes:
+    cookieAuth:         # arbitrary name for the security scheme; will be used in the "security" key later
+      type: apiKey
+      in: cookie
+      name: jwt  # cookie name
+  schemas:
+    QueueEntry:
+      type: object
+      properties:
+        _id:
+          type: string
+          format: bson.ObjectID
+          pattern: '/^[a-f\d]{24}$/i'
+        singer_name:
+          type: string
+        song_id:
+          type: integer
+    SongEntry:
+      type: object
+      properties:
+        id:
+          type: integer
+        title:
+          type: string
+        artist:
+          type: string
+        year:
+          type: integer
+        duet:
+          type: boolean
+        explicit:
+          type: boolean
+        styles:
+          type: array
+          items:
+            type: string
+        languages:
+          type: array
+          items:
+            type: string
+    LoginRequest:
+      type: object
+      properties:
+        username:
+          type: string
+        password:
+          type: string
+          format: password
+        

frontend/ng-karaoqueue/.vscode/launch.json

@@ -0,0 +1,25 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "type": "firefox",
+        "request": "launch",
+        "reAttach": true,
+        "name": "Launch Firefox against localhost",
+        "url": "http://localhost:4200",
+        "webRoot": "${workspaceFolder}"
+      },
+
+      {
+          "type": "chrome",
+          "request": "launch",
+          "name": "Launch Chrome against localhost",
+          "url": "http://localhost:4200",
+          "webRoot": "${workspaceFolder}",
+          "runtimeExecutable": "/usr/bin/chromium"
+      }
+    ]
+}

frontend/ng-karaoqueue/.vscode/tasks.json

@@ -0,0 +1,26 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "start",
+            "group": "build",
+            "problemMatcher": []
+        },
+        {
+            "type": "npm",
+            "script": "build",
+            "group": "build",
+            "problemMatcher": []
+        },
+        {
+            "type": "npm",
+            "script": "serve",
+            "problemMatcher": [
+                "$tsc"
+            ]
+        }
+    ]
+}

frontend/ng-karaoqueue/angular.json

@@ -0,0 +1,135 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ng-karaoqueue": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/ng-karaoqueue",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": false,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+               {
+                 "glob": "mdi.svg",
+                 "input": "node_modules/@mdi/angular-material/",
+                 "output": "/assets/"
+               }
+            ],
+            "styles": [
+              "src/custom-theme.scss",
+              "src/styles.scss"
+            ],
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          },
+          "defaultConfiguration": ""
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "ng-karaoqueue:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ng-karaoqueue:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ng-karaoqueue:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "mdi.svg",
+                "input": "node_modules/@mdi/angular-material/",
+                "output": "/assets/"
+              }
+            ],
+            "styles": [
+              "./app/custom-theme.scss",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "ng-karaoqueue:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "ng-karaoqueue:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "style": "scss"
+    }
+  }
+}

frontend/ng-karaoqueue/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "ng-karaoqueue",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "serve": "ng serve --host=0.0.0.0",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^14.2.3",
+    "@angular/cdk": "^14.2.2",
+    "@angular/common": "^14.2.3",
+    "@angular/compiler": "^14.2.3",
+    "@angular/core": "^14.2.3",
+    "@angular/forms": "^14.2.3",
+    "@angular/material": "^14.2.2",
+    "@angular/platform-browser": "^14.2.3",
+    "@angular/platform-browser-dynamic": "^14.2.3",
+    "@angular/router": "^14.2.3",
+    "@mdi/angular-material": "^7.0.96",
+    "hammerjs": "^2.0.8",
+    "rxjs": "~7.5.6",
+    "tslib": "^2.4.0",
+    "zone.js": "~0.11.8"
+  },
+  "devDependencies": {
+    "@angular/cli": "^14.2.3",
+    "@angular/compiler-cli": "^14.2.3",
+    "@angular/language-service": "^14.2.3",
+    "@types/jasmine": "~4.3.0",
+    "@types/jasminewd2": "~2.0.10",
+    "@types/node": "~18.7.19",
+    "codelyzer": "^0.0.28",
+    "jasmine-core": "~4.4.0",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "~6.4.1",
+    "karma-chrome-launcher": "~3.1.1",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~10.9.1",
+    "tslint": "~6.1.0",
+    "typescript": "~4.8.3"
+  }
+}

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

@@ -0,0 +1,16 @@
+import { EntryListingComponent } from './entry-listing/entry-listing.component';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { SongSearchComponent } from './song-search/song-search.component';
+
+
+const routes: Routes = [
+  {path: '', component: EntryListingComponent },
+  {path: 'songs', component: SongSearchComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

frontend/ng-karaoqueue/src/app/app.component.html

@@ -0,0 +1,11 @@
+<div>
+  <mat-toolbar color="primary" class="mat-elevation-z6">
+    <span>KaraoQueue</span>
+    <span>&nbsp;</span>
+    <a mat-button routerLink="/" [routerLinkActive]="['is-active']">Warteschlange</a>
+    <a mat-button routerLink="/songs" [routerLinkActive]="['is-active']">Songs</a>
+    <div class="spacer"></div>
+    <a mat-stroked-button>Login</a>
+  </mat-toolbar>
+</div>
+<router-outlet></router-outlet>

frontend/ng-karaoqueue/src/app/app.component.scss

@@ -0,0 +1,7 @@
+.spacer {
+  flex: 1 1 auto;
+}
+
+.is-active {
+  background-color: rgba(255,255,255,0.1);
+}

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

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { RuntimeConfigLoaderService } from 'runtime-config-loader';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnInit{
+
+  constructor(private configSvc: RuntimeConfigLoaderService) {}
+  ngOnInit(): void {
+    console.log("API at ",this.configSvc.getConfigObjectKey("api"));
+  }
+  title = 'KaraoQueue';
+}

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

@@ -0,0 +1,107 @@
+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 { 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 { 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,
+    EntryListingComponent,
+    SongSearchComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    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 {
+  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
+    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
+  }
+}

frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.html

@@ -0,0 +1 @@
+<p>entry-listing works!</p>

frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EntryListingComponent } from './entry-listing.component';
+
+describe('EntryListingComponent', () => {
+  let component: EntryListingComponent;
+  let fixture: ComponentFixture<EntryListingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EntryListingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EntryListingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-entry-listing',
+  templateUrl: './entry-listing.component.html',
+  styleUrls: ['./entry-listing.component.scss']
+})
+export class EntryListingComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/ng-karaoqueue/src/app/entry-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EntryServiceService } from './entry-service.service';
+
+describe('EntryServiceService', () => {
+  let service: EntryServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EntryServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/ng-karaoqueue/src/app/entry-service.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { RuntimeConfigLoaderService } from 'runtime-config-loader';
+import { Entry } from './models/entry.model';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EntryServiceService {
+
+  private api: string;
+  constructor(
+    private http: HttpClient,
+    private configSvc: RuntimeConfigLoaderService
+  ) {
+    this.api = configSvc.getConfigObjectKey("api");
+  }
+
+  getEntries(): Observable<Array<Entry>> {
+      return null; // TODO
+  }
+
+
+}

frontend/ng-karaoqueue/src/app/models/artist.model.ts

@@ -0,0 +1,10 @@
+export class Artist {
+
+  constructor(id: number, name: string) {
+    this.id = id;
+    this.name = name;
+  }
+
+  id: number;
+  name: string;
+}

frontend/ng-karaoqueue/src/app/models/entry.model.ts

@@ -0,0 +1,12 @@
+export class Entry {
+
+  constructor(singer_name: string, song: string, auth_cookie?: string) {
+    this.singer_name=singer_name;
+    this.song=song;
+    this.auth_cookie = auth_cookie;
+  }
+
+  singer_name: string;
+  song: string; //Actually the ID of the Song
+  auth_cookie?: string; //The "cookie" to authenticate for changing an entry. Null otherwise
+}

frontend/ng-karaoqueue/src/app/models/genre.model.ts

@@ -0,0 +1,16 @@
+export class Genre {
+
+  constructor(id: number, name: string) {
+    this.id = id;
+    this._name = name;
+  }
+
+
+  public get name() : string {
+    return this._name;
+  }
+
+
+  id: number; 
+  _name: string;
+}

frontend/ng-karaoqueue/src/app/models/language.model.ts

@@ -0,0 +1,10 @@
+export class Language {
+
+  constructor(id: number, name: string) {
+    this.id = id;
+    this.name = name;
+  }
+
+  id: number;
+  name: string;
+}

frontend/ng-karaoqueue/src/app/models/song.model.ts

@@ -0,0 +1,26 @@
+import { Genre } from './genre.model';
+import { Language } from './language.model';
+import { Artist } from './artist.model';
+
+export class Song {
+
+  constructor(title: string, artist: Artist, karafun_id: number, duet: boolean, explicit: boolean, id: number, genres: Array<String>, languages: Array<String>) {
+    this.title=title;
+    this.artist=artist;
+    this.karafun_id=karafun_id;
+    this.duet=duet;
+    this.explicit=explicit;
+    this.id=id;
+    this.genres=genres;
+    this.languages=languages;
+  }
+
+  title: string;
+  artist: Artist;
+  karafun_id: number;
+  duet: boolean;
+  explicit: boolean;
+  id: number;
+  genres: Array<String>;
+  languages: Array<String>;
+}

frontend/ng-karaoqueue/src/app/song-search/song-search.component.html

@@ -0,0 +1,48 @@
+<div class="content">
+  <mat-form-field class="search-input">
+    <mat-label>Suche...</mat-label>
+    <mat-icon matSuffix svgIcon="magnify"></mat-icon>
+    <input type="text" matInput placeholder="Tippe einen Künstler oder Song..."
+    (keyup)="applyFilter($event.target.value)">
+  </mat-form-field>
+  </div>
+  <div class="resultcontainer">
+    <mat-list *ngFor="let song of songs">
+        <mat-card class="result">
+          <div class="card-left">
+            <mat-card-title>{{song.artist}} - {{song.title}}</mat-card-title>
+            <div class="song-info">
+              <div class="info-icons">
+                <ng-template [ngIf]="song.duet==true" [ngIfElse]="nonduet">
+                  <mat-icon svgIcon="account-multiple"></mat-icon>
+                </ng-template>
+                <ng-template #nonduet>
+                  <mat-icon svgIcon="account"></mat-icon>
+                </ng-template>
+                <ng-template [ngIf]="song.explicit==true" [ngIfElse]="nonexplicit">
+                  <mat-icon svgIcon="alpha-e-box"></mat-icon>
+                </ng-template>
+                <ng-template #nonexplicit>
+                  <mat-icon svgIcon="alpha-e-box" class="icon-disabled"></mat-icon>
+                </ng-template>
+              </div>
+              <div class="genre-list">
+                <mat-icon svgIcon="music-circle"></mat-icon>
+                <mat-chip-list *ngFor="let genre of song.genres">
+                  <mat-chip>{{genre}}</mat-chip>
+                </mat-chip-list>
+              </div>
+              <div class="language-list">
+                <mat-icon svgIcon="account-voice"></mat-icon>
+                <mat-chip-list *ngFor="let language of song.languages">
+                  <mat-chip>{{language}}</mat-chip>
+                </mat-chip-list>
+              </div>
+            </div>
+          </div>
+          <button mat-flat-button color="accent" class="add-button">
+            <mat-icon svgIcon="playlist-plus"></mat-icon>
+          </button>
+        </mat-card>
+    </mat-list>
+  </div>

frontend/ng-karaoqueue/src/app/song-search/song-search.component.scss

@@ -0,0 +1,120 @@
+.search-input {
+  width: 95%;
+  margin-top: 1rem;
+}
+
+.add-button {
+  height: 3rem;
+}
+
+.content {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+}
+
+.resultcontainer {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.result {
+  margin-left: auto;
+  margin-right: auto;
+  width: 90%;
+  margin-top: 0.2rem;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  flex-direction: column;
+}
+
+.card-left {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.song-info {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.song-info > * {
+  margin-right: 0.5rem;
+}
+
+.icon-disabled {
+  opacity: 0.1;
+}
+
+.genre-list > mat-icon {
+  padding-right: 0.25rem;
+}
+
+.genre-list mat-chip-list {
+  margin-right: 0.15rem;
+}
+
+.genre-list {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 0.25rem;
+  align-items: center;
+  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 2px,rgba(0,0,0,1) calc(100% - 2px),rgba(0,0,0,0) 100%);
+  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 2px,rgba(0,0,0,1) calc(100% - 2px),rgba(0,0,0,0) 100%);
+  -ms-overflow-style: none;
+}
+
+.language-list > mat-icon {
+  padding-right: 0.25rem;
+}
+
+.language-list mat-chip-list {
+  margin-right: 0.15rem;
+}
+
+.genre-list::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+  display: none;
+}
+
+.language-list {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 0.25rem;
+  align-items: center;
+  -ms-overflow-style: none;
+}
+
+
+
+.language-list::-webkit-scrollbar {
+  display: none;
+}
+
+
+$breakpoint-tablet: 768px;
+@media (min-width: $breakpoint-tablet) {
+  .result {
+    flex-direction: row;
+
+  }
+
+  .add-button {
+    height: 6.5rem;
+    width: 4rem;
+    align-self: center;
+  }
+}

frontend/ng-karaoqueue/src/app/song-search/song-search.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SongSearchComponent } from './song-search.component';
+
+describe('SongSearchComponent', () => {
+  let component: SongSearchComponent;
+  let fixture: ComponentFixture<SongSearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SongSearchComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SongSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/ng-karaoqueue/src/app/song-search/song-search.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { SongServiceService } from "../song-service.service";
+import { Song } from '../models/song.model';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-song-search',
+  templateUrl: './song-search.component.html',
+  styleUrls: ['./song-search.component.scss']
+})
+export class SongSearchComponent implements OnInit {
+
+  private searchSub$ = new Subject<string>();
+
+  constructor(private songServiceService: SongServiceService) { }
+
+  songs: Array<Song> = new Array<Song>();
+
+  updateSongs(text: string) {
+    this.songServiceService.searchSongByText(text).subscribe(x => {
+      console.log(x);
+      this.songs = x;
+    });
+  }
+
+  applyFilter(filterValue: string) {
+    this.searchSub$.next(filterValue)
+  }
+
+  ngOnInit(): void {
+    this.searchSub$.pipe(
+      debounceTime(400),
+      distinctUntilChanged()
+    ).subscribe((filterValue: string) => {
+      this.updateSongs(filterValue);
+    });
+
+    //Für Testzwecke
+    this.updateSongs("Test");
+  }
+
+}

frontend/ng-karaoqueue/src/app/song-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SongServiceService } from './song-service.service';
+
+describe('SongServiceService', () => {
+  let service: SongServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SongServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/ng-karaoqueue/src/app/song-service.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { Song } from './models/song.model';
+import { Artist } from './models/artist.model';
+import { Genre } from './models/genre.model';
+import { Language } from './models/language.model';
+import { RuntimeConfigLoaderService } from 'runtime-config-loader';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SongServiceService {
+
+  private api: string;
+  constructor(
+    private http: HttpClient,
+    private configSvc: RuntimeConfigLoaderService
+  ) {
+    this.api=configSvc.getConfigObjectKey("api");
+  }
+
+  searchSongByText(text: string): Observable<Array<Song>> {
+
+
+    let out = new Array<Song>();
+
+    this.http.get(this.api +"/songs/compl?search="+text).subscribe((data: Observable<JSON>) => {
+      data.forEach(element => {
+        out.push(new Song(element["title"],element["artist"],element["karafun_id"],element["duo"],element["explicit"],element["_id"],element["styles"],element["languages"]));
+      });
+    });
+
+    const observable = new Observable<Array<Song>>( subscriber => {
+      subscriber.next(out);
+    })
+
+
+    return observable;
+  }
+
+}

frontend/ng-karaoqueue/src/assets/config.json

@@ -0,0 +1,3 @@
+{
+  "api":"http://localhost:5000/api"
+}

frontend/ng-karaoqueue/src/custom-theme.scss

@@ -0,0 +1,280 @@
+/**
+* Generated theme by Material Theme Generator
+* https://materialtheme.arcsine.dev
+*/
+
+@import '@angular/material/theming';
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+
+// Fonts
+@import 'https://fonts.googleapis.com/css?family=Material+Icons';
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
+
+$fontConfig: (
+  display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
+  display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
+  display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
+  display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
+  headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
+  title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
+  subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
+  subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
+  body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
+  body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
+  button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
+  caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
+  input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
+);
+
+// Foreground Elements
+
+// Light Theme Text
+$dark-text: #000000;
+$dark-primary-text: rgba($dark-text, 0.87);
+$dark-accent-text: rgba($dark-primary-text, 0.54);
+$dark-disabled-text: rgba($dark-primary-text, 0.38);
+$dark-dividers: rgba($dark-primary-text, 0.12);
+$dark-focused: rgba($dark-primary-text, 0.12);
+
+$mat-light-theme-foreground: (
+  base:              black,
+  divider:           $dark-dividers,
+  dividers:          $dark-dividers,
+  disabled:          $dark-disabled-text,
+  disabled-button:   rgba($dark-text, 0.26),
+  disabled-text:     $dark-disabled-text,
+  elevation:         black,
+  secondary-text:    $dark-accent-text,
+  hint-text:         $dark-disabled-text,
+  accent-text:       $dark-accent-text,
+  icon:              $dark-accent-text,
+  icons:             $dark-accent-text,
+  text:              $dark-primary-text,
+  slider-min:        $dark-primary-text,
+  slider-off:        rgba($dark-text, 0.26),
+  slider-off-active: $dark-disabled-text,
+);
+
+// Dark Theme text
+$light-text: #ffffff;
+$light-primary-text: $light-text;
+$light-accent-text: rgba($light-primary-text, 0.7);
+$light-disabled-text: rgba($light-primary-text, 0.5);
+$light-dividers: rgba($light-primary-text, 0.12);
+$light-focused: rgba($light-primary-text, 0.12);
+
+$mat-dark-theme-foreground: (
+  base:              $light-text,
+  divider:           $light-dividers,
+  dividers:          $light-dividers,
+  disabled:          $light-disabled-text,
+  disabled-button:   rgba($light-text, 0.3),
+  disabled-text:     $light-disabled-text,
+  elevation:         black,
+  hint-text:         $light-disabled-text,
+  secondary-text:    $light-accent-text,
+  accent-text:       $light-accent-text,
+  icon:              $light-text,
+  icons:             $light-text,
+  text:              $light-text,
+  slider-min:        $light-text,
+  slider-off:        rgba($light-text, 0.3),
+  slider-off-active: rgba($light-text, 0.3),
+);
+
+// Background config
+// Light bg
+$light-background:    #fafafa;
+$light-bg-darker-5:   darken($light-background, 5%);
+$light-bg-darker-10:  darken($light-background, 10%);
+$light-bg-darker-20:  darken($light-background, 20%);
+$light-bg-darker-30:  darken($light-background, 30%);
+$light-bg-lighter-5:  lighten($light-background, 5%);
+$dark-bg-tooltip:     lighten(#2c2c2c, 20%);
+$dark-bg-alpha-4:     rgba(#2c2c2c, 0.04);
+$dark-bg-alpha-12:    rgba(#2c2c2c, 0.12);
+
+$mat-light-theme-background: (
+  background:               $light-background,
+  status-bar:               $light-bg-darker-20,
+  app-bar:                  $light-bg-darker-5,
+  hover:                    $dark-bg-alpha-4,
+  card:                     $light-bg-lighter-5,
+  dialog:                   $light-bg-lighter-5,
+  tooltip:                  $dark-bg-tooltip,
+  disabled-button:          $dark-bg-alpha-12,
+  raised-button:            $light-bg-lighter-5,
+  focused-button:           $dark-focused,
+  selected-button:          $light-bg-darker-20,
+  selected-disabled-button: $light-bg-darker-30,
+  disabled-button-toggle:   $light-bg-darker-10,
+  unselected-chip:          $light-bg-darker-10,
+  disabled-list-option:     $light-bg-darker-10,
+);
+
+// Dark bg
+$dark-background:     #2c2c2c;
+$dark-bg-lighter-5:   lighten($dark-background, 5%);
+$dark-bg-lighter-10:  lighten($dark-background, 10%);
+$dark-bg-lighter-20:  lighten($dark-background, 20%);
+$dark-bg-lighter-30:  lighten($dark-background, 30%);
+$light-bg-alpha-4:    rgba(#fafafa, 0.04);
+$light-bg-alpha-12:   rgba(#fafafa, 0.12);
+
+// Background palette for dark themes.
+$mat-dark-theme-background: (
+  background:               $dark-background,
+  status-bar:               $dark-bg-lighter-20,
+  app-bar:                  $dark-bg-lighter-5,
+  hover:                    $light-bg-alpha-4,
+  card:                     $dark-bg-lighter-5,
+  dialog:                   $dark-bg-lighter-5,
+  tooltip:                  $dark-bg-lighter-20,
+  disabled-button:          $light-bg-alpha-12,
+  raised-button:            $dark-bg-lighter-5,
+  focused-button:           $light-focused,
+  selected-button:          $dark-bg-lighter-20,
+  selected-disabled-button: $dark-bg-lighter-30,
+  disabled-button-toggle:   $dark-bg-lighter-10,
+  unselected-chip:          $dark-bg-lighter-20,
+  disabled-list-option:     $dark-bg-lighter-10,
+);
+
+// Compute font config
+@include mat-core($fontConfig);
+
+// Theme Config
+
+body {
+  --primary-color: #090a28;
+  --primary-lighter-color: #b5b6bf;
+  --primary-darker-color: #050518;
+  --text-primary-color: #{$light-primary-text};
+  --text-primary-lighter-color: #{$dark-primary-text};
+  --text-primary-darker-color: #{$light-primary-text};
+}
+
+$mat-primary: (
+  main: #090a28,
+  lighter: #b5b6bf,
+  darker: #050518,
+  200: #090a28, // For slide toggle,
+  contrast : (
+    main: $light-primary-text,
+    lighter: $dark-primary-text,
+    darker: $light-primary-text,
+  )
+);
+$theme-primary: mat-palette($mat-primary, main, lighter, darker);
+
+body {
+  --accent-color: #b70000;
+  --accent-lighter-color: #e9b3b3;
+  --accent-darker-color: #9f0000;
+  --text-accent-color: #{$light-primary-text};
+  --text-accent-lighter-color: #{$dark-primary-text};
+  --text-accent-darker-color: #{$light-primary-text};
+}
+
+$mat-accent: (
+  main: #b70000,
+  lighter: #e9b3b3,
+  darker: #9f0000,
+  200: #b70000, // For slide toggle,
+  contrast : (
+    main: $light-primary-text,
+    lighter: $dark-primary-text,
+    darker: $light-primary-text,
+  )
+);
+$theme-accent: mat-palette($mat-accent, main, lighter, darker);
+
+body {
+  --warn-color: #ffc600;
+  --warn-lighter-color: #ffeeb3;
+  --warn-darker-color: #ffb100;
+  --text-warn-color: #{$dark-primary-text};
+  --text-warn-lighter-color: #{$dark-primary-text};
+  --text-warn-darker-color: #{$dark-primary-text};
+}
+
+$mat-warn: (
+  main: #ffc600,
+  lighter: #ffeeb3,
+  darker: #ffb100,
+  200: #ffc600, // For slide toggle,
+  contrast : (
+    main: $dark-primary-text,
+    lighter: $dark-primary-text,
+    darker: $dark-primary-text,
+  )
+);
+$theme-warn: mat-palette($mat-warn, main, lighter, darker);;
+
+$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
+$altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
+
+// Theme Init
+@include angular-material-theme($theme);
+
+.theme-alternate {
+  @include angular-material-theme($altTheme);
+}
+
+// Specific component overrides, pieces that are not in line with the general theming
+
+// Handle buttons appropriately, with respect to line-height
+.mat-raised-button, .mat-stroked-button, .mat-flat-button {
+  padding: 0 1.15em;
+  margin: 0 .65em;
+  min-width: 3em;
+  line-height: 36.4px
+}
+
+.mat-standard-chip {
+  padding: .5em .85em;
+  min-height: 2.5em;
+}
+
+.material-icons {
+  font-size: 24px;
+  font-family: 'Material Icons', 'Material Icons';
+  .mat-badge-content {
+    font-family: 'Roboto';
+  }
+}
+
+mat-form-field.mat-form-field {
+&.mat-focused {
+  .mat-form-field-label {
+      color: $light-text;
+  }
+  .mat-form-field-ripple {
+      background-color: $light-text !important;
+  }
+}
+.mat-form-field-label.mat-focused,
+.mat-form-field.mat-focused.matform-field-should-float {
+    color: $light-text;
+}
+
+.mat-form-field-underline, .mat-form-field-label {
+  color: $light-accent-text;
+}
+
+.mat-form-field-underline.mat-focused {
+    background-color: $light-text;
+  }
+}
+
+button.mat-menu-item {
+  line-height: 24px !important;
+}
+a.mat-menu-item > mat-icon {
+  margin-bottom: 14px;
+}
+.mat-icon svg {
+  height: 24px;
+  width: 24px;
+}

frontend/ng-karaoqueue/src/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>NgKaraoqueue</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body class="mat-typography mat-app-background">
+  <app-root></app-root>
+</body>
+</html>

frontend/ng-karaoqueue/src/styles.scss

@@ -0,0 +1,10 @@
+/* You can add global styles to this file, and also import other style files */
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}

frontend/ng-karaoqueue/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/app/app.module.ts",
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

frontend/ng-karaoqueue/tsconfig.json

@@ -0,0 +1,32 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+      "baseUrl": "./",
+      "outDir": "./dist/out-tsc",
+      "forceConsistentCasingInFileNames": true,
+      "strict": true,
+      "noImplicitOverride": true,
+      "noPropertyAccessFromIndexSignature": true,
+      "noImplicitReturns": true,
+      "noFallthroughCasesInSwitch": true,
+      "sourceMap": true,
+      "declaration": false,
+      "downlevelIteration": true,
+      "experimentalDecorators": true,
+      "moduleResolution": "node",
+      "importHelpers": true,
+      "target": "es2020",
+      "module": "es2020",
+      "lib": [
+        "es2020",
+        "dom"
+      ]
+    },
+    "angularCompilerOptions": {
+      "enableI18nLegacyMessageIdFormat": false,
+      "strictInjectionParameters": true,
+      "strictInputAccessModifiers": true,
+      "strictTemplates": true
+    }
+  }

frontend/ng-karaoqueue/tsconfig.spec.json

@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}