Davide Scaini
353 lines
13 KiB
TypeScript
353 lines
13 KiB
TypeScript
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';
|
|
|
|
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 [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 [saved, setSaved] = useState(false);
|
|
|
|
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());
|
|
if (Platform.OS === 'android') {
|
|
await setSetting(db, 'auto_import_path', autoPath.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)">
|
|
<Field
|
|
label="Watch directory"
|
|
placeholder="/sdcard/Karoo/Rides"
|
|
value={autoPath}
|
|
onChangeText={setAutoPath}
|
|
autoCapitalize="none"
|
|
/>
|
|
<Text style={styles.hint}>
|
|
New FIT files in this directory are imported automatically in the
|
|
background. 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'}
|
|
onPress={() => { setSyncMode('summaries'); setSetting(db, 'sync_mode', 'summaries'); }}
|
|
/>
|
|
<ModeButton
|
|
label="Full data"
|
|
active={syncMode === 'full'}
|
|
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}
|
|
onPress={() => { setSyncUpload(false); setSetting(db, 'sync_upload', 'false'); }}
|
|
/>
|
|
<ModeButton
|
|
label="Upload local activities"
|
|
active={syncUpload}
|
|
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>
|
|
</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, onPress }: { label: string; active: boolean; onPress: () => void }) {
|
|
return (
|
|
<Pressable
|
|
style={[styles.modeButton, active && styles.modeButtonActive]}
|
|
onPress={onPress}
|
|
>
|
|
<Text style={[styles.modeButtonText, active && styles.modeButtonTextActive]}>{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 },
|
|
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' },
|
|
modeButtonActive: { backgroundColor: '#1e3a5f', borderColor: '#2563eb' },
|
|
modeButtonText: { color: '#71717a', fontSize: 13, fontWeight: '500' },
|
|
modeButtonTextActive: { color: '#60a5fa' },
|
|
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' },
|
|
});
|