fix build dependencies

package.json

@@ -10,45 +10,38 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.0.0",
-    "@angular/cdk": "^15.0.2",
-    "@angular/compiler": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/forms": "^15.0.0",
-    "@angular/material": "^15.0.2",
-    "@angular/material-moment-adapter": "^16.0.3",
-    "@angular/platform-browser": "^15.0.0",
-    "@angular/platform-browser-dynamic": "^15.0.0",
-    "@angular/router": "^15.0.0",
-    "@fortawesome/angular-fontawesome": "^0.12.1",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "bootstrap": "^5.2.3",
-    "chart.js": "^4.0.1",
-    "jquery": "^3.6.1",
-    "md-select": "^0.0.1-alpha.1",
+    "@angular/animations": "^16.1.0",
+    "@angular/cdk": "^16.1.2",
+    "@angular/common": "^16.1.0",
+    "@angular/compiler": "^16.1.0",
+    "@angular/core": "^16.1.0",
+    "@angular/forms": "^16.1.0",
+    "@angular/material": "^16.1.2",
+    "@angular/material-moment-adapter": "^16.1.2",
+    "@angular/platform-browser": "^16.1.0",
+    "@angular/platform-browser-dynamic": "^16.1.0",
+    "@angular/router": "^16.1.0",
     "ng-multiselect-dropdown": "^0.3.9",
-    "popper.js": "^1.16.1",
-    "rxjs": "~7.5.0",
+    "chart.js": "^4.3.0",
+    "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.12.0"
+    "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.1",
-    "@angular/cli": "~15.0.1",
-    "@angular/compiler-cli": "^15.0.0",
+    "@angular-devkit/build-angular": "^16.1.1",
+    "@angular/cli": "~16.1.1",
+    "@angular/compiler-cli": "^16.1.0",
     "@types/jasmine": "~4.3.0",
-    "autoprefixer": "^10.4.13",
-    "jasmine-core": "~4.5.0",
+    "autoprefixer": "^10.4.14",
+    "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "ng-packagr": "^15.0.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
     "postcss": "^8.4.21",
     "prettier": "2.8.8",
     "tailwindcss": "^3.3.2",
-    "typescript": "~4.8.2"
+    "typescript": "~5.1.3"
   }
 }

src/app/app.module.ts

-import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
-import { AppRoutingModule } from './app-routing.module'
-import { AppComponent } from './app.component'
-import { UserManagementComponent } from './module/pages/admin/userManagment/userManagement.component'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { MatFormFieldModule } from '@angular/material/form-field'
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'
-import { SignupComponent } from './module/pages/signup/signup.component'
-import { StationComponent } from './module/pages/admin/stationManagement/station/station.component'
-import { ClientComponent } from './module/pages/admin/stationManagement/client/client.component'
-import { SensorComponent } from './module/pages/admin/stationManagement/sensor/sensor.component'
-import { HostComponent } from './module/pages/admin/stationManagement/host/host.component'
-import { EventEmitterService } from './shared/event.emitter.service'
+import {NgModule} from '@angular/core'
+import {BrowserModule} from '@angular/platform-browser'
+import {AppRoutingModule} from './app-routing.module'
+import {AppComponent} from './app.component'
+import {UserManagementComponent} from './module/pages/admin/userManagment/userManagement.component'
+import {FormsModule, ReactiveFormsModule} from '@angular/forms'
+import {MatFormFieldModule} from '@angular/material/form-field'
+import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http'
+import {SignupComponent} from './module/pages/signup/signup.component'
+import {StationComponent} from './module/pages/admin/stationManagement/station/station.component'
+import {ClientComponent} from './module/pages/admin/stationManagement/client/client.component'
+import {SensorComponent} from './module/pages/admin/stationManagement/sensor/sensor.component'
+import {HostComponent} from './module/pages/admin/stationManagement/host/host.component'
+import {EventEmitterService} from './shared/event.emitter.service'
 
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { MatIconModule } from '@angular/material/icon'
-import { StationManagementComponent } from './module/pages/admin/stationManagement/stationManagement.component'
-import { MatSelectModule } from '@angular/material/select'
-import { MatInputModule } from '@angular/material/input'
-import { MAT_DATE_FORMATS, MatDateFormats, MatNativeDateModule, NativeDateModule } from '@angular/material/core'
-import { DataHeaderComponent } from './module/pages/admin/stationManagement/header/data-header/data-header.component'
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations'
+import {MatIconModule} from '@angular/material/icon'
+import {StationManagementComponent} from './module/pages/admin/stationManagement/stationManagement.component'
+import {MatSelectModule} from '@angular/material/select'
+import {MatInputModule} from '@angular/material/input'
+import {MAT_DATE_FORMATS, MatDateFormats, MatNativeDateModule, NativeDateModule} from '@angular/material/core'
+import {DataHeaderComponent} from './module/pages/admin/stationManagement/header/data-header/data-header.component'
 import {
   ConfigHeaderComponent,
 } from './module/pages/admin/stationManagement/header/config-header/config-header.component'
 
