From d0d0a6c88975d3788a5691617d96e2aa8fd2ac19 Mon Sep 17 00:00:00 2001 From: Matheus Freitas Date: Mon, 27 Jan 2020 10:47:13 -0300 Subject: [PATCH] Tutorial integration (#1208) * Integrating the tutorial api into the eyeballing application * Integrating the tutorial api into the eyeballing application * Small revision after Glauber's pull request validation --- frontend/eyeballing/package.json | 1 + frontend/eyeballing/src/api/Api.js | 2 + frontend/eyeballing/src/components/Header.js | 36 +++++++- .../src/components/TutorialDialog.js | 85 +++++++++++++++++++ frontend/eyeballing/src/home.js | 3 + 5 files changed, 124 insertions(+), 3 deletions(-) create mode 100644 frontend/eyeballing/src/components/TutorialDialog.js diff --git a/frontend/eyeballing/package.json b/frontend/eyeballing/package.json index dba69b6ab..dac5d8d6f 100644 --- a/frontend/eyeballing/package.json +++ b/frontend/eyeballing/package.json @@ -15,6 +15,7 @@ "prop-types": "^15.7.2", "react": "^16.8.3", "react-dom": "^16.8.3", + "react-player": "^1.14.2", "react-router-dom": "^5.0.1", "react-virtuoso": "^0.12.1", "react-window": "^1.8.2", diff --git a/frontend/eyeballing/src/api/Api.js b/frontend/eyeballing/src/api/Api.js index 7cadbd776..35bf0f164 100644 --- a/frontend/eyeballing/src/api/Api.js +++ b/frontend/eyeballing/src/api/Api.js @@ -152,6 +152,8 @@ class DriApi { getDatasetCommentsByType = (dts_dataset, type) => axios.get('/comment/dataset/', { params: { dts_dataset, dts_type: type }, }).then(res => res.data); + + getTutorial = () => axios.get('/tutorial/', { params: { app_name: 'tile_inspection' } }).then(res => res.data); } export default DriApi; diff --git a/frontend/eyeballing/src/components/Header.js b/frontend/eyeballing/src/components/Header.js index 42e8eefdc..7b04980fa 100644 --- a/frontend/eyeballing/src/components/Header.js +++ b/frontend/eyeballing/src/components/Header.js @@ -9,9 +9,11 @@ import HomeIcon from '@material-ui/icons/Home'; import MenuItem from '@material-ui/core/MenuItem'; import Menu from '@material-ui/core/Menu'; import MenuIcon from '@material-ui/icons/Menu'; +import HelpIcon from '@material-ui/icons/Help'; import SelectReleases from './SelectReleases'; import logo from '../assets/img/icon-des.png'; import { logout } from '../api/Api'; +import TutorialDialog from './TutorialDialog'; const styles = theme => ({ appBar: { @@ -35,10 +37,11 @@ const styles = theme => ({ function Header(props) { const { - classes, title, username, releases, currentRelease, + classes, title, username, releases, currentRelease, tutorial, } = props; const [anchorEl, setAnchorEl] = React.useState(null); + const [tutorialOpen, setTutorialOpen] = React.useState(false); function handleClick(event) { setAnchorEl(event.currentTarget); @@ -53,6 +56,14 @@ function Header(props) { logout(); } + function handleHomeEyeballing() { + const { protocol } = window.location; + const { host } = window.location; + const location = `${protocol}//${host}/eyeballing`; + + window.location.assign(location); + } + function handleHome() { const { protocol } = window.location; const { host } = window.location; @@ -65,11 +76,15 @@ function Header(props) { setAnchorEl(null); } + function handleHelp() { + setTutorialOpen(true); + } + return ( - + logo DES @@ -91,12 +106,21 @@ function Header(props) { + + + + + + setTutorialOpen(false)} + data={tutorial} + /> ); } diff --git a/frontend/eyeballing/src/components/TutorialDialog.js b/frontend/eyeballing/src/components/TutorialDialog.js new file mode 100644 index 000000000..8a3b7fb9c --- /dev/null +++ b/frontend/eyeballing/src/components/TutorialDialog.js @@ -0,0 +1,85 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import Dialog from '@material-ui/core/Dialog'; +import Grid from '@material-ui/core/Grid'; +import DialogContent from '@material-ui/core/DialogContent'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import CloseIcon from '@material-ui/icons/Close'; +import Divider from '@material-ui/core/Divider'; +import { makeStyles } from '@material-ui/core/styles'; +import YouTubePlayer from 'react-player/lib/players/YouTube'; + +const useStyles = makeStyles(theme => ({ + closeButton: { + position: 'absolute', + right: theme.spacing(1), + top: theme.spacing(1), + color: theme.palette.grey[500], + }, + closeIcon: { + fontSize: '1rem', + }, + playerWrapper: { + position: 'relative', + }, + blockWrapper: { + marginBottom: theme.spacing(4), + }, + contentWrapper: { + marginTop: theme.spacing(2), + }, +})); + +function TutorialDialog({ + open, + setClose, + data, +}) { + const classes = useStyles(); + + return ( + + + Tutorial + + + + + + {data.map(row => ( + + +
+ + {row.ttr_title} + + + {row.ttr_description} + +
+ +
+
+ + + + ))} + + + + ); +} + +TutorialDialog.propTypes = { + open: PropTypes.bool.isRequired, + setClose: PropTypes.func.isRequired, + data: PropTypes.arrayOf(PropTypes.object).isRequired, +}; + +export default TutorialDialog; diff --git a/frontend/eyeballing/src/home.js b/frontend/eyeballing/src/home.js index 12ce5b8ba..05031d7b9 100644 --- a/frontend/eyeballing/src/home.js +++ b/frontend/eyeballing/src/home.js @@ -134,6 +134,7 @@ function Home() { const [totalCount, setTotalCount] = useState(0); const [commentsWithFeature, setCommentsWithFeature] = useState([]); const datasetLoading = useRef(false); + const [tutorial, setTutorial] = useState([]); const api = new DriApi(); @@ -152,6 +153,7 @@ function Home() { setReleases(res); setCurrentRelease(res.length > 0 ? res[0].id : ''); }); + api.getTutorial().then(res => setTutorial(res)); }, []); const loadMoreDatasets = useCallback((e) => { @@ -409,6 +411,7 @@ function Home() { title="Tile Inspection" username={username} releases={releases} + tutorial={tutorial} currentRelease={currentRelease} onChangeRelease={onChangeRelease} />