commit 38d08ba15263cc233c531cf0589246bdce402f08
author emilym <emily.markova@gmail.com> Sat Oct 22 15:25:01 2022 -0700
committer Emily Markova <emily.markova@gmail.com> Sat Oct 29 21:11:56 2022 -0700
tree 4bec22c691a60c41f81d2d0891f339cac26e12e6
parent 32538b383578dad10525fda94fb6858a18923608

scouting: button to switch field pov

Signed-off-by: emilym <emily.markova@gmail.com>
Change-Id: Ic5e22194c863c0a573b35b553c98c10d7be5e6d7

scouting/www/entry/entry.component.css

diff --git a/scouting/www/entry/entry.component.css b/scouting/www/entry/entry.component.css
index 24e4127..6d13657 100644
--- a/scouting/www/entry/entry.component.css
+++ b/scouting/www/entry/entry.component.css
@@ -15,3 +15,12 @@
 button {
   touch-action: manipulation;
 }
+
+#switchFldbtn {
+  width: 15%;
+  display: block;
+  margin: 0 auto;
+  box-shadow: 2px 2px 1px #ccc;
+  max-width: 105px;
+  text-align: center;
+}

scouting/www/entry/entry.component.ts

diff --git a/scouting/www/entry/entry.component.ts b/scouting/www/entry/entry.component.ts
index d6829c5..08f4dd4 100644
--- a/scouting/www/entry/entry.component.ts
+++ b/scouting/www/entry/entry.component.ts
@@ -38,6 +38,23 @@
   f: 'Finals',
 };
 
+const IMAGES_ARRAY = [
+  {
+    id: 'field_quadrants_image',
+    original_image:
+      '/sha256/cbb99a057a2504e80af526dae7a0a04121aed84c56a6f4889e9576fe1c20c61e/pictures/field/quadrants.jpeg',
+    reversed_image:
+      '/sha256/2c67fffbb722e9a7d0e1d270f1aad7f39a2dc8493c2e7ad1ae50bd6fa52d5bb7/pictures/field/reversed_quadrants.jpeg',
+  },
+  {
+    id: 'field_balls_image',
+    original_image:
+      '/sha256/e095cc8a75d804b0e2070e0a941fab37154176756d4c1a775e53cc48c3a732b9/pictures/field/balls.jpeg',
+    reversed_image:
+      '/sha256/fe4a4605c03598611c583d4dcdf28e06a056a17302ae91f5c527568966d95f3a/pictures/field/reversed_balls.jpeg',
+  },
+];
+
 @Component({
   selector: 'app-entry',
   templateUrl: './entry.ng.html',
@@ -122,6 +139,14 @@
     this.scrollToTop();
   }
 
+  flipImages() {
+    for (let obj of IMAGES_ARRAY) {
+      let img = document.getElementById(obj.id) as HTMLImageElement;
+      img.src = img.src.endsWith(obj.original_image)
+        ? obj.reversed_image
+        : obj.original_image;
+    }
+  }
   private scrollToTop() {
     this.header.nativeElement.scrollIntoView();
   }

scouting/www/entry/entry.ng.html

diff --git a/scouting/www/entry/entry.ng.html b/scouting/www/entry/entry.ng.html
index 6dab39b..9be8db7 100644
--- a/scouting/www/entry/entry.ng.html
+++ b/scouting/www/entry/entry.ng.html
@@ -54,8 +54,12 @@
   </div>
 
   <div *ngSwitchCase="'Auto'" id="auto" class="container-fluid">
+    <button class="buttons" id="switch_field_button" (click)="flipImages()">
+      Flip
+    </button>
     <div class="row">
       <img
+        id="field_quadrants_image"
         src="/sha256/cbb99a057a2504e80af526dae7a0a04121aed84c56a6f4889e9576fe1c20c61e/pictures/field/quadrants.jpeg"
         alt="Quadrants Image"
       />
@@ -97,8 +101,9 @@
     </div>
     <div class="row">
       <img
+        id="field_balls_image"
         src="/sha256/e095cc8a75d804b0e2070e0a941fab37154176756d4c1a775e53cc48c3a732b9/pictures/field/balls.jpeg"
-        alt="Image"
+        alt="Balls Image"
       />
       <form>
         <!--Choice for each ball location-->