add more icons, and started work on menu and top bar

Author: Lauest-Iterator

src/app/app.module.ts

@@ -1,36 +1,37 @@
-import { BrowserModule, Title } from "@angular/platform-browser";
+import { NgIf } from "@angular/common";
+import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from "@angular/common/http";
 import { NgModule } from "@angular/core";
-import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
-import { TranslateHttpLoader } from "@ngx-translate/http-loader";
-import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
-import { AppRoutingModule } from "./app-routing.module";
-import { AppComponent } from "./app.component";
-import { NavbarModule } from "./navbar/navbar.module";
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { ProfilesModule } from "./profiles/profiles.module";
-import { AuthJwtInterceptor } from "@shared/helpers/auth-jwt.interceptor";
-import { AuthModule } from "./auth/auth.module";
-import { GatewayModule } from "./gateway/gateway.module";
-import { SharedVariableModule } from "@shared/shared-variable/shared-variable.module";
-import { SAVER, getSaver } from "@shared/providers/saver.provider";
-import { ErrorPageComponent } from "./error-page/error-page.component";
-import { SearchModule } from "./search/search.module";
-import { JwtModule } from "@auth0/angular-jwt";
-import { MonacoEditorModule } from "ngx-monaco-editor-v2";
 import { MatInputModule } from "@angular/material/input";
 import { MatPaginatorIntl } from "@angular/material/paginator";
-import { MatPaginatorIntlDa } from "@shared/helpers/mat-paginator-intl-da";
 import { MatTooltipModule } from "@angular/material/tooltip";
-import { NewUserComponent } from "./admin/users/new-kombit-user-page/new-user.component";
+import { BrowserModule, Title } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { JwtModule } from "@auth0/angular-jwt";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
+import { TranslateHttpLoader } from "@ngx-translate/http-loader";
+import { MatSelectSearchModule } from "@shared/components/mat-select-search/mat-select-search.module";
 import { WelcomeDialogModule } from "@shared/components/welcome-dialog/welcome-dialog.module";
+import { AuthJwtInterceptor } from "@shared/helpers/auth-jwt.interceptor";
+import { MatPaginatorIntlDa } from "@shared/helpers/mat-paginator-intl-da";
 import { NGMaterialModule } from "@shared/Modules/materiale.module";
-import { MatSelectSearchModule } from "@shared/components/mat-select-search/mat-select-search.module";
-import { UserPageComponent } from "./admin/users/user-page/user-page.component";
-import { SharedModule } from "@shared/shared.module";
 import { PipesModule } from "@shared/pipes/pipes.module";
+import { SAVER, getSaver } from "@shared/providers/saver.provider";
+import { SharedVariableModule } from "@shared/shared-variable/shared-variable.module";
+import { SharedModule } from "@shared/shared.module";
 import { CookieService } from "ngx-cookie-service";
+import { MonacoEditorModule } from "ngx-monaco-editor-v2";
+import { NewUserComponent } from "./admin/users/new-kombit-user-page/new-user.component";
+import { UserPageComponent } from "./admin/users/user-page/user-page.component";
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
+import { AuthModule } from "./auth/auth.module";
+import { ErrorPageComponent } from "./error-page/error-page.component";
+import { GatewayModule } from "./gateway/gateway.module";
+import { NavbarModule } from "./navbar/navbar.module";
+import { ProfilesModule } from "./profiles/profiles.module";
+import { SearchModule } from "./search/search.module";
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
@@ -60,6 +61,7 @@ export function tokenGetter() {
       },
     }),
     NgbModule,
+    NgIf,
     FormsModule,
     ReactiveFormsModule,
     BrowserAnimationsModule,

src/app/applications/applications-list/application-filter/application-filter.component.scss

@@ -23,14 +23,13 @@
 }
 
 .filter-button {
-  align-self: flex-end;
-  height: 35px !important;
+  margin-top: 26px;
+  height: 40px !important;
   width: 170px !important;
   min-width: 170px !important;
+  justify-content: center;
   display: flex !important;
   align-items: center;
-  justify-content: center;
-  margin-bottom: 3px;
   border: 1px solid black !important;
 }
 
@@ -49,7 +48,7 @@
   display: flex;
   align-items: center;
   font-size: 16px !important;
