From 64cf0e5d5d423fcd68d06212651055cc8ffa04a1 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Tue, 4 Aug 2020 11:34:32 -0300
Subject: [PATCH] finishing up upload
---
.../PublicationPermissionsContent.js | 116 +++++++++++++-----
.../UploadPageComponents/ButtonsDiv.js | 1 +
.../UploadPageComponents/DragAndDrop.tsx | 64 ++++++----
.../UploadPageComponents/FileToUpload.ts | 27 +++-
.../UploadPageComponents/UploadFileWrapper.js | 2 +-
src/Pages/PublicationPermissionsPage.js | 8 +-
src/Pages/UploadPage.js | 2 +-
7 files changed, 151 insertions(+), 69 deletions(-)
diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js
index 0eb4410c..fe3536dc 100644
--- a/src/Components/PublicationPermissionsContent.js
+++ b/src/Components/PublicationPermissionsContent.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
import Typography from '@material-ui/core/Typography';
import CardContent from '@material-ui/core/CardContent';
import styled from 'styled-components'
@@ -7,6 +7,9 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import Grid from '@material-ui/core/Grid';
+import { withStyles } from '@material-ui/core/styles';
+import axios from 'axios'
+import {apiUrl} from '../env';
const StyledFormControl = styled(FormControl)`
display: "block ruby";
@@ -18,7 +21,35 @@ const StyledDivEvaluateQuestion = styled.div`
justify-content : space-between;
`
+const BlueRadio = withStyles({
+ root: {
+ color: '#666',
+ '&$checked': {
+ color: '#00bcd4',
+ },
+ },
+ checked: {},
+})((props) => <Radio color="default" {...props} />);
+
export default function PublicationPermissionsContent (props) {
+ {/*To DO change to get https://api.portalmec.c3sl.ufpr.br/v1/questions*/}
+
+ const [questionsArr, setQuestionsArr] = useState([])
+ const handleSetQuestionsArr = (newArr) => {setQuestionsArr(newArr)}
+
+ useEffect(() => {
+ axios.get(`${apiUrl}/questions/`).then(
+ (response) => {
+ console.log(response)
+ handleSetQuestionsArr(response.data)
+ },
+ (error) => {
+ console.log('falhou em get questions')
+ }
+ )
+
+ }, [])
+
return (
<CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}>
<Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)", fontSize:"26px"}}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
@@ -41,41 +72,62 @@ export default function PublicationPermissionsContent (props) {
<StyledFormControl component="fieldset" style={{display:"BlockRuby"}} margin='dense' fullWidth={true}>
<Grid container>
- <Grid item xs={10}>
- <p>
- O recurso apresenta conteúdo de cunho polÃtico-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda polÃtica)?
- </p>
- </Grid>
- <Grid item xs={2}>
- <RadioGroup row name="radio1" onChange={props.handleRadios}>
- <FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
- </RadioGroup>
- </Grid>
+ {
+ questionsArr.map((question, index) =>
- <Grid item xs={10}>
- <p>
- O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?
- </p>
- </Grid>
- <Grid item xs={2}>
- <RadioGroup row name="radio2" onChange={props.handleRadios}>
- <FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
- </RadioGroup>
- </Grid>
- <Grid item xs={10}>
- <p>
- O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
- </p>
- </Grid>
- <Grid item xs={2}>
- <RadioGroup row name="radio3" onChange={props.handleRadios}>
- <FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
- </RadioGroup>
- </Grid>
- </Grid>
+ question.id !== 4 &&
+ <React.Fragment key={question.id}>
+ <Grid item xs={10}>
+ <p>{question.description}</p>
+ </Grid>
+ <Grid item xs={2}>
+ <RadioGroup row name={"radio" + (index + 1)} onChange={props.handleRadios}>
+ <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+ </RadioGroup>
+ </Grid>
+ </React.Fragment>
+
+ )
+ }
+ </Grid>
</StyledFormControl>
</div>
</CardContent>
)
}
+
+{/*
+ <Grid item xs={10}>
+ <p>
+ O recurso apresenta conteúdo de cunho polÃtico-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda polÃtica)?
+ </p>
+ </Grid>
+ <Grid item xs={2}>
+ <RadioGroup row name="radio1" onChange={props.handleRadios}>
+ <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+ </RadioGroup>
+ </Grid>
+
+ <Grid item xs={10}>
+ <p>
+ O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?
+ </p>
+ </Grid>
+ <Grid item xs={2}>
+ <RadioGroup row name="radio2" onChange={props.handleRadios}>
+ <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+ </RadioGroup>
+ </Grid>
+ <Grid item xs={10}>
+ <p>
+ O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
+ </p>
+ </Grid>
+ <Grid item xs={2}>
+ <RadioGroup row name="radio3" onChange={props.handleRadios}>
+ <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+ </RadioGroup>
+ </Grid>
+ </Grid>
+ */}
diff --git a/src/Components/UploadPageComponents/ButtonsDiv.js b/src/Components/UploadPageComponents/ButtonsDiv.js
index e94fe357..a7e5e3a1 100644
--- a/src/Components/UploadPageComponents/ButtonsDiv.js
+++ b/src/Components/UploadPageComponents/ButtonsDiv.js
@@ -34,6 +34,7 @@ export default function ButtonsDiv (props) {
<Grid container justify="center">
+ {/*botao excluir na pagina de editar*/}
<Grid item md={2} xs={6}>
<GreyButton onClick={() => {toggleModalCancelar(true)}}>
<span className="button-text">
diff --git a/src/Components/UploadPageComponents/DragAndDrop.tsx b/src/Components/UploadPageComponents/DragAndDrop.tsx
index b7c4d210..29e00e6e 100644
--- a/src/Components/UploadPageComponents/DragAndDrop.tsx
+++ b/src/Components/UploadPageComponents/DragAndDrop.tsx
@@ -21,52 +21,51 @@ import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import {DottedBox, BlueButton} from './StyledComponents.js';
import FileToUpload from './FileToUpload'
import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
+import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
type Props = {
draftID : string;
}
const UploadMediaComponent: React.FC<Props> = ({draftID, children}) => {
- const [filesToUpload, setFilesToUpload] = useState([] as FileToUpload[]);
+ const [filesToUpload, setFilesToUpload] = useState<FileToUpload | undefined>(undefined);
const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const files: FileList | null = e.target.files;
if(!files) return;
- let filesToUpload: FileToUpload[] = [];
- for (let i = 0; i < files.length; i++) {
- let config = getAxiosConfig()
- filesToUpload.push(new FileToUpload(files[i], files[i].name, draftID));
- }
+ let fileToUpload: FileToUpload = new FileToUpload(files[0], files[0].name, draftID);
- setFilesToUpload(filesToUpload);
+ setFilesToUpload(fileToUpload);
+ if (fileToUpload != undefined){
+ fileToUpload.uploadFile();
+ }
};
- const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
- e.preventDefault();
- for (let i = 0; i < filesToUpload.length; i++) {
- filesToUpload[i].uploadFile();
- }
- };
return (
<div className="upload-container">
<h2 className="upload-title">File Uploader</h2>
<div className="upload-form">
- <form id="file_upload" onSubmit={onFormSubmit}>
- <div className="upload-file-select">
- <label htmlFor="file_1">Select files for upload</label>
- <input id="file_1" type="file" multiple onChange={onFileChange}/>
- </div>
-
- <div className="upload-file-list">
- {filesToUpload.map((f,i) => <div className="upload-file" key={i}>{f.name} - {f.file.size}bytes</div>)}
- </div>
-
- <div className="upload-submit">
- <input type="submit" value="submit"/>
- </div>
+ <form id="file_upload">
+ <DottedBox
+
+ >
+ <AddAPhotoIcon className="icon"/>
+ <input
+ type="file"
+ onChange = {onFileChange}
+ id="upload-file-thumbnail"
+ style={{display : "none"}}
+ />
+ <BlueButton>
+ <label htmlFor="upload-file-thumbnail" style={{width : "inherit", cursor : "pointer"}}>
+ ESCOLHER IMAGEM
+ </label>
+ </BlueButton>
+ <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+ </DottedBox>
</form>
</div>
</div>
@@ -75,6 +74,19 @@ const UploadMediaComponent: React.FC<Props> = ({draftID, children}) => {
UploadMediaComponent.displayName = 'UploadMedia';
export default UploadMediaComponent;
+{/*<div className="upload-file-select">
+ <label htmlFor="file_1">Select files for upload</label>
+ <input id="file_1" type="file" multiple onChange={onFileChange}/>
+</div>
+
+<div className="upload-file-list">
+ {filesToUpload.map((f,i) => <div className="upload-file" key={i}>{f.name} - {f.file.size}bytes</div>)}
+</div>
+
+<div className="upload-submit">
+ <input type="submit" value="submit"/>
+</div>*/}
+
{/*
const [dropDepth, setDropDepth] = useState(0)
const [inDropZone, toggleInDropZone] = useState(false)
diff --git a/src/Components/UploadPageComponents/FileToUpload.ts b/src/Components/UploadPageComponents/FileToUpload.ts
index 96925007..9812ed81 100644
--- a/src/Components/UploadPageComponents/FileToUpload.ts
+++ b/src/Components/UploadPageComponents/FileToUpload.ts
@@ -1,7 +1,7 @@
export default class FileToUpload {
static chunkSize = 262144;
readonly request: XMLHttpRequest;
- static uploadUrl = 'https://api.portalmec.c3sl.ufpr.br/v1/learning_objects/1231';
+ readonly uploadUrl: string;
readonly file: File;
readonly name: string;
readonly draftID: string;
@@ -17,6 +17,7 @@ export default class FileToUpload {
this.file = file;
this.name = name;
this.draftID = draftID;
+ this.uploadUrl = 'https://api.portalmec.c3sl.ufpr.br/v1/learning_objects/' + draftID + '/chunk'
this._chunkIdentifier = draftID + '-' + this.name;
this._chunkNumber = 0;
@@ -25,13 +26,21 @@ export default class FileToUpload {
}
uploadFile() {
- this.request.open('POST', FileToUpload.uploadUrl, true);
+ this.request.open('POST', this.uploadUrl, true);
let chunk: Blob = this.file.slice(this.currentChunkStartByte, this.currentChunkFinalByte); // split the file according to the boundaries
- this.request.setRequestHeader('Content-Range', `bytes ${this.currentChunkStartByte}-${this.currentChunkFinalByte}/${this.file.size}`);
- //this.request.setRequestHeader('uid', sessionStorage.getItem('@portalmec/uid'))
- //this.request.setRequestHeader('client', sessionStorage.getItem('@portalmec/clientToken'))
+ //set necessary headers
+ this.request.setRequestHeader('Content-Range', `bytes ${this.currentChunkStartByte}-${this.currentChunkFinalByte}/${this.file.size}`);
+ if (sessionStorage.getItem('@portalmec/uid') != undefined) {
+ this.request.setRequestHeader('uid', sessionStorage.getItem('@portalmec/uid')!)
+ }
+ if (sessionStorage.getItem('@portalmec/clientToken') != undefined) {
+ this.request.setRequestHeader('client', String(sessionStorage.getItem('@portalmec/clientToken')))
+ }
+ if (sessionStorage.getItem('@portalmec/accessToken') != undefined) {
+ this.request.setRequestHeader('access-token', String(sessionStorage.getItem('@portalmec/accessToken')))
+ }
this.request.onload = () => {
const remainingBytes = this.file.size - this.currentChunkFinalByte;
@@ -54,6 +63,7 @@ export default class FileToUpload {
this._chunkNumber = this._chunkNumber + 1
}
+ //add attributes
const formData = new FormData();
formData.append('_chunkFilename', this.file.name);
formData.append('_chunkIdentifier', this._chunkIdentifier);
@@ -64,6 +74,13 @@ export default class FileToUpload {
formData.append('_totalSize', String(this.file.size));
formData.append('file', chunk);
+ this.request.onreadystatechange = (request: XMLHttpRequest, event: Event): any => {
+ if(request.readyState === XMLHttpRequest.DONE){
+ console.log(request.getResponseHeader('access-token'))
+ sessionStorage.setItem('@portalmec/accessToken', request.getResponseHeader('access-token')!)
+ }
+ }
this.request.send(formData);// send it now!
}
+
}
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
index 9b9db27a..61a95c3e 100644
--- a/src/Components/UploadPageComponents/UploadFileWrapper.js
+++ b/src/Components/UploadPageComponents/UploadFileWrapper.js
@@ -63,7 +63,7 @@ export default function UploadFileWrapper (props) {
<div className="upload-title"> Enviar Recurso</div>
<div className="flex-column">
{/*props.draftID*/}
- <UploadMediaComponent draftID={'123123'}/>
+ <UploadMediaComponent draftID={props.draftID}/>
<div className="strike-box">
<div className="strike"/><h3>ou</h3><div className="strike"/>
</div>
diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js
index 78e85b85..0c113cd2 100644
--- a/src/Pages/PublicationPermissionsPage.js
+++ b/src/Pages/PublicationPermissionsPage.js
@@ -167,8 +167,8 @@ export default function PermissionsContainer(props) {
<Styledspan
style={
unavailableButton
- ? { color: "#666666" }
- : { color: "#ffffff" }
+ ? { color: "#666666", fontWeight : "600" }
+ : { color: "#ffffff", fontWeight : "600" }
}
>
Continuar{" "}
@@ -177,10 +177,10 @@ export default function PermissionsContainer(props) {
<Button
style={{
marginLeft: "45px",
- backgroundColor: "#e9e9e9"
+ backgroundColor: "#e9e9e9",
}}
>
- <Styledspan style={{ color: "rgb(102, 102, 102)" }}>
+ <Styledspan style={{ color: "rgb(102, 102, 102)" , fontWeight : "600 !important"}}>
Cancelar
</Styledspan>
</Button>
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index 57fad683..08992d89 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -109,7 +109,7 @@ export default function UploadPage (props) {
return (
<React.Fragment>
{
- state.currentUser.id === '' ?
+ state.currentUser.id !== '' ?
(
<React.Fragment>
<Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
--
GitLab