diff --git a/src/actions/dataset.js b/src/actions/dataset.js index fffdbdc..6ff71f0 100644 --- a/src/actions/dataset.js +++ b/src/actions/dataset.js @@ -65,8 +65,10 @@ export function receiveDatasets(type, json){ }); }; } -export function fetchDatasets(){ - let url = `${config.hostname}/clowder/api/datasets?superAdmin=true&limit=10`; +export function fetchDatasets(when, date, limit="5"){ + let url = `${config.hostname}/clowder/api/datasets?superAdmin=true&limit=${limit}`; + if (date) url = `${url}&date=${date}`; + if (when) url = `${url}&when=${when}`; return (dispatch) => { return fetch(url, {mode:"cors", headers: getHeader()}) .then((response) => { diff --git a/src/components/App.jsx b/src/components/App.jsx index 2adc1b6..f9e88c3 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -19,6 +19,9 @@ export default function App(props) { const [fileMetadataList, setFileMetadataList] = useState([]); const [fileThumbnailList, setFileThumbnailList] = useState([]); const [datasetThumbnailList, setDatasetThumbnailList] = useState([]); + const [lastDataset, setLastDataset] = useState([]); + const [firstDataset, setFirstDataset] = useState([]); + const [limit, setLimit] = useState(5); const [paths, setPaths] = useState([]); @@ -40,11 +43,10 @@ export default function App(props) { // component did mount useEffect(() => { - listDatasets(); + listDatasets(null, null, limit); }, []); useEffect(() => { - (async () => { if (datasets !== undefined && datasets.length > 0) { @@ -57,6 +59,11 @@ export default function App(props) { } })); setDatasetThumbnailList(datasetThumbnailListTemp); + + // find last and first dataset for pagination + setFirstDataset(datasets[0]) + setLastDataset(datasets[datasets.length - 1]); + } })(); }, [datasets]) @@ -87,6 +94,16 @@ export default function App(props) { })(); }, [filesInDataset]) + const previous = () => { + let date = firstDataset["created"] !== undefined? new Date(firstDataset["created"]) : null; + if (date) listDatasets("b", date.toISOString(), limit); + } + + const next = () => { + let date = lastDataset["created"] !== undefined? new Date(lastDataset["created"]) : null; + if (date) listDatasets("a", date.toISOString(), limit); + } + const selectDataset = (selectedDatasetId) => { // pass that id to dataset component setSelectedDatasetId(selectedDatasetId); @@ -173,7 +190,10 @@ export default function App(props) { (() => { if (selectedDatasetId === "") { return + thumbnails={datasetThumbnailList} + previous={previous} + next={next} + /> } else if (selectedFileId === "") { return diff --git a/src/components/Dashbard.jsx b/src/components/Dashbard.jsx index 0a8e064..e5a86ca 100644 --- a/src/components/Dashbard.jsx +++ b/src/components/Dashbard.jsx @@ -1,6 +1,6 @@ import React, {useState} from "react"; import {makeStyles} from "@material-ui/core/styles"; -import {AppBar, Box, Link, Divider, Grid, ListItem, Tab, Tabs, Typography} from "@material-ui/core"; +import {AppBar, Box, Link, Divider, Grid, ListItem, Tab, Tabs, Typography, Button} from "@material-ui/core"; import BusinessCenterIcon from '@material-ui/icons/BusinessCenter'; const useStyles = makeStyles((theme) => ({ @@ -42,7 +42,7 @@ const useStyles = makeStyles((theme) => ({ export default function Dashboard(props) { const classes = useStyles(); - const {datasets, selectDataset, thumbnails, ...other} = props; + const {datasets, selectDataset, thumbnails, previous, next, ...other} = props; const [selectedTabIndex, setSelectedTabIndex] = useState(0); @@ -97,6 +97,8 @@ export default function Dashboard(props) { : <> } + + diff --git a/src/components/File.jsx b/src/components/File.jsx index f5fb1ef..e566b0b 100644 --- a/src/components/File.jsx +++ b/src/components/File.jsx @@ -4,6 +4,10 @@ import {AppBar, Box, Divider, Grid, Tab, Tabs, Typography} from "@material-ui/co import {makeStyles} from "@material-ui/core/styles"; import {ClowderInput} from "./styledComponents/ClowderInput"; import {ClowderButton} from "./styledComponents/ClowderButton"; +import Audio from "./previewers/Audio"; +import Video from "./previewers/Video"; +import {downloadResource} from "../utils/common"; +import Thumbnail from "./previewers/Thumbnail"; const useStyles = makeStyles((theme) => ({ appBar: { @@ -25,47 +29,42 @@ export default function File(props) { const {fileMetadata, fileExtractedMetadata, fileMetadataJsonld, filePreviews, fileId, ...other} = props; const [selectedTabIndex, setSelectedTabIndex] = useState(0); + const [previews, setPreviews] = useState([]); - // component did mount - useEffect(() => { - // attach helper jquery - const script = document.createElement("script"); - script.src = `../public/clowder/assets/javascripts/previewers/helper.js`; - script.async = true; - document.body.appendChild(script); - return () => { - document.body.removeChild(script); - } - }, []); + // // component did mount + // useEffect(() => { + // // attach helper jquery + // const script = document.createElement("script"); + // script.src = `../public/clowder/assets/javascripts/previewers/helper.js`; + // script.async = true; + // document.body.appendChild(script); + // return () => { + // document.body.removeChild(script); + // } + // }, []); useEffect(() => { - // remove last previewer script attached - const previewerScripts = document.getElementsByClassName("previewer-script"); - while (previewerScripts.length > 0) { - previewerScripts[0].parentNode.removeChild(previewerScripts[0]); - } + (async () => { + if (filePreviews !== undefined && filePreviews.length > 0 && filePreviews[0].previews !== undefined) { + let previewsTemp = []; + await Promise.all(filePreviews[0].previews.map(async (filePreview) => { + // download resources + let Configuration = {}; + Configuration.previewType = filePreview["p_id"].replace(" ", "-").toLowerCase(); + Configuration.url = `${config.hostname}${filePreview["pv_route"]}?superAdmin=true`; + Configuration.fileid = filePreview["pv_id"]; + Configuration.previewer = `/public${filePreview["p_path"]}/`; + Configuration.fileType = filePreview["pv_contenttype"]; - if (filePreviews !== undefined && filePreviews.length > 0 && filePreviews[0].previews !== undefined) { - let uniquePid = []; - // look at which previewer to load - filePreviews[0].previews.map((filePreview, index) => { + let resourceURL = `${config.hostname}${filePreview["pv_route"]}?superAdmin=true`; + Configuration.resource = await downloadResource(resourceURL); - // do not attach same previewer twice - if (uniquePid.indexOf(filePreview["p_id"]) === -1) { - uniquePid.push(filePreview["p_id"]); + previewsTemp.push(Configuration); - // attach previwer jquery - const script = document.createElement("script"); - script.className = "previewer-script"; - script.src = `../public${filePreview["p_path"]}/${filePreview["p_main"]}`; - script.async = true; - document.body.appendChild(script); - return () => { - document.body.removeChild(script); - } - } - }); - } + })); + setPreviews(previewsTemp); + } + })(); }, [filePreviews]); const handleTabChange = (event, newTabIndex) => { @@ -87,27 +86,18 @@ export default function File(props) { { - filePreviews !== undefined && filePreviews.length > 0 && filePreviews[0].previews !== undefined - ? - filePreviews[0].previews.map((filePreview, index) => { - const Configuration = {}; - Configuration.tab = `#previewer_${filePreviews[0]["file_id"]}_${index}`; - Configuration.url = `${config.hostname}${filePreview["pv_route"]}?superAdmin=true`; - Configuration.fileid = filePreview["pv_id"]; - Configuration.previewer = `/public${filePreview["p_path"]}/`; - Configuration.fileType = filePreview["pv_contenttype"]; - Configuration.APIKEY = config.apikey; - Configuration.authenticated = true; - // Configuration.metadataJsonld = fileMetadataJsonld; - - let previewId = filePreview["p_id"].replace(" ", "-").toLowerCase(); - return (
-
-
); - }) - : - <> + previews.map((preview) =>{ + if (preview["previewType"] === "audio"){ + return diff --git a/src/components/childComponents/BreadCrumb.jsx b/src/components/childComponents/BreadCrumb.jsx index 31f3ff2..7f2aa04 100644 --- a/src/components/childComponents/BreadCrumb.jsx +++ b/src/components/childComponents/BreadCrumb.jsx @@ -21,7 +21,6 @@ const useStyles = makeStyles((theme) => ({ fontWeight: "600", fontSize: "24px", color: "#6C757D", - textTransform: "capitalize" } })); diff --git a/src/components/previewers/Audio.jsx b/src/components/previewers/Audio.jsx new file mode 100644 index 0000000..19b052a --- /dev/null +++ b/src/components/previewers/Audio.jsx @@ -0,0 +1,6 @@ +import React from "react"; + +export default function Audio(props) { + const {fileId, audioSrc, ...other} = props; + return +} diff --git a/src/components/previewers/Thumbnail.jsx b/src/components/previewers/Thumbnail.jsx new file mode 100644 index 0000000..6a4b6cd --- /dev/null +++ b/src/components/previewers/Thumbnail.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Typography } from "@material-ui/core"; + +export default function Thumbnail(props){ + const {fileId, imgSrc, fileType, ...other} = props; + return ( + (() => { + if (fileType === "image/jpeg" || fileType === "image/jpg" || fileType === "image/png" + || fileType === "image/gif" || fileType === "image/bmp"){ + return img; + } + else if (fileType === "image/tiff"){ + return ; + } + else{ + return ERROR: Unrecognised image format.; + } + + })() + ) +} diff --git a/src/components/previewers/Video.jsx b/src/components/previewers/Video.jsx new file mode 100644 index 0000000..d338ca5 --- /dev/null +++ b/src/components/previewers/Video.jsx @@ -0,0 +1,8 @@ +import React from "react"; + +export default function Video(props) { + const {fileId, videoSrc, ...other} = props; + return (); +} diff --git a/src/containers/App.jsx b/src/containers/App.jsx index dfa21bb..356a14e 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -40,8 +40,8 @@ const mapDispatchToProps = (dispatch) => { listDatasetAbout: (datasetId) => { dispatch(fetchDatasetAbout(datasetId)); }, - listDatasets: () =>{ - dispatch(fetchDatasets()); + listDatasets: (when, date, limit) =>{ + dispatch(fetchDatasets(when, date, limit)); } }; }; diff --git a/src/reducers/dataset.js b/src/reducers/dataset.js index 3b86a0e..43c439e 100644 --- a/src/reducers/dataset.js +++ b/src/reducers/dataset.js @@ -1,6 +1,6 @@ import { RECEIVE_FILES_IN_DATASET, RECEIVE_DATASET_ABOUT, RECEIVE_DATASETS} from "../actions/dataset"; -const defaultState = {files: []}; +const defaultState = {files: [], about: {}, datasets: []}; const dataset = (state=defaultState, action) => { switch(action.type) { diff --git a/src/utils/common.js b/src/utils/common.js index ae06c68..5273326 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -26,6 +26,28 @@ export function getHeader() { // }); } +export async function downloadResource(url){ + let authHeader = getHeader(); + let response = await fetch(url, { + method: "GET", + mode: "cors", + headers: authHeader, + }); + + if (response.status === 200){ + let blob = await response.blob(); + return window.URL.createObjectURL(blob); + } + else if (response.status === 401){ + // TODO handle error + return null; + } + else { + // TODO handle error + return null; + } +} + // get current username // export function getCurrUsername(){ // if (process.env.DEPLOY_ENV === "local"){