feat: Add weather widget with apps system
- Weather widget in top-left slot with compact pill display - Click to expand 7-day forecast - Uses apps system via Pulsar with Open-Meteo fallback - Click outside to close expanded view - Throttled updates (1/sec) when moving map Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name
parent
e635d0e7f6
commit
3c3a6639e4
|
|
@ -0,0 +1,370 @@
|
||||||
|
/**
|
||||||
|
* AppHost - Runtime manager for app instances
|
||||||
|
*
|
||||||
|
* Manages:
|
||||||
|
* - App instance lifecycle (mount/unmount)
|
||||||
|
* - Event bus for app communication
|
||||||
|
* - Bridge between apps and backend
|
||||||
|
* - Map context distribution
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { getApp } from './AppRegistry';
|
||||||
|
import { EVENT_TYPES } from './types';
|
||||||
|
import { loadAuth } from '../auth/authStorage';
|
||||||
|
|
||||||
|
// Generate unique IDs
|
||||||
|
function generateId() {
|
||||||
|
return 'ai_' + Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateRequestId() {
|
||||||
|
return 'req_' + Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create an AppHost instance
|
||||||
|
* @returns {AppHost}
|
||||||
|
*/
|
||||||
|
export function createAppHost() {
|
||||||
|
/** @type {Map<string, import('./types').AppInstance>} */
|
||||||
|
const instances = new Map();
|
||||||
|
|
||||||
|
/** @type {Map<string, Set<function>>} */
|
||||||
|
const eventListeners = new Map();
|
||||||
|
|
||||||
|
/** @type {import('./types').MapContext | null} */
|
||||||
|
let currentMapContext = null;
|
||||||
|
|
||||||
|
/** @type {Set<function>} */
|
||||||
|
const mapContextListeners = new Set();
|
||||||
|
|
||||||
|
// API base URL
|
||||||
|
function apiBase() {
|
||||||
|
const raw = (import.meta?.env?.VITE_API_BASE_URL || '').toString().replace(/\/+$/, '');
|
||||||
|
if (raw) return raw;
|
||||||
|
try {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const host = window.location.hostname || '';
|
||||||
|
if (host.startsWith('www.')) {
|
||||||
|
return `https://${host.replace(/^www\./, '')}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send action to backend
|
||||||
|
* @param {string} appInstanceId
|
||||||
|
* @param {string} action
|
||||||
|
* @param {Object} payload
|
||||||
|
* @returns {Promise<{requestId: string}>}
|
||||||
|
*/
|
||||||
|
async function sendAction(appInstanceId, action, payload) {
|
||||||
|
const instance = instances.get(appInstanceId);
|
||||||
|
if (!instance) {
|
||||||
|
throw new Error(`Unknown app instance: ${appInstanceId}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const auth = loadAuth();
|
||||||
|
const userId = auth?.user?.id || auth?.user?.sub || 'anonymous';
|
||||||
|
const requestId = generateRequestId();
|
||||||
|
|
||||||
|
const envelope = {
|
||||||
|
v: 1,
|
||||||
|
requestId,
|
||||||
|
ts: Math.floor(Date.now() / 1000),
|
||||||
|
userId,
|
||||||
|
appId: instance.appId,
|
||||||
|
appInstanceId,
|
||||||
|
action,
|
||||||
|
payload,
|
||||||
|
context: {
|
||||||
|
clientId: getClientId(),
|
||||||
|
traceId: requestId,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const url = `${apiBase()}/api/apps/${appInstanceId}/in`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...(auth?.access_token ? { Authorization: `Bearer ${auth.access_token}` } : {}),
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify(envelope),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
const text = await res.text().catch(() => '');
|
||||||
|
throw new Error(`App action failed: ${res.status} ${text}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { requestId };
|
||||||
|
} catch (err) {
|
||||||
|
console.error('AppHost sendAction error:', err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Emit event to a specific app instance
|
||||||
|
* @param {string} appInstanceId
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
function emitToApp(appInstanceId, event) {
|
||||||
|
const listeners = eventListeners.get(appInstanceId);
|
||||||
|
if (listeners) {
|
||||||
|
for (const listener of listeners) {
|
||||||
|
try {
|
||||||
|
listener(event);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('App event listener error:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Emit event to all apps
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
function emitToAllApps(event) {
|
||||||
|
for (const appInstanceId of instances.keys()) {
|
||||||
|
emitToApp(appInstanceId, event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Subscribe to events for an app instance
|
||||||
|
* @param {string} appInstanceId
|
||||||
|
* @param {function} handler
|
||||||
|
* @returns {function} Unsubscribe function
|
||||||
|
*/
|
||||||
|
function onAppEvent(appInstanceId, handler) {
|
||||||
|
if (!eventListeners.has(appInstanceId)) {
|
||||||
|
eventListeners.set(appInstanceId, new Set());
|
||||||
|
}
|
||||||
|
eventListeners.get(appInstanceId).add(handler);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
const listeners = eventListeners.get(appInstanceId);
|
||||||
|
if (listeners) {
|
||||||
|
listeners.delete(handler);
|
||||||
|
if (listeners.size === 0) {
|
||||||
|
eventListeners.delete(appInstanceId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update map context and notify apps
|
||||||
|
* @param {import('./types').MapContext} context
|
||||||
|
*/
|
||||||
|
function updateMapContext(context) {
|
||||||
|
const prevSectorId = currentMapContext?.sectorId;
|
||||||
|
currentMapContext = context;
|
||||||
|
|
||||||
|
// Notify map context listeners
|
||||||
|
for (const listener of mapContextListeners) {
|
||||||
|
try {
|
||||||
|
listener(context);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Map context listener error:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Emit to all apps if sector changed
|
||||||
|
if (context.sectorId !== prevSectorId) {
|
||||||
|
emitToAllApps({
|
||||||
|
type: EVENT_TYPES.LOCATION_CHANGED,
|
||||||
|
payload: context,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get current map context
|
||||||
|
* @returns {import('./types').MapContext | null}
|
||||||
|
*/
|
||||||
|
function getMapContext() {
|
||||||
|
return currentMapContext;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Subscribe to map context changes
|
||||||
|
* @param {function} handler
|
||||||
|
* @returns {function} Unsubscribe function
|
||||||
|
*/
|
||||||
|
function onMapContextChange(handler) {
|
||||||
|
mapContextListeners.add(handler);
|
||||||
|
// Immediately call with current context if available
|
||||||
|
if (currentMapContext) {
|
||||||
|
try {
|
||||||
|
handler(currentMapContext);
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Map context handler error:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
mapContextListeners.delete(handler);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a bridge object for an app instance
|
||||||
|
* @param {string} appInstanceId
|
||||||
|
* @returns {import('./types').AppHostBridge}
|
||||||
|
*/
|
||||||
|
function createBridge(appInstanceId) {
|
||||||
|
return {
|
||||||
|
sendAction: (action, payload) => sendAction(appInstanceId, action, payload),
|
||||||
|
onEvent: (eventType, handler) => {
|
||||||
|
// Wrap handler to filter by event type
|
||||||
|
const wrappedHandler = (event) => {
|
||||||
|
if (!eventType || event.type === eventType) {
|
||||||
|
handler(event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return onAppEvent(appInstanceId, wrappedHandler);
|
||||||
|
},
|
||||||
|
getMapContext,
|
||||||
|
onMapContextChange,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Install an app instance
|
||||||
|
* @param {string} appId
|
||||||
|
* @param {Object} [options]
|
||||||
|
* @returns {import('./types').AppInstance}
|
||||||
|
*/
|
||||||
|
function installApp(appId, options = {}) {
|
||||||
|
const definition = getApp(appId);
|
||||||
|
if (!definition) {
|
||||||
|
throw new Error(`Unknown app: ${appId}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const appInstanceId = options.appInstanceId || generateId();
|
||||||
|
const auth = loadAuth();
|
||||||
|
|
||||||
|
const instance = {
|
||||||
|
appInstanceId,
|
||||||
|
appId,
|
||||||
|
userId: auth?.user?.id || auth?.user?.sub || 'anonymous',
|
||||||
|
slot: options.slot || definition.defaultSlot,
|
||||||
|
order: options.order ?? definition.order ?? 0,
|
||||||
|
config: options.config || {},
|
||||||
|
enabled: options.enabled !== false,
|
||||||
|
};
|
||||||
|
|
||||||
|
instances.set(appInstanceId, instance);
|
||||||
|
return instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Uninstall an app instance
|
||||||
|
* @param {string} appInstanceId
|
||||||
|
*/
|
||||||
|
function uninstallApp(appInstanceId) {
|
||||||
|
instances.delete(appInstanceId);
|
||||||
|
eventListeners.delete(appInstanceId);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get all installed instances
|
||||||
|
* @returns {import('./types').AppInstance[]}
|
||||||
|
*/
|
||||||
|
function getInstalledApps() {
|
||||||
|
return Array.from(instances.values());
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get instances for a specific slot
|
||||||
|
* @param {string} slotId
|
||||||
|
* @returns {import('./types').AppInstance[]}
|
||||||
|
*/
|
||||||
|
function getAppsForSlot(slotId) {
|
||||||
|
return getInstalledApps()
|
||||||
|
.filter(inst => inst.slot === slotId && inst.enabled)
|
||||||
|
.sort((a, b) => a.order - b.order);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get an instance by ID
|
||||||
|
* @param {string} appInstanceId
|
||||||
|
* @returns {import('./types').AppInstance | undefined}
|
||||||
|
*/
|
||||||
|
function getInstance(appInstanceId) {
|
||||||
|
return instances.get(appInstanceId);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle incoming WS message for apps
|
||||||
|
* @param {Object} message
|
||||||
|
*/
|
||||||
|
function handleWSMessage(message) {
|
||||||
|
// Check if this is an app event
|
||||||
|
if (message.type === 'app.event' && message.appInstanceId) {
|
||||||
|
emitToApp(message.appInstanceId, message.event || message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Instance management
|
||||||
|
installApp,
|
||||||
|
uninstallApp,
|
||||||
|
getInstalledApps,
|
||||||
|
getAppsForSlot,
|
||||||
|
getInstance,
|
||||||
|
|
||||||
|
// Event bus
|
||||||
|
emitToApp,
|
||||||
|
emitToAllApps,
|
||||||
|
onAppEvent,
|
||||||
|
handleWSMessage,
|
||||||
|
|
||||||
|
// Map context
|
||||||
|
updateMapContext,
|
||||||
|
getMapContext,
|
||||||
|
onMapContextChange,
|
||||||
|
|
||||||
|
// Bridge factory
|
||||||
|
createBridge,
|
||||||
|
|
||||||
|
// Direct action (for internal use)
|
||||||
|
sendAction,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Client ID for tracking
|
||||||
|
let clientId = null;
|
||||||
|
function getClientId() {
|
||||||
|
if (!clientId) {
|
||||||
|
clientId = 'c_' + Math.random().toString(36).substr(2, 9);
|
||||||
|
}
|
||||||
|
return clientId;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Singleton instance
|
||||||
|
let defaultHost = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the default AppHost instance
|
||||||
|
* @returns {ReturnType<typeof createAppHost>}
|
||||||
|
*/
|
||||||
|
export function getDefaultAppHost() {
|
||||||
|
if (!defaultHost) {
|
||||||
|
defaultHost = createAppHost();
|
||||||
|
}
|
||||||
|
return defaultHost;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
createAppHost,
|
||||||
|
getDefaultAppHost,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,176 @@
|
||||||
|
/**
|
||||||
|
* AppOverlay - Widget slot positioning and styling
|
||||||
|
*/
|
||||||
|
|
||||||
|
.app-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Slot positioning */
|
||||||
|
.app-slot {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
max-width: calc(100% - 16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-slot-top-left {
|
||||||
|
top: 78px; /* Below search bar */
|
||||||
|
left: 13px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-slot-top-right {
|
||||||
|
top: 70px;
|
||||||
|
right: 8px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-slot-bottom-left {
|
||||||
|
bottom: 100px; /* Above bottom controls */
|
||||||
|
left: 8px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-slot-bottom-right {
|
||||||
|
bottom: 100px;
|
||||||
|
right: 8px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-slot-bottom-sheet {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Widget container - full card style */
|
||||||
|
.widget-container {
|
||||||
|
background: rgba(15, 23, 42, 0.85);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 320px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Compact widget - no extra styling */
|
||||||
|
.widget-compact {
|
||||||
|
/* Widget handles its own styling */
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-slot-bottom-sheet .widget-container {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 16px 16px 0 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Widget internal styling */
|
||||||
|
.widget-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
|
||||||
|
background: rgba(30, 41, 59, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-header-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-header-title i {
|
||||||
|
color: #60a5fa;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-header-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-header-btn {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #94a3b8;
|
||||||
|
padding: 4px 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-header-btn:hover {
|
||||||
|
background: rgba(148, 163, 184, 0.1);
|
||||||
|
color: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-content {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-loading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px;
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 13px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-loading i {
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-error {
|
||||||
|
padding: 12px;
|
||||||
|
color: #f87171;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile adjustments */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.app-slot-top-left,
|
||||||
|
.app-slot-top-right {
|
||||||
|
top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-slot-bottom-left,
|
||||||
|
.app-slot-bottom-right {
|
||||||
|
bottom: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-container {
|
||||||
|
min-width: 160px;
|
||||||
|
max-width: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-slot-bottom-sheet .widget-container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
/**
|
||||||
|
* AppOverlay - Renders widget slots over the map
|
||||||
|
*
|
||||||
|
* This component creates the overlay layer with positioned slots
|
||||||
|
* for app widgets. Each slot can contain multiple widgets.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useEffect, useState, useCallback } from 'react';
|
||||||
|
import WidgetSlot from './slots/WidgetSlot';
|
||||||
|
import { SLOT_IDS } from './types';
|
||||||
|
import { getDefaultAppHost } from './AppHost';
|
||||||
|
import './AppOverlay.css';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Object} props
|
||||||
|
* @param {ReturnType<typeof import('./AppHost').createAppHost>} [props.appHost] - AppHost instance
|
||||||
|
* @param {boolean} [props.visible=true] - Whether the overlay is visible
|
||||||
|
*/
|
||||||
|
export default function AppOverlay({ appHost: providedAppHost, visible = true }) {
|
||||||
|
const appHost = providedAppHost || getDefaultAppHost();
|
||||||
|
const [slots, setSlots] = useState({});
|
||||||
|
const [updateTrigger, setUpdateTrigger] = useState(0);
|
||||||
|
|
||||||
|
// Refresh slot contents when apps change
|
||||||
|
const refreshSlots = useCallback(() => {
|
||||||
|
const newSlots = {};
|
||||||
|
for (const slotId of Object.values(SLOT_IDS)) {
|
||||||
|
newSlots[slotId] = appHost.getAppsForSlot(slotId);
|
||||||
|
}
|
||||||
|
setSlots(newSlots);
|
||||||
|
}, [appHost]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
refreshSlots();
|
||||||
|
}, [refreshSlots, updateTrigger]);
|
||||||
|
|
||||||
|
// Expose refresh method for external triggering
|
||||||
|
useEffect(() => {
|
||||||
|
// Simple polling to detect new apps (can be replaced with event-based)
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setUpdateTrigger((t) => t + 1);
|
||||||
|
}, 2000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!visible) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasAnyWidgets = Object.values(slots).some((s) => s && s.length > 0);
|
||||||
|
if (!hasAnyWidgets) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="app-overlay">
|
||||||
|
{/* Top Left */}
|
||||||
|
{slots[SLOT_IDS.TOP_LEFT]?.length > 0 && (
|
||||||
|
<div className="app-slot app-slot-top-left">
|
||||||
|
<WidgetSlot
|
||||||
|
slotId={SLOT_IDS.TOP_LEFT}
|
||||||
|
instances={slots[SLOT_IDS.TOP_LEFT]}
|
||||||
|
appHost={appHost}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Top Right */}
|
||||||
|
{slots[SLOT_IDS.TOP_RIGHT]?.length > 0 && (
|
||||||
|
<div className="app-slot app-slot-top-right">
|
||||||
|
<WidgetSlot
|
||||||
|
slotId={SLOT_IDS.TOP_RIGHT}
|
||||||
|
instances={slots[SLOT_IDS.TOP_RIGHT]}
|
||||||
|
appHost={appHost}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Bottom Left */}
|
||||||
|
{slots[SLOT_IDS.BOTTOM_LEFT]?.length > 0 && (
|
||||||
|
<div className="app-slot app-slot-bottom-left">
|
||||||
|
<WidgetSlot
|
||||||
|
slotId={SLOT_IDS.BOTTOM_LEFT}
|
||||||
|
instances={slots[SLOT_IDS.BOTTOM_LEFT]}
|
||||||
|
appHost={appHost}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Bottom Right */}
|
||||||
|
{slots[SLOT_IDS.BOTTOM_RIGHT]?.length > 0 && (
|
||||||
|
<div className="app-slot app-slot-bottom-right">
|
||||||
|
<WidgetSlot
|
||||||
|
slotId={SLOT_IDS.BOTTOM_RIGHT}
|
||||||
|
instances={slots[SLOT_IDS.BOTTOM_RIGHT]}
|
||||||
|
appHost={appHost}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Bottom Sheet */}
|
||||||
|
{slots[SLOT_IDS.BOTTOM_SHEET]?.length > 0 && (
|
||||||
|
<div className="app-slot app-slot-bottom-sheet">
|
||||||
|
<WidgetSlot
|
||||||
|
slotId={SLOT_IDS.BOTTOM_SHEET}
|
||||||
|
instances={slots[SLOT_IDS.BOTTOM_SHEET]}
|
||||||
|
appHost={appHost}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
/**
|
||||||
|
* AppRegistry - Central registry for app definitions
|
||||||
|
*
|
||||||
|
* Apps register themselves here with their mount functions and metadata.
|
||||||
|
* This is the "catalog" of available apps - not instances.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { SLOT_IDS } from './types';
|
||||||
|
|
||||||
|
/** @type {Map<string, import('./types').AppDefinition>} */
|
||||||
|
const registry = new Map();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register an app definition
|
||||||
|
* @param {import('./types').AppDefinition} definition
|
||||||
|
*/
|
||||||
|
export function registerApp(definition) {
|
||||||
|
if (!definition.appId) {
|
||||||
|
throw new Error('App definition must have appId');
|
||||||
|
}
|
||||||
|
if (!definition.mountWidget) {
|
||||||
|
throw new Error('App definition must have mountWidget function');
|
||||||
|
}
|
||||||
|
if (registry.has(definition.appId)) {
|
||||||
|
console.warn(`App ${definition.appId} already registered, overwriting`);
|
||||||
|
}
|
||||||
|
registry.set(definition.appId, {
|
||||||
|
order: 0,
|
||||||
|
defaultSlot: SLOT_IDS.TOP_RIGHT,
|
||||||
|
permissions: {},
|
||||||
|
...definition,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get an app definition by ID
|
||||||
|
* @param {string} appId
|
||||||
|
* @returns {import('./types').AppDefinition | undefined}
|
||||||
|
*/
|
||||||
|
export function getApp(appId) {
|
||||||
|
return registry.get(appId);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get all registered apps
|
||||||
|
* @returns {import('./types').AppDefinition[]}
|
||||||
|
*/
|
||||||
|
export function getAllApps() {
|
||||||
|
return Array.from(registry.values());
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if an app is registered
|
||||||
|
* @param {string} appId
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
export function hasApp(appId) {
|
||||||
|
return registry.has(appId);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Unregister an app (mainly for testing)
|
||||||
|
* @param {string} appId
|
||||||
|
*/
|
||||||
|
export function unregisterApp(appId) {
|
||||||
|
registry.delete(appId);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear all registered apps (mainly for testing)
|
||||||
|
*/
|
||||||
|
export function clearRegistry() {
|
||||||
|
registry.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
registerApp,
|
||||||
|
getApp,
|
||||||
|
getAllApps,
|
||||||
|
hasApp,
|
||||||
|
unregisterApp,
|
||||||
|
clearRegistry,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
/**
|
||||||
|
* Apps System - Main Entry Point
|
||||||
|
*
|
||||||
|
* Exports all apps system components and initializes built-in apps.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Core exports
|
||||||
|
export { registerApp, getApp, getAllApps, hasApp } from './AppRegistry';
|
||||||
|
export { createAppHost, getDefaultAppHost } from './AppHost';
|
||||||
|
export { createMapContextBridge } from './providers/MapContextBridge';
|
||||||
|
export { SLOT_IDS, EVENT_TYPES } from './types';
|
||||||
|
|
||||||
|
// Components
|
||||||
|
export { default as AppOverlay } from './AppOverlay';
|
||||||
|
export { default as WidgetSlot } from './slots/WidgetSlot';
|
||||||
|
|
||||||
|
// Built-in apps
|
||||||
|
import { registerWeatherApp } from './weather';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize all built-in apps
|
||||||
|
* Call this once at app startup
|
||||||
|
*/
|
||||||
|
export function initializeApps() {
|
||||||
|
registerWeatherApp();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup demo apps for testing
|
||||||
|
* Creates instances of built-in apps
|
||||||
|
*
|
||||||
|
* @param {ReturnType<typeof import('./AppHost').createAppHost>} appHost
|
||||||
|
*/
|
||||||
|
export function setupDemoApps(appHost) {
|
||||||
|
// Install weather widget
|
||||||
|
appHost.installApp('weather', {
|
||||||
|
appInstanceId: 'ai_weather_demo',
|
||||||
|
config: {
|
||||||
|
units: 'metric',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
initializeApps,
|
||||||
|
setupDemoApps,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
/**
|
||||||
|
* MapContextBridge - Connects MapLibre events to the AppHost
|
||||||
|
*
|
||||||
|
* Listens to map 'moveend' events, computes sector ID,
|
||||||
|
* and emits context.location.changed to apps with deduplication and throttling.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { getDefaultAppHost } from '../AppHost';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate a stable sector ID from map state
|
||||||
|
* Format: "{zoomBucket}:{lat2d}:{lng2d}"
|
||||||
|
*
|
||||||
|
* @param {number} zoom
|
||||||
|
* @param {number} lat
|
||||||
|
* @param {number} lng
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
function computeSectorId(zoom, lat, lng) {
|
||||||
|
const zoomBucket = Math.floor(zoom);
|
||||||
|
const lat2d = lat.toFixed(2);
|
||||||
|
const lng2d = lng.toFixed(2);
|
||||||
|
return `${zoomBucket}:${lat2d}:${lng2d}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a map context from MapLibre map state
|
||||||
|
* @param {Object} map - MapLibre map instance
|
||||||
|
* @returns {import('../types').MapContext}
|
||||||
|
*/
|
||||||
|
function createMapContext(map) {
|
||||||
|
const center = map.getCenter();
|
||||||
|
const bounds = map.getBounds();
|
||||||
|
const zoom = map.getZoom();
|
||||||
|
|
||||||
|
const lat = center.lat;
|
||||||
|
const lng = center.lng;
|
||||||
|
const sectorId = computeSectorId(zoom, lat, lng);
|
||||||
|
|
||||||
|
return {
|
||||||
|
center: { lat, lng },
|
||||||
|
bbox: {
|
||||||
|
west: bounds.getWest(),
|
||||||
|
south: bounds.getSouth(),
|
||||||
|
east: bounds.getEast(),
|
||||||
|
north: bounds.getNorth(),
|
||||||
|
},
|
||||||
|
zoom,
|
||||||
|
sectorId,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a MapContextBridge instance
|
||||||
|
*
|
||||||
|
* @param {Object} map - MapLibre map instance
|
||||||
|
* @param {Object} [options]
|
||||||
|
* @param {number} [options.throttleMs=500] - Minimum time between emissions
|
||||||
|
* @param {ReturnType<typeof import('../AppHost').createAppHost>} [options.appHost] - AppHost instance
|
||||||
|
* @returns {Object} Bridge instance with cleanup method
|
||||||
|
*/
|
||||||
|
export function createMapContextBridge(map, options = {}) {
|
||||||
|
const {
|
||||||
|
throttleMs = 500,
|
||||||
|
appHost = getDefaultAppHost(),
|
||||||
|
} = options;
|
||||||
|
|
||||||
|
let lastSectorId = null;
|
||||||
|
let lastEmitTime = 0;
|
||||||
|
let pendingTimeout = null;
|
||||||
|
let isDestroyed = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Process map state and emit if sector changed
|
||||||
|
*/
|
||||||
|
function processMapState() {
|
||||||
|
if (isDestroyed || !map) return;
|
||||||
|
|
||||||
|
const now = Date.now();
|
||||||
|
const context = createMapContext(map);
|
||||||
|
|
||||||
|
// Check if sector actually changed
|
||||||
|
if (context.sectorId === lastSectorId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Throttle: if we emitted recently, schedule for later
|
||||||
|
const timeSinceLastEmit = now - lastEmitTime;
|
||||||
|
if (timeSinceLastEmit < throttleMs) {
|
||||||
|
if (pendingTimeout) {
|
||||||
|
clearTimeout(pendingTimeout);
|
||||||
|
}
|
||||||
|
pendingTimeout = setTimeout(() => {
|
||||||
|
pendingTimeout = null;
|
||||||
|
processMapState();
|
||||||
|
}, throttleMs - timeSinceLastEmit);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Emit the update
|
||||||
|
lastSectorId = context.sectorId;
|
||||||
|
lastEmitTime = now;
|
||||||
|
appHost.updateMapContext(context);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle moveend event
|
||||||
|
*/
|
||||||
|
function onMoveEnd() {
|
||||||
|
processMapState();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle styledata event (map ready)
|
||||||
|
*/
|
||||||
|
function onStyleData() {
|
||||||
|
// Initial context when style loads
|
||||||
|
processMapState();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Attach event listeners
|
||||||
|
map.on('moveend', onMoveEnd);
|
||||||
|
map.on('styledata', onStyleData);
|
||||||
|
|
||||||
|
// Initial emit if map is ready
|
||||||
|
if (map.isStyleLoaded()) {
|
||||||
|
processMapState();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Cleanup and remove listeners
|
||||||
|
*/
|
||||||
|
function destroy() {
|
||||||
|
isDestroyed = true;
|
||||||
|
if (pendingTimeout) {
|
||||||
|
clearTimeout(pendingTimeout);
|
||||||
|
pendingTimeout = null;
|
||||||
|
}
|
||||||
|
map.off('moveend', onMoveEnd);
|
||||||
|
map.off('styledata', onStyleData);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Force an immediate context update
|
||||||
|
*/
|
||||||
|
function forceUpdate() {
|
||||||
|
if (!isDestroyed && map) {
|
||||||
|
const context = createMapContext(map);
|
||||||
|
lastSectorId = context.sectorId;
|
||||||
|
lastEmitTime = Date.now();
|
||||||
|
appHost.updateMapContext(context);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy,
|
||||||
|
forceUpdate,
|
||||||
|
getLastSectorId: () => lastSectorId,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
createMapContextBridge,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
/**
|
||||||
|
* WidgetSlot - Renders widgets for a specific slot position
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { getApp } from '../AppRegistry';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Object} props
|
||||||
|
* @param {string} props.slotId - The slot identifier
|
||||||
|
* @param {import('../types').AppInstance[]} props.instances - App instances for this slot
|
||||||
|
* @param {ReturnType<typeof import('../AppHost').createAppHost>} props.appHost - AppHost instance
|
||||||
|
* @param {string} [props.className] - Additional CSS class
|
||||||
|
*/
|
||||||
|
export default function WidgetSlot({ slotId, instances, appHost, className = '' }) {
|
||||||
|
if (!instances || instances.length === 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`widget-slot widget-slot-${slotId.replace(':', '-')} ${className}`}>
|
||||||
|
{instances.map((instance) => {
|
||||||
|
const definition = getApp(instance.appId);
|
||||||
|
if (!definition) {
|
||||||
|
console.warn(`No definition found for app: ${instance.appId}`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const bridge = appHost.createBridge(instance.appInstanceId);
|
||||||
|
const Widget = definition.mountWidget;
|
||||||
|
|
||||||
|
// Compact widgets don't get the container styling
|
||||||
|
const isCompact = definition.compact === true;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={instance.appInstanceId}
|
||||||
|
className={isCompact ? 'widget-compact' : 'widget-container'}
|
||||||
|
data-app-id={instance.appId}
|
||||||
|
data-instance-id={instance.appInstanceId}
|
||||||
|
>
|
||||||
|
<Widget
|
||||||
|
appInstanceId={instance.appInstanceId}
|
||||||
|
appHost={bridge}
|
||||||
|
config={instance.config}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
/**
|
||||||
|
* Apps System Type Definitions
|
||||||
|
*
|
||||||
|
* These are JSDoc type definitions for the widget/apps system.
|
||||||
|
* Architecture is designed to be iframe-compatible in the future.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {'mapOverlay:topLeft' | 'mapOverlay:topRight' | 'mapOverlay:bottomLeft' | 'mapOverlay:bottomRight' | 'mapOverlay:bottomSheet'} SlotId
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} AppPermission
|
||||||
|
* @property {boolean} [location] - Can receive location updates
|
||||||
|
* @property {boolean} [user] - Can access user info
|
||||||
|
* @property {boolean} [network] - Can make network requests
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} AppDefinition
|
||||||
|
* @property {string} appId - Unique app identifier
|
||||||
|
* @property {string} name - Display name
|
||||||
|
* @property {string} [description] - App description
|
||||||
|
* @property {string} [icon] - Font Awesome icon class
|
||||||
|
* @property {SlotId} defaultSlot - Default slot for this app
|
||||||
|
* @property {number} [order] - Order within slot (lower = first)
|
||||||
|
* @property {AppPermission} permissions - Required permissions
|
||||||
|
* @property {function(AppWidgetProps): JSX.Element} mountWidget - Widget component factory
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} AppInstance
|
||||||
|
* @property {string} appInstanceId - Unique instance ID (ai_xxx)
|
||||||
|
* @property {string} appId - App definition ID
|
||||||
|
* @property {string} userId - Owner user ID
|
||||||
|
* @property {SlotId} slot - Current slot placement
|
||||||
|
* @property {number} order - Order in slot
|
||||||
|
* @property {Object} [config] - Instance-specific config
|
||||||
|
* @property {boolean} enabled - Is instance active
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} AppWidgetProps
|
||||||
|
* @property {string} appInstanceId - Instance ID
|
||||||
|
* @property {AppHostBridge} appHost - Bridge to host services
|
||||||
|
* @property {Object} [config] - Instance config
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} AppHostBridge
|
||||||
|
* @property {function(string, Object): void} sendAction - Send action to backend
|
||||||
|
* @property {function(string, function): function} onEvent - Subscribe to events, returns unsubscribe
|
||||||
|
* @property {function(): MapContext} getMapContext - Get current map context
|
||||||
|
* @property {function(string, function): function} onMapContextChange - Subscribe to map context changes
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} MapContext
|
||||||
|
* @property {Object} center - {lat: number, lng: number}
|
||||||
|
* @property {Object} bbox - {west: number, south: number, east: number, north: number}
|
||||||
|
* @property {number} zoom - Current zoom level
|
||||||
|
* @property {string} sectorId - Stable sector identifier for deduping
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} AppEvent
|
||||||
|
* @property {string} type - Event type (e.g., 'weather.updated')
|
||||||
|
* @property {Object} payload - Event payload
|
||||||
|
* @property {string} [requestId] - Correlation ID
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} AppActionEnvelope
|
||||||
|
* @property {number} v - Version (1)
|
||||||
|
* @property {string} requestId - UUID
|
||||||
|
* @property {number} ts - Unix timestamp
|
||||||
|
* @property {string} userId - User ID
|
||||||
|
* @property {string} appId - App ID
|
||||||
|
* @property {string} appInstanceId - Instance ID
|
||||||
|
* @property {string} action - Action name
|
||||||
|
* @property {Object} payload - Action payload
|
||||||
|
* @property {Object} context - Client context
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} AppEventEnvelope
|
||||||
|
* @property {number} v - Version (1)
|
||||||
|
* @property {number} ts - Unix timestamp
|
||||||
|
* @property {string} userId - User ID
|
||||||
|
* @property {string} appInstanceId - Instance ID
|
||||||
|
* @property {string} type - "app.event"
|
||||||
|
* @property {AppEvent} event - The actual event
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const SLOT_IDS = {
|
||||||
|
TOP_LEFT: 'mapOverlay:topLeft',
|
||||||
|
TOP_RIGHT: 'mapOverlay:topRight',
|
||||||
|
BOTTOM_LEFT: 'mapOverlay:bottomLeft',
|
||||||
|
BOTTOM_RIGHT: 'mapOverlay:bottomRight',
|
||||||
|
BOTTOM_SHEET: 'mapOverlay:bottomSheet',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const EVENT_TYPES = {
|
||||||
|
LOCATION_CHANGED: 'context.location.changed',
|
||||||
|
APP_EVENT: 'app.event',
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,314 @@
|
||||||
|
/**
|
||||||
|
* WeatherWidget - Compact weather pill (same style as old widget)
|
||||||
|
*
|
||||||
|
* Calls weather service on us02 via apps system (Pulsar)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useEffect, useState, useCallback, useRef } from 'react';
|
||||||
|
|
||||||
|
// Emoji icons for weather
|
||||||
|
const ICON_MAP = {
|
||||||
|
'sun': '☀️', 'moon': '🌙', 'cloud-sun': '⛅', 'cloud': '☁️',
|
||||||
|
'smog': '🌫️', 'cloud-rain': '🌧️', 'cloud-showers-heavy': '🌧️',
|
||||||
|
'snowflake': '❄️', 'cloud-sun-rain': '🌦️', 'cloud-meatball': '🌨️', 'bolt': '⛈️'
|
||||||
|
};
|
||||||
|
|
||||||
|
// WMO codes to icon names
|
||||||
|
const WMO_TO_ICON = {
|
||||||
|
0: 'sun', 1: 'sun', 2: 'cloud-sun', 3: 'cloud',
|
||||||
|
45: 'smog', 48: 'smog',
|
||||||
|
51: 'cloud-rain', 53: 'cloud-rain', 55: 'cloud-rain',
|
||||||
|
61: 'cloud-rain', 63: 'cloud-showers-heavy', 65: 'cloud-showers-heavy',
|
||||||
|
71: 'snowflake', 73: 'snowflake', 75: 'snowflake', 77: 'snowflake',
|
||||||
|
80: 'cloud-sun-rain', 81: 'cloud-showers-heavy', 82: 'cloud-showers-heavy',
|
||||||
|
85: 'cloud-meatball', 86: 'cloud-meatball',
|
||||||
|
95: 'bolt', 96: 'bolt', 99: 'bolt',
|
||||||
|
};
|
||||||
|
|
||||||
|
// Day name helper - dateStr is "YYYY-MM-DD"
|
||||||
|
function getDayName(dateStr) {
|
||||||
|
// Parse as local date (not UTC) by using date parts
|
||||||
|
const [year, month, day] = dateStr.split('-').map(Number);
|
||||||
|
const date = new Date(year, month - 1, day);
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
const tomorrow = new Date(today);
|
||||||
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||||
|
const dateOnly = new Date(date);
|
||||||
|
dateOnly.setHours(0, 0, 0, 0);
|
||||||
|
if (dateOnly.getTime() === today.getTime()) return "Auj.";
|
||||||
|
if (dateOnly.getTime() === tomorrow.getTime()) return "Dem.";
|
||||||
|
return date.toLocaleDateString("fr-FR", { weekday: "short" });
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WeatherWidget({ appInstanceId, appHost, config = {} }) {
|
||||||
|
const [weather, setWeather] = useState(null);
|
||||||
|
const [daily, setDaily] = useState(null);
|
||||||
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
const [lastSectorId, setLastSectorId] = useState(null);
|
||||||
|
const pendingRequestRef = useRef(null);
|
||||||
|
const lastCoordsRef = useRef({ lat: null, lon: null });
|
||||||
|
const widgetRef = useRef(null);
|
||||||
|
const lastRequestTimeRef = useRef(0);
|
||||||
|
|
||||||
|
// Fallback: fetch directly from Open-Meteo (defined first to avoid circular dep)
|
||||||
|
const fetchWeatherDirect = useCallback(async (lat, lon) => {
|
||||||
|
try {
|
||||||
|
lastCoordsRef.current = { lat, lon };
|
||||||
|
const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t=temperature_2m,weather_code,is_day,relative_humidity_2m,wind_speed_10m&daily=weather_code,temperature_2m_max,temperature_2m_min,precipitation_sum&timezone=auto`;
|
||||||
|
const res = await fetch(url);
|
||||||
|
if (!res.ok) return;
|
||||||
|
|
||||||
|
const data = await res.json();
|
||||||
|
const current = data.current;
|
||||||
|
if (!current) return;
|
||||||
|
|
||||||
|
const wmoCode = current.weather_code || 0;
|
||||||
|
const isDay = current.is_day === 1;
|
||||||
|
let iconName = WMO_TO_ICON[wmoCode] || 'cloud';
|
||||||
|
if (!isDay && (wmoCode === 0 || wmoCode === 1)) iconName = 'moon';
|
||||||
|
|
||||||
|
// Get city name
|
||||||
|
let city = `${lat.toFixed(1)}, ${lon.toFixed(1)}`;
|
||||||
|
try {
|
||||||
|
const geoRes = await fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=10`, {
|
||||||
|
headers: { 'User-Agent': 'Sociowire/1.0' }
|
||||||
|
});
|
||||||
|
if (geoRes.ok) {
|
||||||
|
const geo = await geoRes.json();
|
||||||
|
const addr = geo.address || {};
|
||||||
|
city = addr.city || addr.town || addr.village || addr.municipality || city;
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
|
||||||
|
setWeather({
|
||||||
|
icon: ICON_MAP[iconName] || '🌡️',
|
||||||
|
city,
|
||||||
|
temp: Math.round(current.temperature_2m),
|
||||||
|
humidity: current.relative_humidity_2m,
|
||||||
|
wind: Math.round(current.wind_speed_10m),
|
||||||
|
isDay,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set daily forecast
|
||||||
|
if (data.daily) {
|
||||||
|
const dailyData = data.daily.time.map((date, i) => ({
|
||||||
|
date,
|
||||||
|
code: data.daily.weather_code[i],
|
||||||
|
max: Math.round(data.daily.temperature_2m_max[i]),
|
||||||
|
min: Math.round(data.daily.temperature_2m_min[i]),
|
||||||
|
precip: data.daily.precipitation_sum[i],
|
||||||
|
}));
|
||||||
|
setDaily(dailyData);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('Direct weather fetch failed:', err);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Send weather request via apps system
|
||||||
|
const requestWeather = useCallback(async (lat, lon) => {
|
||||||
|
const requestId = `weather_${Date.now()}`;
|
||||||
|
pendingRequestRef.current = requestId;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Send action to apps-gateway -> Pulsar -> weather-service on us02
|
||||||
|
await appHost.sendAction('weather.get', { lat, lon, requestId });
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('Weather request failed, using fallback:', err);
|
||||||
|
// Fallback: direct Open-Meteo call
|
||||||
|
fetchWeatherDirect(lat, lon);
|
||||||
|
}
|
||||||
|
}, [appHost, fetchWeatherDirect]);
|
||||||
|
|
||||||
|
// Handle weather response from apps system (via WebSocket)
|
||||||
|
useEffect(() => {
|
||||||
|
// Listen for weather.data events
|
||||||
|
const unsubscribe = appHost.onEvent('weather.data', (event) => {
|
||||||
|
const data = event.payload || event;
|
||||||
|
if (data.city && data.current) {
|
||||||
|
const iconName = data.current.weather_icon || 'cloud';
|
||||||
|
setWeather({
|
||||||
|
icon: ICON_MAP[iconName] || '🌡️',
|
||||||
|
city: data.city,
|
||||||
|
temp: Math.round(data.current.temperature || 0),
|
||||||
|
isDay: data.current.is_day !== false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return unsubscribe;
|
||||||
|
}, [appHost]);
|
||||||
|
|
||||||
|
// Handle map context changes (throttled to 1 request per second)
|
||||||
|
const handleMapContextChange = useCallback((context) => {
|
||||||
|
if (!context || context.sectorId === lastSectorId) return;
|
||||||
|
|
||||||
|
const now = Date.now();
|
||||||
|
if (now - lastRequestTimeRef.current < 1000) return; // Throttle: 1 second min
|
||||||
|
|
||||||
|
setLastSectorId(context.sectorId);
|
||||||
|
lastRequestTimeRef.current = now;
|
||||||
|
|
||||||
|
const lat = context.center?.lat || 0;
|
||||||
|
const lon = context.center?.lng || context.center?.lon || 0;
|
||||||
|
|
||||||
|
if (lat !== 0 || lon !== 0) {
|
||||||
|
requestWeather(lat, lon);
|
||||||
|
}
|
||||||
|
}, [lastSectorId, requestWeather]);
|
||||||
|
|
||||||
|
// Subscribe to map context
|
||||||
|
useEffect(() => {
|
||||||
|
const unsubscribe = appHost.onMapContextChange(handleMapContextChange);
|
||||||
|
return unsubscribe;
|
||||||
|
}, [appHost, handleMapContextChange]);
|
||||||
|
|
||||||
|
// Close on click outside
|
||||||
|
useEffect(() => {
|
||||||
|
if (!expanded) return;
|
||||||
|
|
||||||
|
const handleClickOutside = (e) => {
|
||||||
|
if (widgetRef.current && !widgetRef.current.contains(e.target)) {
|
||||||
|
setExpanded(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Use capture phase to catch clicks before they reach the map
|
||||||
|
document.addEventListener('click', handleClickOutside, true);
|
||||||
|
return () => document.removeEventListener('click', handleClickOutside, true);
|
||||||
|
}, [expanded]);
|
||||||
|
|
||||||
|
// No weather yet - show nothing (like old widget)
|
||||||
|
if (!weather) return null;
|
||||||
|
|
||||||
|
// Determine background based on weather
|
||||||
|
const isSunny = weather.icon === '☀️' || weather.icon === '⛅';
|
||||||
|
const isNight = weather.icon === '🌙';
|
||||||
|
const isRainy = weather.icon === '🌧️' || weather.icon === '🌦️' || weather.icon === '⛈️';
|
||||||
|
const isSnow = weather.icon === '❄️' || weather.icon === '🌨️';
|
||||||
|
|
||||||
|
const bg = isNight
|
||||||
|
? 'linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9))'
|
||||||
|
: isSunny
|
||||||
|
? 'linear-gradient(135deg, rgba(56, 189, 248, 0.85), rgba(14, 165, 233, 0.85))'
|
||||||
|
: isRainy
|
||||||
|
? 'linear-gradient(135deg, rgba(71, 85, 105, 0.9), rgba(51, 65, 85, 0.9))'
|
||||||
|
: isSnow
|
||||||
|
? 'linear-gradient(135deg, rgba(148, 163, 184, 0.9), rgba(203, 213, 225, 0.9))'
|
||||||
|
: 'linear-gradient(135deg, rgba(100, 116, 139, 0.85), rgba(71, 85, 105, 0.85))';
|
||||||
|
|
||||||
|
// Collapsed pill view
|
||||||
|
if (!expanded) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={widgetRef}
|
||||||
|
onClick={() => setExpanded(true)}
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '5px',
|
||||||
|
padding: '5px 12px',
|
||||||
|
borderRadius: '16px',
|
||||||
|
background: bg,
|
||||||
|
border: '1px solid rgba(255,255,255,0.25)',
|
||||||
|
color: isSnow ? '#1e293b' : '#fff',
|
||||||
|
fontSize: '13px',
|
||||||
|
fontWeight: '600',
|
||||||
|
cursor: 'pointer',
|
||||||
|
backdropFilter: 'blur(8px)',
|
||||||
|
boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ fontSize: '16px' }}>{weather.icon}</span>
|
||||||
|
<span>{weather.city}:</span>
|
||||||
|
<span style={{ fontWeight: '700' }}>{weather.temp}°</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Expanded view with 7-day forecast
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={widgetRef}
|
||||||
|
style={{
|
||||||
|
background: 'rgba(15, 23, 42, 0.95)',
|
||||||
|
backdropFilter: 'blur(12px)',
|
||||||
|
borderRadius: '12px',
|
||||||
|
border: '1px solid rgba(148, 163, 184, 0.2)',
|
||||||
|
boxShadow: '0 4px 20px rgba(0,0,0,0.4)',
|
||||||
|
color: '#e2e8f0',
|
||||||
|
width: '280px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header with current weather */}
|
||||||
|
<div
|
||||||
|
onClick={() => setExpanded(false)}
|
||||||
|
style={{
|
||||||
|
padding: '12px',
|
||||||
|
background: bg,
|
||||||
|
cursor: 'pointer',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ fontSize: '32px' }}>{weather.icon}</span>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ fontSize: '24px', fontWeight: '700', color: isSnow ? '#1e293b' : '#fff' }}>
|
||||||
|
{weather.temp}°
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '13px', color: isSnow ? '#334155' : 'rgba(255,255,255,0.8)' }}>
|
||||||
|
{weather.city}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<i className="fa-solid fa-chevron-up" style={{ color: isSnow ? '#1e293b' : '#fff', opacity: 0.6 }} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Current details */}
|
||||||
|
<div style={{ padding: '10px 12px', display: 'flex', gap: '16px', borderBottom: '1px solid rgba(148,163,184,0.15)' }}>
|
||||||
|
{weather.humidity != null && (
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '12px', color: '#94a3b8' }}>
|
||||||
|
<span>💧</span> {weather.humidity}%
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{weather.wind != null && (
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '12px', color: '#94a3b8' }}>
|
||||||
|
<span>🌬️</span> {weather.wind} km/h
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 7-day forecast */}
|
||||||
|
<div style={{ padding: '8px 0' }}>
|
||||||
|
<div style={{ padding: '0 12px 6px', fontSize: '11px', color: '#64748b', fontWeight: '600', textTransform: 'uppercase' }}>
|
||||||
|
Prévisions 7 jours
|
||||||
|
</div>
|
||||||
|
{daily && daily.slice(0, 7).map((d, i) => {
|
||||||
|
const dayIcon = ICON_MAP[WMO_TO_ICON[d.code] || 'cloud'] || '🌡️';
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: '6px 12px',
|
||||||
|
gap: '8px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style={{ width: '40px', fontSize: '12px', color: '#94a3b8' }}>{getDayName(d.date)}</span>
|
||||||
|
<span style={{ fontSize: '16px' }}>{dayIcon}</span>
|
||||||
|
<span style={{ flex: 1 }} />
|
||||||
|
<span style={{ fontSize: '13px', fontWeight: '600', width: '30px', textAlign: 'right' }}>{d.max}°</span>
|
||||||
|
<span style={{ fontSize: '12px', color: '#64748b', width: '30px', textAlign: 'right' }}>{d.min}°</span>
|
||||||
|
{d.precip > 0 && (
|
||||||
|
<span style={{ fontSize: '11px', color: '#60a5fa', width: '45px', textAlign: 'right' }}>💧{d.precip.toFixed(1)}</span>
|
||||||
|
)}
|
||||||
|
{d.precip <= 0 && <span style={{ width: '45px' }} />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
/**
|
||||||
|
* Weather App Registration
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { registerApp } from '../AppRegistry';
|
||||||
|
import { SLOT_IDS } from '../types';
|
||||||
|
import WeatherWidget from './WeatherWidget';
|
||||||
|
|
||||||
|
export function registerWeatherApp() {
|
||||||
|
registerApp({
|
||||||
|
appId: 'weather',
|
||||||
|
name: 'Weather',
|
||||||
|
description: 'Shows current weather for the map location',
|
||||||
|
icon: 'fa-solid fa-cloud-sun',
|
||||||
|
defaultSlot: SLOT_IDS.TOP_LEFT,
|
||||||
|
order: 10,
|
||||||
|
compact: true, // Use minimal styling (pill)
|
||||||
|
permissions: {
|
||||||
|
location: true,
|
||||||
|
network: true,
|
||||||
|
},
|
||||||
|
mountWidget: WeatherWidget,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export { WeatherWidget };
|
||||||
|
export default { registerWeatherApp };
|
||||||
Loading…
Reference in New Issue