Add Mqtt and made changes in home page

package.json

@@ -30,13 +30,17 @@
     "@angular/platform-browser-dynamic": "^18.0.3",
     "@angular/router": "^18.0.3",
     "@npmcli/package-json": "^5.2.0",
+    "@types/ws": "^8.5.4",
     "bootstrap": "^5.3.3",
     "chart.js": "^4.4.3",
     "glob": "^10.4.1",
+    "mongodb": "^6.7.0",
+    "ng-apexcharts": "^1.11.0",
     "ngx-bootstrap": "^12.0.0",
     "ngx-mqtt": "^17.0.0",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
+    "util": "^0.12.5",
     "zone.js": "^0.14.7"
   },
   "devDependencies": {

src/app/app.module.ts

@@ -33,7 +33,7 @@ import { environment } from '../environments/environment'
 export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
   hostname: environment.MQTT_SERVICE_OPTIONS.hostname,
   port: environment.MQTT_SERVICE_OPTIONS.port,
-  path: environment.MQTT_SERVICE_OPTIONS.path,
+  /**path: environment.MQTT_SERVICE_OPTIONS.path,**/
   username: environment.MQTT_SERVICE_OPTIONS.user,
   password: environment.MQTT_SERVICE_OPTIONS.password,
 }

src/app/core/home/home.component.html

@@ -8,7 +8,28 @@
     O <i>Sharp_Probe</i> é um projeto de graduação da Escola de Engenharia de São Carlos da disciplina <strong>SEL0373</strong> 
   </p>
 
-  <button type="button" class="btn btn-primary" onclick="doPublish">DO PULSOVS</button>
+  <p>
+    Foto da Sonda
+      <button type="button" class="btn btn-primary" onclick="doPublish">Requisitar Foto</button>
+  </p>
+
+  <div>
+    Altura
+    <app-image-grid [gridItems]="altura"></app-image-grid>
+  </div>
+
+  <div>
+    Temperatura
+    <app-image-grid [gridItems]="temperatura"></app-image-grid>
+  </div>
+
+  <div>
+    Latitude e Longitude
+  </div>
 
-  <app-image-grid [gridItems]="graphs"></app-image-grid>
+  <div>
+    Umidade
+    <app-image-grid [gridItems]="umidade"></app-image-grid>
+  </div>
+
 </section>

src/app/core/home/home.component.ts

@@ -9,7 +9,7 @@ import { SidebarService } from '@services'
 })
 export class HomeComponent {
 
-   graphs: ImageGridItemModel[] = [
+  altura: ImageGridItemModel[] = [
     {
       image: {
         src: '/assets/images/home/pato.gif',
@@ -24,21 +24,42 @@ export class HomeComponent {
         text: '1203012321390129321930',
         title: 'Altitude da sonda',
       },
-    },
+    }
+  ]
+
+  temperatura: ImageGridItemModel[] = [
     {
       image: {
         src: '/assets/images/home/girando.gif',
         alt: 'Temperatura',
-        caption: 'Temperatura',
+        caption: 'Temperatura em ºC',
       },
       modal: {
         image: {
           src: '/assets/images/home/legal.png',
-          alt: 'Temperatura',
+          alt: 'Altura',
         },
         text: '1203012321390129321930',
-        title: 'Temperatura',
+        title: 'Histórico da Temperatura',
       },
-    },
+    }
   ]
+
+  umidade: ImageGridItemModel[] = [
+    {
+      image: {
+        src: '/assets/images/home/macaco.gif',
+        alt: 'Altura',
+        caption: 'Altura',
+      },
+      modal: {
+        image: {
+          src: '/assets/images/home/legal.png',
+          alt: 'Altura',
+        },
+        text: '1203012321390129321930',
+        title: 'Altitude da sonda',
+      },
+    }
+  ]  
 }

src/app/core/test-page/test-page.component.ts

@@ -1,13 +1,16 @@
 import { Component } from '@angular/core'
-import { AlternatingLayoutModel, ImageGridItemModel, ImageModel } from '@models'
+import { AlternatingLayoutModel, ImageGridItemModel, ImageModel, ChartModel } from '@models'
 import { SidebarService } from '@services'
