Update npm packages for frontend

.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

@@ -0,0 +1,15 @@
+{
+    // 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",
+            "path": "frontend/ng-karaoqueue/",
+            "problemMatcher": [
+                "$tsc"
+            ]
+        }
+    ]
+}

frontend/ng-karaoqueue/angular.json

@@ -24,7 +24,7 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/custom-theme.scss",
               "src/styles.css"
             ],
             "scripts": []

frontend/ng-karaoqueue/package.json

@@ -11,40 +11,40 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.2.14",
+    "@angular/animations": "~9.0.5",
-    "@angular/cdk": "~8.2.3",
+    "@angular/cdk": "~9.1.2",
-    "@angular/common": "~8.2.14",
+    "@angular/common": "~9.0.5",
-    "@angular/compiler": "~8.2.14",
+    "@angular/compiler": "~9.0.5",
-    "@angular/core": "~8.2.14",
+    "@angular/core": "~9.0.5",
-    "@angular/forms": "~8.2.14",
+    "@angular/forms": "~9.0.5",
-    "@angular/material": "^8.2.3",
+    "@angular/material": "^9.1.2",
-    "@angular/platform-browser": "~8.2.14",
+    "@angular/platform-browser": "~9.0.5",
-    "@angular/platform-browser-dynamic": "~8.2.14",
+    "@angular/platform-browser-dynamic": "~9.0.5",
-    "@angular/router": "~8.2.14",
+    "@angular/router": "~9.0.5",
     "hammerjs": "^2.0.8",
-    "rxjs": "~6.5.3",
+    "rxjs": "~6.5.4",
-    "tslib": "^1.10.0",
+    "tslib": "^1.11.1",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.20",
+    "@angular-devkit/build-angular": "^0.900.5",
-    "@angular/cli": "~8.3.20",
+    "@angular/cli": "~9.0.5",
-    "@angular/compiler-cli": "~8.2.14",
+    "@angular/compiler-cli": "~9.0.5",
-    "@angular/language-service": "~8.2.14",
+    "@angular/language-service": "~9.0.5",
-    "@types/node": "~8.9.4",
+    "@types/jasmine": "~3.5.9",
-    "@types/jasmine": "~3.3.8",
+    "@types/jasminewd2": "~2.0.8",
-    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~13.9.0",
-    "codelyzer": "^5.0.0",
+    "codelyzer": "^5.2.1",
-    "jasmine-core": "~3.4.0",
+    "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
+    "karma": "~4.4.1",
-    "karma-chrome-launcher": "~2.2.0",
+    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-coverage-istanbul-reporter": "~2.1.1",
-    "karma-jasmine": "~2.0.1",
+    "karma-jasmine": "~3.1.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
+    "karma-jasmine-html-reporter": "^1.5.2",
-    "protractor": "~5.4.0",
+    "protractor": "~5.4.3",
-    "ts-node": "~7.0.0",
+    "ts-node": "~8.6.2",
-    "tslint": "~5.15.0",
+    "tslint": "~6.0.0",
-    "typescript": "~3.5.3"
+    "typescript": "~3.8.3"
   }
 }

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

@@ -0,0 +1,28 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// 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.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$ng-karaoqueue-primary: mat-palette($mat-indigo);
+$ng-karaoqueue-accent: mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$ng-karaoqueue-warn: mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$ng-karaoqueue-theme: mat-light-theme($ng-karaoqueue-primary, $ng-karaoqueue-accent, $ng-karaoqueue-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($ng-karaoqueue-theme);
+

frontend/ng-karaoqueue/src/index.html

@@ -9,7 +9,7 @@
   <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>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

frontend/ng-karaoqueue/tsconfig.json

@@ -21,6 +21,7 @@
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "disableTypeScriptVersionCheck": true
   }
 }