Add More Fields to Debugging Site And Fix its Formatting

Signed-off-by: Niko Sohmers <nikolai@sohmers.com>
Change-Id: I2acff7b0e8a5cf40f64d120853d1938f0c6ecae5
diff --git a/y2024/www/field.html b/y2024/www/field.html
index 2013cee..cfb8778 100644
--- a/y2024/www/field.html
+++ b/y2024/www/field.html
@@ -1,12 +1,27 @@
 <html>
-  <head>
-    <script src="field_main_bundle.min.js" defer></script>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-    <div id="field"> </div>
-    <div id="legend"> </div>
-    <div id="readouts">
+
+<head>
+  <script src="field_main_bundle.min.js" defer></script>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <div style="display: grid;
+  grid-template-columns: auto auto auto; gap: 5px;">
+    <div>
+      <div id="field"> </div>
+      <div id="legend"> </div>
+      <div id="vision_readouts">
+      </div>
+      <div id="message_bridge_status">
+        <div>
+          <div>Node</div>
+          <div>Client</div>
+          <div>Server</div>
+        </div>
+      </div>
+    </div>
+    <div>
       <table>
         <tr>
           <th colspan="2" style="text-align: center;">Robot State</th>
@@ -24,7 +39,6 @@
           <td id="theta"> NA </td>
         </tr>
       </table>
-
       <table>
         <tr>
           <th colspan="2" style="text-align: center;">Images</th>
@@ -34,190 +48,224 @@
           <td id="images_accepted"> NA </td>
         </tr>
       </table>
+      <table>
+        <tr>
+          <th colspan="2" style="text-align: center;">Superstructure States</th>
+        </tr>
+        <tr>
+          <td style="font-weight: bold;">Superstructure State</td>
+          <td id="superstructure_state" style="font-weight: bold;"> NA </td>
+        </tr>
+        <tr>
+          <td style="font-weight: bold;">Note Goal</td>
+          <td id="uncompleted_note_goal" style="font-weight: bold;"> NA </td>
+        </tr>
+        <tr>
+          <td>Catapult State</td>
+          <td id="catapult_state"> NA </td>
+        </tr>
+        <tr>
+          <td>Intake Roller State</td>
+          <td id="intake_roller_state"> NA </td>
+        </tr>
+        <tr>
+          <td>Transfer Roller State</td>
+          <td id="transfer_roller_state"> NA </td>
+        </tr>
+        <tr>
+          <td>Extend State</td>
+          <td id="extend_state"> NA </td>
+        </tr>
+        <tr>
+          <td>Extend Roller State</td>
+          <td id="extend_roller_state"> NA </td>
+        </tr>
+        <tr>
+          <th colspan="2">Beambreaks</th>
+        </tr>
+        <tr>
+          <td>Extend Beambreak</td>
+          <td id="extend_beambreak">FALSE</td>
+        </tr>
+        <tr>
+          <td>Catapult Beambreak</td>
+          <td id="catapult_beambreak">FALSE</td>
+        </tr>
+        <tr>
+          <th colspan="2">Subsytems At Position</th>
+        </tr>
+        <tr>
+          <td>Extend At Retracted Position</td>
+          <td id="extend_at_retracted">FALSE</td>
+        </tr>
+        <tr>
+          <td>Extend Ready For Transfer</td>
+          <td id="extend_ready_for_transfer">FALSE</td>
+        </tr>
+        <tr>
+          <td>Extend Ready to Transfer to Catapult</td>
+          <td id="extend_ready_for_catapult_transfer">FALSE</td>
+        </tr>
+        <tr>
+          <td>Turret at Loading Position</td>
+          <td id="turret_ready_for_load">FALSE</td>
+        </tr>
+        <tr>
+          <td>Altitude at Loading Position</td>
+          <td id="altitude_ready_for_load">FALSE</td>
+        </tr>
+      </table>
+      <table>
+        <tr>
+          <th colspan="2" style="text-align: center;">Aimer</th>
+        </tr>
+        <tr>
+          <td>Turret Position</td>
+          <td id="turret_position"> NA </td>
+        </tr>
+        <tr>
+          <td>Turret Velocity </td>
+          <td id="turret_velocity"> NA </td>
+        </tr>
+        <tr>
+          <td>Target Distance</td>
+          <td id="target_distance"> NA </td>
+        </tr>
+        <tr>
+          <td>Shot Distance</td>
+          <td id="shot_distance"> NA </td>
+        </tr>
+      </table>
 
