Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F122199561
DetailCard.js
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Wed, Jul 16, 13:39
Size
12 KB
Mime Type
text/x-java
Expires
Fri, Jul 18, 13:39 (2 d)
Engine
blob
Format
Raw Data
Handle
27448632
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
DetailCard.js
View Options
import React, {useContext,useEffect,useState} from "react"
import {Context} from "../Context"
import { makeStyles } from '@material-ui/core/styles';
import "./detailscard.css"
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import { HiLink } from "react-icons/hi";
import DoneIcon from '@material-ui/icons/Done';
import WarningIcon from '@material-ui/icons/Warning';
import "./termcard.css"
import { BsUnlock } from "react-icons/bs";
import { GrDiamond } from "react-icons/gr";
import Chip from '@material-ui/core/Chip';
import ClearSharpIcon from '@material-ui/icons/ClearSharp';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
display: 'grid',
},
flexGrow: 1,
},
formControl: {
margin: theme.spacing(1),
width: 200,
},
selectEmpty: {
marginTop: theme.spacing(1),
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}));
function DetailsCard({details}) {
const { getSelectedInstitId,
setUrl,
url
}
= useContext(Context)
const classes = useStyles();
useEffect(() => {
setUrl(window.location.href)
},)
// const [issn, setIssn] = React.useState("");
if (details !== 'null') {
// // setInstitName(details.name)
return (
<div id={details.id}>
<Card className="detail-Card">
<CardContent>
{details.end_year &&
<Typography className={classes.title} color="textSecondary" gutterBottom
style={{backgroundColor:"lightgrey", text:"white"}}
>
<WarningIcon /> Inactive!
{details.starting_year &&
<div>
<p>From {details.starting_year} to {details.end_year}</p>
</div>
}
</Typography>
}
<Typography className={classes.title} color="textSecondary" gutterBottom>
<h4>{details.name}</h4>
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
<ul>
{details.issn && details.issn.map(item => {
return (
item.issn_type === "1" ?
<li>Print ISSN: {item.issn}</li>
: item.issn_type === "2" ?
<li>Electronic ISSN: {item.issn}</li>
: item.issn_type === "3" ?
<li>Other ISSN: {item.issn}</li>
:null
)
})}
</ul>
</Typography>
{details.publisher && details.publisher.map(item => {
return <div key={item.id}> <div >
<Button href={item.website} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Publisher: {item.name}</Button>
<Button href={item.oa_policies} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Publisher policies</Button>
</div></div>
})}
</Typography>
<Typography variant="h5" component="h2">
</Typography>
<Typography className={classes.pos} color="textSecondary">
{details.country && details.country.map(item => {
return <div key={item.id}>{item.name}</div>;
})}
{!details.end_year &&
<div>
Since {details.starting_year}
</div>
}
</Typography>
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
{details.oa_status ?
<div>
{details.oa_status.status !== "UNKNOWN" ?
<div>
{
details.oa_status.status === "Gold" ?
<p>
<abbr title={details.oa_status.description}>
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#FFD700", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
: details.oa_status.status === "Diamond" ?
<>
<abbr title={details.oa_status.description}>
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <GrDiamond />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#B9F2FF", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
{/* {details.oa_status.status} */}
</abbr>
</>
:details.oa_status.status === "Full" ?
<p>
<abbr title={details.oa_status.description}>
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#ADD8E6", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
:details.oa_status.status === "hybrid" ?
<p>
<abbr title={details.oa_status.description}>
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#cfcdaa", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
:details.oa_status.status === "Green" ?
<p>
<abbr title={details.oa_status.description}>
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#DAF7A6", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
:details.oa_status.status === "none" ?
<p>
<abbr title={details.oa_status.description}>
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <ClearSharpIcon />}
label={details.oa_status.status}
className={classes.chip}
style={{ background: "#FF7F7F", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
:null
}
</div>
:null}
</div>
:null}
</Typography>
{details.language &&
details.language.map(item =>(
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
<p><small>Language: {item.name}</small></p>
</Typography>
))
}
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
{details.doaj_seal &&
<div >
<Button href="https://doaj.org/apply/seal/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/> DOAJ seal</Button>
</div>
}
{details.doaj_status &&
<div >
<Button
href={"https://doaj.org/toc/"+ details.issn[0].issn}
target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Listed on DOAJ</Button>
</div>
}
{details.lockss &&
<div >
<Button href="https://www.lockss.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with LOCKSS</Button>
</div>
}
{details.portico &&
<div >
<Button href="https://www.portico.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with Portico</Button>
</div>
}
{details.nlch &&
<div >
<Button href="https://consortium.ch/nationallizenzen/?lang=en" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Swiss National licences</Button>
</div>
}
{details.qoam_av_score &&
<div >
<br />
<Button href="https://www.qoam.eu/" target="blank" rel="noopener noreferrer" size="small">QOAM score : {details.qoam_av_score}</Button>
</div>
}
{details.ror ?
<div >
<Button href={"https://ror.org/"+details.ror} target="blank" rel="noopener noreferrer" size="small">Ror ID: {details.ror}</Button>
</div>
:null}
{details.fundref ?
<div>
<Button href={"https://search.crossref.org/funding?q="+details.fundref} target="blank" rel="noopener noreferrer" size="small">Fundref Id: {details.fundref}</Button>
</div>
:null}
</Typography>
</CardContent>
<CardActions>
{details.website ?
<Button href={details.website} target="blank" rel="noopener noreferrer" size="small"><HiLink/> Website </Button>
:null}
{details.oa_options ?
<Button href={details.oa_options} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Open Access Infos</Button>
:null}
{details.ir_name ?
<div>
<Button href={details.ir_url} target="blank" rel="noopener noreferrer" size="small"><HiLink/>{details.ir_name}</Button>
</div>
:null}
</CardActions>
</Card>
</div>
)
}
else {
return null
}
}
export default DetailsCard
Event Timeline
Log In to Comment