updates application sort list

Author: Lauest-Iterator

src/app/applications/application.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from "@angular/core";
+import { UserMinimalService } from "@app/admin/users/user-minimal.service";
 import { Application, ApplicationData, UpdateApplicationOrganization } from "@applications/application.model";
-import { RestService } from "../shared/services/rest.service";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
-import { UserMinimalService } from "@app/admin/users/user-minimal.service";
+import { RestService } from "../shared/services/rest.service";
 
 interface GetApplicationParameters {
   limit: number;

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

@@ -0,0 +1,3 @@
+<div class="map-page thirty-height">
+  <app-map [coordinateList]="coordinateList" [isFromApplication]="true" [applicationId]="222"></app-map>
+</div>

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

@@ -0,0 +1,5 @@
+.map-page {
+  background-color: #ffff;
+  padding: 20px;
+  height: 500px;
+}

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

@@ -0,0 +1,45 @@
+import { Component } from "@angular/core";
+import { ApplicationService } from "@applications/application.service";
+import { MapCoordinates } from "@shared/components/map/map-coordinates.model";
+import { SharedModule } from "../../../shared/shared.module";
+
+@Component({
+  selector: "app-application-map",
+  standalone: true,
+  imports: [SharedModule],
+  templateUrl: "./application-map.component.html",
+  styleUrl: "./application-map.component.scss",
+})
+export class ApplicationMapComponent {
+  constructor(private applicationService: ApplicationService) {}
+
+
+
+  coordinateList: MapCoordinates[] = [
+    {
+      latitude: 120,
+      longitude: 120,
+      draggable: false,
+      editEnabled: false,
+      useGeolocation: true,
+      markerInfo: {
+        active: true,
+        id: 22,
+        internalOrganizationId: 22,
+        internalOrganizationName: "22",
+        isDevice: false,
+        lastActive: new Date(),
+        name: "test",
+        networkTechnology: "lora",
+      },
+    },
+  ];
+
+  getApplications(): void {
+    const applicationsSubscription = this.applicationService
+      .getApplications(100000, 0, "asc", "id")
+      .subscribe(applicationData => { applicationData.data.forEach(
+       data => this.coordinateList.push() data.
+      )});
+  }
+}

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

@@ -0,0 +1,5 @@
+<div class="chart-container">
+  <h2>Top 3 rest codes</h2>
+
+  <canvas id="requestChart">{{ chart }}</canvas>
+</div>

src/app/applications/applications-list/application-visualization/application-visualization-failed-requests/application-visualization-failed-requests.component.scss

@@ -0,0 +1,74 @@
+import { Component, OnInit } from "@angular/core";
+import { Chart } from "chart.js";
+interface RESTCode {
+  status: string;
+  color: string;
+}
+
+const codes: RESTCode[] = [
+  {
+    status: "200 OK",
+    color: "green",
+  },
+  {
+    status: "201 Created",
+    color: "blue",
+  },
+  {
+    status: "400 Bad Request",
+    color: "yellow",
+  },
+  {
+    status: "401 Unauthorized",
+    color: "red",
+  },
+  {
+    status: "403 Forbidden",
+    color: "red",
+  },
+  {
+    status: "404 Not Found",
+    color: "orange",
+  },
+  {
+    status: "500 Internal Server Error",
+    color: "dark red",
+  },
+];
+
+@Component({
+  selector: "app-application-visualization-failed-requests",
+  standalone: true,
+  imports: [],
+  templateUrl: "./application-visualization-failed-requests.component.html",
+  styleUrl: "./application-visualization-failed-requests.component.scss",
+})
+export class ApplicationVisualizationFailedRequestsComponent implements OnInit {
+  public chart: any;
+
+  ngOnInit(): void {
+    this.createChart();
+  }
+
+  createChart() {
+    this.chart = new Chart("requestChart", {
+      type: "doughnut", //this denotes tha type of chart
+      data: {
+        // values on X-Axis
+        labels: ["Red", "Pink", "Green", "Yellow", "Orange", "Blue"],
+        datasets: [
+          {
+            label: "My First Dataset",
+
+            data: [300, 240, 100, 432, 253, 34],
+            backgroundColor: ["200 OK", "201 Created", "400 Bad Request", "yellow", "orange", "blue"],
+            hoverOffset: 4,
+          },
+        ],
+      },
+      options: {
+        aspectRatio: 2.5,
+      },
+    });
+  }
+}

src/app/applications/applications-list/application-visualization/application-visualization-failed-requests/application-visualization-failed-requests.component.ts

@@ -0,0 +1,5 @@
+<div class="chart-container">
+  <h2>Top 3 rest codes</h2>
+
+  <canvas id="MyChart">{{ chart }}</canvas>
+</div>

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

@@ -0,0 +1,74 @@
+import { Component, OnInit } from "@angular/core";
+import { Chart } from "chart.js";
+interface RESTCode {
+  status: string;
+  color: string;
+}
+
+const codes: RESTCode[] = [
+  {
+    status: "200 OK",
+    color: "green",
+  },
+  {
+    status: "201 Created",
+    color: "blue",
+  },
+  {
+    status: "400 Bad Request",
+    color: "yellow",
+  },
+  {
+    status: "401 Unauthorized",
+    color: "red",
+  },
+  {
+    status: "403 Forbidden",
+    color: "red",
+  },
+  {
+    status: "404 Not Found",
+    color: "orange",
+  },
+  {
+    status: "500 Internal Server Error",
+    color: "dark red",
+  },
+];
+
+@Component({
+  selector: "app-application-visualization-top-codes",
+  standalone: true,
+  imports: [],
+  templateUrl: "./application-visualization-top-codes.component.html",
+  styleUrl: "./application-visualization-top-codes.component.scss",
+})
+export class ApplicationVisualizationTopCodesComponent implements OnInit {
+  public chart: any;
+
+  ngOnInit(): void {
+    this.createChart();
+  }
+
+  createChart() {
+    this.chart = new Chart("MyChart", {
+      type: "doughnut", //this denotes tha type of chart
+      data: {
+        // values on X-Axis
+        labels: ["Red", "Pink", "Green", "Yellow", "Orange", "Blue"],
+        datasets: [
+          {
+            label: "My First Dataset",
+
+            data: [300, 240, 100, 432, 253, 34],
+            backgroundColor: ["200 OK", "201 Created", "400 Bad Request", "yellow", "orange", "blue"],
+            hoverOffset: 4,
+          },
+        ],
+      },
+      options: {
+        aspectRatio: 2.5,
+      },
+    });
+  }
+}