+ /* MQTT COMEÇO */
 import {
   IMqttServiceOptions,
   MqttService,
   IPublishOptions,
 } from 'ngx-mqtt'
 import { IClientSubscribeOptions } from 'mqtt-browser';
 import { environment } from '../../../environments/environment'
+ /* MQTT FINAL */
+import { MongoClient } from 'mongodb';
 
 @Component({
   selector: 'app-test-page',
@@ -70,13 +73,15 @@ export class TestPageComponent {
     },
   ]
 
+
+ /* MQTT */
   constructor(private _mqttService: MqttService) {
     this.client = this._mqttService;
   }
   publish = {
     topic: 'sharp_probe/request_photo',
     qos: 0,
-    payload: '{ "msg": "QUero fotos do ARNAHA" }',
+    payload: '{ "msg": "Quero fotos do ARNAHA" }',
   };
   qosList = [
     { label: 0, value: 0 },
@@ -89,5 +94,30 @@ export class TestPageComponent {
     const { topic, qos, payload } = this.publish
     console.log(this.publish)
     this.client?.unsafePublish(topic, payload, { qos } as IPublishOptions)
+
+ /* MQTT */
+  /* Mongo */
+/**
+  async function main() {
+      const uri = "mongodb+srv://enviroment.mongo.username:enviroment.mongo.password@enviroment.mongo.url";
+      
+      const Mclient = new MongoClient(uri);
+  
+      try {
+          // Connect to the MongoDB cluster
+          await Mclient.connect();
+  
+          // Make the appropriate DB calls
+  
+      } finally {
+          // Close the connection to the MongoDB cluster
+          await Mclient.close();
+      }
+  }
+  
+  main().catch(console.error);
+  };
+
+  **/
   }
 }

src/app/models/chart.model.ts

@@ -1,4 +1,6 @@
 export interface ChartModel {
-    info1?: string
-    info2?: Float32Array
-  }
+  name: string
+  data?: Float32Array
+  categories?: Float32Array
+  text: string
+}

src/app/models/index.ts

@@ -1,5 +1,4 @@
 export * from './alternating-layout.model'
-export * from './ic-extra.model'
 export * from './image-grid.model'
 export * from './image.model'
 export * from './modal.model'

src/app/shared/chart/chart.component.ts

@@ -1,14 +1,38 @@
-import { Component } from '@angular/core';
-import { Chart} from 'chart.js/auto';
-import { ChartModel } from 'models/chart.model';
+import { Component, OnInit, Input } from '@angular/core';
+import {
+  ChartComponent,
+  ApexAxisChartSeries,
+  ApexChart,
+  ApexXAxis,
+  ApexDataLabels,
+  ApexTitleSubtitle,
+  ApexStroke,
+  ApexGrid
+} from "ng-apexcharts";
+
+export type ChartOptions = {
+  series: ApexAxisChartSeries;
+  chart: ApexChart;
+  xaxis: ApexXAxis;
+  dataLabels: ApexDataLabels;
+  grid: ApexGrid;
+  stroke: ApexStroke;
+  title: ApexTitleSubtitle;
+};
 
 @Component({
   selector: 'app-chart',
   templateUrl: './chart.component.html',
 })
-export class ChartComponent {
 
+export class ChartsComponent implements OnInit {
+  @Input() name!: string
+  @Input() data?: Float32Array
+  @Input() categories?: Float32Array
+  @Input() text!: string
 
+  ngOnInit(): void {
+  }
 
 
 }

src/environments/environment.ts

@@ -7,13 +7,21 @@ export const environment = {
   MQTT_SERVICE_OPTIONS: {
     hostname: 'igbt.eesc.usp.br',
     port: 1883,
-    path: '/mqtt',
+    /**path: '/mqtt',**/
     user: 'mqtt',
     password: 'mqtt_123_abc',
+  },
+
+  mongo: {
+    username: 'claudinho do pé torto',
+    password: 'sim',
+    url: 'clustar',
   }
 }
 
 
+
+
 /*
  * For easier debugging in development mode, you can import the following file
  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.