Merge pull request #51 from phylomeno/feature/optimize_led_setup

optimize LED configuration #37

src/ui/src/app/open-race-led-strips/edit-led-strip/edit-led-strip.component.html

@@ -8,7 +8,6 @@
                     value="{{stripCategory}}">{{stripCategory}}</mat-option>
       </mat-select>
     </mat-form-field>
-    <button type="button" (click)="testFlashLedStrip()" mat-stroked-button color="accent">Test</button>
     <button type="submit" mat-flat-button color="primary">Save</button>
   </div>
 </form>

src/ui/src/app/open-race-led-strips/edit-led-strip/edit-led-strip.component.ts

@@ -23,8 +23,4 @@ export class EditLedStripComponent implements OnInit {
   updateLedStrip() {
     this.ledStripService.updateLedStripCategory(this.ledStrip);
   }
-
-  testFlashLedStrip() {
-    this.ledStripService.testFlashLedStrip(this.ledStrip.id);
-  }
 }

src/ui/src/app/open-race-led-strips/led-strips-list/led-strips-list.component.html

@@ -1,6 +1,13 @@
 <div fxLayout="column" fxLayoutGap="1em" cdkDropList (cdkDropListDropped)="drop($event)">
-    <mat-card *ngFor="let ledStrip of ledStrips" class="mat-elevation-z15" cdkDrag>
-      <div class="mat-title">LED Strip {{ledStrip.id}}</div>
+    <mat-expansion-panel *ngFor="let ledStrip of ledStrips" class="mat-elevation-z15" cdkDrag>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <h2>LED Strip {{ledStrip.id}}</h2>
+        </mat-panel-title>
+        <mat-panel-description fxLayout="row-reverse" fxLayoutAlign="start center">
+          <button type="button" (click)="testFlashLedStrip($event, ledStrip.id);" mat-stroked-button color="accent">Test</button>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
       <app-edit-led-strip [ledStrip]="ledStrip"></app-edit-led-strip>
-    </mat-card>
+    </mat-expansion-panel>
 </div>

src/ui/src/app/open-race-led-strips/led-strips-list/led-strips-list.component.ts

@@ -3,6 +3,7 @@ import { LedStrip } from '../led-strip';
 import { LedStripsService } from '../led-strips.service';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
+
 @Component({
   selector: 'app-led-strips-list',
   templateUrl: './led-strips-list.component.html',
@@ -11,8 +12,8 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 export class LedStripsListComponent implements OnInit {
   ledStrips: LedStrip[] = [];
 
-  constructor(private ledStripsService: LedStripsService) {
-    this.ledStripsService.ledStrips.subscribe(newLedStrips => this.ledStrips = newLedStrips);
+  constructor(private ledStripService: LedStripsService) {
+    this.ledStripService.ledStrips.subscribe(newLedStrips => this.ledStrips = newLedStrips);
   }
 
   ngOnInit() {
@@ -22,7 +23,13 @@ export class LedStripsListComponent implements OnInit {
     moveItemInArray(this.ledStrips, event.previousIndex, event.currentIndex);
     for (let i = 0; i < this.ledStrips.length; i++) {
       this.ledStrips[i].order = i.toString();
-      this.ledStripsService.updateLedStripOrder(this.ledStrips[i]);
+      this.ledStripService.updateLedStripOrder(this.ledStrips[i]);
     }
   }
+
+  testFlashLedStrip(event, ledStripId) {
+    this.ledStripService.testFlashLedStrip(ledStripId);
+    // needed to not expand panel while testing led
+    event.stopPropagation();
+  }
 }