Skip to content

Commit

Permalink
[ADD] feat: add/remove schematics to/from gallery
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kaustuv942
Kaustuv942 committed Jul 20, 2021
1 parent a8c9d24 commit 61f0961
Show file tree
Hide file tree
Showing 14 changed files with 462 additions and 36 deletions.
37 changes: 34 additions & 3 deletions eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import Canvg from 'canvg'
import { IconButton, Tooltip, Snackbar } from '@material-ui/core'
import { IconButton, Tooltip, Snackbar, Button } from '@material-ui/core'
import AddBoxOutlinedIcon from '@material-ui/icons/AddBoxOutlined'
import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline'
import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
Expand All @@ -26,11 +26,13 @@ import ImageOutlinedIcon from '@material-ui/icons/ImageOutlined'
import SystemUpdateAltOutlinedIcon from '@material-ui/icons/SystemUpdateAltOutlined'
import LibraryAddRoundedIcon from '@material-ui/icons/LibraryAddRounded'
import { Link as RouterLink } from 'react-router-dom'
import AddPhotoAlternateIcon from '@material-ui/icons/AddPhotoAlternate';
import { fetchRole } from '../../redux/actions/authActions'

import { NetlistModal, HelpScreen, ImageExportDialog, OpenSchDialog, SelectLibrariesModal } from './ToolbarExtension'
import { ZoomIn, ZoomOut, ZoomAct, DeleteComp, PrintPreview, ErcCheck, Rotate, GenerateNetList, Undo, Redo, Save, ClearGrid, RotateACW } from './Helper/ToolbarTools'
import { useSelector, useDispatch } from 'react-redux'
import { toggleSimulate, closeCompProperties, setSchXmlData, saveSchematic, openLocalSch } from '../../redux/actions/index'
import { toggleSimulate, closeCompProperties, setSchXmlData, saveSchematic, openLocalSch, saveToGallery } from '../../redux/actions/index'
import { RotateLeft } from '@material-ui/icons'
import CreateProject from '../Project/CreateProject'

Expand Down Expand Up @@ -98,7 +100,9 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
const schSave = useSelector((state) => state.saveSchematicReducer)

const dispatch = useDispatch()

useEffect(() => {
dispatch(fetchRole())
}, [dispatch])
// Netlist Modal Control
const [open, setOpen] = React.useState(false)
const [netlist, genNetlist] = React.useState('')
Expand Down Expand Up @@ -306,6 +310,24 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
}
}

// Handle Save to Gallery
const handleGalSave = () => {
if (auth.isAuthenticated !== true) {
setMessage('You are not Logged In')
handleSnacClick()
} else {
var xml = Save()
dispatch(setSchXmlData(xml))
var title = schSave.title
var description = schSave.description
exportImage('PNG').then((res) => {
dispatch(saveToGallery(title, description, xml, res))
})
setMessage('Saved To Gallery Successfully')
handleSnacClick()
}
}

// Save Schematics Locally
const handelLocalSchSave = () => {
var saveLocalData = {}
Expand Down Expand Up @@ -580,6 +602,15 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
<AddBoxOutlinedIcon fontSize="small" />
</IconButton>
<CreateProject/>
{ auth.roles && auth.roles.is_type_staff &&
<Tooltip title="Add to Gallery">
<IconButton color="inherit" className={classes.tools} size="small" onClick={handleGalSave}>
<AddPhotoAlternateIcon fontSize="medium" />
</IconButton>
</Tooltip>
}



</>
)
Expand Down
80 changes: 74 additions & 6 deletions eda-frontend/src/pages/Gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,15 @@ import {
} from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import { Link as RouterLink } from 'react-router-dom'
import GallerySchSample from '../utils/GallerySchSample'
// import GallerySchSample from '../utils/GallerySchSample'
import DeleteIcon from '@material-ui/icons/Delete'
import { useDispatch, useSelector } from 'react-redux'
import { fetchRole, deleteGallerySch} from '../redux/actions/index'




import api from '../utils/Api'

