More new UI work

WebDisplay/src/components/CurrentWeather.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
     import { useWeatherStore } from '@/stores/weatherStore';
     import { ConvertPascalToInchesOfMercury } from '@/pressureConverter';
+    import { ShortenWindDirection } from '@/windFormatter';
 
     const weatherStore = useWeatherStore();
     weatherStore.start();
@@ -28,32 +29,42 @@
     <DashboardItem title="Weather">
         <div className="weather-current">
             <div v-if="!weatherStore.current">Loading...</div>
-            <table v-else>
+            <table
+                v-else
+                class="weather-table">
                 <tbody>
                     <tr>
-                        <td className="weather-current-header">Temperature</td>
-                        <td>{{ weatherStore.current?.Temperature?.toFixed(2) }}°F</td>
-                    </tr>
-                    <tr v-if="weatherStore.current?.HeatIndex">
-                        <td className="weather-current-header">Heat index</td>
-                        <td>{{ weatherStore.current?.HeatIndex?.toFixed(2) }}°F</td>
-                    </tr>
-
-                    <tr v-if="weatherStore.current?.WindChill">
-                        <td className="weather-current-header">Wind chill</td>
-                        <td>{{ weatherStore.current?.WindChill?.toFixed(2) }}°F</td>
+                        <td
+                            className="weather-current-header"
+                            width="1">
+                            Temperature
+                        </td>
+                        <td :colspan="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill ? 1 : 3">
+                            {{ weatherStore.current?.Temperature?.toFixed(2) }}°F
+                        </td>
+                        <td>
+                            <div
+                                v-if="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill"
+                                className="weather-current-header">
+                                Feels like
+                            </div>
+                        </td>
+                        <td>
+                            <div v-if="weatherStore.current?.HeatIndex">{{ weatherStore.current?.HeatIndex?.toFixed(2) }}°F</div>
+                            <div v-if="weatherStore.current?.WindChill">{{ weatherStore.current?.WindChill?.toFixed(2) }}°F</div>
+                        </td>
                     </tr>
                     <tr>
                         <td className="weather-current-header">Humidity</td>
-                        <td>{{ weatherStore.current?.Humidity?.toFixed(2) }}%</td>
+                        <td colspan="3">{{ weatherStore.current?.Humidity?.toFixed(2) }}%</td>
                     </tr>
                     <tr>
                         <td className="weather-current-header">Dew point</td>
-                        <td>{{ weatherStore.current?.DewPoint?.toFixed(2) }}°F</td>
+                        <td colspan="3">{{ weatherStore.current?.DewPoint?.toFixed(2) }}°F</td>
                     </tr>
                     <tr>
                         <td className="weather-current-header">Pressure</td>
-                        <td>
+                        <td colspan="3">
                             {{ weatherStore.current?.Pressure && ConvertPascalToInchesOfMercury(weatherStore.current?.Pressure)?.toFixed(2) }}"
                             <span
                                 class="pressure-trend-arrow"
@@ -65,18 +76,18 @@
                     </tr>
                     <tr>
                         <td className="weather-current-header">Wind</td>
-                        <td>
+                        <td colspan="3">
                             {{ weatherStore.current?.WindSpeed?.toFixed(2) }}
-                            mph {{ weatherStore.current?.WindDirection }}
+                            mph {{ ShortenWindDirection(weatherStore.current?.WindDirection) }}
                         </td>
                     </tr>
                     <tr>
                         <td className="weather-current-header">Rain</td>
-                        <td>{{ weatherStore.current?.RainLastHour?.toFixed(2) }}" (last hour)</td>
+                        <td colspan="3">{{ weatherStore.current?.RainLastHour?.toFixed(2) }}" (last hour)</td>
                     </tr>
                     <tr>
                         <td className="weather-current-header">Light</td>
-                        <td>
+                        <td colspan="3">
                             {{ weatherStore.current?.LightLevel?.toFixed(2) }}
                             lx
                         </td>
@@ -90,7 +101,7 @@
 <style>
     .weather-current {
         font-size: 14px;
-        padding: 6px 12px;
+        padding: 4px 12px;
     }
 
     .weather-current-header {
@@ -99,6 +110,10 @@
         padding-right: 10px;
     }
 
+    .weather-table {
+        width: 100%;
+    }
+
     .pressure-trend-arrow {
         display: inline-block;
         position: relative;

WebDisplay/src/components/DashboardItem.vue

@@ -14,10 +14,15 @@
 <style scoped>
     .dashboard-item-header {
         padding: 2px 10px;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
     }
 
     .dashboard-item-content {
         background-color: white;
         border: 1px solid lightgray;
+        border-top: 0px;
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
     }
 </style>

WebDisplay/src/components/ValueChart.vue

@@ -29,7 +29,7 @@
         },
         title: {
             text: props.title,
-            align: 'center'
+            align: 'left'
         },
         legend: {
             itemMargin: {
@@ -81,24 +81,26 @@
 </script>
 
 <template>
-    <v-container
-        v-if="!props.ready"
-        class="fill-height loading">
-        <v-responsive class="align-center text-center fill-height">
-            <v-progress-circular
-                :size="50"
-                :width="5"
-                color="primary"
-                indeterminate></v-progress-circular>
-        </v-responsive>
-    </v-container>
-    <apexchart
-        v-else
-        width="100%"
-        height="300"
-        :type="props.type"
-        :options="chartOptions"
-        :series="chartSeries"></apexchart>
+    <div class="chart">
+        <v-container
+            v-if="!props.ready"
+            class="fill-height loading">
+            <v-responsive class="align-center text-center fill-height">
+                <v-progress-circular
+                    :size="50"
+                    :width="5"
+                    color="primary"
+                    indeterminate></v-progress-circular>
+            </v-responsive>
+        </v-container>
+        <apexchart
+            v-else
+            width="100%"
+            height="300"
+            :type="props.type"
+            :options="chartOptions"
+            :series="chartSeries"></apexchart>
+    </div>
 </template>
 
 <style scoped>
@@ -106,4 +108,12 @@
         width: 100%;
         min-height: 300px;
     }
+
+    .chart {
+        border: 1px solid lightgray;
+        background-color: white;
+        padding-top: 10px;
+        padding-right: 10px;
+        border-radius: 3px;
+    }
 </style>

WebDisplay/src/components/WeatherSummary.vue

@@ -2,7 +2,7 @@
     import { ref } from 'vue';
     import { useWeatherStore } from '@/stores/weatherStore';
     import { subHours } from 'date-fns';
-    import { WeatherAggregates } from '@/models/weather/weather-aggregates';
+    import WeatherAggregates from '@/models/weather/weather-aggregates';
     import { ConvertPascalToInchesOfMercury } from '@/pressureConverter';
 
     const weatherAggregates = ref<WeatherAggregates | undefined>();
@@ -63,7 +63,7 @@
                         </td>
                     </tr>
                     <tr>
-                        <td class="weather-summary-header">Wind Speed</td>
+                        <td class="weather-summary-header">Wind speed</td>
                         <td>
                             {{ weatherAggregates!.windSpeed.min.toFixed(2) }}
                             mph
@@ -78,7 +78,7 @@
                         </td>
                     </tr>
                     <tr>
-                        <td class="weather-summary-header">Wind Direction</td>
+                        <td class="weather-summary-header">Wind direction</td>
                         <td></td>
                         <td>
                             {{ weatherAggregates!.windDirectionAverage }}