375 lines
17 KiB
Dart
375 lines
17 KiB
Dart
import 'dart:convert';
|
|
import 'package:diacritic/diacritic.dart';
|
|
import 'package:flutter/foundation.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
|
|
import 'package:manager_api_new/api.dart';
|
|
import 'package:mymuseum_visitapp/Components/ScannerBouton.dart';
|
|
import 'package:mymuseum_visitapp/Components/SearchBox.dart';
|
|
import 'package:mymuseum_visitapp/Components/SearchNumberBox.dart';
|
|
import 'package:mymuseum_visitapp/Components/SlideFromRouteRight.dart';
|
|
import 'package:mymuseum_visitapp/Helpers/ImageCustomProvider.dart';
|
|
import 'package:mymuseum_visitapp/Helpers/translationHelper.dart';
|
|
import 'package:mymuseum_visitapp/Models/visitContext.dart';
|
|
import 'package:mymuseum_visitapp/Screens/section_page.dart';
|
|
import 'package:mymuseum_visitapp/app_context.dart';
|
|
import 'package:mymuseum_visitapp/constants.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
class MenuPage extends StatefulWidget {
|
|
final MenuDTO section;
|
|
final bool isImageBackground;
|
|
MenuPage({required this.section, required this.isImageBackground});
|
|
|
|
@override
|
|
_MenuPageState createState() => _MenuPageState();
|
|
}
|
|
|
|
class _MenuPageState extends State<MenuPage> {
|
|
//MenuDTO menuDTO = MenuDTO();
|
|
SectionDTO? selectedSection;
|
|
bool isImageBackground = false;
|
|
late List<dynamic> rawSubSectionsData;
|
|
late List<SectionDTO> subSections;
|
|
String? searchValue;
|
|
int? searchNumberValue;
|
|
|
|
late List<SectionDTO> _allSections;
|
|
final ValueNotifier<List<SectionDTO>> filteredSections = ValueNotifier([]);
|
|
|
|
@override
|
|
void initState() {
|
|
/*print(widget.section.data);
|
|
menuDTO = MenuDTO.fromJson(jsonDecode(widget.section.data!))!;
|
|
print(menuDTO);*/
|
|
//menuDTO = widget.section;
|
|
rawSubSectionsData = jsonDecode(jsonEncode(widget.section.sections));
|
|
//menuDTO.sections!.sort((a, b) => a.order!.compareTo(b.order!)); // useless, we get these after that
|
|
subSections = jsonDecode(jsonEncode(rawSubSectionsData)).map((json) => SectionDTO.fromJson(json)).whereType<SectionDTO>().toList();
|
|
|
|
isImageBackground = widget.isImageBackground;
|
|
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
final appContext = Provider.of<AppContext>(context, listen: false);
|
|
VisitAppContext visitAppContext = appContext.getContext();
|
|
_allSections = subSections;
|
|
applyFilters(visitAppContext);
|
|
});
|
|
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final appContext = Provider.of<AppContext>(context);
|
|
Size size = MediaQuery.of(context).size;
|
|
VisitAppContext visitAppContext = appContext.getContext() as VisitAppContext;
|
|
ConfigurationDTO configurationDTO = appContext.getContext().configuration;
|
|
Color backgroundColor = appContext.getContext().configuration != null ? Color(int.parse(appContext.getContext().configuration.secondaryColor.split('(0x')[1].split(')')[0], radix: 16)) : Colors.white;
|
|
Color textColor = backgroundColor.computeLuminance() > 0.5 ? Colors.black : Colors.white;
|
|
Color? primaryColor = configurationDTO.primaryColor != null ? Color(int.parse(configurationDTO.primaryColor!.split('(0x')[1].split(')')[0], radix: 16)) : null;
|
|
|
|
return SafeArea(
|
|
bottom: false,
|
|
top: false,
|
|
child: Stack(
|
|
children: [
|
|
Container(
|
|
height: size.height * 0.28,
|
|
decoration: BoxDecoration(
|
|
boxShadow: const [
|
|
BoxShadow(
|
|
color: kMainGrey,
|
|
spreadRadius: 0.5,
|
|
blurRadius: 5,
|
|
offset: Offset(0, 1), // changes position of shadow
|
|
),
|
|
],
|
|
gradient: const LinearGradient(
|
|
begin: Alignment.centerRight,
|
|
end: Alignment.centerLeft,
|
|
colors: [
|
|
/*Color(0xFFDD79C2),
|
|
Color(0xFFB65FBE),
|
|
Color(0xFF9146BA),
|
|
Color(0xFF7633B8),
|
|
Color(0xFF6528B6),
|
|
Color(0xFF6025B6)*/
|
|
kMainColor0, //Color(0xFFf6b3c4)
|
|
kMainColor1,
|
|
kMainColor2,
|
|
],
|
|
),
|
|
image: widget.section.imageSource != null ? DecorationImage(
|
|
fit: BoxFit.cover,
|
|
opacity: 0.65,
|
|
image: NetworkImage(
|
|
widget.section.imageSource!,
|
|
),
|
|
): null,
|
|
),
|
|
),
|
|
Column(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.only(top: 20.0),
|
|
child: Row(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.only(left: 15),
|
|
child: SizedBox(
|
|
width: 50,
|
|
height: 50,
|
|
child: InkWell(
|
|
onTap: () {
|
|
//setState(() {
|
|
/**/
|
|
Navigator.of(context).pop();
|
|
/*visitAppContext.configuration = null;
|
|
visitAppContext.isScanningBeacons = false;*/
|
|
/*Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(
|
|
builder: (context) => const HomePage3(),
|
|
),(route) => false);*/
|
|
//});
|
|
},
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: primaryColor,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: const Icon(Icons.arrow_back, size: 23, color: Colors.white)
|
|
),
|
|
)
|
|
),
|
|
),
|
|
// TODO add a check if search used.
|
|
SearchBox(
|
|
width: size.width *0.55,
|
|
onChanged: (value) {
|
|
searchValue = value?.trim();
|
|
applyFilters(visitAppContext);
|
|
}
|
|
),
|
|
// TODO add a check if number used.
|
|
Expanded(
|
|
child: SearchNumberBox(onChanged: (value) {
|
|
if (value != null && value.isNotEmpty) {
|
|
searchNumberValue = int.tryParse(value);
|
|
} else {
|
|
searchNumberValue = null;
|
|
}
|
|
FocusScope.of(context).unfocus();
|
|
applyFilters(visitAppContext);
|
|
}
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Stack(
|
|
children: <Widget>[
|
|
// Our background
|
|
Container(
|
|
margin: const EdgeInsets.only(top: 0),
|
|
decoration: const BoxDecoration(
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: kMainGrey,
|
|
spreadRadius: 0.5,
|
|
blurRadius: 2,
|
|
offset: Offset(0, 1), // changes position of shadow
|
|
),
|
|
],
|
|
color: kBackgroundColor,
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(30),
|
|
topRight: Radius.circular(30),
|
|
),
|
|
),
|
|
),
|
|
ValueListenableBuilder<List<SectionDTO>>(
|
|
valueListenable: filteredSections,
|
|
builder: (context, value, child) {
|
|
return GridView.builder(
|
|
shrinkWrap: true,
|
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1, childAspectRatio: kIsWeb ? 1.7 : 1.95),
|
|
itemCount: value.length,
|
|
itemBuilder: (BuildContext context, int index) {
|
|
return InkWell(
|
|
onTap: () {
|
|
//SectionDTO? section = await (appContext.getContext() as TabletAppContext).clientAPI!.sectionApi!.sectionGetDetail(menuDTO.sections![index].id!);
|
|
SectionDTO section = value[index];
|
|
var rawSectionData = rawSubSectionsData[index];
|
|
Navigator.push(
|
|
context,
|
|
SlideFromRightRoute(page: SectionPage(
|
|
configuration: configurationDTO,
|
|
rawSection: rawSectionData,
|
|
visitAppContextIn: appContext.getContext(),
|
|
sectionId: section.id!,
|
|
)),
|
|
);
|
|
},
|
|
child: Container(
|
|
decoration: isImageBackground ? boxDecoration(appContext, value[index], false, rawSubSectionsData[index]) : null,
|
|
padding: const EdgeInsets.all(20),
|
|
margin: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
|
|
child: isImageBackground ? Align(
|
|
alignment: Alignment.bottomRight,
|
|
child: FractionallySizedBox(
|
|
heightFactor: 0.5,
|
|
child: Column(
|
|
children: [
|
|
Align(
|
|
alignment: Alignment.centerRight,
|
|
child: HtmlWidget(
|
|
value[index].title!.where((translation) => translation.language == appContext.getContext().language).firstOrNull?.value ?? "",
|
|
customStylesBuilder: (element) {
|
|
return {'text-align': 'right', 'font-family': "Roboto"};
|
|
},
|
|
textStyle: new TextStyle(fontSize: kMenuTitleDetailSize),
|
|
),
|
|
),
|
|
/*Align(
|
|
alignment: Alignment.centerRight,
|
|
child: HtmlWidget(
|
|
menuDTO.sections![index].description!.firstWhere((translation) => translation.language == appContext.getContext().language).value!,
|
|
customStylesBuilder: (element) {
|
|
return {'text-align': 'right'};
|
|
},
|
|
textStyle: new TextStyle(fontSize: kIsWeb? kWebSectionDescriptionDetailSize: kSectionDescriptionDetailSize, fontFamily: ""),
|
|
),
|
|
),*/
|
|
],
|
|
)
|
|
),
|
|
) : Column(
|
|
children: [
|
|
Expanded(
|
|
flex: 7,
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: value[index].imageSource == null && value[index].type != SectionType.Video ? kBackgroundColor : null, // default color if no image
|
|
shape: BoxShape.rectangle,
|
|
image: value[index].imageSource != null || value[index].type == SectionType.Video ? new DecorationImage(
|
|
fit: BoxFit.contain, // contain or cover ?
|
|
image: ImageCustomProvider.getImageProvider(appContext, value[index].imageId, value[index].type == SectionType.Video ? getYoutubeThumbnailUrl(rawSubSectionsData[index]) : value[index].imageSource!),
|
|
): null,
|
|
),
|
|
)
|
|
),
|
|
Expanded(
|
|
flex: 3,
|
|
child: Container(
|
|
//color: Colors.yellow,
|
|
constraints: BoxConstraints(
|
|
maxWidth: size.width * 0.3,
|
|
),
|
|
child: Center(
|
|
child: HtmlWidget(
|
|
value[index].title!.where((translation) => translation.language == appContext.getContext().language).firstOrNull?.value ?? "",
|
|
customStylesBuilder: (element) {
|
|
return {'text-align': 'center', 'font-family': "Roboto"};
|
|
},
|
|
textStyle: const TextStyle(fontSize: 20),//calculateFontSize(constraints.maxWidth, constraints.maxHeight, kIsWeb ? kWebMenuTitleDetailSize : kMenuTitleDetailSize)),
|
|
),
|
|
),
|
|
)
|
|
)
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
);
|
|
}
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Align(
|
|
alignment: Alignment.bottomRight,
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(15.0),
|
|
child: ScannerBouton(appContext: appContext),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
void applyFilters(VisitAppContext visitAppContext) {
|
|
List<SectionDTO> result = _allSections;
|
|
|
|
if (searchValue != null && searchValue!.isNotEmpty) {
|
|
result = result.where((s) {
|
|
final rawTitle = TranslationHelper.get(s.title, visitAppContext);
|
|
final plainText = stripHtmlTags(rawTitle);
|
|
final normalizedTitle = removeDiacritics(plainText.toLowerCase());
|
|
final normalizedSearch = removeDiacritics(searchValue!.toLowerCase());
|
|
return normalizedTitle.contains(normalizedSearch);
|
|
}).toList();
|
|
} else if (searchNumberValue != null) {
|
|
result = result.where((s) => s.order! + 1 == searchNumberValue).toList();
|
|
}
|
|
|
|
filteredSections.value = result;
|
|
}
|
|
|
|
String stripHtmlTags(String htmlText) {
|
|
final exp = RegExp(r'<[^>]*>', multiLine: true, caseSensitive: false);
|
|
return htmlText.replaceAll(exp, '');
|
|
}
|
|
}
|
|
|
|
boxDecoration(AppContext appContext, SectionDTO section, bool isSelected, Object rawSubSectionData) {
|
|
VisitAppContext visitAppContext = appContext.getContext() as VisitAppContext;
|
|
|
|
return BoxDecoration(
|
|
color: kBackgroundLight,
|
|
shape: BoxShape.rectangle,
|
|
borderRadius: BorderRadius.circular(visitAppContext.configuration!.roundedValue?.toDouble() ?? 20.0),
|
|
image: section.imageSource != null || section.type == SectionType.Video ? DecorationImage(
|
|
fit: BoxFit.cover,
|
|
colorFilter: !isSelected? ColorFilter.mode(kBackgroundLight.withValues(alpha: 0.35), BlendMode.dstATop) : null,
|
|
image: ImageCustomProvider.getImageProvider(appContext, section.imageId, section.type == SectionType.Video ? getYoutubeThumbnailUrl(rawSubSectionData) : section.imageSource!),
|
|
): null,
|
|
boxShadow: const [
|
|
BoxShadow(
|
|
color: kBackgroundSecondGrey,
|
|
spreadRadius: 0.3,
|
|
blurRadius: 5,
|
|
offset: Offset(0, 1.5), // changes position of shadow
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
String getYoutubeThumbnailUrl(Object rawSectionData) {
|
|
try{
|
|
VideoDTO videoDTO = VideoDTO.fromJson(rawSectionData)!;
|
|
|
|
String thumbnailUrl = "";
|
|
if(videoDTO.source_ != null) {
|
|
//VideoDTO? videoDTO = VideoDTO.fromJson(jsonDecode(sectionDTO.data!));
|
|
Uri uri = Uri.parse(videoDTO.source_!);
|
|
String videoId = uri.queryParameters['v']!;
|
|
// Construire l'URL du thumbnail en utilisant l'identifiant de la vidéo YouTube
|
|
thumbnailUrl = 'https://img.youtube.com/vi/$videoId/0.jpg';
|
|
}
|
|
|
|
return thumbnailUrl;
|
|
|
|
} catch(e) {
|
|
return "";
|
|
}
|
|
} |