-    <table>
-    <tr>
-      <th colspan="2" style="text-align: center;">Superstructure</th>
-    </tr>
-    <tr>
-      <td>Superstructure State</td>
-      <td id="superstructure_state"> NA </td>
-    </tr>
-    <tr>
-      <td>Catapult State</td>
-      <td id="catapult_state"> NA </td>
-    </tr>
-    <tr>
-      <td>Intake Roller State</td>
-      <td id="intake_roller_state"> NA </td>
-    </tr>
-    <tr>
-      <td>Transfer Roller State</td>
-      <td id="transfer_roller_state"> NA </td>
-    </tr>
-    <tr>
-      <td>Extend State</td>
-      <td id="extend_state"> NA </td>
-    </tr>
-    <tr>
-      <td>Extend Roller State</td>
-      <td id="extend_roller_state"> NA </td>
-    </tr>
-    <tr>
-      <th colspan="2">Intake Pivot</th>
-    </tr>
-    <tr>
-      <td>Position</td>
-      <td id="intake_pivot"> NA </td>
-    </tr>
-    <tr>
-      <td>Absolute Position</td>
-      <td id="intake_pivot_abs"> NA </td>
-    </tr>
-    <tr>
-      <th colspan="2">Climber</th>
-    </tr>
-    <tr>
-      <td>Position</td>
-      <td id="climber"> NA </td>
-    </tr>
-    <tr>
-      <td>Absolute Position</td>
-      <td id="climber_abs"> NA </td>
-    </tr>
-    <tr>
-      <td>Pot Position</td>
-      <td id="climber_pot"> NA </td>
-    </tr>
-    <tr>
-      <th colspan="2">Extend</th>
-    </tr>
-    <tr>
-      <td>Position</td>
-      <td id="extend"> NA </td>
-    </tr>
-    <tr>
-      <td>Absolute Position</td>
-      <td id="extend_abs"> NA </td>
-    </tr>
-    <tr>
-      <td>Pot Position</td>
-      <td id="extend_pot"> NA </td>
-    </tr>
-    <tr>
-      <th colspan="2">Turret</th>
-    </tr>
-    <tr>
-      <td>Position</td>
-      <td id="turret"> NA </td>
-    </tr>
-    <tr>
-      <td>Absolute Position</td>
-      <td id="turret_abs"> NA </td>
-    </tr>
-    <tr>
-      <td>Pot Position</td>
-      <td id="turret_pot"> NA </td>
-    </tr>
-      <th colspan="2">Catapult</th>
-    </tr>
-    <tr>
-      <td>Catapult State</td>
-      <td id="catapult_state"> NA </td>
-    </tr>
-    <tr>
-      <td>Position</td>
-      <td id="catapult"> NA </td>
-    </tr>
-    <tr>
-      <td>Absolute Position</td>
-      <td id="catapult_abs"> NA </td>
-    </tr>
-    <tr>
-      <td>Pot Position</td>
-      <td id="catapult_pot"> NA </td>
-    </tr>
-    <tr>
-      <th colspan="2">Altitude</th>
-    </tr>
-    <tr>
-      <td>Position</td>
-      <td id="altitude"> NA </td>
-    </tr>
-    <tr>
-      <td>Absolute Position</td>
-      <td id="altitude_abs"> NA </td>
-    </tr>
-    <tr>
-      <td>Pot Position</td>
-      <td id="altitude_pot"> NA </td>
-    </tr>
-    </table>
-    <table>
-    <tr>
-      <th colspan="2" style="text-align: center;">Aimer</th>
-    </tr>
-    <tr>
-      <td>Turret Position</td>
-      <td id="turret_position"> NA </td>
-    </tr>
-    <tr>
-      <td>Turret Velocity </td>
-      <td id="turret_velocity"> NA </td>
-    </tr>
-    <tr>
-      <td>Target Distance</td>
-      <td id="target_distance"> NA </td>
-    </tr>
-    <tr>
-      <td>Shot Distance</td>
-      <td id="shot_distance"> NA </td>
-    </tr>
-  </table>
-
-  <h3>Zeroing Faults:</h3>
-  <p id="zeroing_faults"> NA </p>
-  </div>
-  <div id="middle_readouts">
-    <div id="vision_readouts">
+      <h3>Zeroing Faults:</h3>
+      <p id="zeroing_faults"> NA </p>
     </div>
