UI Redesign (#22)

* Rework UI into a new, responsive layout

* Send two streams (only one is currently downscaled)

photon-client/src/views/PipelineViews/TargetsTab.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <v-row
+      align="start"
+      class="pb-4"
+      style="height: 300px;"
+    >
+      <!-- Simple table height must be set here and in the CSS for the fixed-header to work -->
+      <v-simple-table
+        fixed-header
+        height="100%"
+        dense
+        dark
+      >
+        <template v-slot:default>
+          <thead style="font-size: 20px;">
+            <tr>
+              <th class="text-center">
+                Target
+              </th>
+              <template v-if="!is3D">
+                <th class="text-center">
+                  Pitch
+                </th>
+                <th class="text-center">
+                  Yaw
+                </th>
+              </template>
+              <th class="text-center">
+                Area
+              </th>
+              <template v-if="is3D">
+                <th class="text-center">
+                  X
+                </th>
+                <th class="text-center">
+                  Y
+                </th>
+                <th class="text-center">
+                  Angle
+                </th>
+              </template>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(value, index) in $store.getters.currentPipelineResults.targets"
+              :key="index"
+            >
+              <td>{{ index }}</td>
+              <template v-if="!is3D">
+                <td>{{ parseFloat(value.pitch).toFixed(2) }}</td>
+                <td>{{ parseFloat(value.yaw).toFixed(2) }}</td>
+              </template>
+              <td>{{ parseFloat(value.area).toFixed(2) }}</td>
+              <template v-if="is3D">
+                <!-- TODO: Make sure that units are correct -->
+                <td>{{ parseFloat(value.pose.x).toFixed(2) }}&nbsp;m</td>
+                <td>{{ parseFloat(value.pose.y).toFixed(2) }}&nbsp;m</td>
+                <td>{{ parseFloat(value.pose.rot).toFixed(2) }}&deg;</td>
+              </template>
+            </tr>
+          </tbody>
+        </template>
+      </v-simple-table>
+    </v-row>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "TargetsTab",
+        props: {
+          is3D: Boolean,
+        }
+    }
+</script>
+
+<style scoped>
+    .v-data-table {
+        text-align: center;
+        background-color: transparent !important;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+    }
+
+    .v-data-table th {
+        background-color: #006492 !important;
+    }
+
+    .v-data-table th,td {
+        font-size: 1rem !important;
+    }
+
+    /** This is unfortunately the only way to override table background color **/
+    .theme--dark.v-data-table tbody tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
+        background: #005281;
+    }
+</style>