-import { CjsTimline } from './module/components/charts/Cjs-timeline/cjsTimlineMultiple.component'
-import { ProViewComponent } from './module/components/pro-view/pro-view.component'
-import { MatAutocompleteModule } from '@angular/material/autocomplete'
-import { MatCheckboxModule } from '@angular/material/checkbox'
-import { InterceptorService } from './shared/auth/interceptor.service'
-import { CjsTimelineMultiple } from './module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component'
-import { MatButtonModule } from '@angular/material/button'
-import { ThermometerComponent } from './module/components/customUX/thermometer/thermometer.component'
-import { HomeComponent } from './module/pages/home/home.component'
-import { LoginTailwindcssComponent } from './module/pages/login/login.component'
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
-import { SliderComponent } from './module/components/customUX/slider/slider.component'
-import { MatSliderModule } from '@angular/material/slider'
-import { MatCardModule } from '@angular/material/card'
-import { ApiModule } from '../../projects/generated-api/src'
-import { SummaryComponent } from './module/pages/home/summary/summary.component'
-import { ListIconComponent } from './module/pages/home/summary/list-icon/list-icon.component'
-import { MatDatepickerModule } from '@angular/material/datepicker'
-import { MomentDateModule } from '@angular/material-moment-adapter'
-import { StationConfigComponent } from './module/pages/home/station-config/station-config.component'
-import { MatTreeModule } from '@angular/material/tree'
-import { FormDialogComponent } from './module/components/customUX/forms/form-dialog/form-dialog.component'
+import {CjsTimline} from './module/components/charts/Cjs-timeline/cjsTimlineMultiple.component'
+import {ProViewComponent} from './module/components/pro-view/pro-view.component'
+import {MatAutocompleteModule} from '@angular/material/autocomplete'
+import {MatCheckboxModule} from '@angular/material/checkbox'
+import {InterceptorService} from './shared/auth/interceptor.service'
+import {CjsTimelineMultiple} from './module/components/charts/Cjs-timeline-multiple/cjsTimlineMultiple.component'
+import {MatButtonModule} from '@angular/material/button'
+import {ThermometerComponent} from './module/components/customUX/thermometer/thermometer.component'
+import {HomeComponent} from './module/pages/home/home.component'
+import {LoginTailwindcssComponent} from './module/pages/login/login.component'
+import {SliderComponent} from './module/components/customUX/slider/slider.component'
+import {MatSliderModule} from '@angular/material/slider'
+import {MatCardModule} from '@angular/material/card'
+import {ApiModule} from '../../projects/generated-api/src'
+import {SummaryComponent} from './module/pages/home/summary/summary.component'
+import {ListIconComponent} from './module/pages/home/summary/list-icon/list-icon.component'
+import {MatDatepickerModule} from '@angular/material/datepicker'
+import {MomentDateModule} from '@angular/material-moment-adapter'
+import {StationConfigComponent} from './module/pages/home/station-config/station-config.component'
+import {MatTreeModule} from '@angular/material/tree'
+import {FormDialogComponent} from './module/components/customUX/forms/form-dialog/form-dialog.component'
 
 const MY_DATE_FORMATS: MatDateFormats = {
   parse: {
@@ -101,7 +100,6 @@ const MY_DATE_FORMATS: MatDateFormats = {
     MatCheckboxModule,
     MatButtonModule,
     ApiModule,
-    FontAwesomeModule,
     MatSliderModule,
     MatCardModule,
     MatDatepickerModule,
@@ -112,8 +110,8 @@ const MY_DATE_FORMATS: MatDateFormats = {
   //Todo remove old swagger client
   providers: [
     EventEmitterService,
-    { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true },
-    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
+    {provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true},
+    {provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS},
   ],
   bootstrap: [AppComponent],
 })

src/index.html

@@ -15,8 +15,11 @@
     href='https://fonts.googleapis.com/icon?family=Material+Icons'
     rel='stylesheet'
   />
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@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>

src/styles.css

@@ -19,3 +19,6 @@ body {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }