326 lines
11 KiB
Dart
326 lines
11 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
|
|
import 'package:manager_app/Components/category_input_container.dart';
|
|
import 'package:manager_app/Components/fetch_section_icon.dart';
|
|
import 'package:manager_app/Components/resource_input_container.dart';
|
|
import 'package:manager_app/Components/multi_select_container.dart';
|
|
import 'package:manager_app/Components/slider_input_container.dart';
|
|
import 'package:manager_app/Screens/Configurations/Section/SubSection/Map/showNewOrUpdateGeoPoint.dart';
|
|
import 'package:manager_app/app_context.dart';
|
|
import 'package:manager_app/constants.dart';
|
|
import 'package:manager_api_new/api.dart';
|
|
import 'dart:convert';
|
|
|
|
import 'package:provider/provider.dart';
|
|
|
|
class MapConfig extends StatefulWidget {
|
|
final String? color;
|
|
final String? label;
|
|
final String initialValue;
|
|
final ValueChanged<String> onChanged;
|
|
const MapConfig({
|
|
Key? key,
|
|
this.color,
|
|
this.label,
|
|
required this.initialValue,
|
|
required this.onChanged,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
_MapConfigState createState() => _MapConfigState();
|
|
}
|
|
|
|
class _MapConfigState extends State<MapConfig> {
|
|
late MapDTO mapDTO;
|
|
|
|
String mapType= "hybrid";
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
mapDTO = MapDTO.fromJson(json.decode(widget.initialValue))!;
|
|
List<GeoPointDTO> test = new List<GeoPointDTO>.from(mapDTO.points!);
|
|
mapDTO.points = test;
|
|
|
|
if(mapDTO.mapType != null) {
|
|
switch(mapDTO.mapType!.value) {
|
|
case 0:
|
|
mapType = "none";
|
|
break;
|
|
case 1:
|
|
mapType = "normal";
|
|
break;
|
|
case 2:
|
|
mapType = "satellite";
|
|
break;
|
|
case 3:
|
|
mapType = "terrain";
|
|
break;
|
|
case 4:
|
|
mapType = "hybrid";
|
|
break;
|
|
}
|
|
}
|
|
|
|
/*print("MAPDTO");
|
|
print(mapDTO);
|
|
print(mapDTO.mapType.toString());
|
|
if (mapDTO.mapType == null) {
|
|
mapDTO.mapType = MapTypeApp.hybrid;
|
|
}*/
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final appContext = Provider.of<AppContext>(context);
|
|
Size size = MediaQuery.of(context).size;
|
|
|
|
return
|
|
SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
height: size.height * 0.15,
|
|
width: double.infinity,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
// Icon
|
|
ResourceInputContainer(
|
|
label: "Icône:",
|
|
initialValue: mapDTO.iconResourceId,
|
|
color: kPrimaryColor,
|
|
imageFit: BoxFit.contain,
|
|
onChanged: (ResourceDTO resource) {
|
|
if(resource.id == null) {
|
|
mapDTO.iconSource = null;
|
|
mapDTO.iconResourceId = null;
|
|
} else {
|
|
mapDTO.iconResourceId = resource.id;
|
|
mapDTO.iconSource = resource.url;
|
|
}
|
|
widget.onChanged(jsonEncode(mapDTO).toString());
|
|
},
|
|
isSmall: true
|
|
),
|
|
// Map Type
|
|
MultiSelectContainer(
|
|
label: "Type:",
|
|
initialValue: [mapType], //mapDTO.mapType.toString()
|
|
isMultiple: false,
|
|
values: map_types,
|
|
onChanged: (value) {
|
|
var tempOutput = new List<String>.from(value);
|
|
print("Type MAP");
|
|
print(value);
|
|
mapDTO.mapType = MapTypeApp.fromJson(tempOutput[0]);
|
|
widget.onChanged(jsonEncode(mapDTO).toString());
|
|
},
|
|
),
|
|
// Zoom
|
|
SliderInputContainer(
|
|
label: "Zoom:",
|
|
initialValue: mapDTO.zoom != null ? mapDTO.zoom!.toDouble() : 18,
|
|
color: kPrimaryColor,
|
|
min: 0,
|
|
max: 30,
|
|
onChanged: (double value) {
|
|
mapDTO.zoom = value.toInt();
|
|
widget.onChanged(jsonEncode(mapDTO).toString());
|
|
},
|
|
),
|
|
Container(
|
|
height: 70,
|
|
child: CategoryInputContainer(
|
|
label: "Catégories :",
|
|
initialValue: mapDTO.categories != null ? mapDTO.categories! : [],
|
|
color: kPrimaryColor,
|
|
onChanged: (List<CategorieDTO>? value) {
|
|
if(value != null) {
|
|
mapDTO.categories = value;
|
|
widget.onChanged(jsonEncode(mapDTO).toString());
|
|
}
|
|
},
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(25),
|
|
border: Border.all(width: 1.5, color: kSecond)
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
Container(
|
|
constraints: BoxConstraints(minHeight: 100),
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(top: 40, left: 10, right: 10, bottom: 10),
|
|
child: GridView.builder(
|
|
shrinkWrap: true,
|
|
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 8),
|
|
itemCount: mapDTO.points!.length,
|
|
itemBuilder: (BuildContext context, int index) {
|
|
return
|
|
Container(
|
|
decoration: boxDecoration(mapDTO.points![index], appContext),
|
|
padding: const EdgeInsets.all(5),
|
|
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
|
|
child: getElement(index, mapDTO.points![index], size, appContext),
|
|
);
|
|
}
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 10,
|
|
left: 10,
|
|
child: Text(
|
|
"Points géographiques",
|
|
style: TextStyle(fontSize: 15),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 10,
|
|
right: 10,
|
|
child: InkWell(
|
|
onTap: () {
|
|
showNewOrUpdateGeoPoint(
|
|
mapDTO,
|
|
null,
|
|
(GeoPointDTO geoPoint) {
|
|
setState(() {
|
|
mapDTO.points!.add(geoPoint);
|
|
widget.onChanged(jsonEncode(mapDTO).toString());
|
|
});
|
|
},
|
|
appContext,
|
|
context);
|
|
},
|
|
child: Container(
|
|
height: MediaQuery.of(context).size.width * 0.04,
|
|
width: MediaQuery.of(context).size.width * 0.04,
|
|
child: Icon(
|
|
Icons.add,
|
|
color: kTextLightColor,
|
|
size: 30.0,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: kSuccess,
|
|
shape: BoxShape.rectangle,
|
|
borderRadius: BorderRadius.circular(20.0),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: kSecond,
|
|
spreadRadius: 0.5,
|
|
blurRadius: 5,
|
|
offset: Offset(0, 1.5), // changes position of shadow
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
)
|
|
]),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
getElement(int index, GeoPointDTO? point, Size size, AppContext appContext) {
|
|
return Container(
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
child: Stack(
|
|
children: [
|
|
Center(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: HtmlWidget(
|
|
point != null ? point.title == null ? "" : point.title![0].value! : "",
|
|
//textAlign: TextAlign.left,
|
|
customStylesBuilder: (element) {
|
|
return {'text-align': 'center'};
|
|
},
|
|
textStyle: TextStyle(fontSize: 20)
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 0,
|
|
right: 0,
|
|
child: Icon(
|
|
getSectionIcon(SectionType.Map),
|
|
color: kSecond,
|
|
size: 18.0,
|
|
),
|
|
),
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
child: InkWell(
|
|
onTap: () {
|
|
showNewOrUpdateGeoPoint(
|
|
mapDTO,
|
|
mapDTO.points![index],
|
|
(GeoPointDTO geoPoint) {
|
|
setState(() {
|
|
mapDTO.points![index] = geoPoint;
|
|
widget.onChanged(jsonEncode(mapDTO).toString());
|
|
});
|
|
},
|
|
appContext,
|
|
context);
|
|
},
|
|
child: Icon(
|
|
Icons.edit,
|
|
color: kPrimaryColor,
|
|
size: 20.0,
|
|
)
|
|
),
|
|
),
|
|
Positioned(
|
|
bottom: 0,
|
|
right: 0,
|
|
child: InkWell(
|
|
onTap: () {
|
|
setState(() {
|
|
mapDTO.points!.removeAt(index);
|
|
});
|
|
widget.onChanged(jsonEncode(mapDTO).toString());
|
|
},
|
|
child: Icon(
|
|
Icons.delete,
|
|
color: kError,
|
|
size: 20.0,
|
|
)
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
boxDecoration(GeoPointDTO geoPointDTO, appContext) {
|
|
return BoxDecoration(
|
|
color: kBackgroundColor,
|
|
shape: BoxShape.rectangle,
|
|
border: Border.all(width: 1.5, color: kSecond),
|
|
borderRadius: BorderRadius.circular(10.0),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: kSecond,
|
|
spreadRadius: 0.5,
|
|
blurRadius: 5,
|
|
offset: Offset(0, 1.5), // changes position of shadow
|
|
),
|
|
],
|
|
);
|
|
} |