const useStyles = makeStyles((theme) => ({
mainHead: {
Expand Down Expand Up @@ -47,19 +55,42 @@ var images = require.context('../static/gallery', true)
function SchematicCard ({ sch }) {
const classes = useStyles()

const [GallerySchSample, setGallerySchSample] = React.useState([])
const [loading, setLoading] = React.useState(true)
useEffect(() => {
document.title = 'Gallery - eSim '
})

const config = {
headers: {
'Content-Type': 'application/json'
}
}
api.get('save/gallery', config)
.then((res) => {
console.log(res.data)
setGallerySchSample(res.data)
setLoading(false)
})

console.log(GallerySchSample)
}, [loading])
const auth = useSelector(state => state.authReducer)
const dispatch = useDispatch()
// For Fetching Saved Schematics
useEffect(() => {
dispatch(fetchRole())
}, [dispatch])

const imageName = images('./' + sch.media)
const handleDeleteGallery = () => {
dispatch(deleteGallerySch(sch.save_id))
}

return (
<>
<Card>
<CardActionArea>
<CardMedia
className={classes.media}
image={imageName}
image={sch.media}
title={sch.name}
/>
<CardContent>
Expand All @@ -82,6 +113,18 @@ function SchematicCard ({ sch }) {
>
Launch in Editor
</Button>
{/* <Tooltip title="Delete" placement="bottom" arrow> */}
{console.log(auth.roles)}
{auth.roles && auth.roles.is_type_staff &&
<Button>
<DeleteIcon
color="secondary"
fontSize="small"
// style={{ marginLeft: 'auto' }}
onClick={handleDeleteGallery}
/>
</Button>}
{/* </Tooltip> */}
</CardActions>
</Card>
</>
Expand All @@ -94,6 +137,9 @@ SchematicCard.propTypes = {
// Card displaying eSim gallery page header.
function MainCard () {
const classes = useStyles()
useEffect(() => {
document.title = 'Gallery - eSim '
})

return (
<Card className={classes.mainHead}>
Expand All @@ -111,7 +157,27 @@ function MainCard () {

export default function Gallery () {
const classes = useStyles()

const [GallerySchSample, setGallerySchSample] = React.useState([])
const [loading, setLoading] = React.useState(true)
useEffect(() => {
document.title = 'Gallery - eSim '

const config = {
headers: {
'Content-Type': 'application/json'
}
}
api.get('save/gallery', config)
.then((res) => {
console.log(res.data)
setGallerySchSample(res.data)
setLoading(false)
})

console.log(GallerySchSample)
// GallerySchSample = gal
}, [loading])

return (
<div className={classes.root}>
<CssBaseline />
Expand All @@ -130,8 +196,10 @@ export default function Gallery () {
</Grid>

{/* Listing Gallery Schematics */}
{console.log(GallerySchSample)}
{GallerySchSample.map(
(sch) => {
{console.log('kkc', sch)}
return (
<Grid item xs={12} sm={6} lg={4} key={sch.save_id}>
<SchematicCard sch={sch} />
Expand Down
4 changes: 2 additions & 2 deletions eda-frontend/src/pages/SchematiEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import PropertiesSidebar from '../components/SchematicEditor/PropertiesSidebar'
import LoadGrid from '../components/SchematicEditor/Helper/ComponentDrag.js'
import ComponentProperties from '../components/SchematicEditor/ComponentProperties'
import '../components/SchematicEditor/Helper/SchematicEditor.css'
import { fetchSchematic, loadGallery } from '../redux/actions/index'
import { fetchSchematic, fetchGallerySchematic } from '../redux/actions/index'
import { useDispatch } from 'react-redux'

const useStyles = makeStyles((theme) => ({
Expand Down Expand Up @@ -55,7 +55,7 @@ export default function SchematiEditor (props) {
console.log(cktid)
if (cktid.substr(0, 7) === 'gallery') {
// Loading Gallery schemaic.
dispatch(loadGallery(cktid.substr(7, cktid.length)))
dispatch(fetchGallerySchematic(cktid))
} else {
// Loading User on-cloud saved schemaic.
dispatch(fetchSchematic(cktid, version, branch))
Expand Down
1 change: 1 addition & 0 deletions eda-frontend/src/redux/actions/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export const SET_SCH_XML_DATA = 'SET_SCH_XML_DATA'
export const SET_SCH_SHARED = 'SET_SCH_SHARED'
export const CLEAR_DETAILS = 'CLEAR_DETAILS'
export const LOAD_GALLERY = 'LOAD_GALLERY'
export const LOAD_GALLERY_SCH = 'LOAD_GALLERY_SCH'

// Action for fetching on-cloud saved schematics for authenticated user to display in dashboard
export const FETCH_SCHEMATICS = 'FETCH_SCHEMATICS'
Expand Down
Loading

0 comments on commit 61f0961

Please sign in to comment.