feat: move sensor details to sheet, implement placement on floor plan
This commit is contained in:
@@ -6,6 +6,7 @@ import '../../domain/models/floor_plan_mode.dart';
|
||||
import '../../domain/models/sensor.dart';
|
||||
import '../../providers.dart';
|
||||
import '../ble_provision/ble_provision_sheet.dart';
|
||||
import '../sensors/sensor_detail_sheet.dart';
|
||||
import 'widgets/floor_plan_editor.dart';
|
||||
import 'widgets/room_edit_sheet.dart';
|
||||
|
||||
@@ -34,11 +35,39 @@ class _FloorPlanScreenState extends ConsumerState<FloorPlanScreen> {
|
||||
.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
|
||||
Widget build(BuildContext context) {
|
||||
final mode = ref.watch(floorPlanModeProvider);
|
||||
final roomsAsync = ref.watch(roomsProvider);
|
||||
final sensorsAsync = ref.watch(sensorsProvider);
|
||||
final placingSensor = ref.watch(sensorPlacementProvider);
|
||||
|
||||
ref.listen(roomsProvider, (_, next) {
|
||||
next.whenData((r) => _editorKey.currentState?.loadFloorPlan(r));
|
||||
@@ -61,104 +90,144 @@ class _FloorPlanScreenState extends ConsumerState<FloorPlanScreen> {
|
||||
.toList() ??
|
||||
[];
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Floor Plan'),
|
||||
actions: [
|
||||
IconButton(
|
||||
tooltip: mode == FloorPlanMode.edit ? 'View mode' : 'Edit mode',
|
||||
icon: Icon(
|
||||
mode == FloorPlanMode.edit ? Icons.visibility : Icons.edit,
|
||||
),
|
||||
onPressed: () {
|
||||
final next = mode == FloorPlanMode.edit
|
||||
? FloorPlanMode.view
|
||||
: FloorPlanMode.edit;
|
||||
ref.read(floorPlanModeProvider.notifier).state = next;
|
||||
_editorKey.currentState?.setMode(next);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
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);
|
||||
}),
|
||||
return PopScope(
|
||||
// While placing, intercept back: cancel placement and go to sensors list.
|
||||
canPop: placingSensor == null,
|
||||
onPopInvokedWithResult: (didPop, _) {
|
||||
if (!didPop && placingSensor != null) {
|
||||
_cancelPlacement();
|
||||
context.go('/sensors');
|
||||
}
|
||||
},
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Floor Plan'),
|
||||
actions: [
|
||||
if (placingSensor == null)
|
||||
IconButton(
|
||||
tooltip:
|
||||
mode == FloorPlanMode.edit ? 'View mode' : 'Edit mode',
|
||||
icon: Icon(
|
||||
mode == FloorPlanMode.edit
|
||||
? Icons.visibility
|
||||
: Icons.edit,
|
||||
),
|
||||
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,
|
||||
),
|
||||
],
|
||||
),
|
||||
onPressed: () {
|
||||
final next = mode == FloorPlanMode.edit
|
||||
? FloorPlanMode.view
|
||||
: FloorPlanMode.edit;
|
||||
ref.read(floorPlanModeProvider.notifier).state = next;
|
||||
_editorKey.currentState?.setMode(next);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Stack(
|
||||
children: [
|
||||
FloorPlanEditor(
|
||||
key: _editorKey,
|
||||
mode: mode,
|
||||
onSensorTapped: (id) {
|
||||
ref.read(selectedSensorIdProvider.notifier).state =
|
||||
id;
|
||||
showSensorDetailSheet(context, int.parse(id));
|
||||
},
|
||||
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 (mode == FloorPlanMode.edit && unplaced.isNotEmpty)
|
||||
_UnplacedPanel(sensors: unplaced),
|
||||
],
|
||||
if (placingSensor == null &&
|
||||
mode == FloorPlanMode.edit &&
|
||||
unplaced.isNotEmpty)
|
||||
_UnplacedPanel(sensors: unplaced),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -234,14 +303,13 @@ class _FloorPlanScreenState extends ConsumerState<FloorPlanScreen> {
|
||||
),
|
||||
);
|
||||
|
||||
final name = nameCtrl.text.trim();
|
||||
final width = double.tryParse(widthCtrl.text) ?? 5.0;
|
||||
final name = nameCtrl.text.trim();
|
||||
final width = double.tryParse(widthCtrl.text) ?? 5.0;
|
||||
final height = double.tryParse(heightCtrl.text) ?? 4.0;
|
||||
|
||||
if (confirmed != true || !mounted) return;
|
||||
if (name.isEmpty) return;
|
||||
|
||||
// Create floor if none exists yet.
|
||||
var floor = ref.read(floorProvider).valueOrNull;
|
||||
if (floor == null) {
|
||||
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 {
|
||||
const _UnplacedPanel({required this.sensors});
|
||||
|
||||
@@ -291,7 +421,7 @@ class _UnplacedPanel extends StatelessWidget {
|
||||
size: 16),
|
||||
label: Text(s.displayName),
|
||||
onPressed: () =>
|
||||
context.push('/sensors/${s.id}'),
|
||||
showSensorDetailSheet(context, s.id),
|
||||
),
|
||||
),
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user