-    <div id="message_bridge_status">
-      <div>
-        <div>Node</div>
-        <div>Client</div>
-        <div>Server</div>
-      </div>
+    <div>
+      <table>
+        <tr>
+          <th colspan="2" style="text-align: center;">Subsystems</th>
+        </tr>
+        <tr>
+          <th colspan="2">Intake Pivot</th>
+        </tr>
+        <tr>
+          <td>Position</td>
+          <td id="intake_pivot"> NA </td>
+        </tr>
+        <tr>
+          <td>Absolute Position</td>
+          <td id="intake_pivot_abs"> NA </td>
+        </tr>
+        <tr>
+          <th colspan="2">Climber</th>
+        </tr>
+        <tr>
+          <td>Position</td>
+          <td id="climber"> NA </td>
+        </tr>
+        <tr>
+          <td>Absolute Position</td>
+          <td id="climber_abs"> NA </td>
+        </tr>
+        <tr>
+          <td>Pot Position</td>
+          <td id="climber_pot"> NA </td>
+        </tr>
+        <tr>
+          <th colspan="2">Extend</th>
+        </tr>
+        <tr>
+          <td>Position</td>
+          <td id="extend"> NA </td>
+        </tr>
+        <tr>
+          <td>Absolute Position</td>
+          <td id="extend_abs"> NA </td>
+        </tr>
+        <tr>
+          <td>Pot Position</td>
+          <td id="extend_pot"> NA </td>
+        </tr>
+        <tr>
+          <th colspan="2">Turret</th>
+        </tr>
+        <tr>
+          <td>Position</td>
+          <td id="turret"> NA </td>
+        </tr>
+        <tr>
+          <td>Absolute Position</td>
+          <td id="turret_abs"> NA </td>
+        </tr>
+        <tr>
+          <td>Pot Position</td>
+          <td id="turret_pot"> NA </td>
+        </tr>
+        <th colspan="2">Catapult</th>
+        </tr>
+        <tr>
+          <td>Catapult State</td>
+          <td id="catapult_state"> NA </td>
+        </tr>
+        <tr>
+          <td>Position</td>
+          <td id="catapult"> NA </td>
+        </tr>
+        <tr>
+          <td>Absolute Position</td>
+          <td id="catapult_abs"> NA </td>
+        </tr>
+        <tr>
+          <td>Pot Position</td>
+          <td id="catapult_pot"> NA </td>
+        </tr>
+        <tr>
+          <th colspan="2">Altitude</th>
+        </tr>
+        <tr>
+          <td>Position</td>
+          <td id="altitude"> NA </td>
+        </tr>
+        <tr>
+          <td>Absolute Position</td>
+          <td id="altitude_abs"> NA </td>
+        </tr>
+        <tr>
+          <td>Pot Position</td>
+          <td id="altitude_pot"> NA </td>
+        </tr>
+      </table>
+      <table>
+        <tr>
+          <th colspan="2" style="text-align: center;"> Drivetrain Encoder Positions </th>
+        </tr>
+        <tr>
+          <td> Left Encoder Position</td>
+          <td id="left_drivetrain_encoder"> NA </td>
+        </tr>
+        <tr>
+          <td> Right Encoder Position</td>
+          <td id="right_drivetrain_encoder"> NA </td>
+        </tr>
+        <tr>
+          <td> Right Front Falcon CAN Position</td>
+          <td id="falcon_right_front"> NA </td>
+        </tr>
+        <tr>
+          <td> Right Back Falcon CAN Position</td>
+          <td id="falcon_right_back"> NA </td>
+        </tr>
+        <tr>
+          <td> Left Front Falcon CAN Position</td>
+          <td id="falcon_left_front"> NA </td>
+        </tr>
+        <tr>
+          <td> Left Back Falcon CAN Position</td>
+          <td id="falcon_left_back"> NA </td>
+        </tr>
+      </table>
     </div>
   </div>
-  <table>
-      <tr>
-        <th colspan="2" style="text-align: center;"> Drivetrain Encoder Positions </th>
-      </tr>
-      <tr>
-        <td> Left Encoder Position</td>
-        <td id="left_drivetrain_encoder"> NA </td>
-      </tr>
-      <tr>
-        <td> Right Encoder Position</td>
-        <td id="right_drivetrain_encoder"> NA </td>
-      </tr>
-      <tr>
-        <td> Right Front Falcon CAN Position</td>
-        <td id="falcon_right_front"> NA </td>
-      </tr>
-      <tr>
-        <td> Right Back Falcon CAN Position</td>
-        <td id="falcon_right_back"> NA </td>
-      </tr>
-      <tr>
-        <td> Left Front Falcon CAN Position</td>
-        <td id="falcon_left_front"> NA </td>
-      </tr>
-      <tr>
-        <td> Left Back Falcon CAN Position</td>
-        <td id="falcon_left_back"> NA </td>
-      </tr>
-  </table>
-  </body>
-</html>
+</body>
 
+</html>
\ No newline at end of file
diff --git a/y2024/www/field_handler.ts b/y2024/www/field_handler.ts
index 555df93..949b34b 100644
--- a/y2024/www/field_handler.ts
+++ b/y2024/www/field_handler.ts
@@ -6,7 +6,7 @@
 import {Position as DrivetrainPosition} from '../../frc971/control_loops/drivetrain/drivetrain_position_generated'
 import {CANPosition as DrivetrainCANPosition} from '../../frc971/control_loops/drivetrain/drivetrain_can_position_generated'
 import {Status as DrivetrainStatus} from '../../frc971/control_loops/drivetrain/drivetrain_status_generated'
-import {SuperstructureState, IntakeRollerStatus, CatapultState, TransferRollerStatus, ExtendRollerStatus, ExtendStatus, Status as SuperstructureStatus} from '../control_loops/superstructure/superstructure_status_generated'
+import {SuperstructureState, IntakeRollerStatus, CatapultState, TransferRollerStatus, ExtendRollerStatus, ExtendStatus, NoteStatus, Status as SuperstructureStatus} from '../control_loops/superstructure/superstructure_status_generated'
 import {LocalizerOutput} from '../../frc971/control_loops/drivetrain/localization/localizer_output_generated'
 import {TargetMap} from '../../frc971/vision/target_map_generated'
 
@@ -51,6 +51,25 @@
     (document.getElementById('extend_roller_state') as HTMLElement);
   private catapultState: HTMLElement =
     (document.getElementById('catapult_state') as HTMLElement);
+  private uncompletedNoteGoal: HTMLElement =
+  (document.getElementById('uncompleted_note_goal') as HTMLElement);
+
+  private extend_beambreak: HTMLElement =
+  (document.getElementById('extend_beambreak') as HTMLElement);
+  private catapult_beambreak: HTMLElement =
+  (document.getElementById('catapult_beambreak') as HTMLElement);
+
+  private extend_at_retracted: HTMLElement =
+  (document.getElementById('extend_at_retracted') as HTMLElement);
+  private extend_ready_for_transfer: HTMLElement =
+  (document.getElementById('extend_ready_for_transfer') as HTMLElement);
+  private extend_ready_for_catapult_transfer: HTMLElement =
+  (document.getElementById('extend_ready_for_catapult_transfer') as HTMLElement);
+  private turret_ready_for_load: HTMLElement =
+  (document.getElementById('turret_ready_for_load') as HTMLElement);
+  private altitude_ready_for_load: HTMLElement =
+  (document.getElementById('altitude_ready_for_load') as HTMLElement);
+
 
   private intakePivot: HTMLElement =
     (document.getElementById('intake_pivot') as HTMLElement);
@@ -257,6 +276,18 @@
     div.classList.remove('zeroing');
     div.classList.remove('near');
   }
+
+  setBoolean(div: HTMLElement, triggered: boolean): void {
+    div.innerHTML = ((triggered) ? "TRUE" : "FALSE")
+    if (triggered) {
+      div.classList.remove('false');
+      div.classList.add('true');
+    } else {
+      div.classList.remove('true');
+      div.classList.add('false');
+    }
+  }
+
   draw(): void {
     this.reset();
     this.drawField();
@@ -275,6 +306,22 @@
         ExtendRollerStatus[this.superstructureStatus.extendRoller()];
       this.catapultState.innerHTML =
         CatapultState[this.superstructureStatus.shooter().catapultState()];
+      this.uncompletedNoteGoal.innerHTML =
+        NoteStatus[this.superstructureStatus.uncompletedNoteGoal()];
+
+      this.setBoolean(this.extend_beambreak, this.superstructureStatus.extendBeambreak());
+
+      this.setBoolean(this.catapult_beambreak, this.superstructureStatus.catapultBeambreak());
+
+      this.setBoolean(this.extend_ready_for_transfer, this.superstructureStatus.extendReadyForTransfer());
+
+      this.setBoolean(this.extend_at_retracted, this.superstructureStatus.extendAtRetracted());
+
+      this.setBoolean(this.turret_ready_for_load, this.superstructureStatus.turretReadyForLoad());
+
+      this.setBoolean(this.altitude_ready_for_load, this.superstructureStatus.altitudeReadyForLoad());
+
+      this.setBoolean(this.extend_ready_for_catapult_transfer, this.superstructureStatus.extendReadyForCatapultTransfer());
 
       if (this.superstructureStatus.shooter() &&
           this.superstructureStatus.shooter().aimer()) {
diff --git a/y2024/www/styles.css b/y2024/www/styles.css
index 6193a57..39b7519 100644
--- a/y2024/www/styles.css
+++ b/y2024/www/styles.css
@@ -15,7 +15,6 @@
   float: right;
 }
 
-
 #legend {
   display: inline-block;
 }
@@ -26,7 +25,7 @@
   padding: 5px;
   margin: 10px;
   table-layout: fixed;
-  width: 450px;
+  width: 100%;
   overflow: hidden;
 }
 
@@ -141,3 +140,11 @@
   flex: 1;
   width: 100%;
 }
+
+.true {
+  background-color: LightGreen;
+}
+
+.false {
+  background-color: red;
+}