import { forwardRef, useCallback, useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import PropTypes from 'prop-types'
import {
AppBar,
Avatar,
Button,
Container,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
Grid,
IconButton,
List,
ListItem,
ListItemAvatar,
ListItemText,
Paper,
Slide,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextareaAutosize,
Toolbar,
Tooltip,
Typography,
Box,
TextField
} from '@material-ui/core'
import { blue } from '@material-ui/core/colors'
import { makeStyles } from '@material-ui/core/styles'
import CloseIcon from '@material-ui/icons/Close'
import { fetchSchematics, fetchGallery } from '../../redux/dashboardSlice'
import {
fetchDiagram,
fetchSchematic,
setSchScriptDump,
setShowDot
} from '../../redux/saveSchematicSlice'
import { setScriptTaskId } from '../../redux/simulationSlice'
import store from '../../redux/store'
import api from '../../utils/Api'
import {
getDateTime as getDate,
getUppercaseInitial,
sanitizeTitle,
saveToFile
} from '../../utils/GalleryUtils'
import { renderGalleryXML } from './Helper/ToolbarTools'
const Transition = forwardRef(function Transition (props, ref) {
return
})
// Dialog box to display generated netlist
export function NetlistModal ({ open, close, netlist }) {
const title = useSelector(state => state.saveSchematic.title)
const createNetlistFile = () => {
const titleA = sanitizeTitle(title)
const name = process.env.REACT_APP_NAME
saveToFile(`${titleA}_${name}_on_Cloud.cir`, 'text/plain', netlist)
}
const typography2 = 'Current netlist for given ' + process.env.REACT_APP_SMALL_DIAGRAM_NAME + '...'
return (
)
}
NetlistModal.propTypes = {
open: PropTypes.bool,
close: PropTypes.func,
netlist: PropTypes.string
}
const useStyles = makeStyles((theme) => ({
appBar: {
position: 'relative'
},
title: {
marginLeft: theme.spacing(2),
flex: 1
},
header: {
padding: theme.spacing(5, 0, 6),
color: '#fff'
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
backgroundColor: '#404040',
color: '#fff'
},
avatar: {
width: theme.spacing(4),
height: theme.spacing(4),
backgroundColor: blue[100],
color: blue[600]
}
}))
//To get type of variable from map value type
const getType = (type) => {
let type_name = ''
switch (type) {
case '1': type_name = 'Double'; break
case '2': type_name = 'Polynomial'; break
case '4': type_name = 'Boolean'; break
case '10': type_name = 'String'; break
default: type_name = 'N/A'; break
}
return type_name
}
// Screen to display information about as keyboard shortcuts, units table and simulation modes
export function HelpScreen ({ open, close }) {
const classes = useStyles()
return (
)
}
HelpScreen.propTypes = {
open: PropTypes.bool,
close: PropTypes.func
}
export function ScriptScreen ({ isOpen, onClose }) {
const scriptDump = useSelector(state => state.saveSchematic.scriptDump)
const title = useSelector(state => state.saveSchematic.title)
const showDot = useSelector(state => state.saveSchematic.showDot)
const hasScript = useSelector(state => state.saveSchematic.hasScript)
const dispatch = useDispatch()
const [result, setResult] = useState('No output yet...')
const [variables, setVariables] = useState([])
const scriptHandler = (e) => {
dispatch(setSchScriptDump(e.target.value))
dispatch(setShowDot(true))
}
const sendScriptNetlist = useCallback((file, type) => {
netlistConfig(file, type)
.then((response) => {
const data = response.data
const taskId = data.task_id
dispatch(setScriptTaskId(taskId))
console.log('taskId2:', taskId)
setResult(data.output || 'No output available.')
setVariables(data.variables)
})
.catch(function (error) {
console.error(error)
})
}, [dispatch])
const prepareScriptNetlist = useCallback((scriptDump) => {
const titleA = sanitizeTitle(title)
const myblob = new Blob([scriptDump], {
type: 'text/plain'
})
const file = new File([myblob], `${titleA}.sce`, { type: 'text/sce', lastModified: Date.now() })
const type = 'SCRIPT'
sendScriptNetlist(file, type)
}, [sendScriptNetlist, title])
const executeScript = useCallback(() => {
const scriptDump = store.getState().saveSchematic.scriptDump
if (!scriptDump) {
return
}
dispatch(setScriptTaskId(''))
prepareScriptNetlist(scriptDump)
dispatch(setShowDot(false))
}, [dispatch, prepareScriptNetlist])
useEffect(() => {
const isSelenium = typeof navigator !== 'undefined' && navigator.webdriver === true
if (isSelenium || !hasScript) {
return
}
const timer = setTimeout(() => {
executeScript()
}, 1000)
return () => clearTimeout(timer)
}, [executeScript, hasScript])
async function netlistConfig (file, type) {
const formData = new FormData()
formData.append('app_name', process.env.REACT_APP_NAME)
formData.append('file', file)
formData.append('type', type)
const config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
return await api.post('simulation/upload', formData, config)
}
const resetCode = () => {
dispatch(setSchScriptDump(''))
dispatch(setShowDot(false))
dispatch(setScriptTaskId(''))
setResult('No output yet...')
setVariables('')
}
return (
)
}
// PropTypes validation
ScriptScreen.propTypes = {
isOpen: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired
}
// Image Export Dialog box
const ImgTypes = ['PNG', 'JPG', 'SVG']
export function ImageExportDialog (props) {
const classes = useStyles()
const { onClose, open } = props
const handleClose = () => {
onClose('')
}
const handleListItemClick = (value) => {
onClose(value)
}
return (
)
}
ImageExportDialog.propTypes = {
onClose: PropTypes.func.isRequired,
open: PropTypes.bool.isRequired
}
// Dialog box to open saved Schematics
export function OpenSchDialog (props) {
const { open, close, openLocal } = props
const [isLocal, setisLocal] = useState(true)
const [isGallery, setisGallery] = useState(false)
const details = useSelector(state => state.saveSchematic.details)
const isAuthenticated = useSelector(state => state.auth.isAuthenticated)
const user = useSelector(state => state.auth.user)
const schematics = useSelector(state => state.dashboard.schematics)
const GallerySchSample = useSelector(state => state.dashboard.gallery)
const dispatch = useDispatch()
useEffect(() => {
dispatch(fetchGallery())
}, [dispatch])
useEffect(() => {
const xmlData = store.getState().saveSchematic.xmlData
if (xmlData) {
renderGalleryXML(xmlData)
}
}, [])
const title = 'Open ' + process.env.REACT_APP_DIAGRAM_NAME
const typography1 = 'You don\'t have any saved ' + process.env.REACT_APP_SMALL_DIAGRAMS_NAME + '...'
return (
)
}
OpenSchDialog.propTypes = {
close: PropTypes.func.isRequired,
open: PropTypes.bool.isRequired,
openLocal: PropTypes.func.isRequired
}