From a116508dd5d32c14068997762b1a3ba06825e046 Mon Sep 17 00:00:00 2001 From: Thomas Fransolet Date: Tue, 11 May 2021 18:13:02 +0200 Subject: [PATCH] Upload url image + url video WIP --- lib/Components/fetch_resource_icon.dart | 1 - lib/Components/fetch_section_icon.dart | 1 - lib/Components/multi_input_modal.dart | 2 +- lib/Components/resource_tab.dart | 138 ++++++++++++++++++ lib/Components/string_input_container.dart | 4 +- .../upload_image_container.dart} | 113 +++++++------- .../upload_online_resources_container.dart | 116 +++++++++++++++ .../Section/section_detail_screen.dart | 4 +- .../configuration_detail_screen.dart | 2 +- .../new_configuration_popup.dart | 2 +- .../Configurations/new_section_popup.dart | 2 +- lib/Screens/Resources/new_resource_popup.dart | 20 +-- lib/Screens/Resources/resources_screen.dart | 2 +- .../Resources/show_resource_popup.dart | 2 +- 14 files changed, 332 insertions(+), 77 deletions(-) create mode 100644 lib/Components/resource_tab.dart rename lib/{Screens/Resources/upload_image.dart => Components/upload_image_container.dart} (61%) create mode 100644 lib/Components/upload_online_resources_container.dart diff --git a/lib/Components/fetch_resource_icon.dart b/lib/Components/fetch_resource_icon.dart index 10722e4..46a2e8e 100644 --- a/lib/Components/fetch_resource_icon.dart +++ b/lib/Components/fetch_resource_icon.dart @@ -2,7 +2,6 @@ import 'package:flutter/material.dart'; import 'package:managerapi/api.dart'; IconData getResourceIcon(elementType) { - print(elementType); switch(elementType) { case ResourceType.image: return Icons.image; diff --git a/lib/Components/fetch_section_icon.dart b/lib/Components/fetch_section_icon.dart index ecf795f..0614237 100644 --- a/lib/Components/fetch_section_icon.dart +++ b/lib/Components/fetch_section_icon.dart @@ -2,7 +2,6 @@ import 'package:flutter/material.dart'; import 'package:managerapi/api.dart'; IconData getSectionIcon(elementType) { - print(elementType); switch(elementType) { case SectionType.map: return Icons.location_on; diff --git a/lib/Components/multi_input_modal.dart b/lib/Components/multi_input_modal.dart index 71e9abe..bf46e95 100644 --- a/lib/Components/multi_input_modal.dart +++ b/lib/Components/multi_input_modal.dart @@ -77,7 +77,7 @@ showValues(List newValues) { List valuesToShow = new List(); newValues.forEach((newValue) { valuesToShow.add( - new StringContainer( + new StringInputContainer( color: Colors.lightBlue, label: newValue.language, initialValue: newValue.value, diff --git a/lib/Components/resource_tab.dart b/lib/Components/resource_tab.dart new file mode 100644 index 0000000..95bd9a1 --- /dev/null +++ b/lib/Components/resource_tab.dart @@ -0,0 +1,138 @@ +import 'dart:io'; + +import 'package:flutter/material.dart'; +import 'package:manager_app/Components/rounded_input_field.dart'; +import 'package:manager_app/Components/upload_online_resources_container.dart'; +import 'file:///C:/Users/Thomas%20Fransolet/Documents/Documents/Perso/MuseeDeLaFraise/manager-app/lib/Components/upload_image_container.dart'; +import 'package:manager_app/constants.dart'; +import 'package:managerapi/api.dart'; +class ResourceTab extends StatefulWidget { + final ResourceDetailDTO resourceDetailDTO; + const ResourceTab({ + Key key, + this.resourceDetailDTO, + }) : super(key: key); + + @override + _ResourceTabState createState() => _ResourceTabState(); +} + +class _ResourceTabState extends State with SingleTickerProviderStateMixin { + TabController _tabController; + List tabsToShow = new List(); + + @override + void initState() { + tabsToShow.add(new Tab(text: "Image local")); + tabsToShow.add(new Tab(text: "Image en ligne")); + tabsToShow.add(new Tab(text: "Vidéo en ligne")); + + _tabController = new TabController(length: 3, vsync: this); + _tabController.addListener(_handleTabSelection); + + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + TabBar( + unselectedLabelColor: Colors.black, + labelColor: kPrimaryColor, + tabs: tabsToShow, + controller: _tabController, + indicatorSize: TabBarIndicatorSize.tab, + indicatorColor: kPrimaryColor, + ), + Expanded( + child: TabBarView( + children: getContent(widget.resourceDetailDTO), + controller: _tabController, + ), + ), + ], + ), + ), + ); + } + + void _handleTabSelection() { + print("_handleTabSelection"); + print(_tabController.index); + switch(_tabController.index) { + case 0: + setState(() { + widget.resourceDetailDTO.data = null; + widget.resourceDetailDTO.type = ResourceType.image; + }); + break; + case 1: + setState(() { + widget.resourceDetailDTO.data = null; + widget.resourceDetailDTO.type = ResourceType.imageUrl; + }); + break; + case 2: + setState(() { + widget.resourceDetailDTO.data = null; + widget.resourceDetailDTO.type = ResourceType.videoUrl; + }); + break; + } + } +} + +getContent(ResourceDetailDTO resourceDetailDTO) { + List tabsToShow = new List(); + + print("getContent"); + print(resourceDetailDTO); + + // Local Image + tabsToShow.add( + new Padding( + padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16), + child: UploadImageContainer( + onChanged: (File file) { + print("ONCHANGED image"); + print(file.path); + //fileToSend = file; + resourceDetailDTO.type = ResourceType.image; + } + ), + ) + ); + + // Online Image + tabsToShow.add( + new Padding( + padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16), + child: UploadOnlineResourceContainer( + resourceDetailDTO: resourceDetailDTO, + onChanged: (ResourceDetailDTO value) { + print("ONcHanged UploadOnlineResourceContainer parent"); + resourceDetailDTO = value; + }, + ), + ) + ); + + // Online Video + tabsToShow.add( + new Padding( + padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16), + child: UploadOnlineResourceContainer( + resourceDetailDTO: resourceDetailDTO, + onChanged: (ResourceDetailDTO value) { + print("ONcHanged UploadOnlineResourceContainer parent"); + resourceDetailDTO = value; + }, + ), + ) + ); + return tabsToShow; +} \ No newline at end of file diff --git a/lib/Components/string_input_container.dart b/lib/Components/string_input_container.dart index feb3263..71aa5d0 100644 --- a/lib/Components/string_input_container.dart +++ b/lib/Components/string_input_container.dart @@ -2,12 +2,12 @@ import 'package:flutter/material.dart'; import 'package:manager_app/Components/rounded_input_field.dart'; import 'package:manager_app/constants.dart'; -class StringContainer extends StatelessWidget { +class StringInputContainer extends StatelessWidget { final Color color; final String label; final String initialValue; final ValueChanged onChanged; - const StringContainer({ + const StringInputContainer({ Key key, this.color = kSecond, this.label, diff --git a/lib/Screens/Resources/upload_image.dart b/lib/Components/upload_image_container.dart similarity index 61% rename from lib/Screens/Resources/upload_image.dart rename to lib/Components/upload_image_container.dart index 4806582..f505975 100644 --- a/lib/Screens/Resources/upload_image.dart +++ b/lib/Components/upload_image_container.dart @@ -31,60 +31,11 @@ class _UploadImageContainerState extends State with Single @override Widget build(BuildContext context) { + Size size = MediaQuery.of(context).size; return Container( - width: 500, - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - if (fileToShow == null) InkWell( - onTap: () async { - filePicker(); - }, - child: Container( - decoration: BoxDecoration( - color: kPrimaryColor, - borderRadius: BorderRadius.circular(15) - ), - child: Padding( - padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 15.0, bottom: 15.0), - child: Text( - "Ajouter un fichier", - style: new TextStyle(color: kWhite), - ), - ) - ), - ), - if (fileToShow != null) - Container( - margin: EdgeInsets.all(8.0), - child: Card( - color: kBackgroundColor, - shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))), - child: InkWell( - onTap: () async { - filePicker(); - }, - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - ClipRRect( - borderRadius: BorderRadius.only( - topLeft: Radius.circular(8.0), - topRight: Radius.circular(8.0), - ), - child: showFile() - ), - ListTile( - title: Text(getFileName(filePath)), - subtitle: Text(filePath), - ), - ], - ), - ), - ), - ), - ], - ), + width: size.width *0.5, + height: size.height *0.5, + child: displayElement(), ); } @@ -96,8 +47,8 @@ class _UploadImageContainerState extends State with Single final file = OpenFilePicker() ..filterSpecification = { 'Images (*.jpg; *.png)': '*.jpg;*.png', - 'Video (*.mp4)': '*.mp4', - 'All Files': '*.*' + //'Video (*.mp4)': '*.mp4', + //'All Files': '*.*' } ..defaultFilterIndex = 0 ..title = 'Sélectionner un fichier'; @@ -148,6 +99,58 @@ class _UploadImageContainerState extends State with Single loadFile(File fileToShow) async { return await Media.file(fileToShow); } + + displayElement() { + if (fileToShow == null) return Center( + child: InkWell( + onTap: () async { + filePicker(); + }, + child: Container( + decoration: BoxDecoration( + color: kPrimaryColor, + borderRadius: BorderRadius.circular(15) + ), + child: Padding( + padding: const EdgeInsets.only(left: 25.0, right: 25.0, top: 15.0, bottom: 15.0), + child: Text( + "Ajouter un fichier", + style: new TextStyle(color: kWhite), + ), + ) + ), + ), + ); + if (fileToShow != null) + return Container( + margin: EdgeInsets.all(8.0), + child: Card( + color: kBackgroundColor, + shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))), + child: InkWell( + onTap: () async { + filePicker(); + }, + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + ClipRRect( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(8.0), + topRight: Radius.circular(8.0), + ), + child: showFile() + ), + ListTile( + title: Text(getFileName(filePath)), + subtitle: Text(filePath), + ), + ], + ), + ), + ), + ); + } } Upload(File imageFile) async { diff --git a/lib/Components/upload_online_resources_container.dart b/lib/Components/upload_online_resources_container.dart new file mode 100644 index 0000000..19940cd --- /dev/null +++ b/lib/Components/upload_online_resources_container.dart @@ -0,0 +1,116 @@ +import 'dart:io'; +import 'package:dart_vlc/dart_vlc.dart'; +import 'package:manager_app/Components/rounded_input_field.dart'; +import 'package:manager_app/Components/string_input_container.dart'; +import 'package:manager_app/Components/vlc_viewer.dart'; +import 'package:manager_app/constants.dart'; +import 'package:managerapi/api.dart'; +import 'package:flutter/material.dart'; + +class UploadOnlineResourceContainer extends StatefulWidget { + final ResourceDetailDTO resourceDetailDTO; + final ValueChanged onChanged; + const UploadOnlineResourceContainer({ + Key key, + this.resourceDetailDTO, + this.onChanged, + }) : super(key: key); + + @override + _UploadOnlineResourceContainerState createState() => _UploadOnlineResourceContainerState(); +} + +class _UploadOnlineResourceContainerState extends State with SingleTickerProviderStateMixin { + String urlResourceToShow; + + @override + void initState() { + super.initState(); + } + + @override + Widget build(BuildContext context) { + Size size = MediaQuery.of(context).size; + print(size.width); + return displayElement(size); + } + + showFile() { + if (widget.resourceDetailDTO.type == ResourceType.videoUrl || widget.resourceDetailDTO.type == ResourceType.video) { + return FutureBuilder( + future: loadFile(urlResourceToShow), + builder: (context, AsyncSnapshot snapshot) { + if (snapshot.connectionState == ConnectionState.done) { + return Container( + height: 300, + child: DartVLC(file: snapshot.data) + ); + } else if (snapshot.connectionState == ConnectionState.none) { + return Text("No data"); + } else { + return Center(child: Container(height: 200, child: Text('LOADING TODO FRAISE'))); + } + } + ); + /*await Media.file(widget.file)*/ + } else { + return Image.network( + urlResourceToShow, + height: 200, + fit:BoxFit.scaleDown + ); + } + } + + loadFile(String urlResourceToShow) async { + return await Media.network(urlResourceToShow); + } + + displayElement(Size size) { + return Column( + children: [ + Center( + child: Row( + children: [ + Align( + alignment: AlignmentDirectional.center, + child: Text("URL:", style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300)) + ), + Padding( + padding: const EdgeInsets.all(8.0), + child: Container( + width: size.width *0.35, // TODO GET SIZE + child: RoundedInputField( + hintText: widget.resourceDetailDTO.type == ResourceType.imageUrl ? "Url de l'image" : "Url de la vidéo", + icon: widget.resourceDetailDTO.type == ResourceType.imageUrl ? Icons.image : Icons.ondemand_video, // TODO: TBD + onChanged: (String text) { + print("onchanged url"); + widget.resourceDetailDTO.data = text; + }, + initialValue: "" + ), + ), + ), + InkWell( + onTap: () { + print("refresh preview"); + setState(() { + urlResourceToShow = widget.resourceDetailDTO.data; + }); + }, + child: Center( + child: Icon( + Icons.cloud_download_outlined, + color: kPrimaryColor, + size: 35, + ), + ), + ) + ], + ), + ), + if(widget.resourceDetailDTO.data != null) showFile() + ], + ); + } +} diff --git a/lib/Screens/Configurations/Section/section_detail_screen.dart b/lib/Screens/Configurations/Section/section_detail_screen.dart index 1aecd54..84e2258 100644 --- a/lib/Screens/Configurations/Section/section_detail_screen.dart +++ b/lib/Screens/Configurations/Section/section_detail_screen.dart @@ -122,7 +122,7 @@ class _SectionDetailScreenState extends State { mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.start, children: [ - StringContainer( + StringInputContainer( label: "Nom :", initialValue: sectionDTO.label, onChanged: (value) { @@ -139,7 +139,7 @@ class _SectionDetailScreenState extends State { sectionDTO.type = SectionType.fromJson(tempOutput[0]); }, ), - StringContainer( + StringInputContainer( label: "Image :", initialValue: sectionDTO.imageId, onChanged: (value) { diff --git a/lib/Screens/Configurations/configuration_detail_screen.dart b/lib/Screens/Configurations/configuration_detail_screen.dart index a450fda..6bef027 100644 --- a/lib/Screens/Configurations/configuration_detail_screen.dart +++ b/lib/Screens/Configurations/configuration_detail_screen.dart @@ -114,7 +114,7 @@ class _ConfigurationDetailScreenState extends State { mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.start, children: [ - StringContainer( + StringInputContainer( label: "Nom :", initialValue: configurationDTO.label, onChanged: (value) { diff --git a/lib/Screens/Configurations/new_configuration_popup.dart b/lib/Screens/Configurations/new_configuration_popup.dart index c31435a..8ea87d5 100644 --- a/lib/Screens/Configurations/new_configuration_popup.dart +++ b/lib/Screens/Configurations/new_configuration_popup.dart @@ -20,7 +20,7 @@ void showNewConfiguration(AppContext appContext, BuildContext context) { Text("Nouvelle configuration", style: new TextStyle(fontSize: 25, fontWeight: FontWeight.w400)), Column( children: [ - StringContainer( + StringInputContainer( label: "Nom :", initialValue: configurationDTO.label, onChanged: (value) { diff --git a/lib/Screens/Configurations/new_section_popup.dart b/lib/Screens/Configurations/new_section_popup.dart index 120f3f0..53478c7 100644 --- a/lib/Screens/Configurations/new_section_popup.dart +++ b/lib/Screens/Configurations/new_section_popup.dart @@ -23,7 +23,7 @@ void showNewSection(ConfigurationDTO configurationDTO, AppContext appContext, Bu Text("Nouvelle section", style: new TextStyle(fontSize: 25, fontWeight: FontWeight.w400)), Column( children: [ - StringContainer( + StringInputContainer( label: "Nom :", initialValue: sectionDTO.label, onChanged: (value) { diff --git a/lib/Screens/Resources/new_resource_popup.dart b/lib/Screens/Resources/new_resource_popup.dart index 085c505..7cd160d 100644 --- a/lib/Screens/Resources/new_resource_popup.dart +++ b/lib/Screens/Resources/new_resource_popup.dart @@ -1,6 +1,6 @@ import 'dart:io'; -import 'package:manager_app/Screens/Resources/upload_image.dart'; +import 'package:manager_app/Components/resource_tab.dart'; import 'package:flutter/material.dart'; import 'package:manager_app/Components/message_notification.dart'; import 'package:manager_app/Components/rounded_button.dart'; @@ -14,6 +14,7 @@ import 'package:http/http.dart' as http; void showNewResource(AppContext appContext, BuildContext context) { ResourceDetailDTO resourceDetailDTO = new ResourceDetailDTO(); + Size size = MediaQuery.of(context).size; var fileName; File fileToSend; showDialog( @@ -22,14 +23,14 @@ void showNewResource(AppContext appContext, BuildContext context) { borderRadius: BorderRadius.all(Radius.circular(20.0)) ), content: Container( - width: 400, + width: size.width *0.5, child: SingleChildScrollView( child: Column( children: [ Text("Nouvelle ressource", style: new TextStyle(fontSize: 25, fontWeight: FontWeight.w400)), Column( children: [ - StringContainer( + StringInputContainer( label: "Nom :", initialValue: resourceDetailDTO.label, onChanged: (value) { @@ -39,13 +40,12 @@ void showNewResource(AppContext appContext, BuildContext context) { if (fileName != null) new Text(fileName), ], ), - UploadImageContainer( - onChanged: (File file) { - print("ONCHANGED image"); - print(file.path); - fileToSend = file; - resourceDetailDTO.type = ResourceType.image; - } + Container( + width: size.width *0.5, + height: size.height *0.5, + child: ResourceTab( + resourceDetailDTO: resourceDetailDTO, + ) ), ], ), diff --git a/lib/Screens/Resources/resources_screen.dart b/lib/Screens/Resources/resources_screen.dart index 1da0d98..e55db6d 100644 --- a/lib/Screens/Resources/resources_screen.dart +++ b/lib/Screens/Resources/resources_screen.dart @@ -93,7 +93,7 @@ class _ResourcesScreenState extends State { height: size.height *0.08, child: Center( child: Image.network( - appContext.getContext().clientAPI.resourceApi.apiClient.basePath+"/api/Resource/"+ resource.id, + resource.type == ResourceType.image ? appContext.getContext().clientAPI.resourceApi.apiClient.basePath+"/api/Resource/"+ resource.id : "https://miro.medium.com/max/1920/1*8wFh-pEuwyAGa1IaKb-lEw.png", fit:BoxFit.fill ), ), diff --git a/lib/Screens/Resources/show_resource_popup.dart b/lib/Screens/Resources/show_resource_popup.dart index 1698b41..4b80fbb 100644 --- a/lib/Screens/Resources/show_resource_popup.dart +++ b/lib/Screens/Resources/show_resource_popup.dart @@ -34,7 +34,7 @@ void showResource(ResourceDTO resourceDTO,AppContext appContext, BuildContext co child: Padding( padding: const EdgeInsets.all(10.0), child: Image.network( - appContext.getContext().clientAPI.resourceApi.apiClient.basePath+"/api/Resource/"+ resourceDTO.id, + resourceDTO.type == ResourceType.image ? appContext.getContext().clientAPI.resourceApi.apiClient.basePath+"/api/Resource/"+ resourceDTO.id : "https://miro.medium.com/max/1920/1*8wFh-pEuwyAGa1IaKb-lEw.png", fit:BoxFit.scaleDown ), ),