Upload url image + url video WIP

This commit is contained in:
Thomas Fransolet 2021-05-11 18:13:02 +02:00
parent fa378695f8
commit a116508dd5
14 changed files with 332 additions and 77 deletions

View File

@ -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;

View File

@ -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;

View File

@ -77,7 +77,7 @@ showValues(List<TranslationDTO> newValues) {
List<Widget> valuesToShow = new List<Widget>();
newValues.forEach((newValue) {
valuesToShow.add(
new StringContainer(
new StringInputContainer(
color: Colors.lightBlue,
label: newValue.language,
initialValue: newValue.value,

View File

@ -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<ResourceTab> with SingleTickerProviderStateMixin {
TabController _tabController;
List<Tab> tabsToShow = new List<Tab>();
@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<Widget> tabsToShow = new List<Widget>();
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;
}

View File

@ -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<String> onChanged;
const StringContainer({
const StringInputContainer({
Key key,
this.color = kSecond,
this.label,

View File

@ -31,60 +31,11 @@ class _UploadImageContainerState extends State<UploadImageContainer> 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: <Widget>[
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<UploadImageContainer> 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<UploadImageContainer> 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: <Widget>[
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 {

View File

@ -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<ResourceDetailDTO> onChanged;
const UploadOnlineResourceContainer({
Key key,
this.resourceDetailDTO,
this.onChanged,
}) : super(key: key);
@override
_UploadOnlineResourceContainerState createState() => _UploadOnlineResourceContainerState();
}
class _UploadOnlineResourceContainerState extends State<UploadOnlineResourceContainer> 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<dynamic> 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()
],
);
}
}

View File

@ -122,7 +122,7 @@ class _SectionDetailScreenState extends State<SectionDetailScreen> {
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
StringContainer(
StringInputContainer(
label: "Nom :",
initialValue: sectionDTO.label,
onChanged: (value) {
@ -139,7 +139,7 @@ class _SectionDetailScreenState extends State<SectionDetailScreen> {
sectionDTO.type = SectionType.fromJson(tempOutput[0]);
},
),
StringContainer(
StringInputContainer(
label: "Image :",
initialValue: sectionDTO.imageId,
onChanged: (value) {

View File

@ -114,7 +114,7 @@ class _ConfigurationDetailScreenState extends State<ConfigurationDetailScreen> {
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
StringContainer(
StringInputContainer(
label: "Nom :",
initialValue: configurationDTO.label,
onChanged: (value) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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,
)
),
],
),

View File

@ -93,7 +93,7 @@ class _ResourcesScreenState extends State<ResourcesScreen> {
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
),
),

View File

@ -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
),
),