feat: move sensor details to sheet, implement placement on floor plan

This commit is contained in:
2026-05-14 17:22:26 +02:00
parent 90c946d710
commit 52605f1390
12 changed files with 655 additions and 218 deletions
+1
View File
@@ -1,5 +1,6 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android" <manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"> xmlns:tools="http://schemas.android.com/tools">
<uses-permission android:name="android.permission.VIBRATE"/>
<!-- Network (Phoenix WebSocket + mDNS) --> <!-- Network (Phoenix WebSocket + mDNS) -->
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.INTERNET" />
+34 -73
View File
@@ -1,7 +1,4 @@
/* globals: Konva, preact, preactHooks, htm */ /* globals: Konva */
const { h, render } = preact;
const { useState } = preactHooks;
const html = htm.bind(h);
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Constants & mutable state // Constants & mutable state
@@ -20,9 +17,6 @@ let _dragging = false; // true while any room group is being dragged
let _dimRoom = null; let _dimRoom = null;
let _dimGroup = null; let _dimGroup = null;
// Exposed so the Preact overlay can update its tooltip imperatively.
let _setTooltip = (_v) => {};
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Stage & layers // Stage & layers
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
@@ -365,27 +359,23 @@ function renderSensors() {
listening: false, listening: false,
})); }));
group.on('click tap', () => _onSensorTap(sensor, group, label)); let pressTimer = null;
group.on('dragend', () => _onSensorDragEnd(sensor, group, room)); group.on('mousedown touchstart', () => {
pressTimer = setTimeout(() => {
notifyFlutter({ type: 'sensorTapped', id: String(sensor.id) });
pressTimer = null;
}, 500);
});
group.on('mouseup touchend touchcancel dragstart', () => {
clearTimeout(pressTimer);
pressTimer = null;
});
group.on('dragend', () => _onSensorDragEnd(sensor, group, room));
sensorsLayer.add(group); sensorsLayer.add(group);
}); });
sensorsLayer.batchDraw(); sensorsLayer.batchDraw();
} }
function _onSensorTap(sensor, group, label) {
if (mode === 'view') {
const scale = stage.scaleX();
_setTooltip({
id: String(sensor.id),
name: label,
x: group.x() * scale + stage.x(),
y: group.y() * scale + stage.y(),
});
} else {
notifyFlutter({ type: 'sensorTapped', id: String(sensor.id) });
}
}
function _onSensorDragEnd(sensor, group, originalRoom) { function _onSensorDragEnd(sensor, group, originalRoom) {
const newAbsX = group.x() / PPM; const newAbsX = group.x() / PPM;
const newAbsY = group.y() / PPM; const newAbsY = group.y() / PPM;
@@ -461,57 +451,9 @@ function _fitToRooms() {
}); });
} }
// --------------------------------------------------------------------------- // Dismiss dimensions when tapping the stage background.
// Preact overlay — sensor tooltip
// ---------------------------------------------------------------------------
function Tooltip({ id, name, x, y, onClose }) {
return html`
<div style=${{
position: 'absolute',
left: `${x + 14}px`,
top: `${y - 48}px`,
background: '#ffffff',
borderRadius: '8px',
padding: '8px 12px',
boxShadow: '0 2px 12px rgba(0,0,0,0.18)',
pointerEvents: 'auto',
minWidth: '130px',
fontFamily: 'Roboto, sans-serif',
}}>
<div style=${{ fontSize: '13px', fontWeight: '500', color: '#212121', marginBottom: '6px' }}>
${name}
</div>
<div style=${{ display: 'flex', gap: '10px' }}>
<button
style=${{ fontSize: '12px', border: 'none', background: 'none', color: '#1565C0', cursor: 'pointer', padding: 0 }}
onClick=${() => { notifyFlutter({ type: 'sensorTapped', id }); onClose(); }}>
View details
</button>
<button
style=${{ fontSize: '12px', border: 'none', background: 'none', color: '#9e9e9e', cursor: 'pointer', padding: 0 }}
onClick=${onClose}>
</button>
</div>
</div>
`;
}
function App() {
const [tooltip, setTip] = useState(null);
_setTooltip = setTip;
return tooltip
? html`<${Tooltip} ...${tooltip} onClose=${() => setTip(null)} />`
: null;
}
render(html`<${App} />`, document.getElementById('overlay'));
// Dismiss tooltip and dimensions when tapping the stage background.
stage.on('click tap', (e) => { stage.on('click tap', (e) => {
if (e.target === stage) { if (e.target === stage) {
_setTooltip(null);
_clearDimensions(); _clearDimensions();
notifyFlutter({ type: 'selectionCleared' }); notifyFlutter({ type: 'selectionCleared' });
} }
@@ -572,7 +514,6 @@ window.companion = {
tagsLayer.visible(!edit); tagsLayer.visible(!edit);
particlesLayer.visible(!edit); particlesLayer.visible(!edit);
_clearDimensions(); _clearDimensions();
_setTooltip(null);
stage.batchDraw(); stage.batchDraw();
}, },
@@ -602,4 +543,24 @@ window.companion = {
fitToRooms() { fitToRooms() {
_fitToRooms(); _fitToRooms();
}, },
getPositionAtCenter() {
const s = stage.scaleX();
const cx = (stage.width() / 2 - stage.x()) / s / PPM;
const cy = (stage.height() / 2 - stage.y()) / s / PPM;
let result = { type: 'positionAtCenter', roomId: null };
for (const room of rooms) {
if (cx >= room.x && cx <= room.x + room.width &&
cy >= room.y && cy <= room.y + room.height) {
result = {
type: 'positionAtCenter',
roomId: room.id,
x: cx - room.x,
y: cy - room.y,
};
break;
}
}
FlutterBridge.postMessage(JSON.stringify(result));
},
}; };
-5
View File
@@ -7,16 +7,11 @@
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #f5f5f5; } body { overflow: hidden; background: #f5f5f5; }
#canvas-container { position: fixed; inset: 0; } #canvas-container { position: fixed; inset: 0; }
#overlay { position: fixed; inset: 0; pointer-events: none; }
</style> </style>
</head> </head>
<body> <body>
<div id="canvas-container"></div> <div id="canvas-container"></div>
<div id="overlay"></div>
<script src="./vendor/konva.min.js"></script> <script src="./vendor/konva.min.js"></script>
<script src="./vendor/preact.min.umd.js"></script>
<script src="./vendor/hooks.umd.js"></script>
<script src="./vendor/htm.umd.js"></script>
<script src="./app.js"></script> <script src="./app.js"></script>
</body> </body>
</html> </html>
+1 -1
View File
@@ -15,7 +15,7 @@ class Sensor {
final double? x; // room relative final double? x; // room relative
final double? y; // room relative final double? y; // room relative
bool get isPlaced => roomId != null; bool get isPlaced => roomId != null && x != null && y != null;
String get displayName => name ?? sensorId; String get displayName => name ?? sensorId;
factory Sensor.fromJson(Map<String, dynamic> json) => Sensor( factory Sensor.fromJson(Map<String, dynamic> json) => Sensor(
+229 -99
View File
@@ -6,6 +6,7 @@ import '../../domain/models/floor_plan_mode.dart';
import '../../domain/models/sensor.dart'; import '../../domain/models/sensor.dart';
import '../../providers.dart'; import '../../providers.dart';
import '../ble_provision/ble_provision_sheet.dart'; import '../ble_provision/ble_provision_sheet.dart';
import '../sensors/sensor_detail_sheet.dart';
import 'widgets/floor_plan_editor.dart'; import 'widgets/floor_plan_editor.dart';
import 'widgets/room_edit_sheet.dart'; import 'widgets/room_edit_sheet.dart';
@@ -34,11 +35,39 @@ class _FloorPlanScreenState extends ConsumerState<FloorPlanScreen> {
.then((sensors) => _editorKey.currentState?.loadSensors(sensors)); .then((sensors) => _editorKey.currentState?.loadSensors(sensors));
} }
Future<void> _confirmPlacement(Sensor sensor) async {
final result =
await _editorKey.currentState?.getPositionAtCenter();
if (!mounted) return;
if (result == null || result.roomId == null) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Move the map so the dot is over a room'),
),
);
return;
}
await ref.read(sensorRepositoryProvider).placeSensor(
sensor.id,
roomId: result.roomId!,
x: result.x!,
y: result.y!,
);
ref.read(sensorPlacementProvider.notifier).state = null;
ref.invalidate(sensorsProvider);
ref.invalidate(sensorProvider(sensor.id));
}
void _cancelPlacement() {
ref.read(sensorPlacementProvider.notifier).state = null;
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final mode = ref.watch(floorPlanModeProvider); final mode = ref.watch(floorPlanModeProvider);
final roomsAsync = ref.watch(roomsProvider); final roomsAsync = ref.watch(roomsProvider);
final sensorsAsync = ref.watch(sensorsProvider); final sensorsAsync = ref.watch(sensorsProvider);
final placingSensor = ref.watch(sensorPlacementProvider);
ref.listen(roomsProvider, (_, next) { ref.listen(roomsProvider, (_, next) {
next.whenData((r) => _editorKey.currentState?.loadFloorPlan(r)); next.whenData((r) => _editorKey.currentState?.loadFloorPlan(r));
@@ -61,104 +90,144 @@ class _FloorPlanScreenState extends ConsumerState<FloorPlanScreen> {
.toList() ?? .toList() ??
[]; [];
return Scaffold( return PopScope(
appBar: AppBar( // While placing, intercept back: cancel placement and go to sensors list.
title: const Text('Floor Plan'), canPop: placingSensor == null,
actions: [ onPopInvokedWithResult: (didPop, _) {
IconButton( if (!didPop && placingSensor != null) {
tooltip: mode == FloorPlanMode.edit ? 'View mode' : 'Edit mode', _cancelPlacement();
icon: Icon( context.go('/sensors');
mode == FloorPlanMode.edit ? Icons.visibility : Icons.edit, }
), },
onPressed: () { child: Scaffold(
final next = mode == FloorPlanMode.edit appBar: AppBar(
? FloorPlanMode.view title: const Text('Floor Plan'),
: FloorPlanMode.edit; actions: [
ref.read(floorPlanModeProvider.notifier).state = next; if (placingSensor == null)
_editorKey.currentState?.setMode(next); IconButton(
}, tooltip:
), mode == FloorPlanMode.edit ? 'View mode' : 'Edit mode',
], icon: Icon(
), mode == FloorPlanMode.edit
body: Column( ? Icons.visibility
children: [ : Icons.edit,
Expanded(
child: Stack(
children: [
FloorPlanEditor(
key: _editorKey,
mode: mode,
onSensorTapped: (id) {
ref.read(selectedSensorIdProvider.notifier).state = id;
context.push('/sensors/$id');
},
onSensorMoved: (sensorId, roomId, x, y) async {
await ref.read(sensorRepositoryProvider).placeSensor(
int.parse(sensorId),
roomId: roomId,
x: x,
y: y,
);
ref.invalidate(sensorsProvider);
},
onRoomsUpdated: (roomUpdates) async {
final floor = ref.read(floorProvider).valueOrNull;
if (floor == null) return;
final repo = ref.read(floorRepositoryProvider);
for (final r in roomUpdates) {
await repo.updateRoom(floor.id, r.id, x: r.x, y: r.y);
}
// Do NOT invalidate roomsProvider here: the JS canvas is
// already showing the correct positions, and re-fetching
// would replace rooms[] with a fresh array, orphaning the
// drag-closure references and causing snap-back.
},
onRoomAdded: (x, y) => _showAddRoomDialog(x, y),
onEditRoomTapped: _showRoomEditSheet,
onEditSensorTapped: (sensorId) =>
context.push('/floorplan/sensors/$sensorId'),
onAddSensorTapped: () => showModalBottomSheet<void>(
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder: (_) => const BleProvisionSheet(),
).then((_) {
ref.invalidate(sensorsProvider);
}),
), ),
if (roomsAsync.valueOrNull?.isEmpty ?? false) onPressed: () {
Center( final next = mode == FloorPlanMode.edit
child: Column( ? FloorPlanMode.view
mainAxisSize: MainAxisSize.min, : FloorPlanMode.edit;
children: [ ref.read(floorPlanModeProvider.notifier).state = next;
Icon(Icons.map_outlined, _editorKey.currentState?.setMode(next);
size: 64, color: Colors.grey.shade400), },
const SizedBox(height: 12), ),
Text( ],
'No rooms yet', ),
style: Theme.of(context) body: Column(
.textTheme children: [
.titleMedium Expanded(
?.copyWith(color: Colors.grey.shade600), child: Stack(
), children: [
const SizedBox(height: 4), FloorPlanEditor(
Text( key: _editorKey,
'Switch to edit mode and tap + to add a room', mode: mode,
style: Theme.of(context) onSensorTapped: (id) {
.textTheme ref.read(selectedSensorIdProvider.notifier).state =
.bodySmall id;
?.copyWith(color: Colors.grey.shade500), showSensorDetailSheet(context, int.parse(id));
textAlign: TextAlign.center, },
), onSensorMoved: (sensorId, roomId, x, y) async {
], final id = int.parse(sensorId);
), await ref
.read(sensorRepositoryProvider)
.placeSensor(
id,
roomId: roomId,
x: x,
y: y,
);
ref.invalidate(sensorsProvider);
ref.invalidate(sensorProvider(id));
},
onRoomsUpdated: (roomUpdates) async {
final floor = ref.read(floorProvider).valueOrNull;
if (floor == null) return;
final repo = ref.read(floorRepositoryProvider);
for (final r in roomUpdates) {
await repo.updateRoom(floor.id, r.id,
x: r.x, y: r.y);
}
// Do NOT invalidate roomsProvider here: the JS canvas is
// already showing the correct positions, and re-fetching
// would replace rooms[] with a fresh array, orphaning the
// drag-closure references and causing snap-back.
},
onRoomAdded: (x, y) => _showAddRoomDialog(x, y),
onEditRoomTapped: _showRoomEditSheet,
onEditSensorTapped: (id) =>
showSensorDetailSheet(context, int.parse(id)),
onAddSensorTapped: () => showModalBottomSheet<void>(
context: context,
isScrollControlled: true,
useRootNavigator: true,
builder: (_) => const BleProvisionSheet(),
).then((_) {
ref.invalidate(sensorsProvider);
}),
), ),
], if (roomsAsync.valueOrNull?.isEmpty ?? false)
Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.map_outlined,
size: 64, color: Colors.grey.shade400),
const SizedBox(height: 12),
Text(
'No rooms yet',
style: Theme.of(context)
.textTheme
.titleMedium
?.copyWith(
color: Colors.grey.shade600),
),
const SizedBox(height: 4),
Text(
'Switch to edit mode and tap + to add a room',
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(color: Colors.grey.shade500),
textAlign: TextAlign.center,
),
],
),
),
// Placement mode overlay
if (placingSensor != null) ...[
const Center(child: _PlacementDot()),
Positioned(
top: 16,
left: 16,
right: 16,
child: _PlacementCard(
sensor: placingSensor,
onPlace: () => _confirmPlacement(placingSensor),
onCancel: () {
_cancelPlacement();
context.go('/sensors');
},
),
),
],
],
),
), ),
), if (placingSensor == null &&
if (mode == FloorPlanMode.edit && unplaced.isNotEmpty) mode == FloorPlanMode.edit &&
_UnplacedPanel(sensors: unplaced), unplaced.isNotEmpty)
], _UnplacedPanel(sensors: unplaced),
],
),
), ),
); );
} }
@@ -234,14 +303,13 @@ class _FloorPlanScreenState extends ConsumerState<FloorPlanScreen> {
), ),
); );
final name = nameCtrl.text.trim(); final name = nameCtrl.text.trim();
final width = double.tryParse(widthCtrl.text) ?? 5.0; final width = double.tryParse(widthCtrl.text) ?? 5.0;
final height = double.tryParse(heightCtrl.text) ?? 4.0; final height = double.tryParse(heightCtrl.text) ?? 4.0;
if (confirmed != true || !mounted) return; if (confirmed != true || !mounted) return;
if (name.isEmpty) return; if (name.isEmpty) return;
// Create floor if none exists yet.
var floor = ref.read(floorProvider).valueOrNull; var floor = ref.read(floorProvider).valueOrNull;
if (floor == null) { if (floor == null) {
floor = await ref floor = await ref
@@ -262,6 +330,68 @@ class _FloorPlanScreenState extends ConsumerState<FloorPlanScreen> {
} }
} }
class _PlacementDot extends StatelessWidget {
const _PlacementDot();
@override
Widget build(BuildContext context) {
return Container(
width: 16,
height: 16,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).colorScheme.primary,
border: Border.all(color: Colors.white, width: 2),
boxShadow: const [BoxShadow(blurRadius: 4, color: Colors.black26)],
),
);
}
}
class _PlacementCard extends StatelessWidget {
const _PlacementCard({
required this.sensor,
required this.onPlace,
required this.onCancel,
});
final Sensor sensor;
final VoidCallback onPlace;
final VoidCallback onCancel;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Card(
elevation: 4,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
child: Row(
children: [
const Icon(Icons.sensors),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(sensor.displayName,
style: theme.textTheme.labelLarge),
Text('Pan to position, then tap Place',
style: theme.textTheme.bodySmall),
],
),
),
TextButton(onPressed: onCancel, child: const Text('Cancel')),
const SizedBox(width: 4),
FilledButton(onPressed: onPlace, child: const Text('Place')),
],
),
),
);
}
}
class _UnplacedPanel extends StatelessWidget { class _UnplacedPanel extends StatelessWidget {
const _UnplacedPanel({required this.sensors}); const _UnplacedPanel({required this.sensors});
@@ -291,7 +421,7 @@ class _UnplacedPanel extends StatelessWidget {
size: 16), size: 16),
label: Text(s.displayName), label: Text(s.displayName),
onPressed: () => onPressed: () =>
context.push('/sensors/${s.id}'), showSensorDetailSheet(context, s.id),
), ),
), ),
) )
@@ -1,7 +1,9 @@
import 'dart:async';
import 'dart:convert'; import 'dart:convert';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart'; import 'package:webview_flutter/webview_flutter.dart';
import 'package:vibration/vibration.dart';
import '../../../domain/models/floor.dart'; import '../../../domain/models/floor.dart';
import '../../../domain/models/floor_plan_mode.dart'; import '../../../domain/models/floor_plan_mode.dart';
@@ -43,6 +45,7 @@ class FloorPlanEditorState extends State<FloorPlanEditor> {
int? _selectedRoomId; int? _selectedRoomId;
String? _selectedSensorId; String? _selectedSensorId;
Completer<({int? roomId, double? x, double? y})>? _placementCompleter;
@override @override
void initState() { void initState() {
@@ -82,6 +85,8 @@ class FloorPlanEditorState extends State<FloorPlanEditor> {
}); });
} else { } else {
widget.onSensorTapped(id); widget.onSensorTapped(id);
Vibration.hasVibrator()
.then((t) { if(t) Vibration.vibrate(duration: 20); });
} }
case 'sensorMoved': case 'sensorMoved':
widget.onSensorMoved( widget.onSensorMoved(
@@ -110,6 +115,12 @@ class FloorPlanEditorState extends State<FloorPlanEditor> {
_selectedRoomId = null; _selectedRoomId = null;
_selectedSensorId = null; _selectedSensorId = null;
}); });
case 'positionAtCenter':
final roomId = (data['roomId'] as num?)?.toInt();
final x = (data['x'] as num?)?.toDouble();
final y = (data['y'] as num?)?.toDouble();
_placementCompleter?.complete((roomId: roomId, x: x, y: y));
_placementCompleter = null;
} }
} }
@@ -208,6 +219,17 @@ class FloorPlanEditorState extends State<FloorPlanEditor> {
}); });
} }
/// Asks JS for the room + room-relative coords at the canvas center.
/// Returns null roomId if no room is under the center dot.
Future<({int? roomId, double? x, double? y})> getPositionAtCenter() {
final c = Completer<({int? roomId, double? x, double? y})>();
_placementCompleter = c;
_run(() async {
await _controller.runJavaScript('window.companion.getPositionAtCenter()');
});
return c.future;
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final inEditMode = widget.mode == FloorPlanMode.edit; final inEditMode = widget.mode == FloorPlanMode.edit;
@@ -0,0 +1,246 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../domain/models/sensor.dart';
import '../../providers.dart';
void showSensorDetailSheet(BuildContext context, int sensorId) {
showModalBottomSheet<void>(
context: context,
useRootNavigator: true,
isScrollControlled: true,
builder: (_) => SensorDetailSheet(sensorId: sensorId),
);
}
class SensorDetailSheet extends ConsumerStatefulWidget {
const SensorDetailSheet({super.key, required this.sensorId});
final int sensorId;
@override
ConsumerState<SensorDetailSheet> createState() => _SensorDetailSheetState();
}
class _SensorDetailSheetState extends ConsumerState<SensorDetailSheet> {
bool _editing = false;
final _nameCtrl = TextEditingController();
@override
void dispose() {
_nameCtrl.dispose();
super.dispose();
}
Future<void> _saveName(Sensor sensor) async {
final name = _nameCtrl.text.trim();
setState(() => _editing = false);
final unchanged = name == (sensor.name ?? '') ||
(name.isEmpty && sensor.name == null);
if (unchanged) return;
await ref
.read(sensorRepositoryProvider)
.updateSensor(sensor.id, name: name.isEmpty ? null : name);
ref.invalidate(sensorProvider(sensor.id));
ref.invalidate(sensorsProvider);
}
Future<void> _delete(BuildContext context, Sensor sensor) async {
final confirmed = await showDialog<bool>(
context: context,
builder: (ctx) => AlertDialog(
title: const Text('Delete sensor?'),
content: const Text('This will unenrol the sensor from the system.'),
actions: [
TextButton(
onPressed: () => Navigator.of(ctx).pop(false),
child: const Text('Cancel'),
),
FilledButton(
style: FilledButton.styleFrom(
backgroundColor: Theme.of(ctx).colorScheme.error,
),
onPressed: () => Navigator.of(ctx).pop(true),
child: const Text('Delete'),
),
],
),
);
if (confirmed == true && context.mounted) {
await ref.read(sensorRepositoryProvider).deleteSensor(sensor.id);
ref.invalidate(sensorsProvider);
if (context.mounted) Navigator.of(context, rootNavigator: true).pop();
}
}
void _placeOnFloorPlan(BuildContext context, Sensor sensor) {
final router = GoRouter.of(context);
ref.read(sensorPlacementProvider.notifier).state = sensor;
Navigator.of(context, rootNavigator: true).pop();
router.go('/floorplan');
}
@override
Widget build(BuildContext context) {
final sensorAsync = ref.watch(sensorProvider(widget.sensorId));
return sensorAsync.when(
loading: () => const SizedBox(
height: 200,
child: Center(child: CircularProgressIndicator()),
),
error: (e, _) => SizedBox(
height: 200,
child: Center(child: Text(e.toString())),
),
data: (sensor) {
// Keep controller in sync when not actively editing.
if (!_editing) _nameCtrl.text = sensor.name ?? '';
return _SheetBody(
sensor: sensor,
editing: _editing,
nameCtrl: _nameCtrl,
onEditToggle: () => setState(() {
_editing = true;
_nameCtrl.text = sensor.name ?? '';
}),
onSaveName: () => _saveName(sensor),
onPlace: () => _placeOnFloorPlan(context, sensor),
onDelete: () => _delete(context, sensor),
);
},
);
}
}
class _SheetBody extends StatelessWidget {
const _SheetBody({
required this.sensor,
required this.editing,
required this.nameCtrl,
required this.onEditToggle,
required this.onSaveName,
required this.onPlace,
required this.onDelete,
});
final Sensor sensor;
final bool editing;
final TextEditingController nameCtrl;
final VoidCallback onEditToggle;
final VoidCallback onSaveName;
final VoidCallback onPlace;
final VoidCallback onDelete;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return SafeArea(
child: Padding(
padding: EdgeInsets.fromLTRB(
24,
12,
24,
MediaQuery.of(context).viewInsets.bottom + 24,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Center(
child: Container(
width: 32,
height: 4,
decoration: BoxDecoration(
color: theme.colorScheme.outlineVariant,
borderRadius: BorderRadius.circular(2),
),
),
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: editing
? TextField(
controller: nameCtrl,
autofocus: true,
style: theme.textTheme.titleLarge,
decoration: const InputDecoration(
isDense: true,
border: InputBorder.none,
),
onSubmitted: (_) => onSaveName(),
)
: Text(
sensor.displayName,
style: theme.textTheme.titleLarge,
),
),
IconButton(
icon: Icon(editing ? Icons.check : Icons.edit_outlined),
tooltip: editing ? 'Save name' : 'Rename',
onPressed: editing ? onSaveName : onEditToggle,
),
],
),
const SizedBox(height: 16),
_InfoRow(label: 'Device ID', value: sensor.sensorId),
_InfoRow(
label: 'Position',
value: sensor.isPlaced
? '(${sensor.x!.toStringAsFixed(2)}, ${sensor.y!.toStringAsFixed(2)})'
: 'Not placed',
),
const SizedBox(height: 24),
FilledButton.icon(
icon: const Icon(Icons.map_outlined),
label: Text(sensor.isPlaced
? 'Reposition on floor plan'
: 'Place on floor plan'),
onPressed: onPlace,
),
const SizedBox(height: 12),
OutlinedButton.icon(
icon: const Icon(Icons.bluetooth),
label: const Text('Reprovision'),
onPressed: () {},
),
const SizedBox(height: 24),
TextButton(
style: TextButton.styleFrom(
foregroundColor: theme.colorScheme.error,
),
onPressed: onDelete,
child: const Text('Delete sensor'),
),
],
),
),
);
}
}
class _InfoRow extends StatelessWidget {
const _InfoRow({required this.label, required this.value});
final String label;
final String value;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: Row(
children: [
Expanded(
child: Text(label, style: Theme.of(context).textTheme.bodySmall),
),
Text(value, style: Theme.of(context).textTheme.bodyMedium),
],
),
);
}
}
+77 -24
View File
@@ -1,8 +1,10 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../domain/models/sensor.dart';
import '../../providers.dart'; import '../../providers.dart';
import '../ble_provision/ble_provision_sheet.dart'; import '../ble_provision/ble_provision_sheet.dart';
import 'sensor_detail_sheet.dart';
class SensorListScreen extends ConsumerWidget { class SensorListScreen extends ConsumerWidget {
const SensorListScreen({super.key}); const SensorListScreen({super.key});
@@ -26,7 +28,8 @@ class SensorListScreen extends ConsumerWidget {
child: const Text('Dismiss'), child: const Text('Dismiss'),
), ),
TextButton( TextButton(
onPressed: () => context.push('/sensors/$selectedId'), onPressed: () =>
showSensorDetailSheet(context, int.parse(selectedId)),
child: const Text('Open'), child: const Text('Open'),
), ),
], ],
@@ -36,29 +39,37 @@ class SensorListScreen extends ConsumerWidget {
loading: () => loading: () =>
const Center(child: CircularProgressIndicator()), const Center(child: CircularProgressIndicator()),
error: (e, _) => Center(child: Text(e.toString())), error: (e, _) => Center(child: Text(e.toString())),
data: (list) => list.isEmpty data: (list) {
? const Center(child: Text('No sensors enrolled yet')) if (list.isEmpty) {
: ListView.builder( return const Center(child: Text('No sensors enrolled yet'));
itemCount: list.length, }
itemBuilder: (context, i) { final unplaced =
final sensor = list[i]; list.where((s) => !s.isPlaced).toList();
final isSelected = final placed =
selectedId == sensor.id.toString(); list.where((s) => s.isPlaced).toList();
return ListTile( return ListView(
selected: isSelected, children: [
leading: Icon(sensor.isPlaced if (unplaced.isNotEmpty) ...[
? Icons.sensors _SectionHeader(
: Icons.sensors_off_outlined), label: 'Unplaced', count: unplaced.length),
title: Text(sensor.displayName), ...unplaced.map((s) => _SensorTile(
subtitle: Text(sensor.isPlaced sensor: s,
? 'Placed' isSelected:
: 'Not placed on floor plan'), selectedId == s.id.toString(),
trailing: const Icon(Icons.chevron_right), )),
onTap: () => ],
context.push('/sensors/${sensor.id}'), if (placed.isNotEmpty) ...[
); _SectionHeader(
}, label: 'Placed', count: placed.length),
), ...placed.map((s) => _SensorTile(
sensor: s,
isSelected:
selectedId == s.id.toString(),
)),
],
],
);
},
), ),
), ),
], ],
@@ -75,3 +86,45 @@ class SensorListScreen extends ConsumerWidget {
); );
} }
} }
class _SectionHeader extends StatelessWidget {
const _SectionHeader({required this.label, required this.count});
final String label;
final int count;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 4),
child: Text(
'$label ($count)',
style: Theme.of(context).textTheme.labelMedium?.copyWith(
color: Theme.of(context).colorScheme.primary,
),
),
);
}
}
class _SensorTile extends StatelessWidget {
const _SensorTile({required this.sensor, required this.isSelected});
final Sensor sensor;
final bool isSelected;
@override
Widget build(BuildContext context) {
return ListTile(
selected: isSelected,
leading: Icon(sensor.isPlaced
? Icons.sensors
: Icons.sensors_off_outlined),
title: Text(sensor.displayName),
subtitle: Text(
sensor.isPlaced ? 'Placed' : 'Not placed on floor plan'),
trailing: const Icon(Icons.chevron_right),
onTap: () => showSensorDetailSheet(context, sensor.id),
);
}
}
+4
View File
@@ -148,6 +148,10 @@ final sensorProvider =
final selectedSensorIdProvider = StateProvider<String?>((ref) => null); final selectedSensorIdProvider = StateProvider<String?>((ref) => null);
/// Non-null while the user is placing a sensor on the floor plan via the
/// center-dot placement flow. Cleared on Place, Cancel, or back navigation.
final sensorPlacementProvider = StateProvider<Sensor?>((ref) => null);
final floorPlanModeProvider = final floorPlanModeProvider =
StateProvider<FloorPlanMode>((ref) => FloorPlanMode.view); StateProvider<FloorPlanMode>((ref) => FloorPlanMode.view);
-16
View File
@@ -57,28 +57,12 @@ final routerProvider = Provider<GoRouter>((ref) {
GoRoute( GoRoute(
path: '/floorplan', path: '/floorplan',
builder: (context, state) => const FloorPlanScreen(), builder: (context, state) => const FloorPlanScreen(),
routes: [
GoRoute(
path: 'sensors/:id',
builder: (context, state) => SensorDetailScreen(
sensorId: state.pathParameters['id']!,
),
),
],
), ),
]), ]),
StatefulShellBranch(routes: [ StatefulShellBranch(routes: [
GoRoute( GoRoute(
path: '/sensors', path: '/sensors',
builder: (context, state) => const SensorListScreen(), builder: (context, state) => const SensorListScreen(),
routes: [
GoRoute(
path: ':id',
builder: (context, state) => SensorDetailScreen(
sensorId: state.pathParameters['id']!,
),
),
],
), ),
]), ]),
StatefulShellBranch(routes: [ StatefulShellBranch(routes: [
+40
View File
@@ -113,6 +113,22 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.7.12" version: "0.7.12"
device_info_plus:
dependency: transitive
description:
name: device_info_plus
sha256: b4fed1b2835da9d670d7bed7db79ae2a94b0f5ad6312268158a9b5479abbacdd
url: "https://pub.dev"
source: hosted
version: "12.4.0"
device_info_plus_platform_interface:
dependency: transitive
description:
name: device_info_plus_platform_interface
sha256: e1ea89119e34903dca74b883d0dd78eb762814f97fb6c76f35e9ff74d261a18f
url: "https://pub.dev"
source: hosted
version: "7.0.3"
equatable: equatable:
dependency: transitive dependency: transitive
description: description:
@@ -701,6 +717,22 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "2.2.0" version: "2.2.0"
vibration:
dependency: "direct main"
description:
name: vibration
sha256: "9bb06614c69260f8bd11c80fe01ed7988905cf00e3417d656c2647e41f261d87"
url: "https://pub.dev"
source: hosted
version: "3.1.8"
vibration_platform_interface:
dependency: transitive
description:
name: vibration_platform_interface
sha256: "258c273268f8aa40c88d29741137c536874a738779b92ddb8aa32ed093721ec5"
url: "https://pub.dev"
source: hosted
version: "0.1.2"
vm_service: vm_service:
dependency: transitive dependency: transitive
description: description:
@@ -773,6 +805,14 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "5.15.0" version: "5.15.0"
win32_registry:
dependency: transitive
description:
name: win32_registry
sha256: "6f1b564492d0147b330dd794fee8f512cec4977957f310f9951b5f9d83618dae"
url: "https://pub.dev"
source: hosted
version: "2.1.0"
xdg_directories: xdg_directories:
dependency: transitive dependency: transitive
description: description:
+1
View File
@@ -40,6 +40,7 @@ dependencies:
flutter_secure_storage: ^9.2.2 flutter_secure_storage: ^9.2.2
protobuf: ^6.0.0 protobuf: ^6.0.0
permission_handler: ^11.0.0 permission_handler: ^11.0.0
vibration: ^3.1.3
dev_dependencies: dev_dependencies:
flutter_test: flutter_test: