init: extract mobile app from bincio_activity
Expo/React Native app with local SQLite archive and bincio-activity sync.
This commit is contained in:
Davide Scaini
@@ -0,0 +1,45 @@
|
||||
import { Tabs } from 'expo-router';
|
||||
import { Platform } from 'react-native';
|
||||
import { useTheme } from '@/ThemeContext';
|
||||
|
||||
const isKaroo = Platform.OS === 'android' && (Platform.Version as number) < 29;
|
||||
|
||||
export default function TabLayout() {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
tabBarStyle: { backgroundColor: '#18181b', borderTopColor: '#27272a' },
|
||||
tabBarActiveTintColor: theme.accent,
|
||||
tabBarInactiveTintColor: '#71717a',
|
||||
}}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{ title: 'Feed', tabBarIcon: ({ color }) => <TabIcon label="⬡" color={color} /> }}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="import"
|
||||
options={{ title: 'Import', tabBarIcon: ({ color }) => <TabIcon label="↑" color={color} /> }}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="search"
|
||||
options={{
|
||||
title: 'Search',
|
||||
tabBarIcon: ({ color }) => <TabIcon label="⌕" color={color} />,
|
||||
href: isKaroo ? null : '/search',
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="settings"
|
||||
options={{ title: 'Settings', tabBarIcon: ({ color }) => <TabIcon label="⚙" color={color} /> }}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
function TabIcon({ label, color }: { label: string; color: string }) {
|
||||
const { Text } = require('react-native');
|
||||
return <Text style={{ color, fontSize: 18 }}>{label}</Text>;
|
||||
}
|
||||
@@ -0,0 +1,604 @@
|
||||
import * as DocumentPicker from 'expo-document-picker';
|
||||
import * as FileSystem from 'expo-file-system/legacy';
|
||||
import { useFocusEffect } from 'expo-router';
|
||||
import { useSQLiteContext } from 'expo-sqlite';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { AppState, PermissionsAndroid, Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
|
||||
import { insertActivity, isSourcePathImported, getSetting } from '@/db/queries';
|
||||
import { PyodideWebView } from '@/extraction/PyodideWebView';
|
||||
import { extractFile, waitForEngine, onEngineProgress, isEngineAvailable } from '@/extraction/extractActivity';
|
||||
import { extractFileViaServer, checkServerAuth } from '@/extraction/extractServer';
|
||||
import { useTheme } from '@/ThemeContext';
|
||||
|
||||
async function sha256hex(text: string): Promise<string> {
|
||||
const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(text));
|
||||
return Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
|
||||
const FIT_EXTENSIONS = ['.fit', '.fit.gz'];
|
||||
const OTHER_EXTENSIONS = ['.gpx', '.tcx', '.gpx.gz', '.tcx.gz'];
|
||||
const ALL_NATIVE_EXTENSIONS = [...FIT_EXTENSIONS, ...OTHER_EXTENSIONS];
|
||||
|
||||
type ImportState =
|
||||
| { status: 'idle' }
|
||||
| { status: 'loading'; msg: string; current: number; total: number }
|
||||
| { status: 'done'; count: number; errors: Array<{ name: string; message: string }> }
|
||||
| { status: 'error'; message: string };
|
||||
|
||||
export default function ImportScreen() {
|
||||
const db = useSQLiteContext();
|
||||
const theme = useTheme();
|
||||
const [state, setState] = useState<ImportState>({ status: 'idle' });
|
||||
const [watchPath, setWatchPath] = useState('');
|
||||
const [engineAvailable, setEngineAvailable] = useState<boolean | null>(null);
|
||||
const isImporting = useRef(false);
|
||||
|
||||
// Track engine availability so we can show the server-extraction notice.
|
||||
useEffect(() => {
|
||||
waitForEngine(30_000)
|
||||
.then(() => setEngineAvailable(true))
|
||||
.catch((e: unknown) => {
|
||||
if (e instanceof Error && e.message === 'engine_unavailable') setEngineAvailable(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Reload watch path every time the Import tab comes into focus so changes
|
||||
// saved in Settings are picked up without remounting the tab.
|
||||
useFocusEffect(useCallback(() => {
|
||||
if (Platform.OS !== 'android') return;
|
||||
const row = db.getFirstSync<{ value: string }>(
|
||||
'SELECT value FROM settings WHERE key = ?',
|
||||
['auto_import_path'],
|
||||
);
|
||||
setWatchPath(row?.value ?? '');
|
||||
}, [db]));
|
||||
|
||||
// Auto-scan watch folder on mount and when app comes to foreground.
|
||||
useEffect(() => {
|
||||
if (Platform.OS !== 'android') return;
|
||||
runAutoScan();
|
||||
|
||||
const sub = AppState.addEventListener('change', (next) => {
|
||||
if (next === 'active') runAutoScan();
|
||||
});
|
||||
return () => sub.remove();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
async function runAutoScan() {
|
||||
if (isImporting.current) return;
|
||||
const path = await getSetting(db, 'auto_import_path');
|
||||
if (!path) return;
|
||||
const instanceUrl = await getSetting(db, 'instance_url');
|
||||
if (!instanceUrl) return;
|
||||
|
||||
// Wait for engine — skip auto-scan on init failure, but continue if device is
|
||||
// too old for local extraction (importNativeFile will use the server instead).
|
||||
try { await waitForEngine(120_000); } catch (e: unknown) {
|
||||
if (!(e instanceof Error) || e.message !== 'engine_unavailable') return;
|
||||
}
|
||||
|
||||
// Server-mode requires a valid token — verify before touching any files.
|
||||
if (isEngineAvailable() === false) {
|
||||
const token = await getSetting(db, 'api_token');
|
||||
if (!token) return;
|
||||
try { await checkServerAuth(instanceUrl, token); } catch { return; }
|
||||
}
|
||||
|
||||
const newFiles = await discoverNewFiles(db, path);
|
||||
if (newFiles.length === 0) return;
|
||||
|
||||
isImporting.current = true;
|
||||
try {
|
||||
await processBatch(newFiles.map(f => ({ uri: `file://${f}`, name: f.split('/').pop() ?? f, sourcePath: f })));
|
||||
} finally {
|
||||
isImporting.current = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function manualScan() {
|
||||
if (isImporting.current) return;
|
||||
const path = await getSetting(db, 'auto_import_path');
|
||||
if (!path) return;
|
||||
const instanceUrl = await getSetting(db, 'instance_url');
|
||||
if (!instanceUrl) {
|
||||
setState({ status: 'error', message: 'No Bincio instance configured. Go to Settings and enter an instance URL first — it\'s needed to download the extraction engine.' });
|
||||
return;
|
||||
}
|
||||
|
||||
const serverMode = isEngineAvailable() === false;
|
||||
if (!serverMode) {
|
||||
setState({ status: 'loading', msg: 'Preparing extraction engine…', current: 0, total: 0 });
|
||||
const unsubScan = onEngineProgress((msg) =>
|
||||
setState({ status: 'loading', msg, current: 0, total: 0 }),
|
||||
);
|
||||
try {
|
||||
await waitForEngine();
|
||||
} catch (e: unknown) {
|
||||
if (!(e instanceof Error) || e.message !== 'engine_unavailable') {
|
||||
setState({ status: 'error', message: e instanceof Error ? e.message : String(e) });
|
||||
return;
|
||||
}
|
||||
// engine_unavailable — fall through to server mode
|
||||
} finally {
|
||||
unsubScan();
|
||||
}
|
||||
} else {
|
||||
const token = await getSetting(db, 'api_token');
|
||||
if (!token) {
|
||||
setState({ status: 'error', message: 'Server extraction requires a Bincio account. Connect in Settings.' });
|
||||
return;
|
||||
}
|
||||
// Verify the token is valid before processing any files.
|
||||
setState({ status: 'loading', msg: 'Checking connection…', current: 0, total: 0 });
|
||||
try {
|
||||
await checkServerAuth(instanceUrl, token);
|
||||
} catch (e: unknown) {
|
||||
setState({ status: 'error', message: e instanceof Error ? e.message : String(e) });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setState({ status: 'loading', msg: 'Scanning…', current: 0, total: 0 });
|
||||
const newFiles = await discoverNewFiles(db, path);
|
||||
if (newFiles.length === 0) {
|
||||
setState({ status: 'done', count: 0, errors: [] });
|
||||
return;
|
||||
}
|
||||
|
||||
isImporting.current = true;
|
||||
try {
|
||||
await processBatch(newFiles.map(f => ({ uri: `file://${f}`, name: f.split('/').pop() ?? f, sourcePath: f })));
|
||||
} finally {
|
||||
isImporting.current = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function pickFiles() {
|
||||
if (isImporting.current) return;
|
||||
setState({ status: 'loading', msg: 'Picking files…', current: 0, total: 0 });
|
||||
try {
|
||||
let result: DocumentPicker.DocumentPickerResult;
|
||||
try {
|
||||
result = await DocumentPicker.getDocumentAsync({
|
||||
type: ['*/*'],
|
||||
copyToCacheDirectory: true,
|
||||
multiple: true,
|
||||
});
|
||||
} catch (pickerErr: unknown) {
|
||||
// Some Android devices (e.g. Karoo) have no system file picker app.
|
||||
const raw = pickerErr instanceof Error ? pickerErr.message : String(pickerErr);
|
||||
const noApp = raw.includes('ActivityNotFoundException') || raw.includes('No Activity found');
|
||||
setState({
|
||||
status: 'error',
|
||||
message: noApp
|
||||
? 'No file picker available on this device. Set a Watch directory in Settings to import from a folder.'
|
||||
: raw,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.canceled || !result.assets?.length) {
|
||||
setState({ status: 'idle' });
|
||||
return;
|
||||
}
|
||||
isImporting.current = true;
|
||||
const unsubPick = onEngineProgress((msg) =>
|
||||
setState({ status: 'loading', msg, current: 0, total: 0 }),
|
||||
);
|
||||
try {
|
||||
await processBatch(result.assets.map(a => ({ uri: a.uri, name: a.name ?? '', sourcePath: null })));
|
||||
} finally {
|
||||
unsubPick();
|
||||
isImporting.current = false;
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
setState({ status: 'error', message: msg });
|
||||
isImporting.current = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function processBatch(files: Array<{ uri: string; name: string; sourcePath: string | null }>) {
|
||||
const total = files.length;
|
||||
const errors: Array<{ name: string; message: string }> = [];
|
||||
let count = 0;
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const { uri, name, sourcePath } = files[i];
|
||||
const lower = name.toLowerCase();
|
||||
|
||||
setState({ status: 'loading', msg: `Processing ${name}…`, current: i + 1, total });
|
||||
|
||||
try {
|
||||
if (lower.endsWith('.json')) {
|
||||
await importBasJson(uri, name, sourcePath, (msg) =>
|
||||
setState({ status: 'loading', msg, current: i + 1, total }),
|
||||
);
|
||||
} else if (ALL_NATIVE_EXTENSIONS.some(ext => lower.endsWith(ext))) {
|
||||
await importNativeFile(uri, name, sourcePath, (msg) =>
|
||||
setState({ status: 'loading', msg, current: i + 1, total }),
|
||||
);
|
||||
} else {
|
||||
errors.push({ name, message: 'Unsupported file type' });
|
||||
continue;
|
||||
}
|
||||
count++;
|
||||
} catch (e: unknown) {
|
||||
errors.push({ name, message: e instanceof Error ? e.message : String(e) });
|
||||
}
|
||||
}
|
||||
|
||||
setState({ status: 'done', count, errors });
|
||||
}
|
||||
|
||||
// ── BAS JSON import (no extraction needed) ──────────────────────────────────
|
||||
|
||||
async function importBasJson(
|
||||
uri: string,
|
||||
_name: string,
|
||||
sourcePath: string | null,
|
||||
onStatus: (msg: string) => void,
|
||||
) {
|
||||
onStatus('Importing…');
|
||||
const text = await FileSystem.readAsStringAsync(uri);
|
||||
const detail = JSON.parse(text);
|
||||
|
||||
if (!detail.id || !detail.started_at) {
|
||||
throw new Error('Not a valid BAS activity JSON (missing id or started_at)');
|
||||
}
|
||||
|
||||
const hash = detail.source_hash ?? await sha256hex(text);
|
||||
const origDir = `${FileSystem.documentDirectory}originals/`;
|
||||
await FileSystem.makeDirectoryAsync(origDir, { intermediates: true });
|
||||
const dest = `${origDir}${detail.id}.json`;
|
||||
await FileSystem.copyAsync({ from: uri, to: dest });
|
||||
|
||||
await insertActivity(db, {
|
||||
id: detail.id,
|
||||
source_hash: hash,
|
||||
detail_json: text,
|
||||
timeseries_json: null,
|
||||
geojson: null,
|
||||
original_path: dest,
|
||||
source_path: sourcePath,
|
||||
origin: 'local',
|
||||
});
|
||||
}
|
||||
|
||||
// ── FIT / GPX / TCX import via Pyodide (local) or server fallback ───────────
|
||||
|
||||
async function importNativeFile(
|
||||
uri: string,
|
||||
name: string,
|
||||
sourcePath: string | null,
|
||||
onStatus: (msg: string) => void,
|
||||
) {
|
||||
onStatus('Reading file…');
|
||||
|
||||
// Read the original file as base64 so we can (a) pass it to the extractor
|
||||
// and (b) copy it to permanent storage without a second read.
|
||||
const base64 = await FileSystem.readAsStringAsync(uri, {
|
||||
encoding: FileSystem.EncodingType.Base64,
|
||||
});
|
||||
|
||||
let result;
|
||||
|
||||
if (isEngineAvailable() === false) {
|
||||
// Device WebView is too old for WebAssembly.Global (Chrome <69).
|
||||
// Send the raw file to the Bincio instance for server-side extraction.
|
||||
const instanceUrl = await getInstanceUrl(db);
|
||||
const token = db.getFirstSync<{ value: string }>(
|
||||
'SELECT value FROM settings WHERE key = ?', ['api_token'],
|
||||
)?.value ?? '';
|
||||
if (!token) throw new Error('Server extraction requires a Bincio account — connect in Settings.');
|
||||
result = await extractFileViaServer(name, base64, instanceUrl, token, onStatus);
|
||||
} else {
|
||||
// Fetch the bincio wheel here (React Native networking), not inside the
|
||||
// WebView. WKWebView blocks HTTP requests via ATS; RN native networking
|
||||
// allows local-network HTTP (NSAllowsLocalNetworking=true in Info.plist).
|
||||
const instanceUrl = await getInstanceUrl(db);
|
||||
onStatus('Fetching Bincio engine…');
|
||||
const { base64: wheelBase64, filename: wheelFilename } = await fetchWheelBase64(instanceUrl);
|
||||
result = await extractFile(name, base64, wheelBase64, wheelFilename, onStatus);
|
||||
}
|
||||
|
||||
onStatus('Saving…');
|
||||
|
||||
// Copy original file to permanent storage (keeps original bytes for future re-extraction)
|
||||
const ext = name.includes('.') ? name.slice(name.lastIndexOf('.')) : '';
|
||||
const origDir = `${FileSystem.documentDirectory}originals/`;
|
||||
await FileSystem.makeDirectoryAsync(origDir, { intermediates: true });
|
||||
const dest = `${origDir}${result.id}${ext}`;
|
||||
await FileSystem.copyAsync({ from: uri, to: dest });
|
||||
|
||||
await insertActivity(db, {
|
||||
id: result.id,
|
||||
source_hash: result.sourceHash,
|
||||
detail_json: JSON.stringify(result.detail),
|
||||
timeseries_json: result.timeseries ? JSON.stringify(result.timeseries) : null,
|
||||
geojson: result.geojson ? JSON.stringify(result.geojson) : null,
|
||||
original_path: dest,
|
||||
source_path: sourcePath,
|
||||
origin: 'local',
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.screen}>
|
||||
{/* Hidden WebView for Pyodide — only mounted on devices that can run it.
|
||||
Android <29 has a system WebView (Chrome <69) that lacks WebAssembly.Global
|
||||
AND causes GPU SurfaceView crashes on old drivers. Skip it entirely there. */}
|
||||
{(Platform.OS !== 'android' || (Platform.Version as number) >= 29) && (
|
||||
<View style={styles.hiddenEngine}>
|
||||
<PyodideWebView />
|
||||
</View>
|
||||
)}
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
||||
<Text style={styles.header}>Import</Text>
|
||||
|
||||
<Text style={styles.body}>
|
||||
Import FIT, GPX, or TCX files — extracted on your device, nothing uploaded.
|
||||
You can also import pre-extracted BAS <Text style={[styles.code, { color: theme.accent }]}>.json</Text> files.
|
||||
</Text>
|
||||
|
||||
{engineAvailable === false && (
|
||||
<View style={styles.serverNotice}>
|
||||
<Text style={styles.serverNoticeText}>
|
||||
This device's Android WebView is too old to run local extraction (requires Chrome 69+).
|
||||
Activities are processed by your Bincio instance instead — a connected account is required.
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{watchPath ? (
|
||||
<View style={styles.watchBox}>
|
||||
<Text style={styles.watchLabel}>Watch folder</Text>
|
||||
<Text style={styles.watchPath} numberOfLines={2}>{watchPath}</Text>
|
||||
<Pressable
|
||||
style={[styles.scanButton, state.status === 'loading' && styles.buttonDisabled]}
|
||||
onPress={state.status !== 'loading' ? manualScan : undefined}
|
||||
>
|
||||
<Text style={styles.buttonText}>
|
||||
{state.status === 'loading' ? 'Working…' : '↺ Scan for new rides'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<Pressable
|
||||
style={[styles.button, state.status === 'loading' && styles.buttonDisabled]}
|
||||
onPress={state.status !== 'loading' ? pickFiles : undefined}
|
||||
>
|
||||
<Text style={styles.buttonText}>
|
||||
{state.status === 'loading' ? 'Working…' : '＋ Pick files'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
{state.status === 'loading' && (
|
||||
<View style={styles.statusBox}>
|
||||
{state.total > 1 && (
|
||||
<Text style={styles.statusCounter}>
|
||||
File {state.current} of {state.total}
|
||||
</Text>
|
||||
)}
|
||||
<Text style={[styles.statusMsg, { color: theme.accent }]}>{state.msg}</Text>
|
||||
{engineAvailable !== false && (
|
||||
<Text style={styles.statusHint}>
|
||||
First run downloads ~35 MB (Python runtime + packages). Subsequent runs are instant.
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{state.status === 'done' && (
|
||||
<View style={[styles.success, state.count === 0 && state.errors.length === 0 && styles.successEmpty]}>
|
||||
<Text style={styles.successText}>
|
||||
{state.count === 0 && state.errors.length === 0
|
||||
? 'No new rides found'
|
||||
: `✓ Imported ${state.count} ${state.count === 1 ? 'activity' : 'activities'}`}
|
||||
</Text>
|
||||
{state.errors.map((e, i) => (
|
||||
<Text key={i} style={styles.batchError}>✗ {e.name}: {e.message}</Text>
|
||||
))}
|
||||
<Pressable onPress={() => setState({ status: 'idle' })}>
|
||||
<Text style={styles.errorRetry}>Dismiss</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{state.status === 'error' && (
|
||||
<View style={styles.error}>
|
||||
<Text style={styles.errorText}>{state.message}</Text>
|
||||
<Pressable onPress={() => setState({ status: 'idle' })}>
|
||||
<Text style={styles.errorRetry}>Try again</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
<Text style={styles.sectionTitle}>Supported formats</Text>
|
||||
{([
|
||||
['FIT', 'Garmin, Wahoo, Karoo native format'],
|
||||
['GPX', 'Most GPS devices and apps'],
|
||||
['TCX', 'Garmin Training Center'],
|
||||
['BAS JSON', 'Pre-extracted Bincio format (instant)'],
|
||||
] as [string, string][]).map(([fmt, desc]) => (
|
||||
<View key={fmt} style={styles.formatRow}>
|
||||
<Text style={styles.formatName}>{fmt}</Text>
|
||||
<Text style={styles.formatDesc}>{desc}</Text>
|
||||
</View>
|
||||
))}
|
||||
|
||||
<View style={styles.notice}>
|
||||
<Text style={styles.noticeText}>
|
||||
{engineAvailable === false
|
||||
? 'Activities are sent to your Bincio instance for extraction and stored there + locally. A connected account is required.'
|
||||
: `FIT/GPX/TCX extraction runs entirely on your device.\nA Bincio instance must be reachable on first run to download the extraction engine (~35 MB, then cached).`}
|
||||
{'\n\n'}
|
||||
On Karoo: set Watch directory to <Text style={styles.noticeCode}>/sdcard/FitFiles</Text> in Settings to auto-import rides.
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Watch-folder helpers ──────────────────────────────────────────────────────
|
||||
|
||||
async function requestStoragePermission(): Promise<boolean> {
|
||||
if (Platform.OS !== 'android') return true;
|
||||
try {
|
||||
const granted = await PermissionsAndroid.request(
|
||||
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
|
||||
);
|
||||
return granted === PermissionsAndroid.RESULTS.GRANTED;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function discoverNewFiles(
|
||||
db: ReturnType<typeof useSQLiteContext>,
|
||||
watchPath: string,
|
||||
): Promise<string[]> {
|
||||
const ok = await requestStoragePermission();
|
||||
if (!ok) return [];
|
||||
|
||||
// Normalize: strip trailing slash, then use file:// URI for expo-fs
|
||||
const dir = watchPath.replace(/\/+$/, '');
|
||||
const uri = dir.startsWith('file://') ? dir : `file://${dir}`;
|
||||
|
||||
let entries: string[];
|
||||
try {
|
||||
entries = await FileSystem.readDirectoryAsync(uri);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
|
||||
const newFiles: string[] = [];
|
||||
for (const entry of entries) {
|
||||
const lower = entry.toLowerCase();
|
||||
if (!lower.endsWith('.fit')) continue;
|
||||
const fullPath = `${dir}/${entry}`;
|
||||
if (!isSourcePathImported(db, fullPath)) {
|
||||
newFiles.push(fullPath);
|
||||
}
|
||||
}
|
||||
return newFiles;
|
||||
}
|
||||
|
||||
// ── Module-level helpers ──────────────────────────────────────────────────────
|
||||
|
||||
async function getInstanceUrl(db: ReturnType<typeof useSQLiteContext>): Promise<string> {
|
||||
const row = db.getFirstSync<{ value: string }>(
|
||||
'SELECT value FROM settings WHERE key = ?',
|
||||
['instance_url'],
|
||||
);
|
||||
return (row?.value ?? '').replace(/\/$/, '');
|
||||
}
|
||||
|
||||
// In-memory cache so repeated imports in one session don't re-download the wheel.
|
||||
let _cachedWheel: { base64: string; filename: string } | null = null;
|
||||
|
||||
async function fetchWheelBase64(instanceUrl: string): Promise<{ base64: string; filename: string }> {
|
||||
if (_cachedWheel) return _cachedWheel;
|
||||
|
||||
const base = instanceUrl || 'https://bincio.org';
|
||||
|
||||
// Ask the instance for the canonical wheel URL (handles both dev and prod layouts).
|
||||
let wheelUrl = `${base}/api/wheel/download`;
|
||||
let wheelFilename = 'bincio-0.1.0-py3-none-any.whl';
|
||||
try {
|
||||
const vr = await fetch(`${base}/api/wheel/version`, { signal: AbortSignal.timeout(5000) });
|
||||
if (vr.ok) {
|
||||
const d = await vr.json() as { api_url?: string; url?: string };
|
||||
const path = d.api_url ?? d.url ?? '/api/wheel/download';
|
||||
wheelUrl = path.startsWith('http') ? path : `${base}${path}`;
|
||||
// Extract the filename from the URL path (last segment after final /)
|
||||
const urlBasename = wheelUrl.split('/').pop() ?? '';
|
||||
if (urlBasename.endsWith('.whl')) wheelFilename = urlBasename;
|
||||
}
|
||||
} catch {}
|
||||
|
||||
// Fetch via React Native networking (supports local HTTP; WKWebView would block it).
|
||||
const resp = await fetch(wheelUrl);
|
||||
if (!resp.ok) throw new Error(`Could not download Bincio engine (${resp.status}). Is the instance running?`);
|
||||
const buf = await resp.arrayBuffer();
|
||||
_cachedWheel = { base64: arrayBufferToBase64(buf), filename: wheelFilename };
|
||||
return _cachedWheel;
|
||||
}
|
||||
|
||||
function arrayBufferToBase64(buf: ArrayBuffer): string {
|
||||
const bytes = new Uint8Array(buf);
|
||||
let binary = '';
|
||||
// Process in chunks to avoid spread-operator stack overflow on large arrays.
|
||||
const CHUNK = 8192;
|
||||
for (let i = 0; i < bytes.length; i += CHUNK) {
|
||||
binary += String.fromCharCode(...(bytes.subarray(i, i + CHUNK) as unknown as number[]));
|
||||
}
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
// ── Styles ───────────────────────────────────────────────────────────────────
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
screen: { flex: 1, backgroundColor: '#09090b' },
|
||||
hiddenEngine: { position: 'absolute', width: 1, height: 1, overflow: 'hidden' },
|
||||
container: { flex: 1 },
|
||||
content: { padding: 16, paddingTop: 60, paddingBottom: 40 },
|
||||
header: { color: '#fff', fontSize: 22, fontWeight: '700', marginBottom: 12 },
|
||||
body: { color: '#a1a1aa', fontSize: 14, lineHeight: 20, marginBottom: 24 },
|
||||
code: { color: '#60a5fa', fontFamily: 'monospace' },
|
||||
serverNotice: {
|
||||
backgroundColor: '#1c1400', borderRadius: 8, borderWidth: 1,
|
||||
borderColor: '#854d0e', padding: 12, marginBottom: 16,
|
||||
},
|
||||
serverNoticeText: { color: '#fbbf24', fontSize: 13, lineHeight: 18 },
|
||||
watchBox: {
|
||||
backgroundColor: '#18181b', borderRadius: 10, borderWidth: 1,
|
||||
borderColor: '#27272a', padding: 14, marginBottom: 16, gap: 10,
|
||||
},
|
||||
watchLabel: { color: '#71717a', fontSize: 11, fontWeight: '600', letterSpacing: 0.5 },
|
||||
watchPath: { color: '#a1a1aa', fontSize: 13, fontFamily: 'monospace' },
|
||||
scanButton: {
|
||||
backgroundColor: '#16a34a', borderRadius: 10,
|
||||
paddingVertical: 14, alignItems: 'center',
|
||||
},
|
||||
button: {
|
||||
backgroundColor: '#2563eb', borderRadius: 10,
|
||||
paddingVertical: 14, alignItems: 'center', marginBottom: 16,
|
||||
},
|
||||
buttonDisabled: { opacity: 0.5 },
|
||||
buttonText: { color: '#fff', fontWeight: '600', fontSize: 16 },
|
||||
statusBox: {
|
||||
backgroundColor: '#18181b', borderRadius: 8, borderWidth: 1,
|
||||
borderColor: '#27272a', padding: 14, marginBottom: 16, gap: 6,
|
||||
},
|
||||
statusCounter: { color: '#71717a', fontSize: 12, textAlign: 'center' },
|
||||
statusMsg: { color: '#60a5fa', fontSize: 14, textAlign: 'center' },
|
||||
statusHint: { color: '#52525b', fontSize: 12, textAlign: 'center', lineHeight: 16 },
|
||||
success: {
|
||||
backgroundColor: '#14532d', borderRadius: 8, padding: 12, marginBottom: 16, gap: 6,
|
||||
},
|
||||
successEmpty: { backgroundColor: '#1c1c1e' },
|
||||
successText: { color: '#86efac', fontSize: 14 },
|
||||
batchError: { color: '#fca5a5', fontSize: 12 },
|
||||
error: {
|
||||
backgroundColor: '#450a0a', borderRadius: 8, padding: 12, marginBottom: 16, gap: 8,
|
||||
},
|
||||
errorText: { color: '#fca5a5', fontSize: 14 },
|
||||
errorRetry: { color: '#71717a', fontSize: 13, textDecorationLine: 'underline', marginTop: 4 },
|
||||
divider: { height: 1, backgroundColor: '#27272a', marginVertical: 24 },
|
||||
sectionTitle: { color: '#a1a1aa', fontSize: 12, fontWeight: '600', marginBottom: 12, letterSpacing: 0.5 },
|
||||
formatRow: { flexDirection: 'row', gap: 12, marginBottom: 10 },
|
||||
formatName: { color: '#f4f4f5', fontSize: 13, fontWeight: '600', width: 72 },
|
||||
formatDesc: { color: '#71717a', fontSize: 13, flex: 1 },
|
||||
notice: {
|
||||
marginTop: 8, backgroundColor: '#18181b',
|
||||
borderRadius: 8, padding: 12, borderWidth: 1, borderColor: '#27272a',
|
||||
},
|
||||
noticeText: { color: '#71717a', fontSize: 12, lineHeight: 18 },
|
||||
noticeCode: { fontFamily: 'monospace', color: '#a1a1aa' },
|
||||
});
|
||||
@@ -0,0 +1,302 @@
|
||||
import * as FileSystem from 'expo-file-system';
|
||||
import { useFocusEffect } from 'expo-router';
|
||||
import { useSQLiteContext } from 'expo-sqlite';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { Alert, FlatList, Pressable, RefreshControl, StyleSheet, Text, TextInput, View } from 'react-native';
|
||||
import { deleteActivities, useActivities, useActivityCount, PAGE_SIZE } from '@/db/queries';
|
||||
import { downloadFeed, uploadFeed } from '@/db/sync';
|
||||
import { useTheme } from '@/ThemeContext';
|
||||
import { ActivityCard } from '@/components/ActivityCard';
|
||||
|
||||
export default function FeedScreen() {
|
||||
const db = useSQLiteContext();
|
||||
const theme = useTheme();
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [limit, setLimit] = useState(PAGE_SIZE);
|
||||
const activities = useActivities(searchQuery, limit);
|
||||
const totalCount = useActivityCount(searchQuery);
|
||||
const hasMore = activities.length < totalCount;
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [statusMsg, setStatusMsg] = useState<{ ok: boolean; text: string } | null>(null);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const selecting = selected.size > 0;
|
||||
|
||||
// Auto-refresh the local list whenever the tab comes into focus.
|
||||
// SQLite getAllSync is sub-millisecond — no network, no lag.
|
||||
useFocusEffect(useCallback(() => {
|
||||
setRefreshKey(k => k + 1);
|
||||
}, []));
|
||||
|
||||
function showMsg(ok: boolean, text: string) {
|
||||
setStatusMsg({ ok, text });
|
||||
setTimeout(() => setStatusMsg(null), 3500);
|
||||
}
|
||||
|
||||
const doDownload = useCallback(async () => {
|
||||
setDownloading(true);
|
||||
setStatusMsg(null);
|
||||
const result = await downloadFeed(db);
|
||||
setDownloading(false);
|
||||
setRefreshKey(k => k + 1);
|
||||
if (result.error) {
|
||||
showMsg(false, result.error);
|
||||
} else if (result.total === 0) {
|
||||
showMsg(true, 'No activities on instance');
|
||||
} else if (result.synced === 0 && !result.fetched) {
|
||||
showMsg(true, `Up to date (${result.total} activities)`);
|
||||
} else {
|
||||
const parts = [];
|
||||
if (result.synced > 0) parts.push(`${result.synced} new`);
|
||||
if (result.fetched) parts.push(`${result.fetched} full dataset${result.fetched === 1 ? '' : 's'}`);
|
||||
showMsg(true, `Downloaded: ${parts.join(', ')} (${result.total} total)`);
|
||||
}
|
||||
}, [db]);
|
||||
|
||||
const doUpload = useCallback(async () => {
|
||||
setUploading(true);
|
||||
setStatusMsg(null);
|
||||
const result = await uploadFeed(db, (n, total) => {
|
||||
setStatusMsg({ ok: true, text: `Uploading ${n} / ${total}…` });
|
||||
});
|
||||
setUploading(false);
|
||||
if (result.error) {
|
||||
showMsg(false, result.error);
|
||||
} else if (!result.uploaded && !result.failed) {
|
||||
showMsg(true, 'Nothing to upload');
|
||||
} else {
|
||||
const parts: string[] = [];
|
||||
if (result.uploaded) parts.push(`${result.uploaded} uploaded`);
|
||||
if (result.failed) parts.push(`${result.failed} failed`);
|
||||
showMsg(result.failed ? false : true, parts.join(', '));
|
||||
}
|
||||
}, [db]);
|
||||
|
||||
function doRefresh() {
|
||||
setRefreshKey(k => k + 1);
|
||||
}
|
||||
|
||||
function handleSearch(q: string) {
|
||||
setSearchQuery(q);
|
||||
setLimit(PAGE_SIZE); // reset pagination when search changes
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
if (hasMore) setLimit(l => l + PAGE_SIZE);
|
||||
}
|
||||
|
||||
function toggleSelect(id: string) {
|
||||
setSelected(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id); else next.add(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function cancelSelect() { setSelected(new Set()); }
|
||||
|
||||
function confirmDeleteSelected() {
|
||||
const count = selected.size;
|
||||
Alert.alert(
|
||||
`Delete ${count} activit${count === 1 ? 'y' : 'ies'}`,
|
||||
'These activities will be permanently removed from your device.',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
const ids = Array.from(selected);
|
||||
const paths = await deleteActivities(db, ids);
|
||||
setSelected(new Set());
|
||||
for (const p of paths) {
|
||||
if (p) try { await FileSystem.deleteAsync(p, { idempotent: true }); } catch {}
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
const busy = downloading || uploading;
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.headerRow}>
|
||||
{selecting ? (
|
||||
<>
|
||||
<Text style={styles.header}>{selected.size} selected</Text>
|
||||
<Pressable style={styles.cancelButton} onPress={cancelSelect}>
|
||||
<Text style={styles.cancelText}>Cancel</Text>
|
||||
</Pressable>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text style={styles.header}>Feed</Text>
|
||||
<View style={styles.actionButtons}>
|
||||
<ActionButton
|
||||
icon="↑"
|
||||
label="Upload"
|
||||
loading={uploading}
|
||||
disabled={busy}
|
||||
accent={theme.accent}
|
||||
dim={theme.dim}
|
||||
onPress={doUpload}
|
||||
/>
|
||||
<ActionButton
|
||||
icon="↓"
|
||||
label="Download"
|
||||
loading={downloading}
|
||||
disabled={busy}
|
||||
accent={theme.accent}
|
||||
dim={theme.dim}
|
||||
onPress={doDownload}
|
||||
/>
|
||||
<ActionButton
|
||||
icon="↺"
|
||||
label="Refresh"
|
||||
loading={false}
|
||||
disabled={busy}
|
||||
accent={theme.accent}
|
||||
dim={theme.dim}
|
||||
onPress={doRefresh}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{statusMsg && (
|
||||
<Text style={statusMsg.ok ? styles.msgOk : styles.msgErr}>{statusMsg.text}</Text>
|
||||
)}
|
||||
|
||||
{!selecting && (
|
||||
<View style={styles.searchRow}>
|
||||
<TextInput
|
||||
style={styles.searchInput}
|
||||
value={searchQuery}
|
||||
onChangeText={handleSearch}
|
||||
placeholder="Search activities…"
|
||||
placeholderTextColor="#52525b"
|
||||
returnKeyType="search"
|
||||
clearButtonMode="while-editing"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{activities.length === 0 && !busy ? (
|
||||
<View style={styles.empty}>
|
||||
<Text style={styles.emptyIcon}>🚴</Text>
|
||||
<Text style={styles.emptyTitle}>No activities yet</Text>
|
||||
<Text style={styles.emptyBody}>
|
||||
Import a file or tap ↓ to pull from your instance.
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={activities}
|
||||
keyExtractor={(a) => a.id}
|
||||
extraData={refreshKey}
|
||||
renderItem={({ item }) => (
|
||||
<ActivityCard
|
||||
activity={item}
|
||||
selecting={selecting}
|
||||
checked={selected.has(item.id)}
|
||||
onToggleSelect={() => toggleSelect(item.id)}
|
||||
onLongPress={() => toggleSelect(item.id)}
|
||||
/>
|
||||
)}
|
||||
contentContainerStyle={styles.list}
|
||||
onEndReached={loadMore}
|
||||
onEndReachedThreshold={0.3}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={false}
|
||||
onRefresh={doRefresh}
|
||||
tintColor="#60a5fa"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selecting && (
|
||||
<View style={styles.actionBar}>
|
||||
<Pressable style={styles.deleteBarButton} onPress={confirmDeleteSelected}>
|
||||
<Text style={styles.deleteBarText}>Delete {selected.size}</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionButton({
|
||||
icon, label, loading, disabled, accent, dim, onPress,
|
||||
}: {
|
||||
icon: string;
|
||||
label: string;
|
||||
loading: boolean;
|
||||
disabled: boolean;
|
||||
accent: string;
|
||||
dim: string;
|
||||
onPress: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Pressable
|
||||
style={[styles.actionBtn, { backgroundColor: dim }, disabled && styles.actionBtnDisabled]}
|
||||
onPress={disabled ? undefined : onPress}
|
||||
accessibilityLabel={label}
|
||||
>
|
||||
<Text style={[styles.actionBtnIcon, { color: loading ? '#52525b' : accent }]}>
|
||||
{loading ? '…' : icon}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#09090b' },
|
||||
headerRow: {
|
||||
flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
|
||||
paddingHorizontal: 16, paddingTop: 60, paddingBottom: 12,
|
||||
},
|
||||
header: { color: '#fff', fontSize: 22, fontWeight: '700' },
|
||||
actionButtons: { flexDirection: 'row', gap: 8 },
|
||||
actionBtn: {
|
||||
width: 36, height: 36, borderRadius: 8,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
},
|
||||
actionBtnDisabled: { opacity: 0.4 },
|
||||
actionBtnIcon: { fontSize: 18, fontWeight: '700', lineHeight: 22 },
|
||||
cancelButton: {
|
||||
backgroundColor: '#27272a', borderRadius: 8,
|
||||
paddingHorizontal: 14, paddingVertical: 7,
|
||||
},
|
||||
cancelText: { color: '#a1a1aa', fontSize: 13, fontWeight: '600' },
|
||||
msgOk: { color: '#86efac', fontSize: 12, textAlign: 'center', paddingHorizontal: 16, paddingBottom: 8 },
|
||||
msgErr: { color: '#fca5a5', fontSize: 12, textAlign: 'center', paddingHorizontal: 16, paddingBottom: 8 },
|
||||
searchRow: { paddingHorizontal: 16, paddingBottom: 10 },
|
||||
searchInput: {
|
||||
backgroundColor: '#18181b', borderWidth: 1, borderColor: '#27272a',
|
||||
borderRadius: 8, paddingHorizontal: 12, paddingVertical: 8,
|
||||
color: '#f4f4f5', fontSize: 14,
|
||||
},
|
||||
list: { padding: 16, gap: 12, paddingBottom: 80 },
|
||||
empty: {
|
||||
flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32,
|
||||
},
|
||||
emptyIcon: { fontSize: 48, marginBottom: 16 },
|
||||
emptyTitle: { color: '#f4f4f5', fontSize: 18, fontWeight: '600', marginBottom: 8 },
|
||||
emptyBody: { color: '#71717a', fontSize: 14, textAlign: 'center', lineHeight: 20 },
|
||||
actionBar: {
|
||||
position: 'absolute', bottom: 0, left: 0, right: 0,
|
||||
backgroundColor: '#18181b', borderTopWidth: 1, borderTopColor: '#27272a',
|
||||
paddingHorizontal: 16, paddingVertical: 12, paddingBottom: 28,
|
||||
},
|
||||
deleteBarButton: {
|
||||
backgroundColor: '#7f1d1d', borderRadius: 10,
|
||||
paddingVertical: 14, alignItems: 'center',
|
||||
},
|
||||
deleteBarText: { color: '#fca5a5', fontSize: 15, fontWeight: '700' },
|
||||
});
|
||||
@@ -0,0 +1,151 @@
|
||||
import { useState } from 'react';
|
||||
import { FlatList, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
|
||||
import { PAGE_SIZE, useActivityYears, useFilteredActivities, useFilteredCount, type ActivityFilter } from '@/db/queries';
|
||||
import { ActivityCard } from '@/components/ActivityCard';
|
||||
import { useTheme } from '@/ThemeContext';
|
||||
|
||||
type SortKey = 'date' | 'distance' | 'elevation';
|
||||
|
||||
const SPORTS = [
|
||||
{ value: '', label: 'All' },
|
||||
{ value: 'cycling', label: '🚴 Cycling' },
|
||||
{ value: 'running', label: '🏃 Running' },
|
||||
{ value: 'hiking', label: '🥾 Hiking' },
|
||||
{ value: 'swimming', label: '🏊 Swimming' },
|
||||
{ value: 'walking', label: '🚶 Walking' },
|
||||
];
|
||||
|
||||
const DATE_PRESETS = [
|
||||
{ value: 'all', label: 'All time' },
|
||||
{ value: '7d', label: '7 days' },
|
||||
{ value: '30d', label: '30 days' },
|
||||
{ value: '6mo', label: '6 months' },
|
||||
];
|
||||
|
||||
const SORTS: { value: SortKey; label: string }[] = [
|
||||
{ value: 'date', label: 'Newest' },
|
||||
{ value: 'distance', label: 'Distance' },
|
||||
{ value: 'elevation', label: 'Elevation' },
|
||||
];
|
||||
|
||||
function computeDateRange(preset: string): { dateFrom: string; dateTo: string } {
|
||||
if (preset === 'all') return { dateFrom: '', dateTo: '' };
|
||||
if (/^\d{4}$/.test(preset)) {
|
||||
const y = parseInt(preset, 10);
|
||||
return { dateFrom: `${y}-01-01T000000Z`, dateTo: `${y + 1}-01-01T000000Z` };
|
||||
}
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
const now = new Date();
|
||||
let d: Date;
|
||||
if (preset === '7d') d = new Date(now.getTime() - 7 * 86_400_000);
|
||||
else if (preset === '30d') d = new Date(now.getTime() - 30 * 86_400_000);
|
||||
else { d = new Date(now); d.setMonth(d.getMonth() - 6); }
|
||||
return { dateFrom: `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T000000Z`, dateTo: '' };
|
||||
}
|
||||
|
||||
export default function SearchScreen() {
|
||||
const theme = useTheme();
|
||||
const [sport, setSport] = useState('');
|
||||
const [datePre, setDatePre] = useState('all');
|
||||
const [sort, setSort] = useState<SortKey>('date');
|
||||
const [limit, setLimit] = useState(PAGE_SIZE);
|
||||
|
||||
const years = useActivityYears();
|
||||
const dateOptions = [...DATE_PRESETS, ...years.map(y => ({ value: y, label: y }))];
|
||||
|
||||
const { dateFrom, dateTo } = computeDateRange(datePre);
|
||||
const filter: ActivityFilter = { sport, dateFrom, dateTo, sort };
|
||||
const activities = useFilteredActivities(filter, limit);
|
||||
const total = useFilteredCount(filter);
|
||||
const hasMore = activities.length < total;
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.headerRow}>
|
||||
<Text style={styles.header}>Filter</Text>
|
||||
{total > 0 && <Text style={styles.count}>{total} activities</Text>}
|
||||
</View>
|
||||
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false}
|
||||
style={styles.pillScroll} contentContainerStyle={styles.pillRow}>
|
||||
{SPORTS.map(s => (
|
||||
<Pill key={s.value} label={s.label} active={sport === s.value} accent={theme.accent}
|
||||
onPress={() => { setSport(s.value); setLimit(PAGE_SIZE); }} />
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false}
|
||||
style={styles.pillScroll} contentContainerStyle={styles.pillRow}>
|
||||
{dateOptions.map(d => (
|
||||
<Pill key={d.value} label={d.label} active={datePre === d.value} accent={theme.accent}
|
||||
onPress={() => { setDatePre(d.value); setLimit(PAGE_SIZE); }} />
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
<View style={styles.sortRow}>
|
||||
{SORTS.map(s => (
|
||||
<Pressable key={s.value}
|
||||
style={[styles.sortBtn, sort === s.value && { borderBottomColor: theme.accent, borderBottomWidth: 2 }]}
|
||||
onPress={() => { setSort(s.value); setLimit(PAGE_SIZE); }}>
|
||||
<Text style={[styles.sortText, sort === s.value && { color: theme.accent }]}>{s.label}</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{activities.length === 0 ? (
|
||||
<View style={styles.empty}>
|
||||
<Text style={styles.emptyText}>No activities match</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
style={{ flex: 1 }}
|
||||
data={activities}
|
||||
keyExtractor={a => a.id}
|
||||
renderItem={({ item }) => (
|
||||
<ActivityCard activity={item} selecting={false} checked={false}
|
||||
onToggleSelect={() => {}} onLongPress={() => {}} />
|
||||
)}
|
||||
contentContainerStyle={styles.list}
|
||||
onEndReached={() => { if (hasMore) setLimit(l => l + PAGE_SIZE); }}
|
||||
onEndReachedThreshold={0.3}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function Pill({ label, active, accent, onPress }: {
|
||||
label: string; active: boolean; accent: string; onPress: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Pressable
|
||||
style={[styles.pill, active && { backgroundColor: accent + '33', borderColor: accent }]}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Text style={[styles.pillText, active && { color: accent }]}>{label}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#09090b' },
|
||||
headerRow: {
|
||||
flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
|
||||
paddingHorizontal: 16, paddingTop: 60, paddingBottom: 12,
|
||||
},
|
||||
header: { color: '#fff', fontSize: 22, fontWeight: '700' },
|
||||
count: { color: '#71717a', fontSize: 13 },
|
||||
pillScroll: { flexGrow: 0, flexShrink: 0 },
|
||||
pillRow: { flexDirection: 'row', gap: 8, paddingHorizontal: 16, paddingBottom: 10 },
|
||||
pill: {
|
||||
borderRadius: 20, borderWidth: 1, borderColor: '#3f3f46',
|
||||
paddingHorizontal: 14, paddingVertical: 7,
|
||||
},
|
||||
pillText: { color: '#a1a1aa', fontSize: 13, fontWeight: '500' },
|
||||
sortRow: { flexDirection: 'row', paddingHorizontal: 16, marginBottom: 4 },
|
||||
sortBtn: { marginRight: 24, paddingBottom: 8, borderBottomWidth: 2, borderBottomColor: 'transparent' },
|
||||
sortText: { color: '#71717a', fontSize: 13, fontWeight: '600' },
|
||||
list: { padding: 16, gap: 12, paddingBottom: 80 },
|
||||
empty: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
||||
emptyText: { color: '#52525b', fontSize: 15 },
|
||||
});
|
||||
@@ -0,0 +1,388 @@
|
||||
import { useSQLiteContext } from 'expo-sqlite';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator, Platform, Pressable, ScrollView, StyleSheet,
|
||||
Text, TextInput, View,
|
||||
} from 'react-native';
|
||||
import { deleteRemoteActivities, getSetting, setSetting, useSetting } from '@/db/queries';
|
||||
import { PALETTES, type PaletteKey } from '@/theme';
|
||||
import { useTheme, usePaletteControl } from '@/ThemeContext';
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const db = useSQLiteContext();
|
||||
|
||||
const storedUrl = useSetting('instance_url') ?? '';
|
||||
const storedHandle = useSetting('handle') ?? '';
|
||||
const storedPath = useSetting('auto_import_path') ?? '';
|
||||
const storedToken = useSetting('api_token');
|
||||
const storedSyncMode = (useSetting('sync_mode') ?? 'summaries') as 'summaries' | 'full';
|
||||
const storedSyncUpload = useSetting('sync_upload') === 'true';
|
||||
const storedUploadFormat = (useSetting('upload_format') ?? 'raw') as 'raw' | 'bas';
|
||||
|
||||
const [instanceUrl, setInstanceUrl] = useState(storedUrl);
|
||||
const [handle, setHandle] = useState(storedHandle);
|
||||
const [autoPath, setAutoPath] = useState(storedPath);
|
||||
const [syncMode, setSyncMode] = useState(storedSyncMode);
|
||||
const [syncUpload, setSyncUpload] = useState(storedSyncUpload);
|
||||
const [uploadFormat, setUploadFormat] = useState(storedUploadFormat);
|
||||
const [saved, setSaved] = useState(false);
|
||||
const theme = useTheme();
|
||||
const { paletteKey: palette, setPaletteOverride } = usePaletteControl();
|
||||
|
||||
const [password, setPassword] = useState('');
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
const [connectMsg, setConnectMsg] = useState<{ ok: boolean; text: string } | null>(null);
|
||||
|
||||
const [resetArmed, setResetArmed] = useState(false);
|
||||
const [resetMsg, setResetMsg] = useState<string | null>(null);
|
||||
|
||||
async function save() {
|
||||
await setSetting(db, 'instance_url', instanceUrl.trim());
|
||||
await setSetting(db, 'handle', handle.trim());
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
}
|
||||
|
||||
async function connect() {
|
||||
const url = instanceUrl.trim().replace(/\/$/, '');
|
||||
const h = handle.trim();
|
||||
if (!url || !h || !password) {
|
||||
setConnectMsg({ ok: false, text: 'Fill in URL, handle, and password first.' });
|
||||
return;
|
||||
}
|
||||
setConnecting(true);
|
||||
setConnectMsg(null);
|
||||
try {
|
||||
const resp = await fetch(`${url}/api/auth/token`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ handle: h, password }),
|
||||
});
|
||||
if (!resp.ok) {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
setConnectMsg({ ok: false, text: err.detail ?? `Error ${resp.status}` });
|
||||
return;
|
||||
}
|
||||
const data = await resp.json();
|
||||
await setSetting(db, 'instance_url', url);
|
||||
await setSetting(db, 'handle', h);
|
||||
await setSetting(db, 'api_token', data.token);
|
||||
setPassword('');
|
||||
setConnectMsg({ ok: true, text: `Connected as ${data.display_name || h}` });
|
||||
} catch {
|
||||
setConnectMsg({ ok: false, text: 'Could not reach instance — check the URL.' });
|
||||
} finally {
|
||||
setConnecting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function disconnect() {
|
||||
await setSetting(db, 'api_token', '');
|
||||
setConnectMsg(null);
|
||||
}
|
||||
|
||||
async function resetSyncedData() {
|
||||
if (!resetArmed) {
|
||||
setResetArmed(true);
|
||||
return;
|
||||
}
|
||||
const n = await deleteRemoteActivities(db);
|
||||
setResetArmed(false);
|
||||
setResetMsg(`Removed ${n} synced ${n === 1 ? 'activity' : 'activities'}`);
|
||||
setTimeout(() => setResetMsg(null), 3000);
|
||||
}
|
||||
|
||||
const isConnected = !!storedToken;
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
||||
<Text style={styles.header}>Settings</Text>
|
||||
|
||||
<Section title="Instance">
|
||||
<Field
|
||||
label="Instance URL"
|
||||
placeholder="https://bincio.org"
|
||||
value={instanceUrl}
|
||||
onChangeText={setInstanceUrl}
|
||||
autoCapitalize="none"
|
||||
keyboardType="url"
|
||||
/>
|
||||
<Field
|
||||
label="Handle"
|
||||
placeholder="yourhandle"
|
||||
value={handle}
|
||||
onChangeText={setHandle}
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
<Text style={styles.hint}>
|
||||
Connect to a Bincio instance to sync your activities. Leave blank to use
|
||||
the app offline only.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Pressable style={styles.saveButton} onPress={save}>
|
||||
<Text style={styles.saveButtonText}>
|
||||
{saved ? '✓ Saved' : 'Save'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
<Section title="Connection">
|
||||
{isConnected ? (
|
||||
<>
|
||||
<Row label="Status" value={`Connected as ${storedHandle || '—'}`} />
|
||||
<Pressable style={styles.disconnectButton} onPress={disconnect}>
|
||||
<Text style={styles.disconnectText}>Disconnect</Text>
|
||||
</Pressable>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Field
|
||||
label="Password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
autoCapitalize="none"
|
||||
secureTextEntry
|
||||
/>
|
||||
<Pressable
|
||||
style={[styles.connectButton, connecting && styles.buttonDisabled]}
|
||||
onPress={connecting ? undefined : connect}
|
||||
>
|
||||
{connecting
|
||||
? <ActivityIndicator color="#fff" size="small" />
|
||||
: <Text style={styles.connectText}>Connect</Text>}
|
||||
</Pressable>
|
||||
</>
|
||||
)}
|
||||
{connectMsg && (
|
||||
<Text style={connectMsg.ok ? styles.msgOk : styles.msgErr}>
|
||||
{connectMsg.text}
|
||||
</Text>
|
||||
)}
|
||||
<Text style={styles.hint}>
|
||||
Your password is used once to obtain a session token, then forgotten.
|
||||
The token is stored locally and sent with each sync request.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
{Platform.OS === 'android' && (
|
||||
<Section title="Auto-import (Android)">
|
||||
{!storedUrl ? (
|
||||
<Text style={[styles.hint, styles.hintWarn]}>
|
||||
Configure and save a Bincio instance URL above first — it's needed to download the extraction engine.
|
||||
</Text>
|
||||
) : (
|
||||
<>
|
||||
<Field
|
||||
label="Watch directory"
|
||||
placeholder="/sdcard/FitFiles"
|
||||
value={autoPath}
|
||||
onChangeText={setAutoPath}
|
||||
onBlur={() => setSetting(db, 'auto_import_path', autoPath.trim())}
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
<Text style={styles.hint}>
|
||||
New FIT files in this folder are imported automatically when you
|
||||
open the app. Leave blank to disable. Requires storage permission.
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<Section title="Sync">
|
||||
<Text style={styles.subLabel}>Download</Text>
|
||||
<View style={styles.modeRow}>
|
||||
<ModeButton label="Summaries only" active={syncMode === 'summaries'} accent={theme.accent} dim={theme.dim}
|
||||
onPress={() => { setSyncMode('summaries'); setSetting(db, 'sync_mode', 'summaries'); }} />
|
||||
<ModeButton label="Full data" active={syncMode === 'full'} accent={theme.accent} dim={theme.dim}
|
||||
onPress={() => { setSyncMode('full'); setSetting(db, 'sync_mode', 'full'); }} />
|
||||
</View>
|
||||
<Text style={styles.hint}>
|
||||
{syncMode === 'full'
|
||||
? 'Downloads map route and elevation chart for every activity during sync. Uses more storage and takes longer.'
|
||||
: 'Syncs activity summaries only. Map and chart are fetched on demand when you open an activity.'}
|
||||
</Text>
|
||||
<Text style={[styles.subLabel, { borderTopWidth: 1, borderTopColor: '#27272a', paddingTop: 12 }]}>Upload</Text>
|
||||
<View style={styles.modeRow}>
|
||||
<ModeButton label="Off" active={!syncUpload} accent={theme.accent} dim={theme.dim}
|
||||
onPress={() => { setSyncUpload(false); setSetting(db, 'sync_upload', 'false'); }} />
|
||||
<ModeButton label="Upload local activities" active={syncUpload} accent={theme.accent} dim={theme.dim}
|
||||
onPress={() => { setSyncUpload(true); setSetting(db, 'sync_upload', 'true'); }} />
|
||||
</View>
|
||||
<Text style={styles.hint}>
|
||||
{syncUpload
|
||||
? 'Local activities are uploaded to the instance during sync.'
|
||||
: 'Local activities stay on device only.'}
|
||||
</Text>
|
||||
<Text style={[styles.subLabel, { borderTopWidth: 1, borderTopColor: '#27272a', paddingTop: 12 }]}>Upload format</Text>
|
||||
<View style={styles.modeRow}>
|
||||
<ModeButton label="Original file" active={uploadFormat === 'raw'} accent={theme.accent} dim={theme.dim}
|
||||
onPress={() => { setUploadFormat('raw'); setSetting(db, 'upload_format', 'raw'); }} />
|
||||
<ModeButton label="Extracted JSON" active={uploadFormat === 'bas'} accent={theme.accent} dim={theme.dim}
|
||||
onPress={() => { setUploadFormat('bas'); setSetting(db, 'upload_format', 'bas'); }} />
|
||||
</View>
|
||||
<Text style={styles.hint}>
|
||||
{uploadFormat === 'raw'
|
||||
? 'Uploads the original FIT/GPX/TCX file. The server re-extracts it with DEM elevation correction and updates your local copy.'
|
||||
: 'Uploads the pre-extracted JSON. Faster, but no DEM elevation correction.'}
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Section title="Palette">
|
||||
<Text style={[styles.hint, { paddingBottom: 0 }]}>
|
||||
Auto-switches to race colours during Giro, Tour, and Vuelta. Override here for testing.
|
||||
</Text>
|
||||
<View style={styles.modeRow}>
|
||||
{(['auto', 'default', 'giro', 'tour', 'vuelta'] as PaletteKey[]).map(key => {
|
||||
const label = key === 'auto' ? 'Auto' : PALETTES[key as keyof typeof PALETTES].label;
|
||||
const keyAccent = key === 'auto' ? theme.accent : PALETTES[key as keyof typeof PALETTES].accent;
|
||||
const keyDim = key === 'auto' ? theme.dim : PALETTES[key as keyof typeof PALETTES].dim;
|
||||
return (
|
||||
<ModeButton
|
||||
key={key}
|
||||
label={label}
|
||||
active={palette === key}
|
||||
accent={keyAccent}
|
||||
dim={keyDim}
|
||||
onPress={() => setPaletteOverride(key)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</Section>
|
||||
|
||||
<Section title="Data">
|
||||
<Pressable
|
||||
style={[styles.resetButton, resetArmed && styles.resetButtonArmed]}
|
||||
onPress={resetSyncedData}
|
||||
onBlur={() => setResetArmed(false)}
|
||||
>
|
||||
<Text style={[styles.resetText, resetArmed && styles.resetTextArmed]}>
|
||||
{resetArmed ? 'Tap again to confirm' : 'Reset synced data'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
{resetMsg && <Text style={styles.msgOk}>{resetMsg}</Text>}
|
||||
<Text style={styles.hint}>
|
||||
Removes all activities synced from the instance. Locally imported files are kept.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Section title="About">
|
||||
<Row label="Version" value="0.1.0 (Phase 0.5)" />
|
||||
<Row label="Schema" value="BAS 1.0" />
|
||||
</Section>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>{title}</Text>
|
||||
<View style={styles.sectionBody}>{children}</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label, placeholder, value, onChangeText, ...rest
|
||||
}: {
|
||||
label: string;
|
||||
placeholder: string;
|
||||
value: string;
|
||||
onChangeText: (v: string) => void;
|
||||
[key: string]: unknown;
|
||||
}) {
|
||||
return (
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.fieldLabel}>{label}</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor="#52525b"
|
||||
value={value}
|
||||
onChangeText={onChangeText}
|
||||
{...rest}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function ModeButton({ label, active, accent, dim, onPress }: {
|
||||
label: string; active: boolean; accent: string; dim: string; onPress: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Pressable
|
||||
style={[styles.modeButton, active && { backgroundColor: dim, borderColor: accent }]}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Text style={[styles.modeButtonText, active && { color: accent }]}>{label}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<View style={styles.row}>
|
||||
<Text style={styles.rowLabel}>{label}</Text>
|
||||
<Text style={styles.rowValue}>{value}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#09090b' },
|
||||
content: { padding: 16, paddingTop: 60, paddingBottom: 40 },
|
||||
header: { color: '#fff', fontSize: 22, fontWeight: '700', marginBottom: 24 },
|
||||
section: { marginBottom: 28 },
|
||||
sectionTitle: {
|
||||
color: '#a1a1aa', fontSize: 11, fontWeight: '600',
|
||||
letterSpacing: 0.8, marginBottom: 8,
|
||||
},
|
||||
sectionBody: {
|
||||
backgroundColor: '#18181b', borderRadius: 10,
|
||||
borderWidth: 1, borderColor: '#27272a', overflow: 'hidden',
|
||||
},
|
||||
field: { padding: 14, borderBottomWidth: 1, borderBottomColor: '#27272a' },
|
||||
fieldLabel: { color: '#71717a', fontSize: 11, marginBottom: 4 },
|
||||
input: { color: '#f4f4f5', fontSize: 15 },
|
||||
hint: { color: '#52525b', fontSize: 12, lineHeight: 16, padding: 12 },
|
||||
hintWarn: { color: '#a16207' },
|
||||
row: {
|
||||
flexDirection: 'row', justifyContent: 'space-between',
|
||||
paddingHorizontal: 14, paddingVertical: 12,
|
||||
borderBottomWidth: 1, borderBottomColor: '#27272a',
|
||||
},
|
||||
rowLabel: { color: '#a1a1aa', fontSize: 14 },
|
||||
rowValue: { color: '#71717a', fontSize: 14 },
|
||||
saveButton: {
|
||||
backgroundColor: '#2563eb', borderRadius: 10,
|
||||
paddingVertical: 14, alignItems: 'center', marginBottom: 28,
|
||||
},
|
||||
saveButtonText: { color: '#fff', fontWeight: '600', fontSize: 16 },
|
||||
connectButton: {
|
||||
backgroundColor: '#059669', borderRadius: 8, margin: 12,
|
||||
paddingVertical: 12, alignItems: 'center',
|
||||
},
|
||||
connectText: { color: '#fff', fontWeight: '600', fontSize: 15 },
|
||||
buttonDisabled: { opacity: 0.5 },
|
||||
disconnectButton: {
|
||||
margin: 12, paddingVertical: 10, alignItems: 'center',
|
||||
borderRadius: 8, borderWidth: 1, borderColor: '#3f3f46',
|
||||
},
|
||||
disconnectText: { color: '#71717a', fontSize: 14 },
|
||||
msgOk: { color: '#86efac', fontSize: 13, paddingHorizontal: 12, paddingBottom: 10 },
|
||||
msgErr: { color: '#fca5a5', fontSize: 13, paddingHorizontal: 12, paddingBottom: 10 },
|
||||
subLabel: { color: '#52525b', fontSize: 11, fontWeight: '600', letterSpacing: 0.6, paddingHorizontal: 12, paddingTop: 12, paddingBottom: 4 },
|
||||
modeRow: { flexDirection: 'row', gap: 8, padding: 12 },
|
||||
modeButton: { flex: 1, paddingVertical: 9, borderRadius: 8, borderWidth: 1, borderColor: '#3f3f46', alignItems: 'center' },
|
||||
modeButtonText: { color: '#71717a', fontSize: 13, fontWeight: '500' },
|
||||
resetButton: {
|
||||
margin: 12, paddingVertical: 10, alignItems: 'center',
|
||||
borderRadius: 8, borderWidth: 1, borderColor: '#3f3f46',
|
||||
},
|
||||
resetButtonArmed: { borderColor: '#ef4444', backgroundColor: '#1c0a0a' },
|
||||
resetText: { color: '#71717a', fontSize: 14 },
|
||||
resetTextArmed: { color: '#ef4444', fontWeight: '600' },
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Stack } from 'expo-router';
|
||||
import { SQLiteProvider } from 'expo-sqlite';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { migrateDb } from '@/db';
|
||||
import { ThemeProvider } from '@/ThemeContext';
|
||||
|
||||
export default function RootLayout() {
|
||||
return (
|
||||
<SQLiteProvider databaseName="bincio.db" onInit={migrateDb}>
|
||||
<ThemeProvider>
|
||||
<StatusBar style="light" />
|
||||
<Stack screenOptions={{ headerShown: false }} />
|
||||
</ThemeProvider>
|
||||
</SQLiteProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,531 @@
|
||||
import { Camera, GeoJSONSource, Layer, Map } from '@maplibre/maplibre-react-native';
|
||||
import * as FileSystem from 'expo-file-system';
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Alert, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
|
||||
import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg';
|
||||
import { useSQLiteContext } from 'expo-sqlite';
|
||||
import { deleteActivity, setActivityTitle, useActivity, useSetting } from '@/db/queries';
|
||||
import { useTheme } from '@/ThemeContext';
|
||||
|
||||
const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
|
||||
|
||||
// ── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
type Timeseries = {
|
||||
t: number[];
|
||||
elevation_m: (number | null)[];
|
||||
speed_kmh?: (number | null)[] | null;
|
||||
hr_bpm?: (number | null)[] | null;
|
||||
cadence_rpm?: (number | null)[] | null;
|
||||
power_w?: (number | null)[] | null;
|
||||
lat?: (number | null)[] | null;
|
||||
lon?: (number | null)[] | null;
|
||||
};
|
||||
|
||||
// ── Screen ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function ActivityScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
const db = useSQLiteContext();
|
||||
const theme = useTheme();
|
||||
const row = useActivity(id);
|
||||
const instanceUrl = useSetting('instance_url')?.replace(/\/$/, '') ?? '';
|
||||
const token = useSetting('api_token') ?? '';
|
||||
|
||||
const [geojson, setGeojson] = useState<object | null>(null);
|
||||
const [timeseries, setTimeseries] = useState<Timeseries | null>(null);
|
||||
const [loadingMap, setLoadingMap] = useState(false);
|
||||
const [loadingChart, setLoadingChart] = useState(false);
|
||||
const [editingTitle, setEditingTitle] = useState(false);
|
||||
const [titleDraft, setTitleDraft] = useState('');
|
||||
|
||||
async function confirmDelete() {
|
||||
Alert.alert(
|
||||
'Delete activity',
|
||||
'This will permanently remove this activity from your device.',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
const originalPath = await deleteActivity(db, id);
|
||||
if (originalPath) {
|
||||
try { await FileSystem.deleteAsync(originalPath, { idempotent: true }); } catch {}
|
||||
}
|
||||
router.back();
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// instanceUrl and token are in the dep array to avoid a stale-closure bug in
|
||||
// release builds: Hermes executes effects sooner and captures empty strings if
|
||||
// the deps are omitted. Guards on geojson/timeseries prevent double-fetching.
|
||||
useEffect(() => {
|
||||
if (!row) return;
|
||||
|
||||
if (row.geojson) {
|
||||
setGeojson(JSON.parse(row.geojson));
|
||||
} else if (row.origin === 'remote' && instanceUrl && token) {
|
||||
setLoadingMap(true);
|
||||
fetch(`${instanceUrl}/api/activity/${row.id}/geojson`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then(r => r.ok ? r.json() : null)
|
||||
.then(data => { if (data) setGeojson(data); })
|
||||
.catch(() => {})
|
||||
.finally(() => setLoadingMap(false));
|
||||
}
|
||||
|
||||
if (row.timeseries_json) {
|
||||
setTimeseries(JSON.parse(row.timeseries_json));
|
||||
} else if (row.origin === 'remote' && instanceUrl && token) {
|
||||
setLoadingChart(true);
|
||||
fetch(`${instanceUrl}/api/activity/${row.id}/timeseries`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then(r => r.ok ? r.json() : null)
|
||||
.then(data => { if (data) setTimeseries(data); })
|
||||
.catch(() => {})
|
||||
.finally(() => setLoadingChart(false));
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [row?.id, instanceUrl, token]);
|
||||
|
||||
if (!row) {
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<Text style={styles.notFound}>Activity not found</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const detail = JSON.parse(row.detail_json);
|
||||
const edits = row.edits_json ? JSON.parse(row.edits_json) : {};
|
||||
const displayTitle = edits.title ?? detail.title;
|
||||
const canEdit = row.origin === 'local';
|
||||
const km = detail.distance_m != null ? (detail.distance_m / 1000).toFixed(2) : null;
|
||||
const elev = detail.elevation_gain_m != null ? Math.round(detail.elevation_gain_m) : null;
|
||||
const elevLoss = detail.elevation_loss_m != null ? Math.round(Math.abs(detail.elevation_loss_m)) : null;
|
||||
const movingTime = detail.moving_time_s != null ? formatDuration(detail.moving_time_s) : null;
|
||||
const speed = detail.avg_speed_kmh != null ? detail.avg_speed_kmh.toFixed(1) : null;
|
||||
const hr = detail.avg_hr_bpm != null ? Math.round(detail.avg_hr_bpm) : null;
|
||||
const power = detail.avg_power_w != null ? Math.round(detail.avg_power_w) : null;
|
||||
const date = new Date(detail.started_at).toLocaleDateString(undefined, {
|
||||
weekday: 'long', day: 'numeric', month: 'long', year: 'numeric',
|
||||
});
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
||||
<View style={styles.topBar}>
|
||||
<Pressable style={styles.backButton} onPress={() => router.back()}>
|
||||
<Text style={[styles.backText, { color: theme.accent }]}>← Back</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.deleteButton} onPress={confirmDelete}>
|
||||
<Text style={styles.deleteText}>Delete</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<Text style={styles.sport}>{detail.sport ?? 'Activity'}</Text>
|
||||
{editingTitle ? (
|
||||
<TextInput
|
||||
style={styles.titleInput}
|
||||
value={titleDraft}
|
||||
onChangeText={setTitleDraft}
|
||||
autoFocus
|
||||
returnKeyType="done"
|
||||
onEndEditing={(e) => {
|
||||
const trimmed = e.nativeEvent.text.trim();
|
||||
if (trimmed && trimmed !== displayTitle) {
|
||||
setActivityTitle(db, id, trimmed);
|
||||
}
|
||||
setEditingTitle(false);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Pressable
|
||||
onPress={canEdit ? () => { setTitleDraft(displayTitle); setEditingTitle(true); } : undefined}
|
||||
style={styles.titleRow}
|
||||
>
|
||||
<Text style={styles.title}>{displayTitle}</Text>
|
||||
{canEdit && <Text style={styles.editHint}>✎</Text>}
|
||||
</Pressable>
|
||||
)}
|
||||
<Text style={styles.date}>{date}</Text>
|
||||
|
||||
{/* Map */}
|
||||
<RouteMap geojson={geojson} loading={loadingMap} accent={theme.accent} />
|
||||
|
||||
{/* Stats grid */}
|
||||
<View style={styles.grid}>
|
||||
{km && <StatCell label="Distance" value={km} unit="km" />}
|
||||
{movingTime && <StatCell label="Moving time" value={movingTime} unit="" />}
|
||||
{elev != null && <StatCell label="Elev gain" value={String(elev)} unit="m" />}
|
||||
{elevLoss != null && <StatCell label="Elev loss" value={String(elevLoss)} unit="m" />}
|
||||
{speed && <StatCell label="Avg speed" value={speed} unit="km/h"/>}
|
||||
{hr && <StatCell label="Avg HR" value={String(hr)} unit="bpm" />}
|
||||
{power && <StatCell label="Avg power" value={String(power)} unit="W" />}
|
||||
</View>
|
||||
|
||||
{/* Metric charts */}
|
||||
<MetricCharts timeseries={timeseries} loading={loadingChart} accent={theme.accent} />
|
||||
|
||||
{/* Meta */}
|
||||
<View style={styles.meta}>
|
||||
<MetaRow label="Source" value={detail.source ?? '—'} />
|
||||
<MetaRow label="Device" value={detail.device ?? '—'} />
|
||||
<MetaRow label="Origin" value={row.origin} />
|
||||
<MetaRow label="Synced" value={row.synced_at ? new Date(row.synced_at * 1000).toLocaleDateString() : 'No'} />
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Map ───────────────────────────────────────────────────────────────────────
|
||||
|
||||
function RouteMap({ geojson, loading, accent }: { geojson: object | null; loading: boolean; accent: string }) {
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
const [currentZoom, setCurrentZoom] = useState(12);
|
||||
const cameraRef = useRef<any>(null);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.mapPlaceholder}>
|
||||
<Text style={{ color: accent, fontSize: 13 }}>Loading map…</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
if (!geojson) return null;
|
||||
|
||||
// MapLibre uses OpenGL/SurfaceView which crashes the Karoo's Qualcomm GPU
|
||||
// driver (Android <29) even without any interaction. Render a pure SVG route
|
||||
// trace instead — no native GL surface, no crash.
|
||||
if (Platform.OS === 'android' && (Platform.Version as number) < 29) {
|
||||
return <SvgRouteView geojson={geojson} accent={accent} />;
|
||||
}
|
||||
|
||||
const bounds = geoJsonBounds(geojson);
|
||||
const routeSource = (
|
||||
<GeoJSONSource id="route" data={geojson as GeoJSON.FeatureCollection}>
|
||||
<Layer
|
||||
type="line"
|
||||
id="route-line"
|
||||
paint={{ 'line-color': accent, 'line-width': 3 }}
|
||||
layout={{ 'line-cap': 'round', 'line-join': 'round' }}
|
||||
/>
|
||||
</GeoJSONSource>
|
||||
);
|
||||
const cameraBounds = bounds
|
||||
? { bounds, padding: { top: 24, bottom: 24, left: 24, right: 24 } }
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Thumbnail — tap to expand */}
|
||||
<Pressable style={styles.mapContainer} onPress={() => setFullscreen(true)}>
|
||||
<Map style={styles.map} mapStyle={MAP_STYLE} dragPan={false} touchZoom={false} touchPitch={false} touchRotate={false}>
|
||||
{cameraBounds && <Camera initialViewState={cameraBounds} />}
|
||||
{routeSource}
|
||||
</Map>
|
||||
<View style={styles.mapExpandHint}>
|
||||
<Text style={styles.mapExpandText}>⤢ tap to explore</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
{/* Full-screen map with +/- zoom buttons */}
|
||||
<Modal visible={fullscreen} animationType="slide" onRequestClose={() => setFullscreen(false)}>
|
||||
<View style={styles.fullscreenMap}>
|
||||
<Map
|
||||
style={styles.map}
|
||||
mapStyle={MAP_STYLE}
|
||||
onRegionDidChange={(e: any) => {
|
||||
const z = e?.properties?.zoomLevel;
|
||||
if (typeof z === 'number') setCurrentZoom(z);
|
||||
}}
|
||||
>
|
||||
{cameraBounds && <Camera ref={cameraRef} initialViewState={cameraBounds} />}
|
||||
{routeSource}
|
||||
</Map>
|
||||
<Pressable style={styles.closeButton} onPress={() => setFullscreen(false)}>
|
||||
<Text style={styles.closeText}>✕</Text>
|
||||
</Pressable>
|
||||
<View style={styles.zoomButtons}>
|
||||
<Pressable style={styles.zoomBtn} onPress={() => cameraRef.current?.setCamera({ zoomLevel: currentZoom + 1, animationDuration: 200 })}>
|
||||
<Text style={styles.zoomBtnText}>+</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.zoomBtn} onPress={() => cameraRef.current?.setCamera({ zoomLevel: Math.max(1, currentZoom - 1), animationDuration: 200 })}>
|
||||
<Text style={styles.zoomBtnText}>−</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// SVG route trace — used on Android <29 where MapLibre crashes the GPU driver.
|
||||
// Renders the GPS track as a colored path on a dark background with no tiles.
|
||||
function SvgRouteView({ geojson, accent }: { geojson: object; accent: string }) {
|
||||
const W = 320;
|
||||
const H = 180;
|
||||
const PAD = 16;
|
||||
|
||||
const all: [number, number][] = [];
|
||||
function collect(obj: unknown) {
|
||||
if (!obj || typeof obj !== 'object') return;
|
||||
const o = obj as Record<string, unknown>;
|
||||
if (o.type === 'Feature') { collect(o.geometry); return; }
|
||||
if (o.type === 'FeatureCollection') { (o.features as unknown[]).forEach(collect); return; }
|
||||
if (o.type === 'LineString') { all.push(...(o.coordinates as [number, number][])); return; }
|
||||
if (o.type === 'MultiLineString') { (o.coordinates as [number, number][][]).forEach(c => all.push(...c)); return; }
|
||||
}
|
||||
collect(geojson);
|
||||
if (!all.length) return null;
|
||||
|
||||
const step = Math.max(1, Math.floor(all.length / 500));
|
||||
const pts = all.filter((_, i) => i % step === 0);
|
||||
|
||||
const lons = pts.map(c => c[0]);
|
||||
const lats = pts.map(c => c[1]);
|
||||
const minLon = Math.min(...lons), maxLon = Math.max(...lons);
|
||||
const minLat = Math.min(...lats), maxLat = Math.max(...lats);
|
||||
const spanLon = maxLon - minLon || 0.001;
|
||||
const spanLat = maxLat - minLat || 0.001;
|
||||
|
||||
// Correct longitude for latitude (equirectangular)
|
||||
const midLat = (minLat + maxLat) / 2;
|
||||
const lonFactor = Math.cos((midLat * Math.PI) / 180);
|
||||
const adjLon = spanLon * lonFactor;
|
||||
|
||||
const scale = Math.min((W - PAD * 2) / adjLon, (H - PAD * 2) / spanLat);
|
||||
const offX = (W - adjLon * scale) / 2;
|
||||
const offY = (H - spanLat * scale) / 2;
|
||||
|
||||
const toX = (lon: number) => offX + (lon - minLon) * lonFactor * scale;
|
||||
const toY = (lat: number) => H - offY - (lat - minLat) * scale;
|
||||
|
||||
const d = pts.map((c, i) => `${i === 0 ? 'M' : 'L'}${toX(c[0]).toFixed(1)},${toY(c[1]).toFixed(1)}`).join(' ');
|
||||
|
||||
return (
|
||||
<View style={[styles.mapContainer, { alignItems: 'center', justifyContent: 'center' }]}>
|
||||
<Svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
|
||||
<Path d={d} fill="none" stroke={accent} strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
|
||||
</Svg>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Metric charts ─────────────────────────────────────────────────────────────
|
||||
|
||||
type TabKey = 'elevation' | 'speed' | 'hr' | 'cadence' | 'power';
|
||||
|
||||
const TAB_META: Record<TabKey, { label: string; unit: string; color: string; decimals: number }> = {
|
||||
elevation: { label: 'Elevation', unit: 'm', color: '#00c8ff', decimals: 0 },
|
||||
speed: { label: 'Speed', unit: 'km/h', color: '#ff6b35', decimals: 1 },
|
||||
hr: { label: 'HR', unit: 'bpm', color: '#f87171', decimals: 0 },
|
||||
cadence: { label: 'Cadence', unit: 'rpm', color: '#a78bfa', decimals: 0 },
|
||||
power: { label: 'Power', unit: 'W', color: '#facc15', decimals: 0 },
|
||||
};
|
||||
|
||||
function MetricCharts({ timeseries, loading, accent }: { timeseries: Timeseries | null; loading: boolean; accent: string }) {
|
||||
const [activeTab, setActiveTab] = useState<TabKey>('elevation');
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.chartPlaceholder}>
|
||||
<Text style={{ color: accent, fontSize: 13 }}>Loading chart…</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
if (!timeseries) return null;
|
||||
|
||||
const seriesMap: Record<TabKey, (number | null)[] | null | undefined> = {
|
||||
elevation: timeseries.elevation_m,
|
||||
speed: timeseries.speed_kmh,
|
||||
hr: timeseries.hr_bpm,
|
||||
cadence: timeseries.cadence_rpm,
|
||||
power: timeseries.power_w,
|
||||
};
|
||||
|
||||
const available = (Object.keys(TAB_META) as TabKey[]).filter(
|
||||
k => seriesMap[k]?.some(v => v != null)
|
||||
);
|
||||
|
||||
if (!available.length) return null;
|
||||
|
||||
const tab = available.includes(activeTab) ? activeTab : available[0];
|
||||
const { color, unit, decimals } = TAB_META[tab];
|
||||
const raw = seriesMap[tab]!;
|
||||
|
||||
return (
|
||||
<View style={styles.chartContainer}>
|
||||
{/* Tab row */}
|
||||
<View style={styles.chartTabs}>
|
||||
{available.map(k => (
|
||||
<Pressable
|
||||
key={k}
|
||||
style={[styles.chartTab, tab === k && { borderBottomColor: TAB_META[k].color, borderBottomWidth: 2 }]}
|
||||
onPress={() => setActiveTab(k)}
|
||||
>
|
||||
<Text style={[styles.chartTabText, tab === k && { color: TAB_META[k].color }]}>
|
||||
{TAB_META[k].label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
{/* Chart */}
|
||||
<MetricChart key={tab} times={timeseries.t} values={raw} color={color} unit={unit} decimals={decimals} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricChart({
|
||||
times, values, color, unit, decimals,
|
||||
}: {
|
||||
times: number[];
|
||||
values: (number | null)[];
|
||||
color: string;
|
||||
unit: string;
|
||||
decimals: number;
|
||||
}) {
|
||||
const W = 340;
|
||||
const H = 100;
|
||||
const PAD = 4;
|
||||
|
||||
// Downsample to ≤300 points
|
||||
const step = Math.max(1, Math.floor(values.length / 300));
|
||||
const ts = times.filter((_, i) => i % step === 0);
|
||||
const vs = values.filter((_, i) => i % step === 0).map(v => v ?? 0);
|
||||
|
||||
const minV = Math.min(...vs);
|
||||
const maxV = Math.max(...vs);
|
||||
const range = maxV - minV || 1;
|
||||
const maxT = ts[ts.length - 1] || 1;
|
||||
|
||||
const x = (t: number) => PAD + (t / maxT) * (W - PAD * 2);
|
||||
const y = (v: number) => PAD + (1 - (v - minV) / range) * (H - PAD * 2);
|
||||
|
||||
const pts = ts.map((t, i) => `${x(t).toFixed(1)},${y(vs[i]).toFixed(1)}`);
|
||||
const linePath = `M ${pts.join(' L ')}`;
|
||||
const areaPath = `M ${x(ts[0])},${H} L ${pts.join(' L ')} L ${x(maxT)},${H} Z`;
|
||||
const gradId = `grad-${color.replace('#', '')}`;
|
||||
|
||||
const fmt = (v: number) => decimals === 0 ? String(Math.round(v)) : v.toFixed(decimals);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Text style={[styles.chartLabel, { color }]}>{fmt(maxV)} {unit}</Text>
|
||||
<Svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
|
||||
<Defs>
|
||||
<LinearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
|
||||
<Stop offset="0" stopColor={color} stopOpacity="0.35" />
|
||||
<Stop offset="1" stopColor={color} stopOpacity="0.02" />
|
||||
</LinearGradient>
|
||||
</Defs>
|
||||
<Path d={areaPath} fill={`url(#${gradId})`} />
|
||||
<Path d={linePath} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
|
||||
</Svg>
|
||||
<Text style={[styles.chartLabel, { color: '#3f3f46', marginBottom: 10 }]}>{fmt(minV)} {unit}</Text>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||||
|
||||
// Returns [west, south, east, north] per LngLatBounds spec
|
||||
function geoJsonBounds(gj: object): [number, number, number, number] | null {
|
||||
const coords: [number, number][] = [];
|
||||
function collect(obj: unknown) {
|
||||
if (!obj || typeof obj !== 'object') return;
|
||||
const o = obj as Record<string, unknown>;
|
||||
if (o.type === 'Feature') { collect(o.geometry); return; }
|
||||
if (o.type === 'FeatureCollection') { (o.features as unknown[]).forEach(collect); return; }
|
||||
if (o.type === 'LineString') { coords.push(...(o.coordinates as [number, number][])); return; }
|
||||
if (o.type === 'MultiLineString') { (o.coordinates as [number, number][][]).forEach(c => coords.push(...c)); return; }
|
||||
}
|
||||
collect(gj);
|
||||
if (!coords.length) return null;
|
||||
const lons = coords.map(c => c[0]);
|
||||
const lats = coords.map(c => c[1]);
|
||||
return [Math.min(...lons), Math.min(...lats), Math.max(...lons), Math.max(...lats)];
|
||||
}
|
||||
|
||||
function formatDuration(seconds: number): string {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = seconds % 60;
|
||||
if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function StatCell({ label, value, unit }: { label: string; value: string; unit: string }) {
|
||||
return (
|
||||
<View style={styles.statCell}>
|
||||
<View style={styles.statValueRow}>
|
||||
<Text style={styles.statValue}>{value}</Text>
|
||||
{unit ? <Text style={styles.statUnit}>{unit}</Text> : null}
|
||||
</View>
|
||||
<Text style={styles.statLabel}>{label}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function MetaRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<View style={styles.metaRow}>
|
||||
<Text style={styles.metaLabel}>{label}</Text>
|
||||
<Text style={styles.metaValue}>{value}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Styles ────────────────────────────────────────────────────────────────────
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#09090b' },
|
||||
content: { paddingBottom: 40 },
|
||||
center: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#09090b' },
|
||||
notFound: { color: '#71717a', fontSize: 16 },
|
||||
topBar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 60, paddingBottom: 12 },
|
||||
backButton: { paddingHorizontal: 16 },
|
||||
backText: { fontSize: 15 },
|
||||
deleteButton: { paddingHorizontal: 16 },
|
||||
deleteText: { color: '#f87171', fontSize: 15 },
|
||||
sport: { color: '#71717a', fontSize: 12, fontWeight: '600', letterSpacing: 0.8, paddingHorizontal: 16, marginBottom: 4 },
|
||||
titleRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, marginBottom: 4 },
|
||||
title: { color: '#f4f4f5', fontSize: 22, fontWeight: '700', flexShrink: 1 },
|
||||
titleInput: { color: '#f4f4f5', fontSize: 22, fontWeight: '700', paddingHorizontal: 16, marginBottom: 4, borderBottomWidth: 1, borderBottomColor: '#3b82f6' },
|
||||
editHint: { color: '#52525b', fontSize: 16, marginLeft: 8 },
|
||||
date: { color: '#71717a', fontSize: 13, paddingHorizontal: 16, marginBottom: 16 },
|
||||
mapContainer: { height: 220, marginBottom: 16, borderTopWidth: 1, borderBottomWidth: 1, borderColor: '#27272a' },
|
||||
map: { flex: 1 },
|
||||
mapPlaceholder: { height: 220, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center', borderTopWidth: 1, borderBottomWidth: 1, borderColor: '#27272a', marginBottom: 16 },
|
||||
mapExpandHint: { position: 'absolute', bottom: 8, right: 8, backgroundColor: 'rgba(0,0,0,0.55)', borderRadius: 6, paddingHorizontal: 8, paddingVertical: 4 },
|
||||
mapExpandText: { color: '#a1a1aa', fontSize: 11 },
|
||||
fullscreenMap: { flex: 1, backgroundColor: '#09090b' },
|
||||
closeButton: { position: 'absolute', top: 56, right: 16, backgroundColor: 'rgba(0,0,0,0.6)', borderRadius: 20, width: 36, height: 36, alignItems: 'center', justifyContent: 'center' },
|
||||
closeText: { color: '#fff', fontSize: 16 },
|
||||
zoomButtons: { position: 'absolute', bottom: 40, right: 16, gap: 8 },
|
||||
zoomBtn: { backgroundColor: 'rgba(0,0,0,0.65)', borderRadius: 20, width: 40, height: 40, alignItems: 'center', justifyContent: 'center' },
|
||||
zoomBtnText: { color: '#fff', fontSize: 22, fontWeight: '600', lineHeight: 28 },
|
||||
chartContainer: { marginHorizontal: 16, marginBottom: 16, backgroundColor: '#18181b', borderRadius: 10, borderWidth: 1, borderColor: '#27272a', overflow: 'hidden' },
|
||||
chartPlaceholder: { height: 120, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center', borderRadius: 10, borderWidth: 1, borderColor: '#27272a', marginHorizontal: 16, marginBottom: 16 },
|
||||
chartTabs: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: '#27272a' },
|
||||
chartTab: { flex: 1, paddingVertical: 8, alignItems: 'center', borderBottomWidth: 2, borderBottomColor: 'transparent' },
|
||||
chartTabText: { color: '#52525b', fontSize: 11, fontWeight: '600' },
|
||||
chartLabel: { color: '#3f3f46', fontSize: 10, marginBottom: 2, marginHorizontal: 12, marginTop: 10 },
|
||||
grid: { flexDirection: 'row', flexWrap: 'wrap', paddingHorizontal: 12, gap: 8, marginBottom: 16 },
|
||||
statCell: { backgroundColor: '#18181b', borderRadius: 10, borderWidth: 1, borderColor: '#27272a', padding: 14, width: '47%' },
|
||||
statValueRow: { flexDirection: 'row', alignItems: 'baseline', gap: 4, marginBottom: 4 },
|
||||
statValue: { color: '#f4f4f5', fontSize: 24, fontWeight: '700' },
|
||||
statUnit: { color: '#71717a', fontSize: 13 },
|
||||
statLabel: { color: '#71717a', fontSize: 12 },
|
||||
meta: { marginHorizontal: 16, backgroundColor: '#18181b', borderRadius: 10, borderWidth: 1, borderColor: '#27272a' },
|
||||
metaRow: { flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 14, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#27272a' },
|
||||
metaLabel: { color: '#71717a', fontSize: 13 },
|
||||
metaValue: { color: '#a1a1aa', fontSize: 13 },
|
||||
});
|
||||
Reference in New Issue
Block a user