INITIAL_COMMIT
This commit is contained in:
335
lib/map_page.dart
Normal file
335
lib/map_page.dart
Normal file
@ -0,0 +1,335 @@
|
||||
import 'package:bloc/bloc.dart';
|
||||
import 'package:dio_cache_interceptor_hive_store/dio_cache_interceptor_hive_store.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:flutter_map/flutter_map.dart';
|
||||
import 'package:flutter_map_cache/flutter_map_cache.dart';
|
||||
import 'package:flutter_map_compass/flutter_map_compass.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:latlong2/latlong.dart';
|
||||
import 'package:ot_viewer_app/settings_page.dart';
|
||||
import 'package:ot_viewer_app/user_path_bloc.dart';
|
||||
import 'package:ot_viewer_app/util.dart';
|
||||
import 'package:ot_viewer_app/web_socket_cubit.dart';
|
||||
import 'package:path_provider/path_provider.dart';
|
||||
import 'owntracks_api.dart';
|
||||
import 'dart:math' as math;
|
||||
|
||||
Future<String> getPath() async {
|
||||
final cacheDirectory = await getTemporaryDirectory();
|
||||
return cacheDirectory.path;
|
||||
}
|
||||
|
||||
class MapPage extends StatefulWidget {
|
||||
const MapPage({super.key});
|
||||
|
||||
@override
|
||||
createState() => _MapPageState();
|
||||
}
|
||||
|
||||
class _MapPageState extends State<MapPage> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// _fetchPoints();
|
||||
}
|
||||
|
||||
/*
|
||||
Future<void> _fetchPoints() async {
|
||||
final api = OwntracksApi(baseUrl: '', username: '', pass: '');
|
||||
print(await api.getDevices());
|
||||
final points = await api.fetchPointsForDevice(
|
||||
user: 'yxk',
|
||||
device: 'meow',
|
||||
from: DateTime.now().subtract(const Duration(days: 1)));
|
||||
setState(() {
|
||||
_points = points.unwrapOr([])
|
||||
.map((point) => LatLng(point.lat, point.lon))
|
||||
.toList();
|
||||
});
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return BlocProvider(
|
||||
create: (context) {
|
||||
final cubit = LocationSubscribeCubit();
|
||||
final settings_cubit = context.read<SettingsCubit>();
|
||||
cubit.subscribe(settings_cubit.state);
|
||||
settings_cubit.stream.listen((settings) => cubit.subscribe(settings));
|
||||
return cubit;
|
||||
},
|
||||
child: FutureBuilder<String>(
|
||||
future: getPath(),
|
||||
builder: (something, temp_path) =>
|
||||
BlocBuilder<SettingsCubit, SettingsState>(
|
||||
builder: (context, state) {
|
||||
return FlutterMap(
|
||||
options: const MapOptions(
|
||||
initialCenter: LatLng(48.3285, 9.8942),
|
||||
initialZoom: 13.0,
|
||||
),
|
||||
children: [
|
||||
TileLayer(
|
||||
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
tileProvider: CachedTileProvider(
|
||||
maxStale: const Duration(days: 30),
|
||||
store: HiveCacheStore(temp_path.data,
|
||||
hiveBoxName: 'HiveCacheStore')),
|
||||
),
|
||||
...state.activeDevices
|
||||
.map((id) => UserPath(device: id, settings: state)),
|
||||
const MapCompass.cupertino(
|
||||
rotationDuration: Duration(milliseconds: 600)),
|
||||
// CurrentLocationLayer(), TODO: add permission
|
||||
RichAttributionWidget(
|
||||
attributions: [
|
||||
TextSourceAttribution(
|
||||
'OpenStreetMap contributors',
|
||||
onTap: () =>
|
||||
(Uri.parse('https://openstreetmap.org/copyright')),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class UserPath extends StatefulWidget {
|
||||
UserPath({required this.device, required this.settings});
|
||||
|
||||
(String, String) device;
|
||||
SettingsState settings;
|
||||
|
||||
@override
|
||||
createState() => _UserPathState();
|
||||
}
|
||||
|
||||
class _UserPathState extends State<UserPath> {
|
||||
@override
|
||||
Widget build(BuildContext ctx) {
|
||||
return BlocProvider(
|
||||
create: (context) {
|
||||
final bloc = UserPathBloc(widget.device, widget.settings);
|
||||
bloc.add(UserPathFullUpdate());
|
||||
return bloc;
|
||||
},
|
||||
child: BlocListener<LocationSubscribeCubit, LocationUpdateState>(
|
||||
listener: (context, state) {
|
||||
UserPathBloc userPathBloc = context.read<UserPathBloc>();
|
||||
if (state
|
||||
case LocationUpdateReceived(:final position, :final deviceId)) {
|
||||
if (userPathBloc.deviceId == state.deviceId) {
|
||||
context
|
||||
.read<UserPathBloc>()
|
||||
.add(UserPathLiveSubscriptionUpdate(position));
|
||||
}
|
||||
}
|
||||
},
|
||||
child: BlocBuilder<UserPathBloc, UserPathState>(
|
||||
builder: (context, state) {
|
||||
print("rebuild");
|
||||
final _istate = state as MainUserPathState;
|
||||
// make markers
|
||||
final List<Marker> _markers = [];
|
||||
|
||||
if (state.livePoints.isNotEmpty) {
|
||||
_markers.add(Marker(
|
||||
width: 500,
|
||||
height: 100,
|
||||
point: state.livePoints.last.asLatLng,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
GestureDetector(
|
||||
onTap: () => showUserLocationModalBottomSheet(
|
||||
context, widget.device
|
||||
),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withOpacity(0.85),
|
||||
// border: Border.all(color: Colors.lightBlue, width: 2), TODO: add border
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
boxShadow: [
|
||||
// BoxShadow(color: Colors.black, blurRadius: 4)
|
||||
]),
|
||||
padding: EdgeInsets.all(8),
|
||||
child: Text(
|
||||
"${widget.device.$1}:${widget.device.$2}",
|
||||
softWrap: false,
|
||||
),
|
||||
),
|
||||
),
|
||||
Icon(
|
||||
Icons.location_history,
|
||||
size: 32,
|
||||
)
|
||||
],
|
||||
),
|
||||
alignment: Alignment.topCenter,
|
||||
rotate: true,
|
||||
));
|
||||
}
|
||||
|
||||
// Create fancy fade-out and blended line (TODO: make distance based. use flutter_map_math)
|
||||
List<List<LatLng>> segments = [];
|
||||
List<Color> colors = [];
|
||||
if (state.initialPoints.isNotEmpty) {
|
||||
final allPoints =
|
||||
state.initialPoints.map((e) => LatLng(e.lat, e.lon)).toList();
|
||||
final segmentCount = math.min(100, allPoints.length);
|
||||
final pointsPerSegment = (allPoints.length / segmentCount).ceil();
|
||||
|
||||
// Split the points into segments and generate colors
|
||||
for (int i = 0; i < allPoints.length; i += pointsPerSegment) {
|
||||
int end = math.min(i + pointsPerSegment + 1, allPoints.length);
|
||||
segments.add(allPoints.sublist(i, end));
|
||||
|
||||
// Calculate the color for the segment
|
||||
double ratio = i / allPoints.length;
|
||||
Color color = Color.lerp(Colors.purple, Colors.blue, ratio)!;
|
||||
colors.add(color);
|
||||
}
|
||||
}
|
||||
|
||||
// Create polylines for each segment with the corresponding color
|
||||
List<Polyline> polylines = [];
|
||||
for (int i = 0; i < segments.length; i++) {
|
||||
polylines.add(
|
||||
Polyline(
|
||||
points: segments[i],
|
||||
strokeWidth: 4.0,
|
||||
color: colors[i].withOpacity(
|
||||
(math.pow(i, 2) / math.pow(segments.length, 2)) * 0.7 +
|
||||
0.3), // Fading effect
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Stack(
|
||||
children: [
|
||||
PolylineLayer(
|
||||
polylines: [
|
||||
/*
|
||||
Polyline(
|
||||
points: state.initialPoints
|
||||
.map((e) => LatLng(e.lat, e.lon))
|
||||
.toList(),
|
||||
strokeWidth: 4.0,
|
||||
color: Colors.blue,
|
||||
),
|
||||
|
||||
*/
|
||||
...polylines
|
||||
],
|
||||
),
|
||||
PolylineLayer(polylines: [
|
||||
Polyline(
|
||||
points: state.livePoints
|
||||
.map((e) => LatLng(e.lat, e.lon))
|
||||
.toList(),
|
||||
strokeWidth: 4.0,
|
||||
color: Colors.blue.shade200,
|
||||
),
|
||||
]),
|
||||
MarkerLayer(markers: _markers)
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
showUserLocationModalBottomSheet(BuildContext context, (String, String) user) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
builder: (bsContext) {
|
||||
return Container(
|
||||
height: MediaQuery.of(bsContext).size.height * 0.26,
|
||||
width: MediaQuery.of(bsContext).size.width,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black,
|
||||
// border: Border.all(color: Colors.blueAccent, width: 2),
|
||||
borderRadius: BorderRadius.only(topLeft: Radius.circular(30), topRight: Radius.circular(30)),
|
||||
),
|
||||
padding: EdgeInsets.all(32),
|
||||
child: Column(
|
||||
children: [
|
||||
Text(
|
||||
'${user.$1}:${user.$2}',
|
||||
style: const TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 16,),
|
||||
Builder(
|
||||
builder: (sheetContext) {
|
||||
final state = context.watch<UserPathBloc>().state
|
||||
as MainUserPathState;
|
||||
|
||||
// get user's current location
|
||||
// final _istate = state as MainUserPathState;
|
||||
|
||||
if (state.livePoints.isEmpty) {
|
||||
return Text(
|
||||
"Couldn't find ${user.$1}:${user.$2}'s Location");
|
||||
}
|
||||
|
||||
final curLocation = state.livePoints.last;
|
||||
|
||||
// MapController.of(sheetContext).camera.pointToLatLng(
|
||||
// math.Point(curLocation.lat, curLocation.lon));
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black,
|
||||
border: Border.all(color: Colors.orange, width: 2),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
padding: EdgeInsets.all(16),
|
||||
width: double.infinity,
|
||||
child: Column(
|
||||
children: [
|
||||
Text(
|
||||
"(${curLocation.lat.toStringAsFixed(4)}, ${curLocation.lon.toStringAsFixed(4)})"),
|
||||
Text(DateFormat('dd.MM.yyyy - kk:mm:ss')
|
||||
.format(curLocation.timestamp)),
|
||||
StreamBuilder(
|
||||
// rebuild every second for that ticking effect
|
||||
// not hyper efficient, but it's only a text
|
||||
stream: Stream.periodic(
|
||||
const Duration(seconds: 1)),
|
||||
builder: (context, _) {
|
||||
return Text(
|
||||
"${formatDuration(DateTime.now().difference(curLocation.timestamp))} ago");
|
||||
}),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
));
|
||||
// title with icon, user name and device id
|
||||
|
||||
// location as a lat, long (truncated to 4 comma spaces)
|
||||
// time since last location update
|
||||
// location to other users in a grid (2 rows)
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user