@@ -10,7 +10,7 @@ | |||
</div> | |||
</div> | |||
<div class="item-robotText"> | |||
<div *ngIf="robotStateChange$ | async" id="robotIsOnTour">Robot is on Tour</div> | |||
<div *ngIf="!(robotStateChange$ | async)" id="robotIsReady">Robot is Ready</div> | |||
<div *ngIf="!(robotIsReady$ | async)" id="robotIsOnTour">Robot is on Tour</div> | |||
<div *ngIf="(robotIsReady$ | async)" id="robotIsReady">Robot is Ready</div> | |||
</div> | |||
</div> |
@@ -8,7 +8,8 @@ import { StoreService } from '../Service/store.service'; | |||
styleUrls: ['./home.component.css'] | |||
}) | |||
export class HomeComponent { | |||
robotStateChange$: Observable<boolean> = this.storeService.currentRobotReady; | |||
// Aktueller RobotStatus wird subscribed | |||
robotIsReady$: Observable<boolean> = this.storeService.currentRobotReady; | |||
constructor(private storeService: StoreService) { | |||
} |
@@ -15,36 +15,43 @@ export class InputComponent implements OnInit, OnDestroy { | |||
subscription: Subscription; | |||
constructor( | |||
public service: SpeechService, | |||
public speechService: SpeechService, | |||
private mqttRequestService: MqttRequestService | |||
) { | |||
if (!this.service.initSpeechServiceStarted) { | |||
this.service.init(); | |||
if (!this.speechService.initSpeechServiceStarted) { | |||
this.speechService.init(); | |||
} | |||
} | |||
ngOnInit(): void { | |||
this.subscription = this.service.currentApprovalStageMessage.subscribe(msg => { | |||
// subscribe auf die eingegebene Spracheingabe, gibt als response einen string | |||
this.subscription = this.speechService.currentApprovalStageMessage.subscribe(msg => { | |||
this.text = msg; | |||
if (this.text !== '') { | |||
this.micIsClicked = false; | |||
this.mqttRequestService.publishToINPUT(this.text); | |||
this.mqttRequestService.publishToINPUT(this.text); // msg wird hier den Request Service weitergeleitet | |||
} | |||
}); | |||
} | |||
/** | |||
* Beim klick auf das Mikrofon, wird die Spracheingabe gestartet. Beim 2ten klick auf das | |||
* Mikrofon wird die Spracheingabe gestoppt | |||
*/ | |||
startStopService() { | |||
// | |||
if (this.micIsClicked) { | |||
this.micIsClicked = false; | |||
this.service.stop(); | |||
this.speechService.stop(); // Spracheingabe stoppen | |||
} else { | |||
this.micIsClicked = true; | |||
this.service.start(); | |||
this.speechService.start(); //Spracheingabe starten | |||
} | |||
} | |||
ngOnDestroy() { | |||
this.subscription.unsubscribe() | |||
this.service.onDestory(); | |||
this.speechService.onDestory(); | |||
this.text = ''; | |||
} | |||
@@ -1,6 +1,5 @@ | |||
import { Component, OnDestroy, OnInit } from '@angular/core'; | |||
import { Subscription } from 'rxjs'; | |||
import { MqttRequestService } from 'src/app/Service/Mqtt/mqtt-request.service'; | |||
declare var speechSynthesis: any; | |||
@@ -16,6 +15,7 @@ export class OutputComponent implements OnInit, OnDestroy { | |||
constructor(private mqttRequestService: MqttRequestService) { } | |||
ngOnInit(): void { | |||
// subsribe auf "responseMessage", sie wird jedes mal getriggert wenn eine Spracheingabe statt findet | |||
this.subscription = this.mqttRequestService.responseMessage.subscribe(msg => { | |||
setTimeout(() => { | |||
this.outputText = msg; | |||
@@ -24,6 +24,11 @@ export class OutputComponent implements OnInit, OnDestroy { | |||
}); | |||
} | |||
/** | |||
* Methode spricht das übergeben string aus --> Sprachausgabe | |||
* @method speak | |||
* @param string | |||
*/ | |||
speak(text: string) { | |||
const utterance = new SpeechSynthesisUtterance(text); | |||
utterance.lang = 'en-US'; | |||
@@ -34,5 +39,4 @@ export class OutputComponent implements OnInit, OnDestroy { | |||
this.subscription.unsubscribe(); | |||
this.mqttRequestService.onDestroy(); | |||
} | |||
} |
@@ -7,8 +7,13 @@ declare var webkitSpeechRecognition: any; | |||
providedIn: 'root' | |||
}) | |||
export class SpeechService { | |||
/* | |||
* currentApprovalStageMessage wird als observable festgelegt, | |||
* damit man aus anderen Komponenten die änderungen mitbekommt! | |||
*/ | |||
private approvalStageMessage = new BehaviorSubject(''); | |||
currentApprovalStageMessage = this.approvalStageMessage.asObservable(); | |||
initSpeechServiceStarted: boolean = false; | |||
recognition = new webkitSpeechRecognition(); | |||
@@ -18,8 +23,6 @@ export class SpeechService { | |||
tempWords: string | undefined; | |||
constructor() { | |||
this.recognition.pitch = 10; | |||
this.recognition.rate = 3; | |||
} | |||
init() { | |||
@@ -33,22 +36,19 @@ export class SpeechService { | |||
.map((result) => result.transcript) | |||
.join(''); | |||
this.tempWords = transcript; | |||
console.log('init:' + transcript); | |||
}); | |||
} | |||
start() { | |||
this.text = ''; | |||
this.isStoppedSpeechRecog = false; | |||
this.recognition.start(); | |||
console.log("Speech recognition started") | |||
this.recognition.start(); // Start der Sprachaufnahme | |||
this.recognition.addEventListener('end', () => { | |||
this.wordConcat() | |||
this.recognition.stop(); | |||
this.recognition.stop(); // Ende der Sprachaufnahme | |||
if (!this.isStoppedSpeechRecog) { | |||
this.isStoppedSpeechRecog = true; | |||
console.log("End speech recognition"); | |||
this.approvalStageMessage.next(this.text); | |||
this.approvalStageMessage.next(this.text); // String was eingelesen wurde, wird mit der Methode "next(..)" an alle subsriber weitergeleitet! | |||
} | |||
}); | |||
} | |||
@@ -62,6 +62,7 @@ export class SpeechService { | |||
} | |||
} | |||
// addiert die Wörter bei der Sprachaufnahme zusammen | |||
wordConcat() { | |||
this.text = this.text + ' ' + this.tempWords; | |||
this.tempWords = ''; |
@@ -18,10 +18,19 @@ export class PlantCardComponent { | |||
constructor(public dialog: MatDialog, private mqttRequestService: MqttRequestService) { | |||
} | |||
/** | |||
* Methode wird in der HTML datei verwendet damit der Wert nicht undefined ist. | |||
* @method | |||
*/ | |||
getFormattedLastRequestedTimestamp(): Observable<string> { | |||
return of(this.calculateTimestamp(this.plant.Timestamp)) | |||
} | |||
/** | |||
* Methode dividiert den Timestamp der Pflanze mit der aktuellen Zeit. Die Zeit wird dann in Tagen, Stunden, Minuten, Sekunden angezeigt | |||
* @method | |||
* @return string wie z.B "1 hour ago" | |||
*/ | |||
calculateTimestamp(timestamp: string): string { | |||
const datePlant = new Date(timestamp); | |||
this.currentDate = new Date(); | |||
@@ -43,6 +52,10 @@ export class PlantCardComponent { | |||
} | |||
} | |||
/** | |||
* Methode öffnet den Dialog "DeleteConfirmDialogComponent" | |||
* @method | |||
*/ | |||
onDeletePlant() { | |||
this.dialog.open(DeleteConfirmDialogComponent, { | |||
data: this.plant, | |||
@@ -50,6 +63,10 @@ export class PlantCardComponent { | |||
}); | |||
} | |||
/** | |||
* Methode öffnet den Dialog "ConfigurePlantDialogComponent" | |||
* @method | |||
*/ | |||
onConfigurePlant() { | |||
this.dialog.open(ConfigurePlantDialogComponent, { | |||
data: { | |||
@@ -58,5 +75,4 @@ export class PlantCardComponent { | |||
width: '400px', | |||
}); | |||
} | |||
} |
@@ -21,6 +21,7 @@ export class PlantsComponent { | |||
constructor(public dialog: MatDialog, public storeService: StoreService, private mqttRequestService: MqttRequestService) { | |||
// sobald es eine änderung bei den pflanzenNamen gibt, wird bei der suchleiste ein neuer filter eingesetzt | |||
this.options$.subscribe(response => { | |||
this.filteredOptions = this.myControl.valueChanges.pipe( | |||
startWith(''), | |||
@@ -30,24 +31,39 @@ export class PlantsComponent { | |||
}) | |||
} | |||
/** | |||
* es wird nach dem Pflanzen Namen gesucht. | |||
* @method | |||
* @return Pflant | |||
*/ | |||
onSearchPlant(plantName: string): Observable<Plant> { | |||
return this.storeService.getPlant(plantName); | |||
} | |||
/** | |||
* Methode öffnet das Dialog "AddPlantDialogComponent" | |||
* @method | |||
*/ | |||
onNewPlant() { | |||
this.dialog.open(AddPlantDialogComponent, { | |||
width: '420px', | |||
}); | |||
} | |||
/** | |||
* die ausgewählte Pflanze wird in "selectedPlant" geschrieben | |||
* @method | |||
*/ | |||
onOptionSelect(value: string) { | |||
this.selectedPlant = value; | |||
} | |||
onOptionDefault() { | |||
this.selectedPlant = 'undefined'; | |||
} | |||
private _filter(value: string, options: string[]): string[] { | |||
const filterValue = value.toLowerCase(); | |||
@@ -17,18 +17,32 @@ export class RobotComponent { | |||
constructor(private storeService: StoreService) { | |||
} | |||
/** | |||
* Methode setzt die Farbe der LoadingBar auf Rot ("warn") oder Blau ("Primary") | |||
* @method | |||
* @return warn oder primary | |||
*/ | |||
getLoadingBarColor(): Observable<ThemePalette> { | |||
return this.batteryChargingStatus$.pipe( | |||
map(chargingStatus => chargingStatus < 20 ? "warn" : "primary") | |||
) | |||
} | |||
/** | |||
* Methode wird in der HTML datei verwendet damit der Wert nicht undefined ist. | |||
* @method | |||
*/ | |||
getFormattedLastRequestedBatteryState(): Observable<string> { | |||
return this.requestTimestamp$.pipe( | |||
map(timestamp => this.formatLastRequestedBatteryState(timestamp)) | |||
) | |||
} | |||
/** | |||
* Methode dividiert den Timestamp der Pflanze mit der aktuellen Zeit. Die Zeit wird dann in Tagen, Stunden, Minuten, Sekunden angezeigt | |||
* @method | |||
* @return string wie z.B "1 hour ago" | |||
*/ | |||
formatLastRequestedBatteryState(timestamp: string): string { | |||
const datePlant = new Date(timestamp); | |||
const currentDate = new Date(); | |||
@@ -49,5 +63,4 @@ export class RobotComponent { | |||
return `${seconds} second${seconds !== 1 ? 's' : ''} ago`; | |||
} | |||
} | |||
} |
@@ -1,10 +1,10 @@ | |||
import { Injectable } from '@angular/core'; | |||
import { MatDialog } from '@angular/material/dialog'; | |||
import { BehaviorSubject, Subscription } from 'rxjs'; | |||
import { take } from 'rxjs/operators'; | |||
import { ErrorDialogComponent } from 'src/app/dialog/error-dialog/error-dialog.component'; | |||
import { Plant } from 'src/app/models/plant.model'; | |||
import { PlantCount } from 'src/app/models/plantCount.model'; | |||
import { Position } from 'src/app/models/position.model'; | |||
import { RobotBattery } from 'src/app/models/robotBattery.model'; | |||
import { StoreService } from '../store.service'; | |||
import { MqttSetDataService } from './mqtt-set-data.service'; | |||
@@ -14,6 +14,7 @@ import { MqttService } from './mqtt.service'; | |||
providedIn: 'root' | |||
}) | |||
export class MqttRequestService { | |||
// wird für die Sprachausgabe verwendet | |||
private sourceMessage = new BehaviorSubject(''); | |||
responseMessage = this.sourceMessage.asObservable(); | |||
@@ -22,6 +23,7 @@ export class MqttRequestService { | |||
constructor(private mqttService: MqttService, | |||
private mqttSetDataService: MqttSetDataService, | |||
private storeService: StoreService, public dialog: MatDialog) { | |||
//Subscribe to the Topics | |||
this.mqttService.subscribeToTopic("BACKEND/DATA/SENSORDATA_ALL").subscribe(data => { | |||
if (typeof data !== "object") { | |||
@@ -36,11 +38,10 @@ export class MqttRequestService { | |||
console.error('Error:', err); | |||
}); | |||
this.mqttService.subscribeToTopic("BACKEND/DATA/ERROR").subscribe(data => { | |||
if (typeof data !== "object") { | |||
const payload = JSON.parse(data) as string; | |||
this.mqttService.subscribeToTopic("BACKEND/DATA/ERROR").subscribe(errorMsg => { | |||
if (typeof errorMsg !== "object") { | |||
this.dialog.open(ErrorDialogComponent, { | |||
data: payload, | |||
data: errorMsg, | |||
width: '400px', | |||
}); | |||
} | |||
@@ -65,18 +66,18 @@ export class MqttRequestService { | |||
console.error('Error:', err); | |||
}); | |||
this.mqttService.subscribeToTopic("BACKEND/DATA/POSITION").subscribe(data => { | |||
if (typeof data !== "object") { | |||
const payload = JSON.parse(data) as Position; | |||
this.mqttSetDataService.setRobotPosition(payload); | |||
} | |||
}, err => { | |||
this.dialog.open(ErrorDialogComponent, { | |||
data: err, | |||
width: '400px', | |||
}); | |||
console.error('Error:', err); | |||
}); | |||
// this.mqttService.subscribeToTopic("BACKEND/DATA/POSITION").subscribe(data => { | |||
// if (typeof data !== "object") { | |||
// const payload = JSON.parse(data) as Position; | |||
// this.mqttSetDataService.setRobotPosition(payload); | |||
// } | |||
// }, err => { | |||
// this.dialog.open(ErrorDialogComponent, { | |||
// data: err, | |||
// width: '400px', | |||
// }); | |||
// console.error('Error:', err); | |||
// }); | |||
this.mqttService.subscribeToTopic("BACKEND/DATA/BATTERY").subscribe(data => { | |||
if (typeof data !== "object") { | |||
@@ -92,9 +93,10 @@ export class MqttRequestService { | |||
}); | |||
this.mqttService.subscribeToTopic("BACKEND/DATA/ROBOTREADY").subscribe(data => { | |||
if (typeof data !== "object") { | |||
const payload = JSON.parse(data) as boolean; | |||
this.mqttSetDataService.setRobotReady(payload); | |||
if (data === "False") { | |||
this.mqttSetDataService.setRobotReady(false); | |||
} else if (data === "True") { | |||
this.mqttSetDataService.setRobotReady(true); | |||
} | |||
}, err => { | |||
this.dialog.open(ErrorDialogComponent, { | |||
@@ -116,14 +118,7 @@ export class MqttRequestService { | |||
}); | |||
console.error('Error:', err); | |||
}); | |||
// this.mqttService.subscribeToTopic("BACKEND/DATA/POSITION").subscribe(data => { | |||
// if (typeof data !== "object") { | |||
// const payload = JSON.parse(data) as Plant[]; | |||
// this.mqttSetDataService.setDataAllPlants(payload); | |||
// } | |||
// }, err => { | |||
// console.error('Error:', err); | |||
// }); | |||
// this.mqttService.subscribeToTopic("BACKEND/DATA/PICTURE").subscribe(data => { | |||
// if (typeof data !== "object") { | |||
// const payload = JSON.parse(data) as Plant; | |||
@@ -178,10 +173,15 @@ export class MqttRequestService { | |||
publishToPLANTCOUNT() { | |||
this.mqttService.publishToTopic('BACKEND/ACTION/PLANTCOUNT'); | |||
} | |||
/** | |||
* publishToINPUT wird die Spracheingabe übermittelt, die dann mit | |||
* mehreren if else anweisungen einen Request an das Backend sendet und | |||
* die Sprachausgabe mit next(..) triggert | |||
* @method | |||
*/ | |||
publishToINPUT(message: string) { | |||
message = message.replace(/\s/g, ""); | |||
console.log(":" + message + ":"); | |||
message = message.replace(/\s/g, ""); //entfernt alle leerzeichen | |||
console.log(":" + message + ":"); //Nachricht die übermittel wurde, wird ausgegeben auf der Konsole | |||
let msgFound: boolean = false; | |||
if (message === "whereismyrobot") { | |||
@@ -194,10 +194,11 @@ export class MqttRequestService { | |||
this.sourceMessage.next("The data is being collected and you can view it under the 'Robot' tab"); | |||
} else if (message === "howaremyplants") { | |||
msgFound = true; | |||
// this.mqttService.publishToTopic('BACKEND/ACTION/DRIVEALL'); | |||
this.mqttService.publishToTopic('BACKEND/ACTION/DRIVEALL'); | |||
this.sourceMessage.next("Robot is driving to all plants"); | |||
} else { | |||
this.storeService.getAllPlantNames().subscribe(result => | |||
// schickt den Roboter zur eingegeben Pflanze.. | |||
this.storeService.getAllPlantNames().pipe(take(1)).subscribe(result => | |||
result.forEach((element: string) => { | |||
let msgPlantName = "howismyplant".concat(element.toLowerCase()) | |||
if (message === msgPlantName) { | |||
@@ -210,7 +211,9 @@ export class MqttRequestService { | |||
) | |||
} | |||
// Wenn kein case eintrifft, wird "Please try again" ausgegeben | |||
if (!msgFound) { | |||
msgFound = false; | |||
this.sourceMessage.next("Please try again"); | |||
} | |||
@@ -6,12 +6,12 @@ import { Observable } from 'rxjs'; | |||
providedIn: 'root' | |||
}) | |||
export class MqttService { | |||
private client: MqttClient; | |||
// Connection zu dem MQTT Broker | |||
constructor() { | |||
this.client = connect('wss://mqtt.eclipseprojects.io:443/mqtt'); //Je nachdem welchen Link der Broker hat | |||
// this.client = connect('mqtt://192.168.137.197:1883', { clientId: 'kemal' }); | |||
// this.client = connect('wss://mqtt.eclipseprojects.io:443/mqtt'); //Je nachdem welchen Link der Broker hat | |||
this.client = connect('mqtt://192.168.137.197:1883', { clientId: 'kemal' }); | |||
} | |||
public subscribeToTopic(topic: string): Observable<any> { |
@@ -8,6 +8,8 @@ import { RobotBattery } from '../models/robotBattery.model'; | |||
@Injectable({ | |||
providedIn: 'root' | |||
}) | |||
export class StoreService { | |||
positionRobot: Position; | |||
plantCount: PlantCount; |
@@ -11,6 +11,7 @@ import { MqttRequestService } from './Service/Mqtt/mqtt-request.service'; | |||
export class AppComponent { | |||
header: string; | |||
constructor(private mqttRequestService: MqttRequestService, private location: Location) { | |||
// Header in der Leiste zu bestimmen | |||
const actualRoute = this.location.path().slice(1); | |||
const lastParam = actualRoute.charAt(0).toUpperCase() + actualRoute.slice(1); | |||
if (lastParam === "") { |
@@ -17,13 +17,11 @@ | |||
Soil Moisture: <br> | |||
<img class="icons-measurements" src="assets/images/Icons-Card/brightness_icon.png" alt="not available"> | |||
Brightness:<br> | |||
<!-- <img class="icons-measurements" src="assets/images/Icons-Card/Timestamp_icon.png" alt="not available"> | |||
Timestamp: --> | |||
</div> | |||
<div class="item-Measurements-Values"> | |||
<mat-form-field class="item-option" appearance="fill"> | |||
<mat-label>Choose an ID</mat-label> | |||
<mat-select [(value)]="selected" (closed)="onOptionSelected(selected)"> | |||
<mat-select [(value)]="selected" (closed)="onOptionSelected()"> | |||
<mat-option *ngFor="let option of options$ | async" [value]="option"> | |||
{{option}} | |||
</mat-option> |
@@ -12,13 +12,17 @@ import { MapPlantDialogComponent } from '../map-plant-dialog/map-plant-dialog.co | |||
templateUrl: './add-plant-dialog.component.html', | |||
styleUrls: ['./add-plant-dialog.component.css'] | |||
}) | |||
/** | |||
* @description | |||
* Mit diesem Dialog "AddPlantDialogComponent" wird eine neue Pflanze erstellt und in das Backend geschickt. | |||
*/ | |||
export class AddPlantDialogComponent implements OnInit { | |||
selected: number; | |||
options$: Observable<number[]>; | |||
plantNames: string[]; | |||
plant = {} as Plant; | |||
buttonSavedisabled: boolean; | |||
number: number[]; | |||
constructor(public dialogRef: MatDialogRef<AddPlantDialogComponent>, | |||
@Inject(MAT_DIALOG_DATA) public data: any, | |||
@@ -28,16 +32,26 @@ export class AddPlantDialogComponent implements OnInit { | |||
} | |||
ngOnInit(): void { | |||
this.buttonSavedisabled = true; | |||
this.mqttRequestService.publishToPLANTCOUNT(); | |||
this.buttonSavedisabled = true; //Button "Save" wird disabled | |||
this.mqttRequestService.publishToPLANTCOUNT(); // Pflanzen anzahl wird angefordet# | |||
// ID's bei denen noch keine Pflanze sind, werden in "option$" rein geschrieben | |||
this.storeService.currentPlants.subscribe(response => { | |||
this.options$ = this.storeService.getIDsWithoutPlant(response); | |||
}) | |||
// Alle aktuellen Pflanzen Namen werden in "plantNames" geschrieben | |||
this.storeService.getAllPlantNames().subscribe(result => { | |||
this.plantNames = result | |||
}); | |||
} | |||
/** | |||
* Nach dem der Button "Save" geklickt wurde, werden die Daten in die Pflanze geschrieben | |||
* die anschließend geprüft wird auf zulässige Werte, falls unzulässige werte vorhanden sind, | |||
* wird eine Fehlermeldung angezeigt | |||
* @method onSaveDialog | |||
*/ | |||
onSaveDialog() { | |||
this.plant.PlantName = (<HTMLInputElement>document.getElementById("inputName")).value; | |||
this.plant.AirTemperature = +(<HTMLInputElement>document.getElementById("inputAirTemperature")).value; | |||
@@ -48,6 +62,7 @@ export class AddPlantDialogComponent implements OnInit { | |||
const plantInputString: string = this.plantInputTestFails(); | |||
// bei unzulässigen Werten --> Dialog, bei zulässigen Wertden --> Pflanze wird an das Backend geschickt | |||
if (plantInputString) { | |||
this.dialog.open(ErrorDialogComponent, { | |||
data: "Error: " + plantInputString, | |||
@@ -55,11 +70,16 @@ export class AddPlantDialogComponent implements OnInit { | |||
}); | |||
} else { | |||
this.mqttRequestService.publishToNEWPLANT(this.plant); | |||
this.mqttRequestService.publishToGETALLDATA(); | |||
window.location.reload(); | |||
this.mqttRequestService.publishToGETALLDATA(); // Daten werden aus dem Backend angefragt | |||
window.location.reload(); // Seite neu laden | |||
} | |||
} | |||
/** | |||
* Methode prüft ob die Werte die eingegeben wurden, korrekt sind. | |||
* @method | |||
* @return Bei einem Fehler --> Fehlermeldung; wenn es passt --> string oder leeren string | |||
*/ | |||
plantInputTestFails(): string { | |||
if (this.plantNames.indexOf(this.plant.PlantName) > -1) { | |||
@@ -77,12 +97,16 @@ export class AddPlantDialogComponent implements OnInit { | |||
if (this.plant.SoilMoisture > 100) { | |||
return "Soil Moisture is to high"; | |||
} | |||
if (this.plant.Brightness > 100) { | |||
if (this.plant.Brightness > 40000) { | |||
return "Brightness is to high"; | |||
} | |||
return ""; //Empty string is a Boolean false! | |||
} | |||
/** | |||
* beim klick auf den Button, wird das Dialog "MapPlantDialogComponent" geöffnet | |||
* @method | |||
*/ | |||
onOpenMap() { | |||
this.dialog.open(MapPlantDialogComponent, { | |||
width: '400px', | |||
@@ -90,11 +114,11 @@ export class AddPlantDialogComponent implements OnInit { | |||
}); | |||
} | |||
onOptionSelected(numb: number) { | |||
let num: number = numb; | |||
if (num < 7 && num > 0) { //TODOO anzahl der Pflanzen IDS variable machen statt 7 evtl. eine variable | |||
this.buttonSavedisabled = false; | |||
} | |||
/** | |||
* nach der Auswahl der ID, wird der Button "Save" enabled | |||
* @method | |||
*/ | |||
onOptionSelected() { | |||
this.buttonSavedisabled = false; | |||
} | |||
} |
@@ -1,4 +1,4 @@ | |||
import { Component, Inject, OnInit } from '@angular/core'; | |||
import { Component, Inject } from '@angular/core'; | |||
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; | |||
import { MqttRequestService } from 'src/app/Service/Mqtt/mqtt-request.service'; | |||
import { Plant } from 'src/app/models/plant.model'; | |||
@@ -9,7 +9,7 @@ import { ErrorDialogComponent } from '../error-dialog/error-dialog.component'; | |||
templateUrl: './configure-plant-dialog.component.html', | |||
styleUrls: ['./configure-plant-dialog.component.css'] | |||
}) | |||
export class ConfigurePlantDialogComponent implements OnInit { | |||
export class ConfigurePlantDialogComponent { | |||
plant: Plant; | |||
constructor(public dialogRef: MatDialogRef<ConfigurePlantDialogComponent>, | |||
@@ -19,9 +19,12 @@ export class ConfigurePlantDialogComponent implements OnInit { | |||
this.plant = data.plant; | |||
} | |||
ngOnInit(): void { | |||
} | |||
/** | |||
* Nach dem der Button "Save" geklickt wurde, werden die Daten in die Pflanze geschrieben | |||
* die anschließend geprüft wird auf zulässige Werte, falls unzulässige werte vorhanden sind, | |||
* wird eine Fehlermeldung angezeigt | |||
* @method onSaveDialog | |||
*/ | |||
onSaveDialog() { | |||
this.plant.AirTemperature = +(<HTMLInputElement>document.getElementById("inputAirTemperature")).value; | |||
this.plant.AirHumidity = +(<HTMLInputElement>document.getElementById("inputAirHumidity")).value; | |||
@@ -29,19 +32,25 @@ export class ConfigurePlantDialogComponent implements OnInit { | |||
this.plant.Brightness = +(<HTMLInputElement>document.getElementById("inputBrightness")).value; | |||
const plantInputString: string = this.plantInputTestFails(); | |||
// bei unzulässigen Werten --> Dialog, bei zulässigen Wertden --> Pflanze wird an das Backend geschickt | |||
if (plantInputString) { | |||
this.dialog.open(ErrorDialogComponent, { | |||
data: "Error: " + plantInputString, | |||
width: '400px', | |||
}); | |||
} else { | |||
//Request to the Backend, to change the data of the plant | |||
this.mqttRequestService.publishToCONFIGUREPLANT(this.plant); | |||
this.mqttRequestService.publishToGETALLDATA(); | |||
window.location.reload(); | |||
this.mqttRequestService.publishToCONFIGUREPLANT(this.plant); //Request to the Backend, to change the data of the plant | |||
this.mqttRequestService.publishToGETALLDATA(); // Daten werden aus dem Backend angefragt | |||
window.location.reload(); // Seite neu laden | |||
} | |||
} | |||
/** | |||
* Methode prüft ob die Werte die eingegeben wurden, korrekt sind. | |||
* @method | |||
* @return Bei einem Fehler --> Fehlermeldung; wenn es passt --> string oder leeren string | |||
*/ | |||
plantInputTestFails(): string { | |||
if (this.plant.AirTemperature > 100) { | |||
return "Air Temperature is to high"; | |||
@@ -52,7 +61,7 @@ export class ConfigurePlantDialogComponent implements OnInit { | |||
if (this.plant.SoilMoisture > 100) { | |||
return "Soil Moisture is to high"; | |||
} | |||
if (this.plant.Brightness > 100) { | |||
if (this.plant.Brightness > 40000) { | |||
return "Brightness is to high"; | |||
} | |||
return ""; //Empty string is a Boolean false! |
@@ -11,12 +11,15 @@ import { ConfigurePlantDialogComponent } from '../configure-plant-dialog/configu | |||
}) | |||
export class DeleteConfirmDialogComponent { | |||
plant: Plant; | |||
constructor(public dialogRef: MatDialogRef<ConfigurePlantDialogComponent>, | |||
@Inject(MAT_DIALOG_DATA) public data: Plant, private mqttRequestService: MqttRequestService) { | |||
this.plant = data; | |||
} | |||
/** | |||
* beim Click auf "Delete" wird eine anfrage an das Backend geschickt um die Pflanze zu löschen. | |||
* @method | |||
*/ | |||
onDelete() { | |||
this.mqttRequestService.publishToDELETEPLANT(this.plant.PlantID); | |||
} |
@@ -1,4 +1,4 @@ | |||
import { Component, Inject, OnInit } from '@angular/core'; | |||
import { Component, Inject } from '@angular/core'; | |||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; | |||
import { ConfigurePlantDialogComponent } from '../configure-plant-dialog/configure-plant-dialog.component'; | |||
@@ -7,19 +7,15 @@ import { ConfigurePlantDialogComponent } from '../configure-plant-dialog/configu | |||
templateUrl: './error-dialog.component.html', | |||
styleUrls: ['./error-dialog.component.css'] | |||
}) | |||
export class ErrorDialogComponent implements OnInit { | |||
export class ErrorDialogComponent { | |||
text: string = ""; | |||
constructor(public dialogRef: MatDialogRef<ConfigurePlantDialogComponent>, | |||
@Inject(MAT_DIALOG_DATA) public data: any) { | |||
this.text = data; | |||
} | |||
ngOnInit(): void { | |||
} | |||
onClose() { | |||
window.location.reload(); | |||
window.location.reload(); // Seite neu laden | |||
} | |||
} |
@@ -1,15 +1,10 @@ | |||
import { Component, OnInit } from '@angular/core'; | |||
import { Component } from '@angular/core'; | |||
@Component({ | |||
selector: 'app-map-plant-dialog', | |||
templateUrl: './map-plant-dialog.component.html', | |||
styleUrls: ['./map-plant-dialog.component.css'] | |||
}) | |||
export class MapPlantDialogComponent implements OnInit { | |||
export class MapPlantDialogComponent { | |||
constructor() { } | |||
ngOnInit(): void { | |||
} | |||
} |