Revize 533869de

Re #8789 - Přidat sensor - formulář, endpoint

+ form for adding sensor to unit
+ first styling form

src/app/dashboard/components/dashboard.component.html

@@ -14 +14 @@
           <div class="col-md-6">{{ unit.unit.description}}</div>
           <div class="col-md-6 text-right">
             <p-button label="Sensors graph" icon="pi pi-chart-line" [routerLink]="['/dashboard/unit', unit.unit.unitId]"></p-button>
-            <p-button label="Add sensor" icon="pi pi-cog" (onClick)="editUnit($event, unit.unit)"></p-button>
+            <p-button label="Add sensor" icon="pi pi-cog" (onClick)="addSensor($event, unit.unit)"></p-button>
             <p-button label="Edit unit" icon="pi pi-cog" (onClick)="editUnit($event, unit.unit)"></p-button>
           </div>
         </div>
@@ -28 +28 @@
 
 <app-unit-popup *ngIf="editedUnit" [(isVisible)]="showEditUnitPopup" [unit]="editedUnit"></app-unit-popup>
 <app-unit-insert-popup [(isVisible)]="showInsertUnitPopup" [phenomenons]="phenomenons"></app-unit-insert-popup>
+<app-sensor-insert-popup *ngIf="editedUnit" [unit]="editedUnit" [(isVisible)]="showInsertSensorPopup" [phenomenons]="phenomenons"></app-sensor-insert-popup>

src/app/dashboard/components/dashboard.component.ts

@@ -23 +23 @@
   showInsertUnitPopup = false;
   editedUnit: Unit;
   showEditUnitPopup = false;
+  showInsertSensorPopup = false;
   phenomenons: Phenomenon[];
 
   constructor(
@@ -60 +61 @@
   getEditedUnit(): Unit {
     return this.editedUnit;
   }
+
+  addSensor($event: any, unit: Unit) {
+    $event.stopPropagation();
+    this.showInsertSensorPopup = true;
+    this.editedUnit = unit;
+  }
 }

src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html

@@ +1 @@
+<p-dialog [visible]="isVisible" [closable]="false" [draggable]="false" header="Add sensor to unit - {{unit?.unitId}}" [style]="{width: '70vw'}"
+          [baseZIndex]="10000" (onShow)="clearFormArray()">
+
+  <form [formGroup]="insertForm">
+  <div class="input-group form-group">
+    <div formArrayName="sensors" *ngFor="let item of insertForm.get('sensors')['controls']; let i = index;">
+      <div [formGroupName]="i">
+        <div class="input-group form-group">
+          <div class="input-group-prepend">
+            <span class="input-group-text">Sensor ID</span>
+          </div>
+          <input type="text" formControlName="sensorId" class="form-control" id="sensorId" placeholder="sensorId"/>
+        </div>
+        <div class="input-group form-group">
+          <div class="input-group-prepend">
+            <span class="input-group-text">Sensor name</span>
+          </div>
+          <input type="text" formControlName="sensorName" class="form-control" id="sensorName"
+                 placeholder="sensorName"/>
+        </div>
+        <div class="input-group form-group">
+          <div class="input-group-prepend">
+            <span class="input-group-text">Sensor type</span>
+          </div>
+          <input type="text" formControlName="sensorType" class="form-control" id="sensorType"
+                 placeholder="sensorType"/>
+        </div>
+        <div class="input-group form-group">
+          <div class="input-group-prepend">
+            <span class="input-group-text">Sensor name</span>
+          </div>
+          <select formControlName="phenomenons" id="phenomenons">
+            <option *ngFor="let phenomenon of phenomenons; let i = index" [value]="phenomenons[i].phenomenonId">
+              {{phenomenons[i].phenomenonName}} ( {{ phenomenons[i].unit}})
+            </option>
+          </select>
+        </div>
+      </div>
+      <br>
+    </div>
+  </div>
+  </form>
+
+  <p-button type="button" (click)="addSensor()" class="pr-2">Add Sensor</p-button>
+  <p-footer>
+    <div class="row justify-content-end align-items-center">
+      <div>
+        <p-button icon="pi pi-check" (click)="processInsertion()" type="submit" label="Uložit" class="pr-2"></p-button>
+        <p-button icon="pi pi-times" (click)="close()" label="Zavřít" class="pr-2"></p-button>
+      </div>
+    </div>
+  </p-footer>
+</p-dialog>

src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.ts

@@ +1 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {ManagementService} from '../../../shared/api/endpoints/services/management.service';
+
+@Component({
+  selector: 'app-sensor-insert-popup',
+  templateUrl: './sensor-insert-popup.component.html',
+  styleUrls: ['./sensor-insert-popup.component.scss']
+})
+export class SensorInsertPopupComponent implements OnInit {
+
+  insertForm: FormGroup;
+  items: FormArray;
+
+  @Input() phenomenons;
+  @Input() isVisible;
+  @Input() unit;
+  @Output() isVisibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private managementService: ManagementService
+  ) {
+    this.initForm();
+  }
+
+  ngOnInit(): void {
+  }
+
+  processInsertion() {
+  // TODO endpoint
+  }
+
+  close() {
+    this.isVisibleChange.emit(false);
+  }
+
+  initForm() {
+    this.insertForm = this.formBuilder.group({
+      sensors: this.formBuilder.array([this.createSensor()])
+    });
+  }
+
+  createSensor(): FormGroup {
+    return this.formBuilder.group({
+      sensorId: ['', Validators.required],
+      sensorName: ['', Validators.required],
+      sensorType: ['', Validators.required],
+      phenomenons: ['', Validators.required]
+    });
+  }
+
+  addSensor(): void {
+    this.items = this.insertForm.get('sensors') as FormArray;
+    this.items.push(this.createSensor());
+  }
+
+  clearFormArray() {
+    const frmArray = this.insertForm?.get('sensors') as FormArray;
+    if (frmArray) {
+      frmArray.clear();
+    }
+    this.addSensor();
+    this.insertForm.reset();
+  }
+}

src/app/dashboard/dashboard.module.ts

@@ -11 +11 @@
 import { SensorPopupComponent } from './components/sensor-popup/sensor-popup.component';
 import { UnitInsertPopupComponent } from './components/unit-insert-popup/unit-insert-popup.component';
 import {ReactiveFormsModule} from '@angular/forms';
+import { SensorInsertPopupComponent } from './components/sensor-insert-popup/sensor-insert-popup.component';
 
 
 
 @NgModule({
-  declarations: [DashboardComponent, SensorsComponent, UnitPopupComponent, SensorPopupComponent, UnitInsertPopupComponent],
+  declarations: [DashboardComponent, SensorsComponent, UnitPopupComponent, SensorPopupComponent, UnitInsertPopupComponent, SensorInsertPopupComponent],
   imports: [
     CommonModule,
     NavBarModule,