diff --git a/lib/Components/audio_player.dart b/lib/Components/audio_player.dart index 4fada11..84dd610 100644 --- a/lib/Components/audio_player.dart +++ b/lib/Components/audio_player.dart @@ -31,7 +31,7 @@ class _AudioPlayerFloatingContainerState extends State values; + final List initialValue; + final bool isMultiple; + final bool isAtLeastOne; + final ValueChanged> onChanged; + const MultiSelectContainer({ + Key? key, + this.color = kSecondGrey, + required this.label, + required this.values, + required this.initialValue, + required this.isMultiple, + this.isAtLeastOne = false, + required this.onChanged, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + Size size = MediaQuery.of(context).size; + return SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Row( + children: [ + if(label != null) + Align( + alignment: AlignmentDirectional.centerStart, + child: Text(label!, style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300)) + ), + Padding( + padding: const EdgeInsets.all(10.0), + child: MultiSelectChip( + color, + values, + initialValue, + isMultiple, + isAtLeastOne, + onSelectionChanged: (selectedList) { + onChanged(selectedList); + }, + ), + ), + ], + ), + ); + } +} + +class MultiSelectChip extends StatefulWidget { + final Color color; + final List values; + final List selectedValues; + final Function(List) onSelectionChanged; // +added + final bool isMultiple; + final bool isAtLeastOne; + MultiSelectChip( + this.color, + this.values, + this.selectedValues, + this.isMultiple, + this.isAtLeastOne, + {required this.onSelectionChanged} // +added + ); + @override + _MultiSelectChipState createState() => _MultiSelectChipState(); +} +class _MultiSelectChipState extends State { + _buildChoiceList() { + List choices = []; + widget.values.forEach((item) { + choices.add(Container( + padding: const EdgeInsets.all(2.0), + child: ChoiceChip( + label: HtmlWidget(item, textStyle: TextStyle(color: Colors.black)), + selected: widget.selectedValues.contains(item), + selectedColor: widget.color, + onSelected: (selected) { + setState(() { + if (widget.isAtLeastOne && widget.selectedValues.length == 1 && widget.selectedValues[0] == item) { + // showNotification(Colors.orange, kWhite, 'Au moins une valeur doit être sélectionnée', context, null); + } else { + if (widget.isMultiple) { + widget.selectedValues.contains(item) + ? widget.selectedValues.remove(item) + : widget.selectedValues.add(item); + widget.onSelectionChanged(widget.selectedValues); + } else { + widget.selectedValues.clear(); + widget.selectedValues.add(item); + widget.onSelectionChanged(widget.selectedValues); + } + } + }); + }, + ), + )); + }); + return choices; + } + @override + Widget build(BuildContext context) { + return Wrap( + children: _buildChoiceList(), + ); + } +} \ No newline at end of file diff --git a/lib/Screens/Map/google_map_view.dart b/lib/Screens/Map/google_map_view.dart index a41100e..714a04e 100644 --- a/lib/Screens/Map/google_map_view.dart +++ b/lib/Screens/Map/google_map_view.dart @@ -6,9 +6,11 @@ import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:manager_api/api.dart'; 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/constants.dart'; class GoogleMapView extends StatefulWidget { final MapDTO? mapDTO; @@ -29,12 +31,14 @@ class _GoogleMapViewState extends State { ConfigurationDTO? configurationDTO; Completer _controller = Completer(); Set markers = {}; - List markersList = []; + List? pointsToShow = []; + List? selectedCategories = []; + bool init = false; Set getMarkers(language, mapContext) { markers = {}; - widget.mapDTO!.points!.forEach((point) { + pointsToShow!.forEach((point) { var textSansHTML = parse(point.title!.firstWhere((translation) => translation.language == language).value); var mapMarker = new MapMarker( id: point.id, @@ -44,17 +48,13 @@ class _GoogleMapViewState extends State { latitude: point.latitude, contents: point.contents ); - markersList.add(mapMarker); - }); - - markersList.forEach((element) { - if (element.latitude != null && element.longitude != null) { + if (mapMarker.latitude != null && mapMarker.longitude != null) { markers.add(Marker( draggable: false, - markerId: MarkerId(element.latitude! + element.longitude!), + markerId: MarkerId(mapMarker.latitude! + mapMarker.longitude!), position: LatLng( - double.tryParse(element.latitude!)!, - double.tryParse(element.longitude!)!, + double.tryParse(mapMarker.latitude!)!, + double.tryParse(mapMarker.longitude!)!, ), icon: widget.selectedMarkerIcon != null ? BitmapDescriptor.fromBytes(widget.selectedMarkerIcon!) : BitmapDescriptor.defaultMarker, /*icon: BitmapDescriptor.defaultMarkerWithHue( @@ -62,14 +62,15 @@ class _GoogleMapViewState extends State { ),*/ onTap: () { //setState(() { - mapContext.setSelectedMarker( - new MapMarker( - title: element.title, - contents: element.contents, - description: element.description, - longitude: element.longitude, - latitude: element.latitude, - )); + mapContext.setSelectedMarker( + new MapMarker( + title: mapMarker.title, + contents: mapMarker.contents, + description: mapMarker.description, + longitude: mapMarker.longitude, + latitude: mapMarker.latitude, + ) + ); //}); }, infoWindow: InfoWindow.noText)); @@ -80,6 +81,8 @@ class _GoogleMapViewState extends State { @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(); } @@ -92,8 +95,13 @@ class _GoogleMapViewState extends State { @override Widget build(BuildContext context) { final mapContext = Provider.of(context); - //Size size = MediaQuery.of(context).size; + 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()); @@ -123,34 +131,66 @@ class _GoogleMapViewState extends State { } //MapType type = EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString()) != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())! : MapType.hybrid; - return GoogleMap( - mapType: type, // widget.mapDTO!.mapType != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())!: MapType.hybrid, - mapToolbarEnabled: false, - initialCameraPosition: CameraPosition( - target: LatLng(50.465503, 4.865105), // MDLF 50.416639, 4.879169 / Namur 50.465503, 4.865105 - zoom: widget.mapDTO!.zoom != null ? widget.mapDTO!.zoom!.toDouble() : 18, - ), - onMapCreated: (GoogleMapController controller) { - if(kIsWeb) { - //_controllerWeb.complete(controller); - } else { - _controller.complete(controller); - } - }, - markers: getMarkers(widget.language, mapContext), - onTap: (LatLng location) { - //setState(() { - print(location); - mapContext.setSelectedMarker( - new MapMarker( - title: '', - description: '', - contents: null, - longitude: null, - latitude: null - )); - // }); - }, + return Stack( + children: [ + Center( + child: GoogleMap( + mapType: type, // widget.mapDTO!.mapType != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())!: MapType.hybrid, + mapToolbarEnabled: false, + initialCameraPosition: CameraPosition( + target: LatLng(50.465503, 4.865105), //TODO add element in manager // MDLF 50.416639, 4.879169 / Namur 50.465503, 4.865105 + zoom: widget.mapDTO!.zoom != null ? widget.mapDTO!.zoom!.toDouble() : 18, + ), + onMapCreated: (GoogleMapController controller) { + if(kIsWeb) { + //_controllerWeb.complete(controller); + } else { + _controller.complete(controller); + } + }, + markers: markers, + onTap: (LatLng location) { + //setState(() { + print(location); + mapContext.setSelectedMarker( + new MapMarker( + title: '', + description: '', + contents: null, + longitude: null, + latitude: null + )); + // }); + }, + ), + ), + 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); + mapContext.notifyListeners(); + }); + } + }, + ), + ), + ), + ], ); }