Round Editor for custom rounds

src/app/app-routing.module.ts

@@ -14,6 +14,7 @@ import { AboutComponent } from './pages/about/about.component';
 import { FieldGuideTestComponent } from './test-pages/field-guide-test/field-guide-test.component';
 import { FieldGuideComponent } from './pages/field-guide/field-guide.component';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
+import { RoundEditorTestComponent } from './test-pages/round-editor-test/round-editor-test.component';
 
 const testRoutes: Routes = [
   {path: 'timer-test', component: TimerTestComponent},
@@ -22,6 +23,7 @@ const testRoutes: Routes = [
   {path: 'round-template-test', component: RoundTemplateTestComponent},
   {path: 'flower-test', component: FlowerTestComponent},
   {path: 'field-guide-test', component: FieldGuideTestComponent},
+  {path: 'round-editor-test', component: RoundEditorTestComponent},
 ];
 
 const routes: Routes = [

src/app/app.module.ts

@@ -36,6 +36,11 @@ import { SharedModule } from './shared.module';
 import { FieldGuideTestComponent } from './test-pages/field-guide-test/field-guide-test.component';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
 import { FlowerLayoutWithBeesComponent } from './components/flower-layout-with-bees/flower-layout-with-bees.component';
+import { RoundFlowersEditorComponent } from './components/round-flowers-editor/round-flowers-editor.component';
+import { RoundEditorTestComponent } from './test-pages/round-editor-test/round-editor-test.component';
+import { FlowerSelectDialogComponent } from './components/flower-select-dialog/flower-select-dialog.component';
+import { LdRoundEditorComponent } from './pages/ld-round-editor/ld-round-editor.component';
+import { RoundInfoDialogComponent } from './components/round-info-dialog/round-info-dialog.component';
 
 const FIREBASE_MODULES = [
   AngularFireModule.initializeApp(environment.firebase),
@@ -70,6 +75,11 @@ const FIREBASE_MODULES = [
     FieldGuideTestComponent,
     PageNotFoundComponent,
     FlowerLayoutWithBeesComponent,
+    RoundFlowersEditorComponent,
+    RoundEditorTestComponent,
+    FlowerSelectDialogComponent,
+    LdRoundEditorComponent,
+    RoundInfoDialogComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/flower-layout/flower-layout.component.html

@@ -12,6 +12,7 @@
       [imgSrc]="item.imgSrc"
       [imgAlt]="item.alt"
       [active]="item.active"
+      (click)="itemClicked.emit(i)"
     >
     </app-flower-layout-item>
   </div>

src/app/components/flower-layout/flower-layout.component.scss

@@ -6,9 +6,11 @@
   height: 100%;
   display: block;
 
+
   .flower-item {
     position: absolute;
     transform: translate(-50%, -50%);
+    user-select: none;
   }
 }
 
@@ -18,4 +20,14 @@
   position: relative;
   overflow: hidden;
   contain: layout;
+
+  user-select: none;
+}
+
+:host[clickable-items] {
+  .flower-item {
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }

src/app/components/flower-layout/flower-layout.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
 import { trackByIndex } from 'src/app/utils/array-utils';
+import { FlowerSpecies } from 'src/app/flowers';
 
 export interface FlowerLayoutItem {
   imgSrc: string;
@@ -80,6 +81,8 @@ export class FlowerLayoutComponent implements OnInit {
 
   @Input() tooltips = false;
 
+  @Output() itemClicked = new EventEmitter<number>();
+
   trackByIndex = trackByIndex;
 
   constructor() { }

src/app/components/flower-select-dialog/flower-select-dialog.component.html

@@ -0,0 +1,17 @@
+<h1 mat-dialog-title>Select a Flower</h1>
+<div mat-dialog-content>
+  <div class="flowers item-list">
+    <mat-card
+      *ngFor="let flower of data.flowers"
+      matRipple
+      [mat-dialog-close]="flower"
+      class="item-card"
+      [attr.data-cy]="flower.id"
+    >
+      <div class="image-container">
+        <img [src]="flower.asset_urls.art_500_wide">
+      </div>
+      <mat-card-title>{{ flower.name | titlecase }}</mat-card-title>
+    </mat-card>
+  </div>
+</div>

src/app/components/flower-select-dialog/flower-select-dialog.component.scss

@@ -0,0 +1,44 @@
+@use '../../../variables' as *;
+
+$content-width: 1400px;
+$content-margin: 16px;
+$num-cols-max: 7;
+$item-max-width: ($content-width - (($num-cols-max - 1) * $content-margin)) / $num-cols-max;
+$item-img-height: 152px;
+
+.item-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(#{$item-max-width}, max(#{$item-img-height}, 50% - #{$content-margin * 3})), 1fr));
+  grid-gap: $content-margin;
+  grid-auto-rows: 1fr;
+
+  margin-top: $content-margin;
+
+  .item-card {
+    user-select: none;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    .image-container {
+      height: $item-img-height;
+      margin-bottom: 16px;
+      display: grid;
+      place-items: center;
+      img {
+        pointer-events: none;
+        display: block;
+        max-height: $item-img-height;
+        max-width: 100%;
+      }
+    }
+
+    .mat-card-title {
+      margin-bottom: 0;
+      line-height: mat-line-height($typography-config, subheading-1);
+    }
+  }
+
+  margin-bottom: $content-margin * 3;
+}

src/app/components/flower-select-dialog/flower-select-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FlowerSelectDialogComponent } from './flower-select-dialog.component';
+
+describe('FlowerSelectDialogComponent', () => {
+  let component: FlowerSelectDialogComponent;
+  let fixture: ComponentFixture<FlowerSelectDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FlowerSelectDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FlowerSelectDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/flower-select-dialog/flower-select-dialog.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FlowerSpecies, allFlowerSpeciesArray } from 'src/app/flowers';
+
+@Component({
+  selector: 'app-flower-select-dialog',
+  templateUrl: './flower-select-dialog.component.html',
+  styleUrls: ['./flower-select-dialog.component.scss']
+})
+export class FlowerSelectDialogComponent implements OnInit {
+
+
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: {flowers: FlowerSpecies[]} = {flowers: allFlowerSpeciesArray},
+    public dialogRef: MatDialogRef<FlowerSelectDialogComponent>
+  ) { }
+
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/round-chooser-dialog/round-chooser-dialog.component.ts

@@ -38,6 +38,14 @@ export class RoundChooserDialogComponent implements OnInit {
 
   getFlowers(flowers: FlowerSpecies[]): FlowerLayoutItem[] {
     return flowers.map((species) => {
+      if (!species) {
+        return {
+          imgSrc: '/assets/icons/icon-circle.svg',
+          alt: 'No Flower Selected',
+          active: true,
+          scale: 1
+        };
+      }
       return {
         imgSrc: species.asset_urls.art_500_wide,
         alt: species.name,

src/app/components/round-flowers-editor/round-flowers-editor.component.html

@@ -0,0 +1 @@
+<app-flower-layout [items]="getFlowerLayoutItemsFromFlowers(flowers)" [tooltips]="true" (itemClicked)="flowerClicked($event)" clickable-items></app-flower-layout>

src/app/components/round-flowers-editor/round-flowers-editor.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoundFlowersEditorComponent } from './round-flowers-editor.component';
+
+describe('RoundEditorComponent', () => {
+  let component: RoundFlowersEditorComponent;
+  let fixture: ComponentFixture<RoundFlowersEditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoundFlowersEditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoundFlowersEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/round-flowers-editor/round-flowers-editor.component.ts

@@ -0,0 +1,96 @@
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { FlowerLayoutItem } from '../flower-layout/flower-layout.component';
+import { FlowerSpecies, allFlowerSpecies, allFlowerSpeciesArray } from 'src/app/flowers';
+import { testRounds } from 'src/app/round-templates/test-rounds';
+import { Subject } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { takeUntil } from 'rxjs/operators';
+import { FlowerSelectDialogComponent } from '../flower-select-dialog/flower-select-dialog.component';
+
+@Component({
+  selector: 'app-round-flowers-editor',
+  templateUrl: './round-flowers-editor.component.html',
+  styleUrls: ['./round-flowers-editor.component.scss']
+})
+export class RoundFlowersEditorComponent implements OnInit {
+
+  @Input()
+  defaultFlowers: FlowerSpecies[] = [
+    null,
+    null,
+    null,
+    null,
+    null,
+    null,
+    null,
+    null,
+  ];
+
+  @Input()
+  flowerOptions: FlowerSpecies[] = allFlowerSpeciesArray;
+
+  // Output prop name must be Input prop name + 'Change'
+  // Use in your component to write an updated value back out to the parent
+  @Output()
+  flowersChange = new EventEmitter<FlowerSpecies[]>();
+
+  console = console;
+
+  flowers: FlowerSpecies[] = [];
+
+  constructor(readonly dialog: MatDialog) {
+
+
+  }
+
+
+  onDestroy$ = new Subject();
+
+  ngOnInit(): void {
+    this.flowers = [...this.defaultFlowers];
+  }
+
+  openDialog(data?: {flowers: FlowerSpecies[]}) {
+   return this.dialog.open(FlowerSelectDialogComponent, {
+      data,
+      panelClass: 'field-guide-panel',
+      maxWidth: null,
+      autoFocus: false
+    });
+
+  }
+
+
+  flowerClicked(index: number) {
+    const dialog = this.openDialog({flowers: this.flowerOptions});
+    dialog.afterClosed().subscribe(flower => {
+      if (flower) {
+        this.flowers[index] = flower;
+        this.flowersChange.emit(this.flowers);
+      }
+    });
+  }
+
+  getFlowerLayoutItemFromFlower(flower: FlowerSpecies): FlowerLayoutItem {
+    if (!flower) {
+      return {
+        imgSrc: '/assets/icons/icon-circle.svg',
+        alt: 'No Flower Selected',
+        active: true,
+        scale: 1
+      };
+    }
+    return {
+      imgSrc: flower.asset_urls.art_500_wide,
+      alt: flower.name,
+      active: true,
+      scale: flower.relative_size
+    };
+  }
+
+  getFlowerLayoutItemsFromFlowers(flowers: FlowerSpecies[]): FlowerLayoutItem[] {
+    return flowers.map((species) => this.getFlowerLayoutItemFromFlower(species));
+  }
+
+
+}

src/app/components/round-info-dialog/round-info-dialog.component.html

@@ -0,0 +1,29 @@
+<div class="header">
+  <button mat-icon-button class="close-button" aria-label="close dialog" mat-dialog-close>
+    <mat-icon>close</mat-icon>
+  </button>
+  <h1 mat-dialog-title>
+    {{data.round.name}}
+  </h1>
+</div>
+
+
+
+<div class="description">
+  <div *ngIf="data.round.description" class="description-text">
+    <p>{{data.round.description}}</p>
+  </div>
+
+  <div>
+    <h3>Bees in Round</h3>
+    <div class="accepted-list">
+      <div *ngFor="let item of data.round.bees" class="accepted-list-item">
+        <img *ngIf="!platform.WEBKIT; else webkitFixAcceptedImg" [src]="item.asset_urls.art_500_wide">
+        <ng-template #webkitFixAcceptedImg>
+          <img class="webkit-fix" [src]="item.asset_urls.art_512_square">
+        </ng-template>
+        <div class="accepted-name">{{item.name | titlecase}}</div>
+      </div>
+    </div>
+  </div>
+</div>