diff --git a/android/gradle.properties b/android/gradle.properties index a673820..a8c8d76 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -2,3 +2,4 @@ org.gradle.jvmargs=-Xmx1536M android.useAndroidX=true android.enableJetifier=true android.enableR8=true +SDK_REGISTRY_TOKEN=sk.eyJ1IjoidGZyYW5zb2xldCIsImEiOiJjbHRpcTF1d28wYmxmMmxwNjRleXpodGY0In0.qr-jo1vAb08bL3WRDEB4pw \ No newline at end of file diff --git a/lib/Screens/Map/map_box_view.dart b/lib/Screens/Map/map_box_view.dart new file mode 100644 index 0000000..6d3d65e --- /dev/null +++ b/lib/Screens/Map/map_box_view.dart @@ -0,0 +1,299 @@ +import 'dart:async'; +import 'dart:typed_data'; +import 'package:enum_to_string/enum_to_string.dart'; +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import 'package:google_maps_flutter/google_maps_flutter.dart'; +import 'package:manager_api/api.dart'; +import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart' as mapBox; +import 'package:provider/provider.dart'; +import 'package:tablet_app/Components/multi_select_container.dart'; +import 'package:tablet_app/Models/map-marker.dart'; +import 'package:tablet_app/Screens/Map/map_context.dart'; +import 'package:html/parser.dart' show parse; +import 'package:tablet_app/Screens/Map/map_view.dart'; +import 'package:tablet_app/constants.dart'; + +class MapBoxView extends StatefulWidget { + final MapDTO? mapDTO; + final Uint8List? selectedMarkerIcon; + final String? language; + const MapBoxView({ + Key? key, + this.mapDTO, + this.selectedMarkerIcon, + this.language, + }) : super(key: key); + + @override + _MapBoxViewState createState() => _MapBoxViewState(); +} + +class AnnotationClickListener extends mapBox.OnPointAnnotationClickListener { + late List markersList; + late MapContext mapContext; + + AnnotationClickListener({ + required this.markersList, + required this.mapContext, + }); + + @override + void onPointAnnotationClick(mapBox.PointAnnotation annotation) { + try{ + var markerToShow = markersList.firstWhere((ml) => ml.id.toString() == annotation.textField); + mapContext.setSelectedMarker(markerToShow); + } catch(e) { + print("ISSSUE setSelectedMarker"); + print(e); + } + } +} + +class _MapBoxViewState extends State { + late mapBox.MapboxMap? mapboxMap; + late mapBox.PointAnnotationManager? pointAnnotationManager; + + _onMapCreated(mapBox.MapboxMap mapboxMap, MapContext mapContext) { + this.mapboxMap = mapboxMap; + + mapboxMap.annotations.createPointAnnotationManager().then((pointAnnotationManager) async { + this.pointAnnotationManager = pointAnnotationManager; + + var options = []; + pointsToShow!.forEach((point) { + var textSansHTML = parse(point.title!.firstWhere((translation) => translation.language == widget.language).value); + var mapMarker = new MapMarker( + id: point.id, + title: parse(textSansHTML.body!.text).documentElement!.text, + description: point.description!.firstWhere((translation) => translation.language == widget.language).value, + longitude: point.longitude, + latitude: point.latitude, + contents: point.contents + ); + markersList.add(mapMarker); + if (mapMarker.latitude != null && mapMarker.longitude != null) { + /*markers.add(Marker( + draggable: false, + markerId: MarkerId(mapMarker.latitude! + mapMarker.longitude!), + position: LatLng( + double.tryParse(mapMarker.latitude!)!, + double.tryParse(mapMarker.longitude!)!, + ), + icon: widget.selectedMarkerIcon != null ? BitmapDescriptor.fromBytes(widget.selectedMarkerIcon!) : BitmapDescriptor.defaultMarker, + /*icon: BitmapDescriptor.defaultMarkerWithHue( + BitmapDescriptor.hueYellow, + ),*/ + onTap: () { + //setState(() { + print("coucou tapped"); + /*mapContext.setSelectedMarker( + new MapMarker( + title: mapMarker.title, + contents: mapMarker.contents, + description: mapMarker.description, + longitude: mapMarker.longitude, + latitude: mapMarker.latitude, + ) + );*/ + //}); + }, + infoWindow: InfoWindow.noText));*/ + } + print("ADD POINT TO MAPPPPPPPPPPPP"); + print(widget.selectedMarkerIcon); + options.add(mapBox.PointAnnotationOptions( + geometry: mapBox.Point( + coordinates: mapBox.Position( + double.tryParse(mapMarker.longitude!)!, + double.tryParse(mapMarker.latitude!)!, + )).toJson(), + iconSize: 1.3, + textField: mapMarker.id.toString(), + textOpacity: 0.0, + iconOffset: [0.0, 0.0], + symbolSortKey: 10, + iconColor: 0, + iconImage: widget.selectedMarkerIcon == null ? "car-15": null, + image: widget.selectedMarkerIcon, //widget.selectedMarkerIcon, + )); // , + }); + /*options.add(mapBox.PointAnnotationOptions( + geometry: mapBox.Point( + coordinates: mapBox.Position( + 0.381457, + 6.687337, + )).toJson(), image: widget.selectedMarkerIcon));*/ + print(options.length); + pointAnnotationManager.createMulti(options); + + /*var carOptions = []; + for (var i = 0; i < 20; i++) { + carOptions.add(mapBox.PointAnnotationOptions( + geometry: mapBox.Point( + coordinates: mapBox.Position( + double.tryParse(mapMarker.longitude!)!, + double.tryParse(mapMarker.latitude!)!, + )).toJson(), iconImage: "car-15")); + }*/ + //pointAnnotationManager.createMulti(carOptions); + pointAnnotationManager.addOnPointAnnotationClickListener(AnnotationClickListener(mapContext: mapContext, markersList: markersList)); + }); + } + + ConfigurationDTO? configurationDTO; + //Completer _controller = Completer(); + //Set markers = {}; + List? pointsToShow = []; + List? selectedCategories = []; + bool init = false; + + /*Set getMarkers(language, mapContext) { + markers = {}; + + pointsToShow!.forEach((point) { + var textSansHTML = parse(point.title!.firstWhere((translation) => translation.language == language).value); + var mapMarker = new MapMarker( + id: point.id, + title: parse(textSansHTML.body!.text).documentElement!.text, + description: point.description!.firstWhere((translation) => translation.language == language).value, + longitude: point.longitude, + latitude: point.latitude, + contents: point.contents + ); + if (mapMarker.latitude != null && mapMarker.longitude != null) { + markers.add(Marker( + draggable: false, + markerId: MarkerId(mapMarker.latitude! + mapMarker.longitude!), + position: LatLng( + double.tryParse(mapMarker.latitude!)!, + double.tryParse(mapMarker.longitude!)!, + ), + icon: widget.selectedMarkerIcon != null ? BitmapDescriptor.fromBytes(widget.selectedMarkerIcon!) : BitmapDescriptor.defaultMarker, + /*icon: BitmapDescriptor.defaultMarkerWithHue( + BitmapDescriptor.hueYellow, + ),*/ + onTap: () { + //setState(() { + mapContext.setSelectedMarker( + new MapMarker( + title: mapMarker.title, + contents: mapMarker.contents, + description: mapMarker.description, + longitude: mapMarker.longitude, + latitude: mapMarker.latitude, + ) + ); + //}); + }, + infoWindow: InfoWindow.noText)); + } + }); + return markers; + }*/ + + @override + void initState() { + pointsToShow = widget.mapDTO!.points; + selectedCategories = widget.mapDTO!.categories!.map((categorie) => categorie.label!.firstWhere((element) => element.language == widget.language).value!).toList(); + super.initState(); + } + + @override + void dispose() { + // TODO: implement dispose + super.dispose(); + } + + @override + Widget build(BuildContext context) { + final mapContext = Provider.of(context); + Size size = MediaQuery.of(context).size; + + if(!init) { + print("getmarkers in build"); + //getMarkers(widget.language, mapContext); + init = true; + } + //MapTypeApp? mapTypeApp = MapTypeApp.fromJson(widget.mapDTO!.mapType!.value); + //print(mapTypeApp.toString()); + + MapType type = MapType.hybrid; + //if(kIsWeb) { + if(widget.mapDTO!.mapType != null) { + switch(widget.mapDTO!.mapType!.value) { + case 0: + type = MapType.none; + break; + case 1: + type = MapType.normal; + break; + case 2: + type = MapType.satellite; + break; + case 3: + type = MapType.terrain; + break; + case 4: + type = MapType.hybrid; + break; + } + } + + /*} else { + print("is OTHEER"); + type = EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString()) != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())! : MapType.hybrid; + }*/ + + + //MapType type = EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString()) != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())! : MapType.hybrid; + return Stack( + children: [ + Center( + child: mapBox.MapWidget( + key: ValueKey("mapWidget"), + styleUri: mapBox.MapboxStyles.STANDARD, // TODO update // widget.mapDTO!.mapType != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())!: MapType.hybrid, + onMapCreated: (maBoxMap) { + _onMapCreated(maBoxMap, mapContext); + }, + onTapListener: (listener) { + // close on tap + mapContext.setSelectedMarker(new MapMarker(longitude: null, latitude: null, title: '', contents: null, description: '')); + }, + cameraOptions: mapBox.CameraOptions( + center: mapBox.Point(coordinates: mapBox.Position(4.865105, 50.465503)).toJson(), //TODO add element in manager // MDLF 50.416639, 4.879169 / Namur 50.465503, 4.865105 + zoom: widget.mapDTO!.zoom != null ? widget.mapDTO!.zoom!.toDouble() : 12), + ) + ), + Positioned( + bottom: 35, + left: 10, + child: SizedBox( + width: size.width * 0.55, + child: MultiSelectContainer( + label: null, + color: kBackgroundGrey, + initialValue: selectedCategories!, + isMultiple: true, + values: widget.mapDTO!.categories!.map((categorie) => categorie.label!.firstWhere((element) => element.language == widget.language).value!).toList(), + onChanged: (value) { + var tempOutput = new List.from(value); + print(tempOutput); + if(init) { + setState(() { + selectedCategories = tempOutput; + pointsToShow = widget.mapDTO!.points!.where((point) => tempOutput.any((tps) => point.categorie?.label?.firstWhere((lab) => lab.language == widget.language).value == tps) || point.categorie == null).toList(); + //markers = getMarkers(widget.language, mapContext); + pointAnnotationManager!.deleteAll(); + mapContext.notifyListeners(); + }); + } + }, + ), + ), + ), + ], + ); + } + +} \ No newline at end of file diff --git a/lib/main.dart b/lib/main.dart index 7d8c051..052accd 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -4,6 +4,7 @@ import 'package:firebase_core/firebase_core.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:manager_api/api.dart'; +import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart'; import 'package:path_provider/path_provider.dart'; import 'package:provider/provider.dart'; import 'package:tablet_app/client.dart'; @@ -25,6 +26,8 @@ void main() async { localContext = await DatabaseHelper.instance.getData(); } + MapboxOptions.setAccessToken("pk.eyJ1IjoidGZyYW5zb2xldCIsImEiOiJjbHRpcGNvZDYwYWhkMnFxdmF0ampveW10In0.7xHN0NGvUfQu5ThS3RGJRw"); // TODO put in json file or resource file + Directory? appDocumentsDirectory = Platform.isIOS ? await getApplicationDocumentsDirectory() : await getDownloadsDirectory(); String localPath = appDocumentsDirectory!.path; diff --git a/pubspec.yaml b/pubspec.yaml index 8e786e9..48565bd 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -34,6 +34,8 @@ dependencies: google_maps_flutter_web: ^0.5.4+3 # Specific WEB youtube_player_iframe: ^4.0.4 # Handle mobile and web here => TO TEST + mapbox_maps_flutter: ^1.0.0 + flare_flutter: ^3.0.2 provider: ^6.0.5 http: ^1.2.0