562 lines
22 KiB
Dart
562 lines
22 KiB
Dart
// ignore_for_file: use_build_context_synchronously, prefer_const_constructors, deprecated_member_use
|
|
// lib/features/settings/user_settings_screen.dart
|
|
|
|
import 'dart:async';
|
|
|
|
import 'package:dio/dio.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
|
|
import '../../app/app_cubit.dart';
|
|
import '../../app/injection_container.dart';
|
|
import '../../core/constants/app_constants.dart';
|
|
import '../../core/network/api_client.dart';
|
|
import '../../core/services/haptic_service.dart';
|
|
import '../../core/services/tts_service.dart';
|
|
import '../../core/storage/secure_storage.dart';
|
|
|
|
Dio get _api => sl<ApiClient>().dio;
|
|
|
|
// ─── Colours (inline, tidak butuh import app_colors.dart) ────────────────────
|
|
const _kBlue = Color(0xFF1A56DB);
|
|
const _kRed = Color(0xFFDC2626);
|
|
const _kSurface = Color(0xFFF8FAFC);
|
|
const _kBorder = Color(0xFFE2E8F0);
|
|
const _kMuted = Color(0xFF64748B);
|
|
const _kText = Color(0xFF0F172A);
|
|
|
|
// ─── Screen ──────────────────────────────────────────────────────────────────
|
|
|
|
class UserSettingsScreen extends StatefulWidget {
|
|
const UserSettingsScreen({super.key});
|
|
|
|
@override
|
|
State<UserSettingsScreen> createState() => _UserSettingsScreenState();
|
|
}
|
|
|
|
class _UserSettingsScreenState extends State<UserSettingsScreen> {
|
|
// ── local state ────────────────────────────────────────────────────────────
|
|
bool _loading = true;
|
|
bool _saving = false;
|
|
|
|
// TTS
|
|
String _ttsLanguage = 'id-ID';
|
|
double _ttsPitch = 1.0; // read-only for user, shown as info
|
|
double _ttsSpeed = 0.9; // read-only for user, shown as info
|
|
|
|
// Caution
|
|
bool _warnNoGuardian = true;
|
|
bool _hapticEnabled = true;
|
|
|
|
// Account info (from SecureStorage)
|
|
String _displayName = '';
|
|
String _uniqueId = '';
|
|
|
|
// Pairing status
|
|
String _pairingStatus = '—';
|
|
bool _paired = false;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
sl<TtsService>().speak('Settings menu.');
|
|
_loadAll();
|
|
}
|
|
|
|
Future<void> _loadAll() async {
|
|
setState(() => _loading = true);
|
|
await Future.wait([_loadAccount(), _loadSettings(), _loadPairing()]);
|
|
if (mounted) setState(() => _loading = false);
|
|
}
|
|
|
|
Future<void> _loadAccount() async {
|
|
final storage = sl<SecureStorage>();
|
|
_displayName = await storage.getDisplayName() ?? '';
|
|
_uniqueId = await storage.getUniqueUserId() ?? '';
|
|
}
|
|
|
|
Future<void> _loadSettings() async {
|
|
try {
|
|
final res =
|
|
await _api.get('/user/settings').timeout(const Duration(seconds: 6));
|
|
final data = res.data['data'];
|
|
if (data is Map) {
|
|
_ttsLanguage = data['ttsLanguage']?.toString() ?? 'id-ID';
|
|
_ttsPitch = (data['ttsPitch'] as num?)?.toDouble() ?? 1.0;
|
|
_ttsSpeed = (data['ttsSpeed'] as num?)?.toDouble() ?? 0.9;
|
|
_warnNoGuardian = data['warnNoGuardian'] as bool? ?? true;
|
|
_hapticEnabled = data['hapticEnabled'] as bool? ?? true;
|
|
}
|
|
} catch (_) {
|
|
// offline: tetap pakai default / nilai lokal
|
|
}
|
|
}
|
|
|
|
Future<void> _loadPairing() async {
|
|
try {
|
|
final res = await _api
|
|
.get('/shared/pairing/status')
|
|
.timeout(const Duration(seconds: 5));
|
|
final data = res.data['data'];
|
|
if (data is Map) {
|
|
_paired = data['status'] == 'ACTIVE';
|
|
final partner = data['pairedWithName'] ?? data['pairedWithEmail'] ?? '';
|
|
_pairingStatus = _paired
|
|
? 'Terhubung dengan $partner'
|
|
: data['status'] == 'PENDING'
|
|
? 'Menunggu konfirmasi Guardian'
|
|
: 'Belum paired';
|
|
}
|
|
} catch (_) {
|
|
_pairingStatus = 'Tidak bisa cek status';
|
|
}
|
|
}
|
|
|
|
Future<void> _save() async {
|
|
setState(() => _saving = true);
|
|
// Apply TTS locally dulu
|
|
await sl<TtsService>().setLanguage(_ttsLanguage);
|
|
if (_hapticEnabled) {
|
|
await sl<HapticService>().success();
|
|
}
|
|
|
|
try {
|
|
await _api.put('/user/settings', data: {
|
|
'ttsLanguage': _ttsLanguage,
|
|
'ttsPitch': _ttsPitch,
|
|
'ttsSpeed': _ttsSpeed,
|
|
'warnNoGuardian': _warnNoGuardian,
|
|
'hapticEnabled': _hapticEnabled,
|
|
}).timeout(const Duration(seconds: 8));
|
|
_snack('Settings tersimpan.');
|
|
sl<TtsService>().speak('Settings disimpan.');
|
|
} on DioException catch (e) {
|
|
final msg = e.response?.data['message']?.toString() ??
|
|
'Server tidak merespons, settings lokal sudah diterapkan.';
|
|
_snack(msg);
|
|
} catch (_) {
|
|
_snack('Settings lokal sudah diterapkan, gagal sync ke server.');
|
|
} finally {
|
|
if (mounted) setState(() => _saving = false);
|
|
}
|
|
}
|
|
|
|
Future<void> _logout() async {
|
|
await sl<SecureStorage>().clearAll();
|
|
context.read<AppCubit>().clearSession();
|
|
_api
|
|
.post('/auth/logout')
|
|
.timeout(const Duration(seconds: 3))
|
|
.ignore();
|
|
if (mounted) context.go('/login');
|
|
}
|
|
|
|
Future<void> _changeServer() async {
|
|
await AppConstants.clearServerUrl();
|
|
if (mounted) context.go('/server-connect');
|
|
}
|
|
|
|
void _snack(String msg) {
|
|
if (mounted) {
|
|
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(msg)));
|
|
}
|
|
}
|
|
|
|
// ── build ──────────────────────────────────────────────────────────────────
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SafeArea(
|
|
child: _loading
|
|
? const Center(child: CircularProgressIndicator())
|
|
: ListView(
|
|
padding: const EdgeInsets.all(16),
|
|
children: [
|
|
// ── header ─────────────────────────────────────────────────
|
|
Text('Settings',
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.headlineSmall
|
|
?.copyWith(fontWeight: FontWeight.w800)),
|
|
const Text('TTS, haptic, pairing, account',
|
|
style: TextStyle(color: _kMuted)),
|
|
const SizedBox(height: 20),
|
|
|
|
// ── 1. TTS Settings ────────────────────────────────────────
|
|
_SectionHeader('1. TTS Settings', Icons.record_voice_over),
|
|
const SizedBox(height: 10),
|
|
_Card(
|
|
child: Column(
|
|
children: [
|
|
// Language (editable)
|
|
DropdownButtonFormField<String>(
|
|
value: _ttsLanguage,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Bahasa TTS',
|
|
border: OutlineInputBorder(),
|
|
contentPadding: EdgeInsets.symmetric(
|
|
horizontal: 12, vertical: 10),
|
|
),
|
|
items: const [
|
|
DropdownMenuItem(
|
|
value: 'id-ID', child: Text('Bahasa Indonesia')),
|
|
DropdownMenuItem(
|
|
value: 'en-US', child: Text('English (US)')),
|
|
],
|
|
onChanged: (v) =>
|
|
setState(() => _ttsLanguage = v ?? _ttsLanguage),
|
|
),
|
|
const SizedBox(height: 12),
|
|
// Pitch — read-only info
|
|
_InfoRow(
|
|
label: 'Pitch',
|
|
value: _ttsPitch.toStringAsFixed(1),
|
|
note: 'Diatur oleh Guardian',
|
|
icon: Icons.tune,
|
|
),
|
|
const Divider(height: 20),
|
|
// Speed — read-only info
|
|
_InfoRow(
|
|
label: 'Speed',
|
|
value: _ttsSpeed.toStringAsFixed(1),
|
|
note: 'Diatur oleh Guardian',
|
|
icon: Icons.speed,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 20),
|
|
|
|
// ── 2. Pairing ─────────────────────────────────────────────
|
|
_SectionHeader('2. Pairing', Icons.link),
|
|
const SizedBox(height: 10),
|
|
_Card(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// unique ID
|
|
if (_uniqueId.isNotEmpty) ...[
|
|
const Text('Unique User ID',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: _kMuted,
|
|
fontWeight: FontWeight.w600)),
|
|
const SizedBox(height: 4),
|
|
GestureDetector(
|
|
onTap: () {
|
|
Clipboard.setData(ClipboardData(text: _uniqueId));
|
|
_snack('ID disalin ke clipboard.');
|
|
},
|
|
child: Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 14, vertical: 10),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFFEFF6FF),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
const Icon(Icons.qr_code_2,
|
|
color: _kBlue, size: 20),
|
|
const SizedBox(width: 10),
|
|
Text(
|
|
_uniqueId,
|
|
style: const TextStyle(
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.w800,
|
|
letterSpacing: 2,
|
|
color: _kBlue),
|
|
),
|
|
const Spacer(),
|
|
const Icon(Icons.copy,
|
|
color: _kMuted, size: 16),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
const Divider(height: 1),
|
|
const SizedBox(height: 12),
|
|
],
|
|
// pairing status
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
_paired ? Icons.link : Icons.link_off,
|
|
color: _paired
|
|
? const Color(0xFF16A34A)
|
|
: const Color(0xFFD97706),
|
|
size: 20,
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Text(_pairingStatus,
|
|
style: TextStyle(
|
|
color: _paired
|
|
? const Color(0xFF166534)
|
|
: const Color(0xFF92400E),
|
|
fontWeight: FontWeight.w600)),
|
|
),
|
|
IconButton(
|
|
icon: const Icon(Icons.refresh, size: 18),
|
|
onPressed: () async {
|
|
await _loadPairing();
|
|
setState(() {});
|
|
},
|
|
tooltip: 'Refresh status',
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: OutlinedButton.icon(
|
|
onPressed: () => context.go('/user/pairing'),
|
|
icon: const Icon(Icons.manage_accounts_outlined),
|
|
label: const Text('Buka menu Pairing'),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 20),
|
|
|
|
// ── 3. Manual / Instructions ───────────────────────────────
|
|
_SectionHeader('3. Manual & Instruksi', Icons.menu_book),
|
|
const SizedBox(height: 10),
|
|
_Card(
|
|
child: ListTile(
|
|
contentPadding: EdgeInsets.zero,
|
|
leading: const Icon(Icons.help_outline, color: _kBlue),
|
|
title: const Text('Daftar Voice Commands & Shortcuts'),
|
|
subtitle:
|
|
const Text('Lihat semua perintah suara yang tersedia'),
|
|
trailing: const Icon(Icons.chevron_right),
|
|
onTap: () {
|
|
// Route /user/manual belum ada di router —
|
|
// tambahkan GoRoute('/user/manual', ManualScreen) di router.dart
|
|
// lalu ganti baris ini dengan: context.go('/user/manual');
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(
|
|
content: Text(
|
|
'Manual screen: tambah route /user/manual di router.dart')),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 20),
|
|
|
|
// ── 4. Caution Settings ────────────────────────────────────
|
|
_SectionHeader('4. Caution Settings', Icons.warning_amber),
|
|
const SizedBox(height: 10),
|
|
_Card(
|
|
child: Column(
|
|
children: [
|
|
SwitchListTile(
|
|
contentPadding: EdgeInsets.zero,
|
|
value: _warnNoGuardian,
|
|
onChanged: (v) => setState(() => _warnNoGuardian = v),
|
|
title: const Text('Peringatan belum paired'),
|
|
subtitle: const Text(
|
|
'TTS ingatkan jika belum terhubung Guardian'),
|
|
secondary: const Icon(
|
|
Icons.notifications_active_outlined,
|
|
color: _kBlue),
|
|
),
|
|
const Divider(height: 1),
|
|
SwitchListTile(
|
|
contentPadding: EdgeInsets.zero,
|
|
value: _hapticEnabled,
|
|
onChanged: (v) => setState(() => _hapticEnabled = v),
|
|
title: const Text('Haptic feedback'),
|
|
subtitle:
|
|
const Text('Getaran saat obstacle terdeteksi'),
|
|
secondary: const Icon(Icons.vibration, color: _kBlue),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 20),
|
|
|
|
// ── 5. Account ─────────────────────────────────────────────
|
|
_SectionHeader('5. Account', Icons.person),
|
|
const SizedBox(height: 10),
|
|
_Card(
|
|
child: Column(
|
|
children: [
|
|
_InfoRow(
|
|
label: 'Display Name',
|
|
value: _displayName.isNotEmpty ? _displayName : '—',
|
|
icon: Icons.badge_outlined,
|
|
),
|
|
const Divider(height: 20),
|
|
_InfoRow(
|
|
label: 'Role',
|
|
value: 'User',
|
|
icon: Icons.accessibility_new,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 24),
|
|
|
|
// ── Save button ────────────────────────────────────────────
|
|
FilledButton.icon(
|
|
onPressed: _saving ? null : _save,
|
|
icon: _saving
|
|
? const SizedBox(
|
|
width: 18,
|
|
height: 18,
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2, color: Colors.white))
|
|
: const Icon(Icons.save_outlined),
|
|
label: Text(_saving ? 'Menyimpan…' : 'Simpan Settings'),
|
|
style: FilledButton.styleFrom(
|
|
minimumSize: const Size.fromHeight(48),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 10),
|
|
|
|
// ── Change server ──────────────────────────────────────────
|
|
OutlinedButton.icon(
|
|
onPressed: _changeServer,
|
|
icon: const Icon(Icons.dns_outlined),
|
|
label: const Text('Ganti Server'),
|
|
style: OutlinedButton.styleFrom(
|
|
minimumSize: const Size.fromHeight(44),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 10),
|
|
|
|
// ── Logout ─────────────────────────────────────────────────
|
|
OutlinedButton.icon(
|
|
onPressed: () => _confirmLogout(context),
|
|
icon: const Icon(Icons.logout, color: _kRed),
|
|
label: const Text('Logout', style: TextStyle(color: _kRed)),
|
|
style: OutlinedButton.styleFrom(
|
|
minimumSize: const Size.fromHeight(44),
|
|
side: const BorderSide(color: _kRed),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 32),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Future<void> _confirmLogout(BuildContext context) async {
|
|
final confirm = await showDialog<bool>(
|
|
context: context,
|
|
builder: (ctx) => AlertDialog(
|
|
title: const Text('Logout?'),
|
|
content: const Text('Sesi akan diakhiri. Kamu perlu login ulang.'),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(ctx, false),
|
|
child: const Text('Batal')),
|
|
FilledButton(
|
|
style: FilledButton.styleFrom(backgroundColor: _kRed),
|
|
onPressed: () => Navigator.pop(ctx, true),
|
|
child: const Text('Logout'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
if (confirm == true) await _logout();
|
|
}
|
|
}
|
|
|
|
// ─── Sub-widgets ─────────────────────────────────────────────────────────────
|
|
|
|
class _SectionHeader extends StatelessWidget {
|
|
final String title;
|
|
final IconData icon;
|
|
const _SectionHeader(this.title, this.icon);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Row(
|
|
children: [
|
|
Icon(icon, size: 18, color: _kBlue),
|
|
const SizedBox(width: 8),
|
|
Text(title,
|
|
style: const TextStyle(
|
|
fontWeight: FontWeight.w800, fontSize: 14, color: _kBlue)),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _Card extends StatelessWidget {
|
|
final Widget child;
|
|
const _Card({required this.child});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(14),
|
|
border: Border.all(color: _kBorder),
|
|
),
|
|
child: child,
|
|
);
|
|
}
|
|
}
|
|
|
|
class _InfoRow extends StatelessWidget {
|
|
final String label;
|
|
final String value;
|
|
final IconData icon;
|
|
final String? note;
|
|
const _InfoRow(
|
|
{required this.label,
|
|
required this.value,
|
|
required this.icon,
|
|
this.note});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Row(
|
|
children: [
|
|
Icon(icon, size: 18, color: _kMuted),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(label, style: const TextStyle(fontSize: 12, color: _kMuted)),
|
|
Text(value,
|
|
style: const TextStyle(
|
|
fontWeight: FontWeight.w700, color: _kText)),
|
|
],
|
|
),
|
|
),
|
|
if (note != null)
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
|
decoration: BoxDecoration(
|
|
color: _kSurface,
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(color: _kBorder),
|
|
),
|
|
child: Text(note!,
|
|
style: const TextStyle(fontSize: 11, color: _kMuted)),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|