refactor part 1
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import Dashboard from './views/Dashboard.vue'
|
||||
import '@ztimson/css-utils/dist/css-utils.min.css';
|
||||
|
||||
const dark = ref(window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||
|
||||
|
||||
@@ -1,29 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { DataRow } from '../services/api'
|
||||
import {computed, onMounted, ref} from 'vue';
|
||||
import {api, BASE, type DataRow} from '../services/api';
|
||||
|
||||
const props = defineProps<{ data: DataRow }>()
|
||||
const d = computed(() => props.data)
|
||||
const data = ref<any>({});
|
||||
const precipitation = '';
|
||||
const humidity = computed(() => data.value.humidity || '—');
|
||||
const label = computed(() => data.value.forecast_weather_label || '');
|
||||
|
||||
const fmt = (v: unknown, dec = 1, unit = '') => v != null ? `${(v as number).toFixed(dec)}${unit}` : '—'
|
||||
const time = (v: unknown) => v ? new Date(v as string).toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' }) : '—'
|
||||
onMounted(async () => {
|
||||
data.value = await api.current();
|
||||
console.log(data.value);
|
||||
});
|
||||
|
||||
const high = computed(() => fmt(d.value.env_temp_max_c, 1, '°C'))
|
||||
const low = computed(() => fmt(d.value.env_temp_min_c, 1, '°C'))
|
||||
const sunrise = computed(() => time(d.value.sun_sunrise))
|
||||
const sunset = computed(() => time(d.value.sun_sunset))
|
||||
const ghMornEnd = computed(() => time(d.value.sun_golden_hour_morning_end))
|
||||
const ghEveStart = computed(() => time(d.value.sun_golden_hour_evening_start))
|
||||
const dayLen = computed(() => d.value.sun_day_length_hours != null ? `${(d.value.sun_day_length_hours as number).toFixed(2)}h` : '—')
|
||||
const uviMax = computed(() => fmt(d.value.light_uvi_max, 1))
|
||||
const precipProb = computed(() => d.value.forecast_precipitation_probability != null ? `${d.value.forecast_precipitation_probability}%` : '—')
|
||||
const precipMm = computed(() => fmt(d.value.forecast_precipitation_mm, 1, 'mm'))
|
||||
const precipHrs = computed(() => d.value.precipitation_hours != null ? `${d.value.precipitation_hours}h` : null)
|
||||
const windMax = computed(() => fmt(d.value.wind_speed_max_kmh, 1, ' km/h'))
|
||||
const gustMax = computed(() => fmt(d.value.wind_gusts_max_kmh, 1, ' km/h'))
|
||||
const icon = computed(() => d.value.forecast_weather_icon as string | null)
|
||||
const label = computed(() => d.value.forecast_weather_label as string | null)
|
||||
const solarSum = computed(() => d.value.light_solar_wm2_sum != null ? `${(d.value.light_solar_wm2_sum as number).toFixed(1)} W/m²` : null)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -127,13 +115,16 @@ const solarSum = computed(() => d.value.light_solar_wm2_sum != null ? `${(d.va
|
||||
|
||||
<template>
|
||||
<div class="today-card">
|
||||
|
||||
<div class="today-header">
|
||||
<img v-if="icon" :src="icon" class="today-icon" alt="weather" />
|
||||
<div class="today-title">
|
||||
<div class="today-date">Today · {{ new Date().toLocaleDateString('en', { weekday: 'long', month: 'long', day: 'numeric' }) }}</div>
|
||||
<div class="today-label">{{ label }}</div>
|
||||
<div class="hi-lo">
|
||||
<div class="flex-r align-items-center justify-between px-3">
|
||||
<div class="flex-c justify-center align-items-center">
|
||||
<div class="today-label">{{ data.label }}</div>
|
||||
<img v-if="data.icon" :src="BASE + data.icon" class="today-icon" alt="weather" />
|
||||
</div>
|
||||
<div class="flex-r align-items-center gap-3">
|
||||
<div class="fs-6">
|
||||
0°C
|
||||
</div>
|
||||
<div class="flex-c fg-muted">
|
||||
<span class="hi">↑ {{ high }}</span>
|
||||
<span class="lo">↓ {{ low }}</span>
|
||||
</div>
|
||||
@@ -142,27 +133,13 @@ const solarSum = computed(() => d.value.light_solar_wm2_sum != null ? `${(d.va
|
||||
|
||||
<div class="divider" />
|
||||
|
||||
<!-- Sun -->
|
||||
<div class="section-label">☀️ Sun</div>
|
||||
<div class="stat-grid">
|
||||
<div class="stat"><span class="stat-label">Sunrise</span><span class="stat-value">{{ sunrise }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Sunset</span><span class="stat-value">{{ sunset }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Day Length</span><span class="stat-value">{{ dayLen }}</span></div>
|
||||
<div class="stat"><span class="stat-label">UV Max</span><span class="stat-value">{{ uviMax }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Golden AM</span><span class="stat-value">{{ ghMornEnd }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Golden PM</span><span class="stat-value">{{ ghEveStart }}</span></div>
|
||||
<div v-if="solarSum" class="stat"><span class="stat-label">Solar</span><span class="stat-value">{{ solarSum }}</span></div>
|
||||
</div>
|
||||
|
||||
<div class="divider" />
|
||||
|
||||
<!-- Precip & Wind -->
|
||||
<div class="section-label">🌧️ Precipitation & Wind</div>
|
||||
<div class="stat-grid">
|
||||
<div class="stat"><span class="stat-label">Chance</span><span class="stat-value">{{ precipProb }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Amount</span><span class="stat-value">{{ precipMm }}</span><span v-if="precipHrs" class="stat-sub">over {{ precipHrs }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Wind Max</span><span class="stat-value">{{ windMax }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Gust Max</span><span class="stat-value">{{ gustMax }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Precipitation</span><span class="stat-value">{{ precipProb }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Humidity</span><span class="stat-value">{{ humidity }}</span><span v-if="precipHrs" class="stat-sub">over {{ precipHrs }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Wind</span><span class="stat-value">{{ windMax }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Clouds</span><span class="stat-value">{{ windMax }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Air Quality</span><span class="stat-value">{{ windMax }}</span></div>
|
||||
<div class="stat"><span class="stat-label">UV index</span><span class="stat-value">{{ windMax }}</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { DataRow } from '../services/api'
|
||||
import {BASE, type DataRow} from '../services/api';
|
||||
|
||||
const props = defineProps<{ days: DataRow[] }>()
|
||||
|
||||
@@ -57,7 +57,7 @@ const items = computed(() => props.days.slice(0, 7).map(d => ({
|
||||
<div class="strip">
|
||||
<div v-for="item in items" :key="item.date" class="day">
|
||||
<div class="day-name">{{ item.date }}</div>
|
||||
<img v-if="item.icon" :src="item.icon" class="day-icon" :alt="item.label" />
|
||||
<img v-if="item.icon" :src="BASE + item.icon" class="day-icon" :alt="item.label" />
|
||||
<div class="day-label">{{ item.label }}</div>
|
||||
<div class="day-temps">
|
||||
<span>{{ item.high }}</span>
|
||||
|
||||
@@ -177,8 +177,8 @@ function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer
|
||||
onMounted(async () => {
|
||||
await fetchRadarFrames()
|
||||
|
||||
const lat = (current.value.gps_lat as number) || 0
|
||||
const lon = (current.value.gps_lon as number) || 0
|
||||
const lat = (current.value.latitude as number) || 0
|
||||
const lon = (current.value.longitude as number) || 0
|
||||
|
||||
stationLayer = buildStationLayer(lat, lon, props.dark)
|
||||
|
||||
@@ -221,16 +221,16 @@ onUnmounted(() => {
|
||||
watch(() => props.dark, dark => {
|
||||
map.getLayers().setAt(0, buildBaseLayer(dark))
|
||||
map.removeLayer(stationLayer)
|
||||
const lat = (current.value.gps_lat as number) || 0
|
||||
const lon = (current.value.gps_lon as number) || 0
|
||||
const lat = (current.value.latitude as number) || 0
|
||||
const lon = (current.value.longitude as number) || 0
|
||||
stationLayer = buildStationLayer(lat, lon, dark)
|
||||
map.addLayer(stationLayer)
|
||||
})
|
||||
|
||||
let positioned = false
|
||||
watch(() => current.value, () => {
|
||||
const lat = (current.value.gps_lat as number) || 0
|
||||
const lon = (current.value.gps_lon as number) || 0
|
||||
const lat = (current.value.latitude as number) || 0
|
||||
const lon = (current.value.longitude as number) || 0
|
||||
if (!positioned) {
|
||||
positioned = true
|
||||
map.getView().animate({ center: fromLonLat([lon, lat]), duration: 500 })
|
||||
|
||||
@@ -1,15 +1,7 @@
|
||||
export const BASE = import.meta.env.DEV ? 'http://10.69.5.23:3000' : ''
|
||||
export const BASE = import.meta.env.DEV ? 'http://10.69.5.23' : ''
|
||||
|
||||
export type DataRow = Record<string, number | string | null>
|
||||
|
||||
export async function fetchDaily(start?: string, end?: string): Promise<DataRow[]> {
|
||||
const params = new URLSearchParams()
|
||||
if (start) params.set('start', start)
|
||||
if (end) params.set('end', end)
|
||||
const res = await fetch(`/api/daily?${params}`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
async function get<T>(path: string, params: Record<string, string> = {}): Promise<T> {
|
||||
const url = new URL(`${BASE}${path}`, window.location.origin)
|
||||
Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v))
|
||||
|
||||
@@ -9,26 +9,26 @@ export interface MetricMeta {
|
||||
|
||||
export const METRICS: Record<string, MetricMeta> = {
|
||||
// Environment
|
||||
env_temp_c: { label: 'Temperature', unit: '°C', icon: '🌡️', group: 'Environment', precision: 1, color: '#f97316' },
|
||||
temperature: { label: 'Temperature', unit: '°C', icon: '🌡️', group: 'Environment', precision: 1, color: '#f97316' },
|
||||
env_temp_f: { label: 'Temperature', unit: '°F', icon: '🌡️', group: 'Environment', precision: 1, color: '#f97316' },
|
||||
env_humidity: { label: 'Humidity', unit: '%', icon: '💧', group: 'Environment', precision: 1, color: '#38bdf8' },
|
||||
env_dew_point_c: { label: 'Dew Point', unit: '°C', icon: '🌫️', group: 'Environment', precision: 1, color: '#818cf8' },
|
||||
env_heat_index_c: { label: 'Feels Like', unit: '°C', icon: '🤔', group: 'Environment', precision: 1, color: '#fb923c' },
|
||||
env_pressure_hpa: { label: 'Pressure', unit: ' hPa', icon: '📊', group: 'Environment', precision: 1, color: '#a78bfa' },
|
||||
env_pressure_slp: { label: 'Sea Level Pressure', unit: ' hPa', icon: '📊', group: 'Environment', precision: 1, color: '#a78bfa' },
|
||||
env_abs_humidity: { label: 'Absolute Humidity', unit: ' g/m³', icon: '💦', group: 'Environment', precision: 2, color: '#67e8f9' },
|
||||
env_vpd_kpa: { label: 'Vapour Pressure Deficit', unit: ' kPa', icon: '🌿', group: 'Environment', precision: 2, color: '#4ade80' },
|
||||
env_aqi_score: { label: 'Air Quality', unit: '/100', icon: '🏭', group: 'Environment', precision: 0, color: '#34d399' },
|
||||
env_gas_ohms: { label: 'Gas Resistance', unit: ' Ω', icon: '⚗️', group: 'Environment', precision: 0, color: '#fbbf24' },
|
||||
humidity: { label: 'Humidity', unit: '%', icon: '💧', group: 'Environment', precision: 1, color: '#38bdf8' },
|
||||
dew_point: { label: 'Dew Point', unit: '°C', icon: '🌫️', group: 'Environment', precision: 1, color: '#818cf8' },
|
||||
heat_index: { label: 'Feels Like', unit: '°C', icon: '🤔', group: 'Environment', precision: 1, color: '#fb923c' },
|
||||
pressure_hpa: { label: 'Pressure', unit: ' hPa', icon: '📊', group: 'Environment', precision: 1, color: '#a78bfa' },
|
||||
pressure_slp: { label: 'Sea Level Pressure', unit: ' hPa', icon: '📊', group: 'Environment', precision: 1, color: '#a78bfa' },
|
||||
humidity_abs: { label: 'Absolute Humidity', unit: ' g/m³', icon: '💦', group: 'Environment', precision: 2, color: '#67e8f9' },
|
||||
vapor_pressure_deficit: { label: 'Vapour Pressure Deficit', unit: ' kPa', icon: '🌿', group: 'Environment', precision: 2, color: '#4ade80' },
|
||||
air_quality: { label: 'Air Quality', unit: '/100', icon: '🏭', group: 'Environment', precision: 0, color: '#34d399' },
|
||||
air_quality_ohms: { label: 'Gas Resistance', unit: ' Ω', icon: '⚗️', group: 'Environment', precision: 0, color: '#fbbf24' },
|
||||
// Light
|
||||
light_lux: { label: 'Illuminance', unit: ' lux', icon: '☀️', group: 'Light', precision: 0, color: '#fde68a' },
|
||||
light_uvi: { label: 'UV Index', unit: '', icon: '🕶️', group: 'Light', precision: 1, color: '#f472b6' },
|
||||
light_solar_wm2: { label: 'Solar Irradiance', unit: ' W/m²', icon: '⚡', group: 'Light', precision: 1, color: '#fcd34d' },
|
||||
light_uv_dose_mj: { label: 'UV Dose Today', unit: ' mJ/cm²', icon: '📡', group: 'Light', precision: 2, color: '#f9a8d4' },
|
||||
lux: { label: 'Illuminance', unit: ' lux', icon: '☀️', group: 'Light', precision: 0, color: '#fde68a' },
|
||||
uv_index: { label: 'UV Index', unit: '', icon: '🕶️', group: 'Light', precision: 1, color: '#f472b6' },
|
||||
solar_wm2: { label: 'Solar Irradiance', unit: ' W/m²', icon: '⚡', group: 'Light', precision: 1, color: '#fcd34d' },
|
||||
uv_dose: { label: 'UV Dose Today', unit: ' mJ/cm²', icon: '📡', group: 'Light', precision: 2, color: '#f9a8d4' },
|
||||
light_burn_time_min: { label: 'Burn Time', unit: ' min', icon: '🔥', group: 'Light', precision: 0, color: '#fb7185' },
|
||||
light_cloud_pct: { label: 'Cloud Cover', unit: '%', icon: '☁️', group: 'Light', precision: 0, color: '#94a3b8' },
|
||||
clouds: { label: 'Cloud Cover', unit: '%', icon: '☁️', group: 'Light', precision: 0, color: '#94a3b8' },
|
||||
light_dli: { label: 'Daily Light Integral', unit: ' mol/m²', icon: '🌱', group: 'Light', precision: 3, color: '#86efac' },
|
||||
light_visibility_km: { label: 'Visibility', unit: ' km', icon: '👁️', group: 'Light', precision: 1, color: '#7dd3fc' },
|
||||
visibility: { label: 'Visibility', unit: ' km', icon: '👁️', group: 'Light', precision: 1, color: '#7dd3fc' },
|
||||
// Wind
|
||||
wind_speed_kmh: { label: 'Wind Speed', unit: ' km/h', icon: '💨', group: 'Wind', precision: 1, color: '#93c5fd' },
|
||||
wind_gusts_kmh: { label: 'Wind Gusts', unit: ' km/h', icon: '🌬️', group: 'Wind', precision: 1, color: '#60a5fa' },
|
||||
@@ -41,11 +41,11 @@ export const METRICS: Record<string, MetricMeta> = {
|
||||
// Compass
|
||||
compass_heading: { label: 'Compass Heading', unit: '°', icon: '🧭', group: 'Compass', precision: 1, color: '#c084fc' },
|
||||
// Ground
|
||||
ground_distance_cm: { label: 'Ground Distance', unit: ' cm', icon: '📏', group: 'Ground', precision: 0, color: '#a3e635' },
|
||||
ground_accumulation_depth_cm: { label: 'Accumulation Depth', unit: ' cm', icon: '❄️', group: 'Ground', precision: 1, color: '#bfdbfe' },
|
||||
ground_lidar_strength: { label: 'LIDAR Strength', unit: '', icon: '📡', group: 'Ground', precision: 0, color: '#6ee7b7' },
|
||||
ground_distance: { label: 'Ground Distance', unit: ' cm', icon: '📏', group: 'Ground', precision: 0, color: '#a3e635' },
|
||||
accumulation: { label: 'Accumulation Depth', unit: ' cm', icon: '❄️', group: 'Ground', precision: 1, color: '#bfdbfe' },
|
||||
lidar_strength: { label: 'LIDAR Strength', unit: '', icon: '📡', group: 'Ground', precision: 0, color: '#6ee7b7' },
|
||||
// Lightning
|
||||
lightning_distance_km: { label: 'Lightning Distance', unit: ' km', icon: '⚡', group: 'Lightning', precision: 0, color: '#fde047' },
|
||||
lightning_distance: { label: 'Lightning Distance', unit: ' km', icon: '⚡', group: 'Lightning', precision: 0, color: '#fde047' },
|
||||
lightning_strikes_per_hour: { label: 'Strike Rate', unit: '/hr', icon: '⚡', group: 'Lightning', precision: 1, color: '#facc15' },
|
||||
// Moon
|
||||
moon_illumination_pct: { label: 'Moon Illumination', unit: '%', icon: '🌙', group: 'Celestial', precision: 0, color: '#e2e8f0' },
|
||||
|
||||
@@ -1,23 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref, computed } from 'vue'
|
||||
import { current, hourly, daily, fetchAll, loading } from '../services/weather'
|
||||
import { METRICS, GROUPS } from '../services/units'
|
||||
import MapView from '../components/MapView.vue'
|
||||
import CurrentWeather from '../components/CurrentWeather.vue'
|
||||
import ForecastStrip from '../components/ForecastStrip.vue'
|
||||
import MetricCard from '../components/MetricCard.vue'
|
||||
import GraphModal from '../components/GraphModal.vue'
|
||||
`<script setup lang="ts">
|
||||
import {formatDate} from '@ztimson/utils';
|
||||
import {onMounted, onUnmounted, ref, computed} from 'vue';
|
||||
import {current, hourly, daily, fetchAll, loading} from '../services/weather';
|
||||
import {METRICS, GROUPS} from '../services/units';
|
||||
import MapView from '../components/MapView.vue';
|
||||
import CurrentWeather from '../components/CurrentWeather.vue';
|
||||
import ForecastStrip from '../components/ForecastStrip.vue';
|
||||
import MetricCard from '../components/MetricCard.vue';
|
||||
import GraphModal from '../components/GraphModal.vue';
|
||||
|
||||
const props = defineProps<{ dark: boolean }>()
|
||||
const selectedMetric = ref<string | null>(null)
|
||||
let interval: ReturnType<typeof setInterval>
|
||||
const day = ref();
|
||||
const date = ref();
|
||||
const time = ref();
|
||||
const props = defineProps<{dark: boolean}>();
|
||||
const selectedMetric = ref<string | null>(null);
|
||||
let interval: ReturnType<typeof setInterval>;
|
||||
let clock: ReturnType<typeof setInterval>;
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchAll()
|
||||
interval = setInterval(fetchAll, 60 * 1000)
|
||||
})
|
||||
clock = setInterval(() => {
|
||||
day.value = formatDate('dddd');
|
||||
date.value = formatDate('MMMM D');
|
||||
time.value = formatDate('h:mm A');
|
||||
}, 1000);
|
||||
await fetchAll();
|
||||
interval = setInterval(fetchAll, 60 * 1000);
|
||||
});
|
||||
|
||||
onUnmounted(() => clearInterval(interval))
|
||||
onUnmounted(() => {
|
||||
clearInterval(clock);
|
||||
clearInterval(interval);
|
||||
});
|
||||
|
||||
const groupedMetrics = computed(() => {
|
||||
return GROUPS.map(group => ({
|
||||
@@ -25,8 +38,8 @@ const groupedMetrics = computed(() => {
|
||||
keys: Object.entries(METRICS)
|
||||
.filter(([key, meta]) => meta.group === group && current.value[key] != null)
|
||||
.map(([key]) => key)
|
||||
})).filter(g => g.keys.length > 0)
|
||||
})
|
||||
})).filter(g => g.keys.length > 0);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -56,8 +69,14 @@ const groupedMetrics = computed(() => {
|
||||
overflow-y: auto;
|
||||
border-left: 1px solid var(--border);
|
||||
|
||||
&::-webkit-scrollbar { width: 4px; }
|
||||
&::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-label {
|
||||
@@ -78,7 +97,7 @@ const groupedMetrics = computed(() => {
|
||||
min-width: 0;
|
||||
|
||||
> * {
|
||||
flex: 1 1 140px; // grow, shrink, min width before wrapping
|
||||
flex: 1 1 140px; // grow, shrink, min width before wrapping
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
@@ -87,21 +106,27 @@ const groupedMetrics = computed(() => {
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard {
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden; // ← added
|
||||
overflow-x: hidden; // ← added
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
@@ -119,46 +144,61 @@ const groupedMetrics = computed(() => {
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--border);
|
||||
overflow-y: visible;
|
||||
overflow-x: hidden; // ← added
|
||||
overflow-x: hidden; // ← added
|
||||
-webkit-overflow-scrolling: touch;
|
||||
box-sizing: border-box; // ← added
|
||||
box-sizing: border-box; // ← added
|
||||
|
||||
&::before { display: none; }
|
||||
&::-webkit-scrollbar { display: none; }
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<div v-if="loading" class="loading-bar" />
|
||||
<div class="dashboard">
|
||||
<div v-if="loading" class="loading-bar"/>
|
||||
|
||||
<div class="map-col">
|
||||
<MapView :dark="props.dark" />
|
||||
</div>
|
||||
<div class="map-col">
|
||||
<MapView :dark="props.dark"/>
|
||||
</div>
|
||||
|
||||
<div class="panel-col">
|
||||
<CurrentWeather :data="current" />
|
||||
<ForecastStrip :days="daily" />
|
||||
<div class="panel-col">
|
||||
<div class="flex-r align-items-center gap-3">
|
||||
<div class="pe-3" style="border-right: 2px solid var(--border)">
|
||||
<h2 class="fs-6 m-0" style="line-height: 1em">{{time}}</h2>
|
||||
</div>
|
||||
<div class="flex-c">
|
||||
<h1 class="m-0 fs-2" style="line-height: 1em">{{day}}</h1>
|
||||
<h2 class="m-0 fs-1 fg-muted" style="line-height: 1em">{{date}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<CurrentWeather />
|
||||
<ForecastStrip :days="daily"/>
|
||||
|
||||
<template v-for="g in groupedMetrics" :key="g.group">
|
||||
<div class="group-label">{{ g.group }}</div>
|
||||
<div class="metric-grid">
|
||||
<MetricCard
|
||||
v-for="key in g.keys"
|
||||
:key="key"
|
||||
:metric-key="key"
|
||||
:data="current"
|
||||
@click="selectedMetric = key"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<template v-for="g in groupedMetrics" :key="g.group">
|
||||
<div class="group-label">{{ g.group }}</div>
|
||||
<div class="metric-grid">
|
||||
<MetricCard
|
||||
v-for="key in g.keys"
|
||||
:key="key"
|
||||
:metric-key="key"
|
||||
:data="current"
|
||||
@click="selectedMetric = key"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<GraphModal
|
||||
:metric-key="selectedMetric"
|
||||
:current-data="current"
|
||||
@close="selectedMetric = null"
|
||||
/>
|
||||
</div>
|
||||
<GraphModal
|
||||
:metric-key="selectedMetric"
|
||||
:current-data="current"
|
||||
@close="selectedMetric = null"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
|
||||
Reference in New Issue
Block a user