commit 8e39f4556d2f73ce67b0371312c0b43b92023c01
author Emily Markova <emily.markova@gmail.com> Sat Dec 23 12:17:30 2023 -0800
committer Emily Markova <emily.markova@gmail.com> Sat Jan 27 00:22:23 2024 -0800
tree c5ab0e78a720c8e85ac7854664f760caa06d81f9
parent e5d758f3735f7668dfa85e4e55e8becab7d3fe87

Add pit image submission test

Add submission test and add pit images to view tab.

Signed-off-by: Emily Markova <emily.markova@gmail.com>
Change-Id: I01e227f19c0622fcca09186662ab25ab34599045

scouting/www/pit_scouting/pit_scouting.component.ts

diff --git a/scouting/www/pit_scouting/pit_scouting.component.ts b/scouting/www/pit_scouting/pit_scouting.component.ts
index fe14090..58e7647 100644
--- a/scouting/www/pit_scouting/pit_scouting.component.ts
+++ b/scouting/www/pit_scouting/pit_scouting.component.ts
@@ -1,4 +1,10 @@
-import {Component} from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
 import {Builder, ByteBuffer} from 'flatbuffers';
 import {ErrorResponse} from '../../webserver/requests/messages/error_response_generated';
 import {SubmitPitImage} from '../../webserver/requests/messages/submit_pit_image_generated';
@@ -16,10 +22,11 @@
   styleUrls: ['../app/common.css', './pit_scouting.component.css'],
 })
 export class PitScoutingComponent {
+  @ViewChild('preview') preview: ElementRef<HTMLImageElement>;
   section: Section = 'Data';
 
   errorMessage = '';
-  teamNumber: string = '971';
+  teamNumber: string = '1';
   pitImage: string = '';
 
   async readFile(file): Promise<ArrayBuffer> {
@@ -39,10 +46,19 @@
     return new Uint8Array(await this.readFile(selectedFile));
   }
 
+  async setPitImage(event) {
+    const src = URL.createObjectURL(event.target.files[0]);
+    const previewElement = this.preview.nativeElement;
+    previewElement.src = src;
+    previewElement.style.display = 'block';
+  }
+
   async submitData() {
     const builder = new Builder();
     const teamNumber = builder.createString(this.teamNumber);
-    const pitImage = builder.createString(this.pitImage.toString());
+    const pitImage = builder.createString(
+      this.pitImage.toString().replace(/^.*[\\\/]/, '')
+    );
     const imageData = SubmitPitImage.createImageDataVector(
       builder,
       await this.getImageData()
@@ -68,8 +84,14 @@
 
       const errorMessage = parsedResponse.errorMessage();
       this.errorMessage = `Received ${res.status} ${res.statusText}: "${errorMessage}"`;
+      return;
     }
-    this.section = 'TeamSelection';
+
+    // Reset Data.
+    this.section = 'Data';
+    this.errorMessage = '';
     this.pitImage = '';
+    const previewElement = this.preview.nativeElement;
+    previewElement.src = '';
   }
 }

scouting/www/pit_scouting/pit_scouting.ng.html

diff --git a/scouting/www/pit_scouting/pit_scouting.ng.html b/scouting/www/pit_scouting/pit_scouting.ng.html
index 9e90d2d..94de4f0 100644
--- a/scouting/www/pit_scouting/pit_scouting.ng.html
+++ b/scouting/www/pit_scouting/pit_scouting.ng.html
@@ -5,6 +5,7 @@
   <div *ngSwitchCase="'Data'" id="pitImageSelection" class="container-fluid">
     <label for="teamNumber">Team Number</label>
     <input [(ngModel)]="teamNumber" type="text" id="teamNumber" />
+    <img id="preview" #preview style="max-height: 200px; max-width: 200px" />
     <form action="setPitImage()">
       <label for="pitImage">Select pit image:</label>
       <br />
@@ -12,6 +13,7 @@
         id="pitImage"
         [(ngModel)]="pitImage"
         type="file"
+        (change)="setPitImage($event)"
         accept="image/*"
       />
     </form>