-  color: rgb(186, 183, 183) !important;
+  color: #737373 !important;
 }
 
 .mat-mdc-form-field {
@@ -60,7 +59,7 @@
 
 .mat-mdc-text-field-wrapper {
   background-color: #ffff !important;
-  height: 35px !important;
+  height: 40px !important;
   display: flex !important;
   align-items: center !important;
 }

src/app/applications/applications-list/application-filter/application-filter.component.ts

@@ -31,7 +31,7 @@ export class ApplicationFilterComponent implements OnInit {
     this.loadOwnerOptions();
   }
 
-  statusOptions: { label: string; value: ApplicationState | "All" }[] = [
+  stateOptions: { label: string; value: ApplicationState | "All" }[] = [
     { label: "Alle", value: "All" },
     { label: "Ingen", value: ApplicationState["NONE"] },
     { label: "In operation", value: ApplicationState["IN-OPERATION"] },
@@ -40,9 +40,8 @@ export class ApplicationFilterComponent implements OnInit {
     { label: "other", value: ApplicationState["OTHER"] },
   ];
 
-  stateOptions: { label: string; value: ApplicationStatus | "All" }[] = [
+  statusOptions: { label: string; value: ApplicationStatus | "All" }[] = [
     { label: "Alle", value: "All" },
-    { label: "Warning", value: ApplicationStatus.WARNING },
     { label: "Alert", value: ApplicationStatus.WARNING },
     { label: "Stable", value: ApplicationStatus.STABLE },
   ];

src/app/applications/applications-list/application-map/application-map.component.html

@@ -1,7 +1,9 @@
-<div class="map-page thirty-height">
+<div class="map-page">
   @if(coordinateList){
-
   <app-map [coordinateList]="coordinateList" [isFromApplication]="true" [applicationId]="22"></app-map>
-
   }
+  <div class="map-overlay">
+    <mat-checkbox class="example-margin" />
+    <mat-checkbox class="example-margin" />
+  </div>
 </div>

src/app/applications/applications-list/application-map/application-map.component.scss

@@ -1,5 +1,17 @@
 .map-page {
   background-color: #ffff;
   padding: 20px;
-  height: 500px;
+  height: 600px;
+  position: relative;
+}
+
+.map-overlay {
+  height: 89px;
+  width: 132px;
+  background-color: #ffff;
+  position: absolute;
+  bottom: 30px;
+  left: 30px;
+  z-index: 10000;
+  border-radius: 4px;
 }

src/app/applications/applications-list/application-map/application-map.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
+import { MatCheckboxModule } from "@angular/material/checkbox";
 import { Application } from "@applications/application.model";
 import { ApplicationService } from "@applications/application.service";
 import { ApplicationState, ApplicationStatus } from "@applications/enums/status.enum";
@@ -13,7 +14,7 @@ import { ApplicationsFilterService } from "../applications-filter.service";
 @Component({
   selector: "app-application-map",
   standalone: true,
-  imports: [SharedModule],
+  imports: [MatCheckboxModule, SharedModule],
   templateUrl: "./application-map.component.html",
   styleUrls: ["./application-map.component.scss"],
 })
@@ -71,7 +72,6 @@ export class ApplicationMapComponent implements OnInit, OnDestroy {
     }
 
     this.coordinateList = tempCoordinateList;
-    console.log("Mapped Coordinates:", this.coordinateList);
   }
 
   getApplications(): void {

src/app/applications/applications-list/application-visualization/application-visualization.component.html

@@ -1,4 +1 @@
-<div class="visualization-page thirty-height">
-  <p>application-visualization works!</p>
-  <app-application-visualization-failed-requests></app-application-visualization-failed-requests>
-</div>
+<div class="visualization-page thirty-height"></div>

src/app/applications/applications-list/applications-filter.service.ts

@@ -61,10 +61,29 @@ export class ApplicationsFilterService {
     );
   }
 
+  private checkApplicationStatus() {
+    //   this.applicationService
+    //     .getApplications(100000, 0, "asc", "id")
+    //     .pipe(
+    //       map(applicationData => {
+    //         const filteredApplications = this.filterService.SortApplications(applicationData.data as Application[]);
+    //         return filteredApplications.map(app => app.id);
+    //       })
+    //     )
+    //     .subscribe(mappedCoordinates => {
+    //       this.applicationService.getApplicationDevicesForMap(mappedCoordinates).subscribe(data => {
+    //         this.devices = data;
+    //         this.mapDevicesToCoordinateList();
+    //       });
+    //     });
+    // }
+    this.applicationService.getApplicationDevicesForMap;
+  }
+
   constructor(private applicationService: ApplicationService) {}
 
   getAppLicationIds(): Observable<{ label: string; value: string }[]> {
-    return this.applicationService.getApplications(100000, 0, "asc", "id").pipe(
+    return this.applicationService.getApplications(1000000, 0, "asc", "id").pipe(
       map(applicationData =>
         applicationData.data.map(data => ({
           label: data.owner,
@@ -75,7 +94,7 @@ export class ApplicationsFilterService {
   }
 
   getOwnerOptions(): Observable<{ label: string; value: string }[]> {
-    return this.applicationService.getApplications(100000, 0, "asc", "id").pipe(
+    return this.applicationService.getApplications(1000000, 0, "asc", "id").pipe(
       map(applicationData =>
         applicationData.data.map(data => ({
           label: data.owner,

src/app/applications/applications-list/applications-list-dashboard/applications-list-dashboard.component.html

@@ -0,0 +1,36 @@
+<div class="info-box-containers">
+  <app-basic-information-box
+    [matSVGSrc]="'exclamation-triangle'"
+    [type]="'warning'"
+    [count]="133"
+    [countOf]="1223"
+    [description]="'API-KEY.EDIT.NAME-PLACEHOLDER' | translate"
+    [height]="35"
+    [width]="25"
+  />
+  <app-basic-information-box
+    [matSVGSrc]="'check-circle'"
+    [type]="'check-circle'"
+    [count]="28"
+    [countOf]="28"
+    [description]="'Applikationerder uden fejl'"
+    [height]="30"
+    [width]="25"
+  />
+  <app-basic-information-box
+    [height]="35"
+    [width]="25"
+    [matSVGSrc]="'micro-chip'"
+    [type]="'default'"
+    [count]="133"
+    [description]="'Enheder'"
+  />
+  <app-basic-information-box
+    [height]="35"
+    [width]="25"
+    [matSVGSrc]="'satellite-dish'"
+    [type]="'default'"
+    [count]="gateways"
+    [description]="'Gateways'"
+  />
+</div>

src/app/applications/applications-list/applications-list-dashboard/applications-list-dashboard.component.scss

@@ -0,0 +1,7 @@
+.info-box-containers {
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  margin-bottom: 30px;
+  height: fit-content;
+}