Finished Sonde support

client/src/components/WeatherBalloon.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import {formatDate} from '@ztimson/utils';
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import Altitude from '@/components/Altitude.vue'
 
@@ -288,7 +289,7 @@ onUnmounted(() => {
 }
 
 .tp-gauges {
-	flex: 1;
+	flex: 0 0 110px;
 }
 
 .tp-gauge-wrap {
@@ -330,21 +331,66 @@ onUnmounted(() => {
 	margin-bottom: 0.25em;
 }
 
-.tp-fields {
-	width: 100%;
-	font-size: 11px;
-	padding: 0 16px 12px;
-	border-collapse: collapse;
+.tp-environment {
+	flex: 1;
+	min-width: 0;
 }
 
-.tp-fields td {
-	padding: 2px 4px;
+.tp-environment-label {
 	color: #888;
+	font-size: 11px;
+	font-weight: bold;
+	margin-bottom: 3px;
 }
 
-.tp-fields td:last-child {
-	color: #ccc;
-	text-align: right;
+.tp-environment-cards {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.tp-environment-card {
+	min-height: 42px;
+	padding: 6px;
+	box-sizing: border-box;
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: 3px;
+	display: flex;
+	align-items: center;
+	gap: 7px;
+}
+
+.tp-environment-icon {
+	width: 26px;
+	height: 26px;
+	flex: 0 0 26px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(255,170,0,0.08);
+	border-radius: 3px;
+	font-size: 14px;
+}
+
+.tp-environment-info {
+	min-width: 0;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.tp-environment-stat-label {
+	color: #888;
+	font-size: 10px;
+	font-weight: bold;
+}
+
+.tp-environment-stat-value {
+	color: white;
+	font-size: 13px;
+	font-weight: bold;
+	white-space: nowrap;
 }
 
 .ok {
@@ -437,35 +483,49 @@ onUnmounted(() => {
 
 			</div>
 
-			<table class="tp-fields">
-				<tbody>
-					<tr>
-						<td>Heading</td>
-						<td>{{ latest?.heading?.toFixed(1) ?? '—' }}°</td>
-					</tr>
+			<div class="tp-environment">
+				<div class="tp-environment-label">Environment</div>
 
-					<tr>
-						<td>Temperature</td>
-						<td>{{ latest?.temperature ?? '—' }} °C</td>
-					</tr>
+				<div class="tp-environment-cards gap-4">
+					<div class="tp-environment-card">
+						<span class="tp-environment-icon">🌡️</span>
+						<div class="tp-environment-info">
+							<span class="tp-environment-stat-label">Temperature</span>
+							<span class="tp-environment-stat-value">
+                         {{ latest?.temperature ?? '—' }} °C
+                      </span>
+						</div>
+					</div>
 
-					<tr>
-						<td>Humidity</td>
-						<td>{{ latest?.humidity ?? '—' }} %</td>
-					</tr>
+					<div class="tp-environment-card">
+						<span class="tp-environment-icon">💧</span>
+						<div class="tp-environment-info">
+							<span class="tp-environment-stat-label">Humidity</span>
+							<span class="tp-environment-stat-value">
+                         {{ latest?.humidity ?? '—' }} %
+                      </span>
+						</div>
+					</div>
 
-					<tr>
-						<td>PPM</td>
-						<td>{{ latest?.ppm?.toFixed(2) ?? '—' }}</td>
-					</tr>
-				</tbody>
-			</table>
+					<div class="tp-environment-card">
+						<span class="tp-environment-icon">🫧</span>
+						<div class="tp-environment-info">
+							<span class="tp-environment-stat-label">PPM</span>
+							<span class="tp-environment-stat-value">
+                         {{ latest?.ppm?.toFixed(2) ?? '—' }}
+                      </span>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
 
 		<Altitude
 			:history="altitudeHistory"
 			:currentAltitude="currentAltitude"
 			:unit="altitudeUnit.label"
+			start-time=" "
+			:end-time="formatDate('HH:MM A', latest.timestamp)"
 			color="#ffaa00"
 		/>