2.7.5

Export data spreadsheet

assets/js/app.js

@@ -35,6 +35,7 @@ import { POLLEN_TYPES, COL_DESCRIPTIONS, UTCI_ENVIRONMENTS } from './config.js';
 import { useAppState } from './hooks/useAppState.js';
 import { DayTabs } from './components/DayTabs.js';
 import { computeWhyFeelsLike, computeGlanceSummary } from './compute.js';
+import { exportDayXls } from './export.js';
 
 const html = htm.bind(h);
 
@@ -226,6 +227,15 @@ export function UTCIForecast() {
     return `${wd} ${day}${ord} ${mon} ${yr}`;
   })();
 
+  // Pro: export the selected day's full hourly data as a styled spreadsheet.
+  const handleExportDay = () => {
+    exportDayXls(visible, {
+      locationName: location?.name ?? 'Unknown',
+      dateLabel: glanceDate,
+      skinType,
+    });
+  };
+
   // Day's events surfaced in the "Day at a glance" box. Reuses the same
   // row shape as glanceSummary items: { icon, label, value, alert }.
   const hhmm = (iso) => (iso ? iso.slice(11, 16) : '');
@@ -1008,8 +1018,9 @@ export function UTCIForecast() {
               </div>
             </div>
             </div>
-            ${forecast && ((glanceSummary && glanceSummary.length > 0) || eventGlanceItems.length > 0) && html`
+            ${forecast && ((glanceSummary && glanceSummary.length > 0) || eventGlanceItems.length > 0 || visible.length > 0) && html`
               <aside class="glance-rail">
+                ${((glanceSummary && glanceSummary.length > 0) || eventGlanceItems.length > 0) && html`
                 <div class="insight-panel insight-panel--glance">
                   <div class="insight-panel-title">At a glance${glanceDate ? ` · ${glanceDate}` : ''}</div>
                   ${glanceSummary.map(({ icon, label, value, alert }) => html`
@@ -1026,7 +1037,25 @@ export function UTCIForecast() {
                       <span class="insight-value">${value}</span>
                     </div>
                   `)}
-                </div>
+                </div>`}
+                ${visible.length > 0 && html`
+                  <div class="export-panel">
+                    ${isPro
+                      ? html`
+                        <button class="export-day-btn" onClick=${handleExportDay} title="Download full hourly data for this day as a spreadsheet">
+                          <span class="export-day-btn__icon">⬇</span>
+                          Export day data
+                        </button>
+                        <div class="export-day-hint">Excel / LibreOffice · 41 columns · hourly</div>`
+                      : html`
+                        <button class="export-day-btn export-day-btn--locked"
+                          onClick=${() => { setProPromptSource('export'); setProPromptDay(0); }}
+                          title="Export day data is part of SunScope Extra">
+                          <span class="export-day-btn__icon">🔒</span>
+                          Export day data
+                        </button>
+                        <div class="export-day-hint">SunScope Extra feature</div>`}
+                  </div>`}
               </aside>`}
             </div>