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
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 = '';
   }
 }