@material-ui/core#ExpansionPanelDetails JavaScript Examples
The following examples show how to use
@material-ui/core#ExpansionPanelDetails.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Ability.jsx From archeage-tools with The Unlicense | 6 votes |
|
Ability = ({ name, description, counters, deadly }) => (
<ExpansionPanel elevation={2}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${name}-content`}
id={`${name}-content`}
>
<Typography>
{deadly === true &&
<Tooltip title="Caution! Deadly Ability">
<span className="deadly-icon" />
</Tooltip>
}
{name}
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
{description &&
<Typography>
{description}
</Typography>}
{counters !== undefined && counters.length > 0 &&
<>
<Typography variant="subtitle2" color="primary" component="div" className="tips">Tips:</Typography>
<ul className="dashed">
{counters.map((tip, i) => <li key={`${name}-${i}`}><Typography component="span">{tip}</Typography></li>)}
</ul>
</>}
</ExpansionPanelDetails>
</ExpansionPanel>
)
Example #2
| Source File: MyGame.jsx From archeage-tools with The Unlicense | 5 votes |
|
render() {
const { mobile, open, onClose } = this.props;
return (
<Dialog
open={open}
onClose={onClose}
fullScreen={mobile}
maxWidth="lg"
>
<AppBar position="static">
<Toolbar variant="dense">
<Typography variant="h6" className="title-text">My ArcheAge</Typography>
<Tooltip title="Close">
<IconButton onClick={onClose} color="inherit">
<CloseIcon />
</IconButton>
</Tooltip>
</Toolbar>
</AppBar>
<DialogContent className="my-game-wrapper">
<ExpansionPanel expanded={this.state[SERVER]} onChange={this.handleChange(SERVER)}>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography>Server</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Server />
</ExpansionPanelDetails>
</ExpansionPanel>
{/*
<ExpansionPanel expanded={this.state[CHARACTERS]} onChange={this.handleChange(CHARACTERS)}>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography>My Characters</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelDetails>
</ExpansionPanel>
*/}
<ExpansionPanel expanded={this.state[RESIDENCE]} onChange={this.handleChange(RESIDENCE)}>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography>Residence</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Residence />
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel expanded={this.state[PROFICIENCIES]} onChange={this.handleChange(PROFICIENCIES)}>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography>Proficiencies</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Proficiencies />
</ExpansionPanelDetails>
</ExpansionPanel>
</DialogContent>
</Dialog>
);
}
Example #3
| Source File: TransactionList.js From A2 with GNU General Public License v3.0 | 5 votes |
|
populateBills(bills) {
const transaction = bills.map(bill => (
<ExpansionPanel className={styles.bills}>
<ExpansionPanelSummary>
<div className={styles.billSummary}>
<div className={styles.billTitle}>{bill.title}</div>
<div className={styles.billAmount}>
${Number(bill.total).toFixed(2)}
</div>
</div>
</ExpansionPanelSummary>
<ExpansionPanelDetails className={styles.payments}>
<div className={styles.paymentsTitle}>
<div className={styles.paymentHeaders}>
<Link
to={{
pathname: "split",
bill
}}
>
<EditIcon />
</Link>
<PaymentIcon />
</div>
<div className={styles.runningTotal}>
<div className={`${styles.billTitle} ${styles.percentage}`}>
(
{Math.round(
(calculateTotalPaid(bill) / calculateTotalOutstanding(bill)) *
100
)}
%){" "}
</div>
<div className={styles.billTitle}>
${calculateTotalPaid(bill).toFixed(2)}/$
{calculateTotalOutstanding(bill).toFixed(2)}
</div>
</div>
</div>
{bill.payments.map(payment => {
const label = `${payment.from} owes ${payment.to} $${Number(
payment.amount
).toFixed(2)}`;
return (
<div key={payment.id}>
<FormControlLabel
aria-label="Acknowledge"
onClick={() =>
this.markPaid({
payment_id: payment.payment_id,
is_paid: !payment.is_paid
})
}
onFocus={event => event.stopPropagation()}
control={<Checkbox checked={payment.is_paid} />}
label={label}
/>
</div>
);
})}
</ExpansionPanelDetails>
</ExpansionPanel>
));
if (transaction.length === 0) {
return (
<div className={styles.noTransactions}>
You have no outstanding transactions.
</div>
);
}
return transaction;
}
Example #4
| Source File: FAQ.js From Merch-Dropper-fe with MIT License | 4 votes |
|
FAQ = () =>{
const classes = useStyles();
return (
<div className={classes.root}>
<h2 style={{textAlign: "center", marginBottom: 50, fontSize: "1.6rem"}}>Frequently Asked Questions</h2>
<ExpansionPanel className={classes.expansion}>
<ExpansionPanelSummary
className={classes.panel}
expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>What is Merch Dropper?</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
It's the fastest way to set up a hassle free online storefront with your own designs! Upload designs and create products to create a drop-shipping online shop. Your store is yours, build your brand, raise money, and more. </Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel className={classes.expansion}>
<ExpansionPanelSummary
className={classes.panel}
expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>What is Stripe?</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Stripe is a software that allows stores to accept payments online. There is a 2.9% + $0.30 fee from stripe for each transaction.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel className={classes.expansion}>
<ExpansionPanelSummary
className={classes.panel}
expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>How do I add products to my store?</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
From your dashboard, you will click on "Add Product". From there you will upload the design that you would like to have on your merchandise, and select a color. Then click on preview design. If you are satisfied, click on Save & Continue. This will take you to a page where you can name your item, give it a price, and set a description. It is as easy at that.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel >
<ExpansionPanel className={classes.expansion}>
<ExpansionPanelSummary
className={classes.panel}
expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>How do I share my store with others?</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
When you create a store you are given a personalized domain name (merchdropper.store/your_store) that will be the storefront for your designed products. Share your new url address with friends, family, and followers! Copy and paste, text and even email at your heart's content; we don't judge.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel className={classes.expansion}>
<ExpansionPanelSummary
className={classes.panel}
expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>When a buyer buys one of my products, how will my order be fulfilled?</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
MerchDropper works with a drop shipment company. When the buyer places their order, the order gets sent to scalable press. Then scalable press will print the merchandise as ordered and will also ship to the buyer. Leaving it hands-free for you.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel >
<ExpansionPanelSummary
className={classes.panel}
expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>How is my profit per item calculated?</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Merch Dropper handles every aspect of supply including fees, taxes and shipping. We strictly calculate the cost to cover the expenses of a given order, leaving all of the profits to you. Merch Dropper doesn't keep a dime.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
)
}
Example #5
| Source File: EditQuiz.js From Quizzie with MIT License | 4 votes |
|
function EditQuiz(props) {
const quizId = props.match.params.id;
const [loading, setLoading] = useState(true);
const [redirect, setRedirect] = useState(false);
const [quizDetails, setQuizDetails] = useState({});
const [quizQuestions, setQuizQuestions] = useState([]);
const [fileError, setFileError] = useState(false);
const [serverError, setServerError] = useState(false);
const [popoverAnchor, setPopoverAnchor] = useState(null);
const popoverOpen = Boolean(popoverAnchor);
const [questionModal, setQuestionModal] = useState(false);
const [newQuestion, setNewQuestion] = useState("");
const [newQuestionError, setNewQuestionError] = useState(false);
const [option1, setOption1] = useState("");
const [option1Error, setOption1Error] = useState(false);
const [option2, setOption2] = useState("");
const [option2Error, setOption2Error] = useState(false);
const [option3, setOption3] = useState("");
const [option3Error, setOption3Error] = useState(false);
const [option4, setOption4] = useState("");
const [option4Error, setOption4Error] = useState(false);
const [correctOption, setCorrectOption] = useState(-1);
const [correctOptionError, setCorrectOptionError] = useState(false);
const [update, setUpdate] = useState(false);
const [updateId, setUpdateId] = useState(null);
const [deleteModal, setDeleteModal] = useState(false);
const [deleteQuestionModal, setDeleteQuestionModal] = useState(false);
const [quizRestartModal, setQuizRestartModal] = useState(false);
const [closeQuizModal, setCloseQuizModal] = useState(false);
const [responses, setResponses] = useState([]);
const [searchData, setSearchData] = useState(responses);
const [searchText, setSearchText] = useState("");
const [sortBy, setSortBy] = useState(-1);
const { executeRecaptcha } = useGoogleReCaptcha();
const onCloseHandle = () => {
setQuestionModal(false);
if (update) {
setUpdate(false);
setUpdateId(null);
clearModal();
}
};
const handlePopover = (event) => {
setPopoverAnchor(event.currentTarget);
};
const handlePopoverClose = () => {
setPopoverAnchor(null);
};
const onQuestionChange = (event) => {
setNewQuestion(event.target.value);
};
const handleOptionChange1 = (event) => {
setOption1(event.target.value);
};
const handleOptionChange2 = (event) => {
setOption2(event.target.value);
};
const handleOptionChange3 = (event) => {
setOption3(event.target.value);
};
const handleOptionChange4 = (event) => {
setOption4(event.target.value);
};
const handleCorrectOption = (event) => {
setCorrectOption(event.target.value);
};
const clearModal = () => {
setNewQuestion("");
setNewQuestionError(false);
setOption1("");
setOption1Error(false);
setOption2("");
setOption2Error(false);
setOption3("");
setOption3Error(false);
setOption4("");
setOption4Error(false);
setCorrectOption(-1);
setCorrectOptionError(false);
};
const handleFileDrop = (files) => {
const reader = new FileReader();
let questions = [];
reader.onabort = () => {
setFileError(true);
return;
};
reader.onerror = () => {
setFileError(true);
return;
};
reader.onload = () => {
csv.parse(reader.result, (err, data) => {
if (data === undefined) {
setFileError(true);
return;
}
data.map((question) => {
if (question[0].trim() === "") {
return null;
}
let obj = {
quizId: quizId,
description: question[0],
options: [
{ text: question[1] },
{ text: question[2] },
{ text: question[3] },
{ text: question[4] },
],
correctAnswer: question[5],
};
questions.push(obj);
});
submitCSV(questions);
});
};
reader.readAsBinaryString(files[0]);
};
const submitCSV = async (questions) => {
setLoading(true);
let token = localStorage.getItem("authToken");
let url = "https://quizzie-api.herokuapp.com/question/csv";
let captcha = await executeRecaptcha("submit_csv");
let data = {
questions: questions,
captcha: captcha,
};
try {
await axios
.post(url, data, {
headers: {
"auth-token": token,
},
})
.then((res) => {
console.log(res);
setLoading(false);
clearModal();
onCloseHandle();
getQuizDetails();
});
} catch (error) {
setServerError(true);
console.log(error);
}
};
const handleSearchChange = (event) => {
setSearchText(event.target.value);
let newRes = responses.filter(
(response) =>
response.userId.name
.toLowerCase()
.search(event.target.value.trim().toLowerCase()) !== -1 ||
String(response.marks) ===
event.target.value.trim().toLowerCase()
);
let sorted = sortByFunc(sortBy, newRes);
setSearchData(sorted);
};
const handleSortChange = (event) => {
setSortBy(event.target.value);
let newRes = sortByFunc(event.target.value, searchData);
setSearchData(newRes);
};
const sortByFunc = (by, array) => {
if (by === "score") {
return array.sort(function (a, b) {
return b.marks - a.marks;
});
} else if (by === "name") {
return array.sort(function (a, b) {
return a.userId.name - b.userId.name;
});
} else if (by === "recent") {
return array.sort(function (a, b) {
return b.timeEnded - a.timeEnded;
});
} else {
return array;
}
};
const handleRestart = async () => {
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/quiz/restart`;
let captcha = await executeRecaptcha("restart_quiz");
let data = {
quizId: quizId,
captcha: captcha,
};
try {
await axios
.patch(url, data, {
headers: {
"auth-token": token,
},
})
.then((res) => {
setQuizRestartModal(false);
getQuizDetails();
});
} catch (error) {
console.log(error);
}
};
const handleQuizClose = async () => {
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/quiz/close`;
let captcha = await executeRecaptcha("quiz_close");
let data = {
quizId: quizId,
captcha: captcha,
};
try {
await axios
.patch(url, data, {
headers: {
"auth-token": token,
},
})
.then((res) => {
setCloseQuizModal(false);
getQuizDetails();
});
} catch (error) {
console.log(error);
}
};
const handleQuestionEditBtn = (question) => {
setUpdate(true);
setUpdateId(question._id);
setNewQuestion(question.description);
setOption1(question.options[0].text);
setOption2(question.options[1].text);
setOption3(question.options[2].text);
setOption4(question.options[3].text);
setCorrectOption(question.correctAnswer);
setQuestionModal(true);
};
const handleQuestionDeleteBtn = (question) => {
setUpdateId(question._id);
setDeleteQuestionModal(true);
};
const handleQuestionModalClose = () => {
setUpdateId(null);
setDeleteQuestionModal(false);
};
const handleDeleteBtn = () => {
setDeleteModal(true);
};
const handleDeleteQuestion = async () => {
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/question/${updateId}`;
// let captcha = executeRecaptcha("delete_quiz");
try {
await axios
.delete(url, {
headers: {
"auth-token": token,
},
})
.then((res) => {
setUpdateId(null);
setDeleteQuestionModal(false);
getQuizDetails();
});
} catch (error) {
console.log(error);
}
};
const handleDelete = async () => {
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/quiz/delete`;
let data = {
quizId: quizId,
};
try {
await axios
.delete(url, {
headers: {
"auth-token": token,
},
data: data,
})
.then((res) => {
setRedirect(true);
});
} catch (error) {
console.log(error);
}
};
const handleQuestionUpdate = async () => {
if (!validate()) return;
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/question/update/${updateId}`;
let captcha = await executeRecaptcha("question_update");
let updateOps = [
{ propName: "description", value: newQuestion },
{
propName: "options",
value: [
{
text: option1,
},
{
text: option2,
},
{
text: option3,
},
{
text: option4,
},
],
},
{ propName: "correctAnswer", value: correctOption },
];
let data = {
updateOps: updateOps,
captcha: captcha,
};
try {
await axios
.patch(url, data, {
headers: {
"auth-token": token,
},
})
.then((res) => {
onCloseHandle();
getQuizDetails();
});
} catch (error) {
console.log(error);
}
};
const validate = () => {
if (newQuestion.trim().length === 0) {
setNewQuestionError(true);
return false;
}
if (option1.trim().length === 0) {
setOption1Error(true);
return false;
}
if (option2.trim().length === 0) {
setOption2Error(true);
return false;
}
if (option3.trim().length === 0) {
setOption3Error(true);
return false;
}
if (option4.trim().length === 0) {
setOption4Error(true);
return false;
}
if (correctOption === -1) {
setCorrectOptionError(true);
return false;
}
return true;
};
const handleQuestionSubmit = async () => {
//TODO: Handle Validation
if (!validate()) return;
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/question/add`;
let captcha = await executeRecaptcha("submit_question");
let options = [
{ text: option1 },
{ text: option2 },
{ text: option3 },
{ text: option4 },
];
let data = {
quizId: quizId,
description: newQuestion,
options: options,
correctAnswer: correctOption,
captcha: captcha,
};
try {
await axios
.post(url, data, {
headers: {
"auth-token": token,
},
})
.then((res) => {
clearModal();
getQuizDetails();
setQuestionModal(false);
});
} catch (error) {
console.log(error);
}
};
const isOwnerOfQuiz = async () => {
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/quiz/checkAdmin/${quizId}`;
try {
await axios
.get(url, {
headers: {
"auth-token": token,
},
})
.then((res) => {
return true;
});
} catch (error) {
setRedirect(true);
return;
}
};
const getQuizDetails = async () => {
setLoading(true);
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/quiz/${quizId}`;
try {
await axios
.get(url, {
headers: {
"auth-token": token,
},
})
.then((res) => {
setQuizDetails(res.data.result);
});
} catch (error) {
console.log(error);
}
url = `https://quizzie-api.herokuapp.com/question/all/${quizId}`;
try {
await axios
.get(url, {
headers: {
"auth-token": token,
},
})
.then((res) => {
setQuizQuestions(res.data.result);
});
} catch (error) {
console.log(error);
}
url = `https://quizzie-api.herokuapp.com/admin/allStudentsQuizResult/${quizId}`;
try {
await axios
.get(url, {
headers: {
"auth-token": token,
},
})
.then((res) => {
setResponses(res.data.userResults);
setSearchData(res.data.userResults);
setLoading(false);
});
} catch (error) {
console.log(error);
}
};
useEffect(() => {
let token = localStorage.getItem("authToken");
if (token === null) {
setLoading(false);
setRedirect(true);
return;
}
isOwnerOfQuiz();
getQuizDetails();
}, []);
if (loading) {
return <Loading />;
} else if (redirect) {
return <Redirect to="/dashboard" />;
} else {
return (
<Container className="edit-quiz-page">
<Typography
variant="h3"
className="dash-head p-top edit-quiz-head"
>
Edit Quiz
</Typography>
<div className="edit-btn-bar">
<Button
className="edit-details-btn"
component={Link}
to={`/updateQuizDetails/${quizId}`}
>
<Create className="edit-icon" />
Edit Details
</Button>
<Button
className="edit-details-btn delete-btn"
onClick={handleDeleteBtn}
>
<Delete className="edit-icon" />
Delete Quiz
</Button>
{quizDetails.quizStatus === 1 ? (
<Button
className="edit-details-btn"
style={{ marginLeft: "3%" }}
onClick={() => setCloseQuizModal(true)}
>
<Replay className="edit-quiz" />
Close Quiz
</Button>
) : quizDetails.quizStatus === 2 ? (
<Button
className="edit-details-btn"
style={{ marginLeft: "3%" }}
onClick={() => setQuizRestartModal(true)}
>
<Replay className="edit-quiz" />
Restart Quiz
</Button>
) : null}
</div>
<div className="quiz-details-sec">
<Typography variant="h6" className="quiz-detail-param">
Name:{" "}
<span className="quiz-detail-text">
{quizDetails.quizName}
</span>
</Typography>
<Typography variant="h6" className="quiz-detail-param">
Date:{" "}
<span className="quiz-detail-text">
{new Date(
Number(quizDetails.scheduledFor)
).toDateString()}
</span>
</Typography>
<Typography variant="h6" className="quiz-detail-param">
Time:{" "}
<span className="quiz-detail-text">
{new Date(
Number(quizDetails.scheduledFor)
).toLocaleTimeString()}
</span>
</Typography>
<Typography variant="h6" className="quiz-detail-param">
Duration:{" "}
<span className="quiz-detail-text">
{quizDetails.quizDuration} minutes
</span>
</Typography>
<Typography variant="h6" className="quiz-detail-param">
Type:{" "}
<span className="quiz-detail-text">
{quizDetails.quizType}
</span>
</Typography>
{quizDetails.quizType === "private" ? (
<Typography variant="h6" className="quiz-detail-param">
Quiz Code:{" "}
<span className="quiz-detail-text">
{quizDetails.quizCode}
</span>
</Typography>
) : null}
</div>
<div className="quiz-questions-sec">
<Typography variant="h4" className="quiz-questions-head">
Questions
</Typography>
<div className="quiz-questions-display">
<div className="add-question-bar">
<Button
className="add-question-btn"
onClick={() => setQuestionModal(true)}
>
Add a question
</Button>
</div>
{quizQuestions.length === 0 ? (
<p style={{ textAlign: "center" }}>
No questions added yet!
</p>
) : (
<div className="questions-list-display">
{quizQuestions.map((question) => (
<ExpansionPanel
elevation={3}
className="expansion"
key={question._id}
>
<ExpansionPanelSummary
className="question-summary"
expandIcon={<ExpandMore />}
aria-controls="question-content"
aria-label="Expand"
>
<FormControlLabel
style={{ marginRight: "0" }}
aria-label="Edit"
control={
<IconButton>
<Create />
</IconButton>
}
// label={question.description}
onClick={() =>
handleQuestionEditBtn(
question
)
}
/>
<FormControlLabel
aria-label="Edit"
control={
<IconButton>
<Delete />
</IconButton>
}
// label={question.description}
onClick={() =>
handleQuestionDeleteBtn(
question
)
}
/>
<Typography className="question-label">
{question.description}
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<List
component="nav"
className="options-display"
>
{question.options.map(
(option) => (
<ListItem
button
key={option._id}
>
<ListItemIcon>
<Adjust
style={{
color:
question.correctAnswer ===
option.text
? "green"
: "black",
}}
/>
</ListItemIcon>
<ListItemText
style={{
color:
question.correctAnswer ===
option.text
? "green"
: "black",
}}
primary={
option.text
}
/>
</ListItem>
)
)}
</List>
</ExpansionPanelDetails>
</ExpansionPanel>
))}
</div>
)}
</div>
<Typography
variant="h4"
className="quiz-questions-head m-top"
>
Submissions
</Typography>
<div className="quiz-students-list">
<div className="add-question-bar">
<Button
className="add-question-btn stats-btn"
component={
responses.length !== 0 ? Link : Button
}
to={{
pathname: "/quizStats",
state: { responses: responses },
}}
>
<BarChart />
View Stats
</Button>
</div>
{responses.length === 0 ? (
<p
style={{
textAlign: "center",
margin: "0",
paddingTop: "3%",
paddingBottom: "3%",
}}
>
No responses yet!
</p>
) : (
<>
<div className="search-bar">
<TextField
placeholder="Search by name or score"
type="text"
onChange={handleSearchChange}
className="search-input"
value={searchText}
/>
<div style={{ marginLeft: "3%" }}>
<InputLabel id="sort-by">
Sort by
</InputLabel>
<Select
labelId="sort-by"
id="sort-select"
value={sortBy}
onChange={handleSortChange}
>
<MenuItem value={-1}>
<em>None</em>
</MenuItem>
<MenuItem value="recent">
Recent
</MenuItem>
<MenuItem value="score">
Score
</MenuItem>
<MenuItem value="name">
Name
</MenuItem>
</Select>
</div>
</div>
<List aria-label="responses list">
{searchData.map((response) => (
<ListItem
button
key={response._id}
component={Link}
to={{
pathname: `/studentResponse`,
state: { response: response },
}}
>
<ListItemText
primary={response.userId.name}
secondary={`Scored: ${response.marks}`}
/>
</ListItem>
))}
</List>
</>
)}
</div>
</div>
<Dialog
open={questionModal}
onClose={onCloseHandle}
aria-labelledby="add-question-modal"
PaperProps={{
style: {
backgroundColor: "white",
color: "#333",
minWidth: "50%",
},
}}
style={{ width: "100%" }}
>
<div className="add-ques-heading">
<Typography
variant="h6"
style={{ textAlign: "center", margin: "2% 5%" }}
>
New Question{" "}
</Typography>
{!update ? (
<IconButton onClick={handlePopover}>
<Info className="add-info-icon" />
</IconButton>
) : null}
<Popover
id="file-upload-popover"
open={popoverOpen}
anchorEl={popoverAnchor}
onClose={handlePopoverClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
disableRestoreFocus
useLayerForClickAway={false}
PaperProps={{ style: { maxWidth: "400px" } }}
>
<p className="popover-text">
You can upload a <strong>.csv</strong> file with
questions. The format should be: the{" "}
<strong>
first column should contain the question
text.
</strong>{" "}
The next 4 columns must contain the{" "}
<strong>four options.</strong> And the sixth
column should contain{" "}
<strong>
the correct answer (it should match one of
the four options)
</strong>
. <br />
<br />
<strong>
NOTE: THE FILE SHOULD EXACTLY MATCH THE
GIVEN FORMAT.
</strong>{" "}
You will be able to see and edit all the
question though.
</p>
</Popover>
</div>
{!update ? (
<>
<div className="dropzone">
<Dropzone
onDrop={(acceptedFiles) =>
handleFileDrop(acceptedFiles)
}
>
{({ getRootProps, getInputProps }) => (
<section>
<div {...getRootProps()}>
<input {...getInputProps()} />
<AddCircle className="drop-icon" />
<p
style={{
color:
"rgb(110, 110, 110)",
}}
>
Drag 'n' drop or click to
select files
</p>
</div>
</section>
)}
</Dropzone>
</div>
<p className="manual-head">
<span>Or manually add the question</span>
</p>
</>
) : null}
<div className="new-question-form">
<TextInput
error={newQuestionError}
helperText={
newQuestionError ? "This cannot be empty" : null
}
className="new-ques-input"
variant="outlined"
label="Question Text"
value={newQuestion}
onChange={onQuestionChange}
/>
<hr style={{ width: "100%", marginBottom: "3%" }} />
<Grid container spacing={1}>
<Grid item xs={12} sm={6}>
<TextInput
error={option1Error}
helperText={
option1Error
? "This cannot be empty"
: null
}
className="new-ques-input"
variant="outlined"
label="Option 1"
value={option1}
onChange={handleOptionChange1}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextInput
error={option2Error}
helperText={
option2Error
? "This cannot be empty"
: null
}
className="new-ques-input"
variant="outlined"
label="Option 2"
value={option2}
onChange={handleOptionChange2}
/>
</Grid>
</Grid>
<Grid container spacing={1}>
<Grid item xs={12} sm={6}>
<TextInput
error={option3Error}
helperText={
option3Error
? "This cannot be empty"
: null
}
className="new-ques-input"
variant="outlined"
label="Option 3"
value={option3}
onChange={handleOptionChange3}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextInput
error={option4Error}
helperText={
option4Error
? "This cannot be empty"
: null
}
className="new-ques-input"
variant="outlined"
label="Option 4"
value={option4}
onChange={handleOptionChange4}
/>
</Grid>
</Grid>
<hr style={{ width: "100%", marginBottom: "3%" }} />
<InputLabel id="correct-option">
Correct Option
</InputLabel>
<Select
error={correctOptionError}
className="correct-answer-select"
style={{ width: "50%" }}
labelId="correct-option"
value={correctOption}
onChange={handleCorrectOption}
>
<MenuItem value={-1}>None</MenuItem>
{option1.trim().length !== 0 ? (
<MenuItem value={option1}>{option1}</MenuItem>
) : null}
{option2.trim().length !== 0 ? (
<MenuItem value={option2}>{option2}</MenuItem>
) : null}
{option3.trim().length !== 0 ? (
<MenuItem value={option3}>{option3}</MenuItem>
) : null}
{option4.trim().length !== 0 ? (
<MenuItem value={option4}>{option4}</MenuItem>
) : null}
</Select>
{!update ? (
<Button
className="add-question-submit"
onClick={handleQuestionSubmit}
>
Add Question
</Button>
) : (
<Button
className="add-question-submit"
onClick={handleQuestionUpdate}
>
Update Question
</Button>
)}
</div>
</Dialog>
<Dialog
open={deleteModal}
onClose={() => setDeleteModal(false)}
aria-labelledby="delete-quiz-modal"
PaperProps={{
style: {
backgroundColor: "white",
color: "black",
minWidth: "10%",
},
}}
>
<DialogTitle>
Are you sure you want to delete this quiz?
</DialogTitle>
<div className="btn-div">
<Button
className="logout-btn m-right bg-red-btn"
onClick={handleDelete}
>
Yes
</Button>
<Button
className="cancel-btn m-left"
onClick={() => setDeleteModal(false)}
>
No
</Button>
</div>
</Dialog>
<Dialog
open={deleteQuestionModal}
onClose={handleQuestionModalClose}
aria-labelledby="delete-quiz-modal"
PaperProps={{
style: {
backgroundColor: "white",
color: "black",
minWidth: "10%",
},
}}
>
<DialogTitle>
Are you sure you want to delete this question?
</DialogTitle>
<div className="btn-div">
<Button
className="logout-btn m-right bg-red-btn"
onClick={handleDeleteQuestion}
>
Yes
</Button>
<Button
className="cancel-btn m-left"
onClick={handleQuestionModalClose}
>
No
</Button>
</div>
</Dialog>
<Dialog
open={quizRestartModal}
onClose={() => setQuizRestartModal(false)}
aria-labelledby="restart-quiz-modal"
PaperProps={{
style: {
backgroundColor: "white",
color: "black",
minWidth: "10%",
},
}}
>
<DialogTitle>
Are you sure you want to restart this quiz?
</DialogTitle>
<div className="btn-div">
<Button
className="logout-btn m-right bg-green-btn"
onClick={handleRestart}
>
Yes
</Button>
<Button
className="cancel-btn m-left bg-red-btn"
onClick={() => setQuizRestartModal(false)}
>
No
</Button>
</div>
</Dialog>
<Dialog
open={closeQuizModal}
onClose={() => setCloseQuizModal(false)}
aria-labelledby="restart-quiz-modal"
PaperProps={{
style: {
backgroundColor: "white",
color: "black",
minWidth: "10%",
},
}}
>
<DialogTitle>
Are you sure you want to close this quiz?
</DialogTitle>
<div className="btn-div">
<Button
className="logout-btn m-right bg-green-btn"
onClick={handleQuizClose}
>
Yes
</Button>
<Button
className="cancel-btn m-left bg-red-btn"
onClick={() => setCloseQuizModal(false)}
>
No
</Button>
</div>
</Dialog>
<Snackbar
open={fileError}
autoHideDuration={3000}
onClose={() => setFileError(false)}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
>
<Alert
variant="filled"
severity="error"
onClose={() => setFileError(false)}
>
There was some problem with the file. Try again...
</Alert>
</Snackbar>
<Snackbar
open={serverError}
autoHideDuration={3000}
onClose={() => setServerError(false)}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
>
<Alert
variant="filled"
severity="error"
onClose={() => setServerError(false)}
>
There was some problem with the server. Try again...
</Alert>
</Snackbar>
</Container>
);
}
}
Example #6
| Source File: OwnerQuizDetails.js From Quizzie with MIT License | 4 votes |
|
function OwnerQuizDetails(props) {
const quizId = props.match.params.id;
const [loading, setLoading] = useState(true);
const [redirect, setRedirect] = useState(false);
const [redirectD, setRedirectD] = useState(false);
const [quizDetails, setQuizDetails] = useState({});
const [quizQuestions, setQuizQuestions] = useState([]);
const [responses, setResponses] = useState([]);
const [deleteModal, setDeleteModal] = useState(false);
const [deleteSnack, setDeleteSnack] = useState(false);
const handleDeleteBtn = () => {
setDeleteModal(true);
};
const validate = async () => {
let token = localStorage.getItem("authToken");
let url = "https://quizzie-api.herokuapp.com/general/checkUser";
try {
await axios
.get(url, {
headers: {
"auth-token": token,
},
})
.then((res) => {
if (res.data.result.userType !== "Owner") {
setRedirectD(true);
return;
}
});
} catch (error) {
console.log(error);
}
};
const handleDelete = async () => {
setDeleteSnack(true);
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/owner/quiz/${quizId}`;
try {
await axios
.delete(url, {
headers: {
"auth-token": token,
},
})
.then((res) => {
setRedirect(true);
});
} catch (error) {
console.log(error);
}
};
const getQuizDetails = async () => {
setLoading(true);
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/quiz/${quizId}`;
try {
await axios
.get(url, {
headers: {
"auth-token": token,
},
})
.then((res) => {
setQuizDetails(res.data.result);
});
} catch (error) {
console.log(error);
}
url = `https://quizzie-api.herokuapp.com/question/all/${quizId}`;
try {
await axios
.get(url, {
headers: {
"auth-token": token,
},
})
.then((res) => {
setQuizQuestions(res.data.result);
setLoading(false);
});
} catch (error) {
console.log(error);
}
// url = `https://quizzie-api.herokuapp.com/admin/allStudentsQuizResult/${quizId}`;
// try {
// await axios.get(url, {
// headers: {
// "auth-token": token
// }
// }).then(res => {
// console.log(res);
// setResponses(res.data.userResults);
// setLoading(false);
// })
// } catch(error) {
// console.log(error);
// }
};
useEffect(() => {
let token = localStorage.getItem("authToken");
if (token === null) {
setLoading(false);
setRedirect(true);
return;
}
validate();
getQuizDetails();
}, []);
if (loading) {
return <Loading />;
} else if (redirect) {
return <Redirect to="/coronilOP" />;
} else if (redirectD) {
return <Redirect to="/dashboard" />;
} else {
return (
<Container className="edit-quiz-page">
<Typography
variant="h3"
className="dash-head p-top edit-quiz-head"
>
Quiz Details
</Typography>
<div className="edit-btn-bar">
<Button
className="edit-details-btn delete-btn"
onClick={handleDeleteBtn}
>
<Delete className="edit-icon" />
Delete Quiz
</Button>
</div>
<div className="quiz-details-sec">
<Typography variant="h6" className="quiz-detail-param">
Name:{" "}
<span className="quiz-detail-text">
{quizDetails.quizName}
</span>
</Typography>
<Typography variant="h6" className="quiz-detail-param">
Date:{" "}
<span className="quiz-detail-text">
{new Date(
Number(quizDetails.scheduledFor)
).toDateString()}
</span>
</Typography>
<Typography variant="h6" className="quiz-detail-param">
Time:{" "}
<span className="quiz-detail-text">
{new Date(
Number(quizDetails.scheduledFor)
).toLocaleTimeString()}
</span>
</Typography>
<Typography variant="h6" className="quiz-detail-param">
Duration:{" "}
<span className="quiz-detail-text">
{quizDetails.quizDuration} minutes
</span>
</Typography>
<Typography variant="h6" className="quiz-detail-param">
Type:{" "}
<span className="quiz-detail-text">
{quizDetails.quizType}
</span>
</Typography>
{quizDetails.quizType === "private" ? (
<Typography variant="h6" className="quiz-detail-param">
Quiz Code:{" "}
<span className="quiz-detail-text">
{quizDetails.quizCode}
</span>
</Typography>
) : null}
</div>
<div className="quiz-questions-sec">
<Typography variant="h4" className="quiz-questions-head">
Questions
</Typography>
<div className="quiz-questions-display">
{quizQuestions.length === 0 ? (
<p style={{ textAlign: "center" }}>
No questions added yet!
</p>
) : (
<div className="questions-list-display">
{quizQuestions.map((question) => (
<ExpansionPanel
elevation={3}
className="expansion"
key={question._id}
>
<ExpansionPanelSummary
className="question-summary"
expandIcon={<ExpandMore />}
aria-controls="question-content"
aria-label="Expand"
>
<Typography className="question-label">
{question.description}
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<List
component="nav"
className="options-display"
>
{question.options.map(
(option) => (
<ListItem
button
key={option._id}
>
<ListItemIcon>
<Adjust
style={{
color:
question.correctAnswer ===
option.text
? "green"
: "black",
}}
/>
</ListItemIcon>
<ListItemText
style={{
color:
question.correctAnswer ===
option.text
? "green"
: "black",
}}
primary={
option.text
}
/>
</ListItem>
)
)}
</List>
</ExpansionPanelDetails>
</ExpansionPanel>
))}
</div>
)}
</div>
{/* <Typography variant="h4" className="quiz-questions-head m-top">Submissions</Typography>
<div className="quiz-students-list">
{responses.length === 0? <p style={{ textAlign: 'center' }}>No responses yet!</p>
:
<List aria-label="responses list">
{responses.map((response) => (
<ListItem button key={response._id}>
<ListItemText primary={response.userId.name} secondary={`Scored: ${response.marks}`} />
</ListItem>
))}
</List>
}
</div> */}
</div>
<Dialog
open={deleteModal}
onClose={() => setDeleteModal(false)}
aria-labelledby="delete-quiz-modal"
PaperProps={{
style: {
backgroundColor: "white",
color: "black",
minWidth: "10%",
},
}}
>
<DialogTitle>
Are you sure you want to delete this quiz?
</DialogTitle>
<div className="btn-div">
<Button
className="logout-btn m-right bg-red-btn"
onClick={handleDelete}
>
Yes
</Button>
<Button
className="cancel-btn m-left"
onClick={() => setDeleteModal(false)}
>
No
</Button>
</div>
</Dialog>
<Snackbar
open={deleteSnack}
autoHideDuration={5000}
onClose={() => setDeleteSnack(false)}
>
<Alert
variant="filled"
severity="info"
onClose={() => setDeleteSnack(false)}
>
Processing... Please Wait!
</Alert>
</Snackbar>
</Container>
);
}
}
Example #7
| Source File: ResultPage.js From Quizzie with MIT License | 4 votes |
|
function ResultPage(props) {
const [quizId, setQuizId] = useState(props.match.params.id);
const [loading, setLoading] = useState(true);
const [name, setName] = useState("");
const [marks, setMarks] = useState(null);
const [responses, setResponses] = useState([]);
const resIcon = (response) => {
if(response.selected === response.correctAnswer) {
return <Check style={{color: 'green', marginLeft: '3px'}} />
} else if(response.selected === null) {
return <Warning style={{color: 'goldenrod', marginLeft: '3px'}} />
}
else {
return <Close style={{color: 'red', marginLeft: '3px'}} />
}
}
const getDetails = async () => {
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/quiz/${quizId}`;
try {
await axios.get(url, {
headers: {
"auth-token": token
}
}).then(res => {
setName(res.data.result.quizName);
})
} catch (error) {
console.log(error);
}
}
const getResponses = async () => {
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/user/studentQuizResult/${quizId}`;
try {
await axios.get(url, {
headers: {
"auth-token": token
}
}).then(res => {
setMarks(res.data.result.marks);
setResponses(res.data.result.responses);
setLoading(false);
})
} catch (error) {
console.log(error);
}
}
useState(() => {
getDetails();
getResponses();
}, [])
if (loading) {
return <Loading />
}
return (
<Container className="result-page">
<div className="result-head">
<Typography variant="h4" className="result-title">Results</Typography>
</div>
<div className="result-quiz-info">
<Typography variant="h5"><span className="profile-param">Quiz:</span> <strong>{name}</strong></Typography>
<Typography variant="h5"><span className="profile-param">Scored:</span> <strong>{marks}</strong> out of <strong>{responses.length}</strong></Typography>
</div>
<div className="result-responses">
<div className="result-response-title">
<Typography variant="h5">Responses</Typography>
</div>
<div className="result-responses-list">
{responses.map((response) => (
<ExpansionPanel elevation={3} className="expansion" key={response.quesId}>
<ExpansionPanelSummary
className="question-response"
expandIcon={<ExpandMore />}
aria-controls="question-content"
aria-label="Expand"
>
<Typography className="question-label">{response.description} {resIcon(response)}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<List component="nav" className="options-display">
{response.options.map((option) => (
<ListItem button key={option._id}>
<ListItemIcon><Adjust style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} /></ListItemIcon>
<ListItemText style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} primary={option.text} />
</ListItem>
))}
</List>
</ExpansionPanelDetails>
</ExpansionPanel>
))}
</div>
</div>
</Container>
)
}
Example #8
| Source File: StudentResponses.js From Quizzie with MIT License | 4 votes |
|
function StudentResponses(props) {
const [loading, setLoading] = useState(true);
const [name, setName] = useState("");
const [marks, setMarks] = useState(null);
const [responses, setResponses] = useState([]);
const [redirect, setRedirect] = useState(false);
let state = null;
const resIcon = (response) => {
if(response.selected === response.correctAnswer) {
return <Check style={{color: 'green', marginLeft: '3px'}} />
} else if(response.selected === null) {
return <Warning style={{color: 'goldenrod', marginLeft: '3px'}} />
}
else {
return <Close style={{color: 'red', marginLeft: '3px'}} />
}
}
const setup = () => {
setName(state.userId.name);
setMarks(state.marks);
setResponses(state.responses);
setLoading(false);
}
useState(() => {
if(props.location.state === undefined) {
setLoading(false);
setRedirect(true);
return;
}
state = props.location.state.response;
setup();
}, [])
if (loading) {
return <Loading />
} else if(redirect) {
return <Redirect to="/dashboard" />
}
return (
<Container className="result-page">
<div className="result-head">
<Typography variant="h4" className="result-title">Results</Typography>
</div>
<div className="result-quiz-info">
<Typography variant="h5"><span className="profile-param">Quiz:</span> <strong>{name}</strong></Typography>
<Typography variant="h5"><span className="profile-param">Scored:</span> <strong>{marks}</strong> out of <strong>{responses.length}</strong></Typography>
</div>
<div className="result-responses">
<div className="result-response-title">
<Typography variant="h5">Responses</Typography>
</div>
<div className="result-responses-list">
{responses.map((response) => (
<ExpansionPanel elevation={3} className="expansion" key={response.quesId}>
<ExpansionPanelSummary
className="question-response"
expandIcon={<ExpandMore />}
aria-controls="question-content"
aria-label="Expand"
>
<Typography className="question-label">{response.description} {resIcon(response)}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<List component="nav" className="options-display">
{response.options.map((option) => (
<ListItem button key={option._id}>
<ListItemIcon><Adjust style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} /></ListItemIcon>
<ListItemText style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} primary={option.text} />
</ListItem>
))}
</List>
</ExpansionPanelDetails>
</ExpansionPanel>
))}
</div>
</div>
</Container>
)
}
Example #9
| Source File: Account.js From acsys with MIT License | 4 votes |
|
Account = (props) => {
const [passwordChange, setpasswordChange] = useState(false);
const [message, setmessage] = useState('');
const [userData, setUserData] = useState([]);
const [username, setusername] = useState('');
const [email, setemail] = useState('');
const [password, setpassword] = useState('');
const [currentPassword, setcurrentPassword] = useState('');
const [verifyPassword, setverifyPassword] = useState('');
const [setOpen, setsetOpen] = useState(false);
const [setMsgOpen, setsetMsgOpen] = useState(false);
const [saveLoading, setSaveLoading] = useState(false);
const handleClickOpen = () => {
setsetOpen(true);
};
const handleClose = () => {
setsetOpen(false);
};
const handleMsgClose = () => {
setsetMsgOpen(false);
};
useEffect(async () => {
try {
props.setHeader('Account');
let userData;
try {
userData = await Acsys.getData('acsys_users', [
['acsys_id', '=', Acsys.getId()],
]);
} catch (error) {}
setusername(userData[0].username);
setemail(userData[0].email);
setpassword(userData[0].prmthCd);
setUserData(userData[0]);
} catch (error) {}
}, []);
const updateCredentials = async () => {
setSaveLoading(true);
const user = {
acsys_id: userData.acsys_id,
role: userData.role,
mode: Acsys.getMode(),
username: username,
email: email,
acsys_cd: password,
};
if (await Acsys.verifyPassword(userData.acsys_id, currentPassword)) {
if (passwordChange) {
if (password.length > 0) {
if (password === verifyPassword) {
await Acsys.updateUser(user);
} else {
setsetMsgOpen(true);
setmessage('Passwords do not match.');
}
} else {
setsetMsgOpen(true);
setmessage('Password cannot be left blank.');
}
} else {
await Acsys.updateUser(user);
}
} else {
setsetMsgOpen(true);
setmessage('Current password is invalid.');
}
setsetOpen(false);
setSaveLoading(false);
};
console.log('--------', userData);
return (
<div>
<Tooltip title="Save Account Settings">
<Button
style={{ float: 'right', marginBottom: 20, marginLeft: 20 }}
variant="contained"
color="primary"
onClick={handleClickOpen}
>
Save
</Button>
</Tooltip>
<Paper
style={{
margin: 'auto',
overflow: 'hidden',
clear: 'both',
marginBottom: 20,
}}
>
<div>
<div className="element-container">
<Grid container spacing={3}>
<Grid style={{ height: 40 }} item xs={12}>
<div style={{ width: '100%' }}>
<h3 style={{ float: 'left' }}>Role: {userData.role}</h3>
</div>
</Grid>
<Grid item xs={12}>
<h1 className="element-header">Email</h1>
<input
placeholder="Enter email"
defaultValue={userData.email}
onChange={(e) => setemail(e.target.value)}
type="text"
style={{ width: '100%' }}
/>
</Grid>
<Grid item xs={12}>
<h1 className="element-header">Username</h1>
<input
placeholder="Enter username"
defaultValue={userData.username}
onChange={(e) => setusername(e.target.value)}
type="text"
readOnly
style={{ width: '100%' }}
/>
</Grid>
<Grid item xs={12}>
<Grid item xs={12}>
<h1 className="element-header">Password</h1>
</Grid>
<Grid item xs={12}>
<ExpansionPanel
style={{ clear: 'both' }}
onChange={(e) => setpasswordChange(!passwordChange)}
>
<ExpansionPanelSummary
expandIcon={<KeyboardArrowDown />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>Change Password</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<input
placeholder="Enter new password"
onChange={(e) => setpassword(e.target.value)}
type="password"
style={{ width: '100%' }}
/>
</ExpansionPanelDetails>
<ExpansionPanelDetails>
<input
placeholder="Confirm new password"
onChange={(e) => setverifyPassword(e.target.value)}
type="password"
style={{ width: '100%' }}
/>
</ExpansionPanelDetails>
</ExpansionPanel>
</Grid>
</Grid>
</Grid>
</div>
<div className="element-container">
<div style={{ height: 40 }}></div>
</div>
</div>
<Dialog
open={setOpen}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{'Update profile?'}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure you want to update this data?
</DialogContentText>
<input
placeholder="Enter current password"
onChange={(e) => setcurrentPassword(e.target.value)}
type="password"
style={{ width: '100%' }}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
No
</Button>
<Button
onClick={updateCredentials}
color="primary"
disabled={saveLoading}
autoFocus
>
{saveLoading && <CircularProgress size={24} />}
{!saveLoading && 'Submit'}
</Button>
</DialogActions>
</Dialog>
<LoadingDialog loading={saveLoading} message={'Saving'} />
<MessageDialog
open={setMsgOpen}
closeDialog={handleMsgClose}
title={'Error!'}
message={message}
/>
</Paper>
</div>
);
}
Example #10
| Source File: Settings.js From acsys with MIT License | 4 votes |
|
Settings = (props) => {
const [host, setHost] = useState('');
const [port, setPort] = useState('');
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [socketPath, setSocketPath] = useState('');
const [dhost, setDhost] = useState('');
const [dport, setDport] = useState('');
const [ddatabase, setDatabase] = useState('');
const [dusername, setDusername] = useState('');
const [dpassword, setDpassword] = useState('');
const [project_name, setProjectName] = useState('');
const [databaseType, setDatabaseType] = useState('');
const [type, setType] = useState('');
const [project_id, setProjectId] = useState('');
const [private_key_id, setPrivateKeyId] = useState('');
const [private_key, setPrivateKey] = useState('');
const [client_email, setClientEmail] = useState('');
const [client_id, setClientId] = useState('');
const [auth_uri, setAuthUri] = useState('');
const [token_uri, setTokenUri] = useState('');
const [auth_provider_x509_cert_url, setAuthProviderX509CertUrl] =
useState('');
const [client_x509_cert_url, setClientX509CertUrl] = useState('');
const [bucket, setBucket] = useState('');
const [buckets, setBuckets] = useState([]);
const [updateBucket, setUpdateBucket] = useState(false);
const [updateEmail, setUpdateEmail] = useState(false);
const [updateDatabase, setUpdateDatabase] = useState(false);
const [updateStorage, setUpdateStorage] = useState(false);
const [uploadFile, setUploadFile] = useState();
const [fileName, setFileName] = useState('');
const [page, setPage] = useState(0);
const [loading, setLoading] = useState(false);
const [open, setOpen] = useState(false);
const [error, setError] = useState('');
const [message, setMessage] = useState('');
const [messageOpen, setMessageOpen] = useState(false);
const [isStateless, setIsStateless] = useState('');
const handleClickOpen = () => {
if (updateDatabase || updateStorage || updateEmail || updateBucket) {
setOpen(true);
}
};
const handleClose = () => {
setOpen(false);
};
const handleMessageClose = () => {
setMessageOpen(false);
};
const closeDialog = () => {
setLoading(false);
};
useEffect(async () => {
props.setHeader('Settings');
const isStateless = await Acsys.isStateless();
const emailConfig = await Acsys.getEmailConfig();
if (emailConfig.length > 0) {
setHost(emailConfig[0].host);
setPort(emailConfig[0].port);
setUsername(emailConfig[0].username);
setPassword(emailConfig[0].password);
}
const databaseType = await Acsys.getDatabaseType();
if (!isStateless) {
const databaseConfig = await Acsys.getDatabaseConfig();
if (databaseType === 'local') {
setProjectName(databaseConfig.project_name);
} else if (databaseType === 'firestore') {
const currentBucket = await Acsys.getCurrentBucket();
const buckets = await Acsys.getStorageBuckets();
setBucket(currentBucket);
setBuckets(buckets);
setType(databaseConfig.type);
setProjectId(databaseConfig.project_id);
setPrivateKeyId(databaseConfig.private_key_id);
setPrivateKey(databaseConfig.private_key);
setClientEmail(databaseConfig.client_email);
setClientId(databaseConfig.client_id);
setAuthUri(databaseConfig.auth_uri);
setTokenUri(databaseConfig.token_uri);
setAuthProviderX509CertUrl(databaseConfig.auth_provider_x509_cert_url);
setClientX509CertUrl(databaseConfig.client_x509_cert_url);
} else if (databaseType === 'mysql') {
const currentBucket = await Acsys.getCurrentBucket();
const buckets = await Acsys.getStorageBuckets();
setBucket(currentBucket);
setBuckets(buckets);
setType(databaseConfig.type);
setProjectId(databaseConfig.project_id);
setPrivateKeyId(databaseConfig.private_key_id);
setPrivateKey(databaseConfig.private_key);
setClientEmail(databaseConfig.client_email);
setClientId(databaseConfig.client_id);
setAuthUri(databaseConfig.auth_uri);
setTokenUri(databaseConfig.token_uri);
setAuthProviderX509CertUrl(databaseConfig.auth_provider_x509_cert_url);
setClientX509CertUrl(databaseConfig.client_x509_cert_url);
}
}
setIsStateless(isStateless);
setDatabaseType(databaseType);
}, []);
// setDatabaseType = (type) => {
// setState({
// databaseType: type,
// });
// };
const selectBucket = (bucket) => {
setBucket(bucket);
};
const setEmail = async () => {
const config = {
host: host,
port: port,
username: username,
password: password,
};
await Acsys.setEmailConfig(config);
};
const set_bucket = async () => {
const config = {
bucket: bucket,
};
await Acsys.setStorageBucket(config);
};
const handlesetDatabase = async () => {
if (databaseType === 'firestore') {
if (uploadFile === undefined) {
setMessageOpen(true);
setOpen(false);
setMessage('Please select a configuration to upload.');
setLoading(false);
} else {
await Acsys.setFirestoreConfig(uploadFile);
}
} else if (databaseType === 'mysql') {
if (
dhost < 1 ||
ddatabase < 1 ||
dusername < 1 ||
dpassword < 1 ||
uploadFile === undefined
) {
setMessageOpen(true);
setOpen(false);
setMessage(
'Please complete all necessary database fields and storage setTings.'
);
setLoading(false);
} else {
await Acsys.setMysqlConfig(
dhost,
dport,
ddatabase,
dusername,
dpassword,
socketPath,
uploadFile
);
}
} else if (databaseType === 'local') {
if (project_name.length < 1) {
setMessageOpen(true);
setOpen(false);
setMessage('Please enter a project name.');
setLoading(false);
} else {
await Acsys.setLocalDatabaseConfig(project_name);
}
}
};
const setConfig = async () => {
setOpen(false);
setLoading(false);
if (updateEmail) {
setEmail();
await sleep(5000);
}
if (updateBucket) {
set_bucket();
await sleep(5000);
}
if (updateDatabase || updateStorage) {
handlesetDatabase();
await sleep(5000);
}
if ((updateDatabase || updateEmail || updateStorage) && loading) {
await sleep(7500);
window.location.reload();
}
setLoading(false);
};
const setRef = (ref) => {
const fileReader = new FileReader();
fileReader.onload = (event) => loadFields(event);
try {
fileReader.readAsText(ref.target.files[0]);
} catch (error) {}
setFileName(ref.target.files[0].name), setUploadFile(ref.target.files[0]);
};
const loadFields = (event) => {
try {
const setTings = JSON.parse(event.target.result);
setType(setTings.type);
setProjectId(ettings.project_id);
setPrivateKeyId(setTings.private_key_id);
setPrivateKey(setTings.private_key);
setClientEmail(setTings.client_email);
setClientId(setTings.client_id);
setAuthUri(setTings.auth_uri);
setTokenUri(setTings.token_uri);
setAuthProviderX509CertUrl(setTings.auth_provider_x509_cert_url);
setClientX509CertUrl(setTings.client_x509_cert_url);
} catch (error) {}
};
const sleep = (time) => {
return new Promise((resolve) => setTimeout(resolve, time));
};
const onChange = (event) => {
// setState({ [event.target.name]: event.target.value });
};
const getBucketPanel = () => {
console.log('buckerts', buckets);
return (
<ExpansionPanel
style={{ clear: 'both' }}
onChange={(e) => setUpdateBucket(!updateBucket)}
>
<ExpansionPanelSummary
expandIcon={<KeyboardArrowDown />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>Bucket Configuration</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Box
margin="auto"
width="90%"
display="flex"
flexDirection="column"
textAlign="center"
padding="16px"
>
<NativeSelect
value={bucket}
onChange={(e) => setBucket(e.target.value)}
style={{ width: '100%', paddingTop: 7 }}
>
{buckets.map((bucketName) => (
<option value={bucketName}>{bucketName}</option>
))}
</NativeSelect>
</Box>
</ExpansionPanelDetails>
</ExpansionPanel>
);
};
const getLocalPanel = () => {
return (
<ExpansionPanel
style={{ clear: 'both' }}
onChange={(e) => setUpdateDatabase(!updateDatabase)}
>
<ExpansionPanelSummary
expandIcon={<KeyboardArrowDown />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>Local Configuration</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Box
margin="auto"
width="90%"
display="flex"
flexDirection="column"
textAlign="center"
padding="16px"
>
<input
id="project_name"
name="project_name"
placeholder="Project Name"
value={project_name}
onChange={(e) => setProjectName(e.target.value)}
style={{ marginTop: '20px' }}
/>
</Box>
</ExpansionPanelDetails>
</ExpansionPanel>
);
};
const getFirestorePanel = (name) => {
return (
<Grid>
<Grid item xs={12} style={{ marginBottom: 30 }}>
{bucket.length > 0 ? getBucketPanel() : null}
</Grid>
<Grid item xs={12}>
<ExpansionPanel
style={{ clear: 'both' }}
onChange={(e) => setUpdateStorage(!updateStorage)}
>
<ExpansionPanelSummary
expandIcon={<KeyboardArrowDown />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>{name} Configuration</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Box
margin="auto"
width="90%"
display="flex"
flexDirection="column"
textAlign="center"
padding="16px"
>
<input
id="type"
name="type"
onChange={(e) => setType(e.target.value)}
placeholder="Type"
value={type}
style={{ marginTop: '20px' }}
/>
<input
id="project_id"
name="project_id"
onChange={(e) => setProjectId(e.target.value)}
placeholder="Project ID"
value={project_id}
style={{ marginTop: '20px' }}
/>
<input
id="private_key_id"
name="private_key_id"
onChange={(e) => setPrivateKeyId(e.target.value)}
placeholder="Private Key ID"
value={private_key_id}
style={{ marginTop: '20px' }}
/>
<input
id="private_key"
name="private_key"
onChange={(e) => setPrivateKeyId(e.target.value)}
placeholder="Private Key"
value={private_key}
style={{ marginTop: '20px' }}
/>
<input
id="client_email"
name="client_email"
onChange={(e) => setClientEmail(e.target.value)}
placeholder="Client Email"
value={client_email}
style={{ marginTop: '20px' }}
/>
<input
id="client_id"
name="client_id"
onChange={(e) => setClientId(e.target.value)}
placeholder="Client ID"
value={client_id}
style={{ marginTop: '20px' }}
/>
<input
id="auth_uri"
name="auth_uri"
onChange={(e) => setAuthUri(e.target.value)}
placeholder="Auth URI"
value={auth_uri}
style={{ marginTop: '20px' }}
/>
<input
id="token_uri"
name="token_uri"
onChange={(e) => setTokenUri(e.target.value)}
placeholder="Token URI"
value={token_uri}
style={{ marginTop: '20px' }}
/>
<input
id="auth_provider_x509_cert_url"
name="auth_provider_x509_cert_url"
onChange={(e) => setAuthProviderX509CertUrl(e.target.value)}
placeholder="Auth Provider x509 Cert URL"
value={auth_provider_x509_cert_url}
style={{ marginTop: '20px' }}
/>
<input
id="client_x509_cert_url"
name="client_x509_cert_url"
onChange={(e) => setClientX509CertUrl(e.target.value)}
placeholder="Client x509 Cert URL"
value={client_x509_cert_url}
style={{ marginTop: '20px' }}
/>
<Grid container style={{ marginTop: '20px' }}>
<Grid item xs>
<input defaultValue={fileName} style={{ width: '100%' }} />
</Grid>
<Grid item>
<input
id="contained-button-file"
type="file"
style={{ display: 'none' }}
onChange={setRef}
/>
<label htmlFor="contained-button-file">
<Button
variant="contained"
color="primary"
component="span"
style={{ marginLeft: 28, height: 32 }}
>
New Config
</Button>
</label>
</Grid>
</Grid>
</Box>
</ExpansionPanelDetails>
</ExpansionPanel>
</Grid>
</Grid>
);
};
const getMysqlPanel = () => {
return (
<Grid>
<Grid item xs={12} style={{ marginBottom: 30 }}>
<ExpansionPanel
style={{ clear: 'both' }}
onChange={(e) => setUpdateDatabase(!updateDatabase)}
>
<ExpansionPanelSummary
expandIcon={<KeyboardArrowDown />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>MySQL Configuration</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Box
margin="auto"
width="90%"
display="flex"
flexDirection="column"
textAlign="center"
padding="16px"
>
<input
id="dhost"
name="dhost"
placeholder="Host"
value={dhost}
onChange={(e) => setDhost(e.target.value)}
style={{ marginTop: '20px' }}
/>
<input
id="dport"
name="dport"
placeholder="Port (Can be empty)"
value={dport}
onChange={(e) => setDport(e.target.value)}
type="number"
style={{ marginTop: '20px' }}
/>
<input
id="ddatabase"
name="ddatabase"
placeholder="Database"
value={ddatabase}
onChange={(e) => setDatabase(e.target.value)}
style={{ marginTop: '20px' }}
/>
<input
id="dusername"
name="dusername"
placeholder="Username"
value={dusername}
onChange={(e) => setDusername(e.target.value)}
style={{ marginTop: '20px' }}
/>
<input
id="dpassword"
name="dpassword"
placeholder="Password"
value={dpassword}
onChange={(e) => setDpassword(e.target.value)}
type="password"
style={{ marginTop: '20px' }}
/>
<input
id="socketPath"
name="socketPath"
placeholder="Socket Path (May be needed for production environments)"
value={socketPath}
onChange={(e) => setSocketPath(e.target.value)}
style={{ marginTop: '20px' }}
/>
</Box>
</ExpansionPanelDetails>
</ExpansionPanel>
</Grid>
<Grid item xs={12}>
{getFirestorePanel('Storage')}
</Grid>
</Grid>
);
};
const getConfigPanel = () => {
if (databaseType === 'local') {
return getLocalPanel();
} else if (databaseType === 'firestore') {
return getFirestorePanel('Firestore');
} else if (databaseType === 'mysql') {
return getMysqlPanel();
}
};
return (
<div>
<Tooltip title="Save Server setTings">
<Button
style={{ float: 'right', marginBottom: 20, marginLeft: 20 }}
variant="contained"
color="primary"
onClick={handleClickOpen}
>
Configure
</Button>
</Tooltip>
<Paper
style={{
margin: 'auto',
overflow: 'hidden',
clear: 'both',
marginBottom: 20,
}}
>
<div>
<div class="element-container">
<Grid container spacing={3}>
<Grid item xs={12}>
<Grid container>
<Grid item xs={9}>
<h1 class="element-header" style={{ marginTop: 0 }}>
Configuration
</h1>
</Grid>
<Grid item xs={3}>
<Tooltip title="setS Database Type For Project">
<NativeSelect
value={databaseType}
onChange={(e) => setDatabaseType(e.target.value)}
style={{ width: '100%', paddingTop: 7 }}
>
<option value={'local'}>Local</option>
<option value={'firestore'}>Firestore</option>
<option value={'mysql'}>MySQL</option>
</NativeSelect>
</Tooltip>
</Grid>
</Grid>
<Grid item xs={12} style={{ marginBottom: 30 }}>
<ExpansionPanel
style={{ clear: 'both' }}
onChange={(e) => setUpdateEmail(!updateEmail)}
>
<ExpansionPanelSummary
expandIcon={<KeyboardArrowDown />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>Email Configuration</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Box
margin="auto"
width="90%"
display="flex"
flexDirection="column"
textAlign="center"
padding="16px"
>
<input
id="host"
name="host"
placeholder="Host"
value={host}
onChange={(e) => setHost(e.target.value)}
style={{ marginTop: '20px' }}
/>
<input
id="port"
name="port"
placeholder="Port"
value={port}
onChange={(e) => setPort(e.target.value)}
style={{ marginTop: '20px' }}
/>
<input
id="username"
name="username"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
style={{ marginTop: '20px' }}
/>
<input
id="password"
name="password"
placeholder="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
style={{ marginTop: '20px' }}
/>
</Box>
</ExpansionPanelDetails>
</ExpansionPanel>
</Grid>
{!isStateless ? (
<Grid item xs={12}>
{getConfigPanel()}
</Grid>
) : null}
</Grid>
</Grid>
</div>
<div class="element-container">
<div style={{ height: 40 }}></div>
</div>
</div>
<LoadingDialog loading={loading} message={'Saving setTings'} />
<YesNoDialog
open={open}
closeDialog={handleClose}
title={'Update configuration?'}
message={
'Are you sure you want to update the configuration? Doing so will overwrite current setTings.'
}
action={setConfig}
actionProcess={loading}
/>
<MessageDialog
open={messageOpen}
closeDialog={handleMessageClose}
title={'Error'}
message={message}
/>
</Paper>
</div>
);
}
Example #11
| Source File: SimulationProperties.js From eSim-Cloud with GNU General Public License v3.0 | 4 votes |
|
export default function SimulationProperties (props) {
const netfile = useSelector(state => state.netlistReducer)
const isSimRes = useSelector(state => state.simulationReducer.isSimRes)
const [taskId, setTaskId] = useState(null)
const dispatch = useDispatch()
const classes = useStyles()
const [nodeList, setNodeList] = useState([])
const [componentsList, setComponentsList] = useState([])
const [errMsg, setErrMsg] = useState('')
const [err, setErr] = useState(false)
const [error, setError] = useState(false)
const [warning, setWarning] = useState(false)
const [needParameters, setNeedParameters] = useState(false)
const [status, setStatus] = useState('')
const stats = { loading: 'loading', error: 'error', success: 'success' }
const [dcSweepcontrolLine, setDcSweepControlLine] = useState(props.dcSweepcontrolLine ? props.dcSweepcontrolLine : {
parameter: '',
sweepType: 'Linear',
start: '',
stop: '',
step: '',
parameter2: '',
start2: '',
stop2: '',
step2: ''
})
const [transientAnalysisControlLine, setTransientAnalysisControlLine] = useState(props.transientAnalysisControlLine ? props.transientAnalysisControlLine : {
start: '0',
stop: '',
step: '',
skipInitial: false
})
const [acAnalysisControlLine, setAcAnalysisControlLine] = useState(props.acAnalysisControlLine ? props.acAnalysisControlLine : {
input: 'dec',
start: '',
stop: '',
pointsBydecade: ''
})
const [tfAnalysisControlLine, setTfAnalysisControlLine] = useState(props.tfAnalysisControlLine ? props.tfAnalysisControlLine : {
outputNodes: false,
outputVoltageSource: '',
inputVoltageSource: ''
})
const [NoiseAnalysisControlLine, setNoiseAnalysisControlLine] = useState(props.NoiseAnalysisControlLine ? props.NoiseAnalysisControlLine : {
inputVoltageSource: '',
input: 'dec',
start: '',
stop: '',
pointsBydecade: '',
outputSpectrum: false
})
const [controlBlockParam, setControlBlockParam] = useState('')
const [simType, setSimType] = React.useState('')
let typeSimulation = ''
const handleControlBlockParam = (evt) => {
setControlBlockParam(evt.target.value)
}
const analysisNodeArray = []
const analysisCompArray = []
const nodeArray = []
const nodeNoiseArray = []
// const pushZero = (nodeArray) => {
// nodeArray.push({ key: 0 })
// }
const onTabExpand = () => {
try {
setComponentsList(['', ...GenerateCompList()])
setNodeList(['', ...GenerateNodeList()])
} catch (err) {
setComponentsList([])
setNodeList([])
setWarning(true)
}
}
const handleDcSweepControlLine = (evt) => {
const value = evt.target.value
setDcSweepControlLine({
...dcSweepcontrolLine,
[evt.target.id]: value
})
}
const handleTransientAnalysisControlLine = (evt) => {
const value = evt.target.value
setTransientAnalysisControlLine({
...transientAnalysisControlLine,
[evt.target.id]: value
})
}
const handleTransientAnalysisControlLineUIC = (evt) => {
const value = evt.target.checked
setTransientAnalysisControlLine({
...transientAnalysisControlLine,
[evt.target.id]: value
})
}
const handleAcAnalysisControlLine = (evt) => {
const value = evt.target.value
setAcAnalysisControlLine({
...acAnalysisControlLine,
[evt.target.id]: value
})
}
const handleTfAnalysisControlLine = (evt) => {
const value = evt.target.value
setTfAnalysisControlLine({
...tfAnalysisControlLine,
[evt.target.id]: value
})
}
const handleTfAnalysisControlLineNodes = (evt) => {
const value = evt.target.checked
setTfAnalysisControlLine({
...tfAnalysisControlLine,
[evt.target.id]: value
})
}
const handleNoiseAnalysisControlLine = (evt) => {
const value = evt.target.value
setNoiseAnalysisControlLine({
...NoiseAnalysisControlLine,
[evt.target.id]: value
})
}
const [simulateOpen, setSimulateOpen] = React.useState(false)
const handlesimulateOpen = () => {
setSimulateOpen(true)
}
const handleSimulateClose = () => {
setSimulateOpen(false)
}
const [simResult, setSimResult] = React.useState({})
const handleSimulationResult = (simResults) => {
setSimResult(simResults)
}
const acTypeOptionList = {
Linear: 'lin',
Decade: 'dec',
Octave: 'oct'
}
const [selectedValue, setSelectedValue] = React.useState([])
const [selectedValueDCSweep, setSelectedValueDCSweep] = React.useState([])
const [selectedValueTransientAnal, setSelectedValueTransientAnal] = React.useState([])
const [selectedValueTFAnal, setSelectedValueTFAnal] = React.useState([])
const [selectedValueNoiseAnal, setSelectedValueNoiseAnal] = React.useState([])
const [selectedValueComp, setSelectedValueComp] = React.useState([])
const [selectedValueDCSweepComp, setSelectedValueDCSweepComp] = React.useState([])
const [selectedValueTransientAnalComp, setSelectedValueTransientAnalComp] = React.useState([])
const [selectedgraphNoiseComp, setSelectedgraphNoiseComp] = React.useState([])
const handleAddSelectedValueDCSweep = (data) => {
let f = 0
selectedValueDCSweep.forEach((value, i) => {
if (value[i] !== undefined) {
if (value[i].key === data) f = 1
}
})
if (f === 0) {
const tmp = [...selectedValueDCSweep, data]
setSelectedValueDCSweep(tmp)
}
// console.log(selectedValue)
}
const handleRemSelectedValueDCSweep = (data) => {
const tmp = []
selectedValueDCSweep.forEach((value, i) => {
if (value[i] !== undefined) {
if (value[i].key !== data) tmp.push(data)
}
})
setSelectedValueDCSweep(tmp)
// console.log(selectedValue)
}
const handleAddSelectedValueTransientAnal = (data) => {
let f = 0
selectedValueTransientAnal.forEach((value, i) => {
if (value[i] !== undefined) {
if (value[i].key === data) f = 1
}
})
if (f === 0) {
const tmp = [...selectedValueTransientAnal, data]
setSelectedValueTransientAnal(tmp)
}
// console.log(selectedValue)
}
const handleRemSelectedValueTransientAnal = (data) => {
const tmp = []
selectedValueTransientAnal.forEach((value, i) => {
if (value[i] !== undefined) {
if (value[i].key !== data) tmp.push(data)
}
})
setSelectedValueTransientAnal(tmp)
// console.log(selectedValue)
}
const handleAddSelectedValueTFAnal = (data) => {
let f = 0
selectedValueTFAnal.forEach((value, i) => {
if (value[i] !== undefined) {
if (value[i].key === data) f = 1
}
})
if (f === 0) {
const tmp = [...selectedValueTFAnal, data]
setSelectedValueTFAnal(tmp)
}
// console.log(selectedValue)
}
const handleRemSelectedValueTFAnal = (data) => {
const tmp = []
selectedValueTFAnal.forEach((value, i) => {
if (value[i] !== undefined) {
if (value[i].key !== data) tmp.push(data)
}
})
setSelectedValueTFAnal(tmp)
// console.log(selectedValue)
}
const handleAddSelectedValueNoiseAnal = (data) => {
let f = 0
selectedValueNoiseAnal.forEach((value, i) => {
if (value[i] !== undefined) {
if (value[i].key === data) f = 1
}
})
if (f === 0) {
const tmp = data
setSelectedValueNoiseAnal(tmp)
}
}
const handleRemSelectedValueNoiseAnal = (data) => {
setSelectedValueNoiseAnal(data)
}
const handleAddSelectedValueDCSweepComp = (data) => {
let f = 0
selectedValueDCSweepComp.forEach((value, i) => {
if (value[i] !== undefined) {
if (value[i].key === data) f = 1
}
})
if (f === 0) {
const tmp = [...selectedValueDCSweepComp, data]
setSelectedValueDCSweepComp(tmp)
}
// console.log(selectedValue)
}
const handleRemSelectedValueDCSweepComp = (data) => {
const tmp = []
selectedValueDCSweepComp.forEach((value, i) => {
if (value[i] !== undefined) {
if (value[i].key !== data) tmp.push(data)
}
})
setSelectedValueDCSweepComp(tmp)
// console.log(selectedValue)
}
const handleAddSelectedValueTransientAnalComp = (data) => {
let f = 0
selectedValueTransientAnalComp.forEach((value, i) => {
if (value[i] !== undefined) {
if (value[i].key === data) f = 1
}
})
if (f === 0) {
const tmp = [...selectedValueTransientAnalComp, data]
setSelectedValueTransientAnalComp(tmp)
}
// console.log(selectedValue)
}
const handleRemSelectedValueTransientAnalComp = (data) => {
const tmp = []
selectedValueTransientAnalComp.forEach((value, i) => {
if (value[i] !== undefined) {
if (value[i].key !== data) tmp.push(data)
}
})
setSelectedValueTransientAnalComp(tmp)
// console.log(selectedValue)
}
const handleNoiseOutputMode = (evt) => {
const value = evt.target.checked
setNoiseAnalysisControlLine({
...NoiseAnalysisControlLine,
[evt.target.id]: value
})
}
const handleErrOpen = () => {
setErr(true)
}
const handleErrClose = () => {
setErr(false)
}
const handleErrMsg = (msg) => {
setErrMsg(msg)
}
const handleStatus = (status) => {
setStatus(status)
}
// Prepare Netlist to file
const prepareNetlist = (netlist) => {
const titleA = netfile.title.split(' ')[1]
const myblob = new Blob([netlist], {
type: 'text/plain'
})
const file = new File([myblob], `${titleA}.cir`, { type: 'text/plain', lastModified: Date.now() })
// console.log(file)
sendNetlist(file)
}
function sendNetlist (file) {
setIsResult(false)
netlistConfig(file)
.then((response) => {
const res = response.data
const getUrl = 'simulation/status/'.concat(res.details.task_id)
setTaskId(res.details.task_id)
simulationResult(getUrl)
})
.catch(function (error) {
console.log(error)
})
}
// Upload the nelist
function netlistConfig (file) {
const token = localStorage.getItem('esim_token')
const url = queryString.parse(window.location.href.split('editor?')[1])
const formData = new FormData()
formData.append('simulationType', typeSimulation)
formData.append('file', file)
if (url.id) {
formData.append('save_id', url.id)
formData.append('version', url.version)
formData.append('branch', url.branch)
}
if (url.lti_nonce) {
formData.append('lti_id', url.lti_id)
}
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}
if (token) {
config.headers.Authorization = `Token ${token}`
}
setSimType(typeSimulation)
return api.post('simulation/upload', formData, config)
}
const [isResult, setIsResult] = useState(false)
// Get the simulation result with task_Id
function simulationResult (url) {
let isError = false
let msg
let resPending = true // to stop immature opening of simulation screen
api
.get(url)
.then((res) => {
if (res.data.state === 'PROGRESS' || res.data.state === 'PENDING') {
handleStatus(stats.loading)
setTimeout(simulationResult(url), 1000)
} else if (Object.prototype.hasOwnProperty.call(res.data.details, 'fail')) {
resPending = false
setIsResult(false)
console.log('failed notif')
console.log(res.data.details)
msg = res.data.details.fail.replace("b'", '')
isError = true
console.log(err)
} else {
const result = res.data.details
resPending = false
if (result === null) {
setIsResult(false)
} else {
const temp = res.data.details.data
const data = result.data
// console.log('DATA SIm', data)
if (res.data.details.graph === 'true') {
const simResultGraph = { labels: [], x_points: [], y_points: [] }
// populate the labels
for (let i = 0; i < data.length; i++) {
simResultGraph.labels[0] = data[i].labels[0]
const lab = data[i].labels
// lab is an array containeing labels names ['time','abc','def']
simResultGraph.x_points = data[0].x
// labels
for (let x = 1; x < lab.length; x++) {
// if (lab[x].includes('#branch')) {
// lab[x] = `I (${lab[x].replace('#branch', '')})`
// }
// uncomment below if you want label like V(r1.1) but it will break the graph showing time as well
// else {
// lab[x] = `V (${lab[x]})`
// }
simResultGraph.labels.push(lab[x])
}
// populate y_points
for (let z = 0; z < data[i].y.length; z++) {
simResultGraph.y_points.push(data[i].y[z])
}
}
simResultGraph.x_points = simResultGraph.x_points.map(d => parseFloat(d))
for (let i1 = 0; i1 < simResultGraph.y_points.length; i1++) {
simResultGraph.y_points[i1] = simResultGraph.y_points[i1].map(d => parseFloat(d))
}
dispatch(setResultGraph(simResultGraph))
} else {
const simResultText = []
for (let i = 0; i < temp.length; i++) {
let postfixUnit = ''
if (temp[i][0].includes('#branch')) {
postfixUnit = 'A'
} else if (temp[i][0].includes('transfer_function')) {
postfixUnit = ''
} else if (temp[i][0].includes('impedance')) {
postfixUnit = 'Ohm'
} else {
temp[i][0] = `V(${temp[i][0]})`
postfixUnit = 'V'
}
simResultText.push(temp[i][0] + ' ' + temp[i][1] + ' ' + parseFloat(temp[i][2]) + ' ' + postfixUnit + '\n')
}
handleSimulationResult(res.data.details)
dispatch(setResultText(simResultText))
}
setIsResult(true)
props.setLtiSimResult(true)
}
}
})
.then((res) => {
if (isError === false && resPending === false) {
console.log('no error')
handleStatus(stats.success)
handlesimulateOpen()
} else if (resPending === false) {
handleStatus(stats.error)
handleErrMsg(msg)
}
handleErrOpen()
})
.catch(function (error) {
console.log(error)
})
}
const startSimulate = (type) => {
if (ErcCheckNets() && componentsList !== [] && nodeList !== []) {
let compNetlist
try {
compNetlist = GenerateNetList()
} catch {
setError(true)
return
}
let controlLine = ''
let controlBlock = ''
let skipMultiNodeChk = 0
let nodes = ''
let uic = ''
let noiseMode = ''
switch (type) {
case 'DcSolver':
// console.log('To be implemented')
typeSimulation = 'DcSolver'
controlLine = '.op'
dispatch(setResultTitle('DC Solver Output'))
break
case 'DcSweep':
// console.log(dcSweepcontrolLine)
if (dcSweepcontrolLine.parameter !== '' && dcSweepcontrolLine.start !== '' && dcSweepcontrolLine.stop !== '' && dcSweepcontrolLine.step !== '') {
typeSimulation = 'DcSweep'
controlLine = `.dc ${dcSweepcontrolLine.parameter} ${dcSweepcontrolLine.start} ${dcSweepcontrolLine.stop} ${dcSweepcontrolLine.step} ${dcSweepcontrolLine.parameter2} ${dcSweepcontrolLine.start2} ${dcSweepcontrolLine.stop2} ${dcSweepcontrolLine.step2}`
dispatch(setResultTitle('DC Sweep Output'))
setSelectedValue(selectedValueDCSweep)
setSelectedValueComp(selectedValueDCSweepComp)
} else {
setNeedParameters(true)
return
}
break
case 'Transient':
// console.log(transientAnalysisControlLine)
if (transientAnalysisControlLine.step !== '' && transientAnalysisControlLine.start !== '' && transientAnalysisControlLine.start !== '') {
typeSimulation = 'Transient'
if (transientAnalysisControlLine.skipInitial === true) uic = 'UIC'
controlLine = `.tran ${transientAnalysisControlLine.step} ${transientAnalysisControlLine.stop} ${transientAnalysisControlLine.start} ${uic}`
dispatch(setResultTitle('Transient Analysis Output'))
setSelectedValue(selectedValueTransientAnal)
setSelectedValueComp(selectedValueTransientAnalComp)
} else {
setNeedParameters(true)
return
}
break
case 'Ac':
// console.log(acAnalysisControlLine)
if (acAnalysisControlLine.input !== '' && acAnalysisControlLine.pointsBydecade !== '' && acAnalysisControlLine.start !== '' && acAnalysisControlLine.stop !== '') {
typeSimulation = 'Ac'
controlLine = `.ac ${acAnalysisControlLine.input} ${acAnalysisControlLine.pointsBydecade} ${acAnalysisControlLine.start} ${acAnalysisControlLine.stop}`
dispatch(setResultTitle('AC Analysis Output'))
} else {
setNeedParameters(true)
return
}
break
case 'tfAnalysis':
if (tfAnalysisControlLine.inputVoltageSource !== '') {
typeSimulation = 'tfAnalysis'
setSelectedValue(selectedValueTFAnal)
if (tfAnalysisControlLine.outputNodes === true) {
selectedValue.forEach((value, i) => {
if (value[i] !== undefined) {
nodes = nodes + ' ' + String(value[i].key)
}
})
nodes = 'V(' + nodes + ')'
} else {
nodes = `I(${tfAnalysisControlLine.outputVoltageSource})`
}
console.log(tfAnalysisControlLine.outputNodes)
controlLine = `.tf ${nodes} ${tfAnalysisControlLine.inputVoltageSource}`
dispatch(setResultTitle('Transfer Function Analysis Output'))
skipMultiNodeChk = 1
} else {
setNeedParameters(true)
return
}
break
case 'noiseAnalysis':
// console.log('Start noise analysis simulation', selectedValueNoiseAnal, NoiseAnalysisControlLine)
typeSimulation = 'noiseAnalysis'
var node1 = selectedValueNoiseAnal[0].key
var node2 = '0'
if (selectedValueNoiseAnal.length > 1) {
node2 = selectedValueNoiseAnal[1].key
}
if (NoiseAnalysisControlLine.inputVoltageSource && NoiseAnalysisControlLine.pointsBydecade && NoiseAnalysisControlLine.input && NoiseAnalysisControlLine.start && NoiseAnalysisControlLine.stop) {
controlLine = `.noise v(${node1}, ${node2}) ${NoiseAnalysisControlLine.inputVoltageSource} ${NoiseAnalysisControlLine.input} ${NoiseAnalysisControlLine.pointsBydecade} ${NoiseAnalysisControlLine.start} ${NoiseAnalysisControlLine.stop}`
noiseMode = NoiseAnalysisControlLine.outputSpectrum ? 'setplot noise1' : 'setplot noise2'
dispatch(setResultTitle('Noise Analysis Output'))
} else {
setNeedParameters(true)
return
}
break
default:
break
}
// console.log(selectedValue)
let atleastOne = 0
let cblockline = ''
// if either the extra expression field or the nodes multi select
// drop down list in enabled then atleast one value is made non zero
// to add add all instead to the print statement.
if (selectedValue.length > 0 && selectedValue !== null && skipMultiNodeChk === 0) {
selectedValue.forEach((value, i) => {
if (value[i] !== undefined && value[i].key !== 0) {
atleastOne = 1
cblockline = cblockline + ' ' + String(value[i].key)
}
})
}
if (selectedValueComp.length > 0 && selectedValueComp !== null) {
selectedValueComp.forEach((value, i) => {
if (value[i] !== undefined && value[i].key !== 0) {
atleastOne = 1
if (value[i].key.charAt(0) === 'V' || value[i].key.charAt(0) === 'v') {
cblockline = cblockline + ' I(' + String(value[i].key) + ') '
}
}
})
}
if (controlBlockParam.length > 0) {
cblockline = cblockline + ' ' + controlBlockParam
atleastOne = 1
}
if (atleastOne === 0) cblockline = 'all'
if (typeSimulation !== 'noiseAnalysis') {
controlBlock = `\n.control \nrun \nprint ${cblockline} > data.txt \n.endc \n.end`
} else {
controlBlock = `\n.control \nrun \n${noiseMode} \nprint ${cblockline} > data.txt \n.endc \n.end`
}
// console.log(controlLine)
dispatch(setControlLine(controlLine))
dispatch(setControlBlock(controlBlock))
// setTimeout(function () { }, 2000)
const netlist = netfile.title + '\n\n' +
compNetlist.models + '\n' +
compNetlist.main + '\n' +
controlLine + '\n' +
controlBlock + '\n'
dispatch(setNetlist(netlist))
prepareNetlist(netlist)
}
// handlesimulateOpen()
}
// simulation properties add expression input box
const [anchorEl, setAnchorEl] = React.useState(null)
const handleAddExpressionClick = (event) => {
setAnchorEl(event.currentTarget)
}
const handleAddExpressionClose = () => {
setAnchorEl(null)
}
const open = Boolean(anchorEl)
const id = open ? 'simple-popover' : undefined
return (
<>
<div className={classes.SimulationOptions}>
<Snackbar
open={needParameters}
autoHideDuration={6000}
onClose={() => setNeedParameters(false)}
>
<Alert onClose={() => setNeedParameters(false)} severity="error">
Please enter the necessary parameters!
</Alert>
</Snackbar>
<Snackbar
open={warning}
autoHideDuration={6000}
onClose={() => setWarning(false)}
>
<Alert onClose={() => setWarning(false)} severity="warning">
Circuit is not complete to be simulated!
</Alert>
</Snackbar>
<Snackbar
open={error}
autoHideDuration={6000}
onClose={() => setError(false)}
>
<Alert onClose={() => setError(false)} severity="error">
Cannot simulate an incomplete circuit!
</Alert>
</Snackbar>
<SimulationScreen open={simulateOpen} isResult={isResult} close={handleSimulateClose} taskId={taskId} simType={simType} />
<Notice status={status} open={err} msg={errMsg} close={handleErrClose} />
{/* Simulation modes list */}
<List>
{/* DC Solver */}
<ListItem className={classes.simulationOptions} divider>
<div className={classes.propertiesBox}>
<ExpansionPanel onClick={onTabExpand}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
style={{ width: '100% ' }}
>
<Typography className={classes.heading}>DC Solver</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<form>
<List>
<ListItem>
<Button aria-describedby={id} variant="outlined" color="primary" size="small" onClick={handleAddExpressionClick}>
Add Expression
</Button>
<Tooltip title={'Add expression seperated by spaces.\n Include #branch at end of expression to indicate current e.g v1#branch. To add multiple expression seperate them by spaces eg. v1 v2 v3#branch'}>
<IconButton aria-label="info">
<InfoOutlinedIcon style={{ fontSize: 'large' }} />
</IconButton>
</Tooltip>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleAddExpressionClose}
anchorOrigin={{
vertical: 'center',
horizontal: 'left'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left'
}}
>
<TextField id="controlBlockParam" placeHolder="enter expression" size='large' variant="outlined"
value={controlBlockParam}
onChange={handleControlBlockParam}
/>
</Popover>
</ListItem>
<ListItem>
<Button size='small' variant="contained" color="primary"
onClick={(e) => { startSimulate('DcSolver') }}>
Run dc solver
</Button>
</ListItem>
</List>
</form>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
</ListItem>
{/* DC Sweep */}
<ListItem className={classes.simulationOptions} divider>
<ExpansionPanel onClick={onTabExpand}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
style={{ width: '97%' }}
>
<Typography className={classes.heading}>DC Sweep</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<form className={classes.propertiesBox} noValidate autoComplete="off">
<List>
<ListItem>
<TextField
style={{ width: '100%' }}
id="parameter"
size='small'
variant="outlined"
select
label="Select Component"
value={dcSweepcontrolLine.parameter}
error={!dcSweepcontrolLine.parameter}
onChange={handleDcSweepControlLine}
SelectProps={{
native: true
}}
>
{
componentsList.map((value, i) => {
if (value.charAt(0) === 'V' || value.charAt(0) === 'v' || value.charAt(0) === 'I' || value.charAt(0) === 'i' || value === '') {
return (<option key={i} value={value}>
{value}
</option>)
} else {
return null
}
})
}
</TextField>
</ListItem>
<ListItem>
<TextField id="start" label="Start Voltage" size='small' variant="outlined"
value={dcSweepcontrolLine.start}
error={!dcSweepcontrolLine.start}
onChange={handleDcSweepControlLine}
/>
<span style={{ marginLeft: '10px' }}>V</span>
</ListItem>
<ListItem>
<TextField id="stop" label="Stop Voltage" size='small' variant="outlined"
value={dcSweepcontrolLine.stop}
error={!dcSweepcontrolLine.stop}
onChange={handleDcSweepControlLine}
/>
<span style={{ marginLeft: '10px' }}>V</span>
</ListItem>
<ListItem>
<TextField id="step" label="Step" size='small' variant="outlined"
value={dcSweepcontrolLine.step}
error={!dcSweepcontrolLine.step}
onChange={handleDcSweepControlLine}
/>
<span style={{ marginLeft: '10px' }}>V</span>
</ListItem>
{/* SECONDARY PARAMETER FOR SWEEP */}
<Divider />
<ListItem>
<h4 style={{ marginLeft: '10px' }}>Secondary Parameters</h4>
</ListItem>
<ListItem>
<TextField
style={{ width: '100%' }}
id="parameter2"
size='small'
variant="outlined"
select
label="Select Component"
value={dcSweepcontrolLine.parameter2}
onChange={handleDcSweepControlLine}
SelectProps={{
native: true
}}
>
{
componentsList.map((value, i) => {
return <option key={i} value={value}>
{value}
</option>
})
}
</TextField>
</ListItem>
<ListItem>
<TextField id="start2" label="Start Value" size='small' variant="outlined"
value={dcSweepcontrolLine.start2}
onChange={handleDcSweepControlLine}
/>
</ListItem>
<ListItem>
<TextField id="stop2" label="Stop Value" size='small' variant="outlined"
value={dcSweepcontrolLine.stop2}
onChange={handleDcSweepControlLine}
/>
</ListItem>
<ListItem>
<TextField id="step2" label="Step Value" size='small' variant="outlined"
value={dcSweepcontrolLine.step2}
onChange={handleDcSweepControlLine}
/>
</ListItem>
<ListItem>
<Multiselect
style={{ width: '100%' }}
id="Nodes"
closeOnSelect="false"
placeholder="Select Node"
onSelect={handleAddSelectedValueDCSweep}
onRemove={handleRemSelectedValueDCSweep}
options={analysisNodeArray} displayValue="key"
avoidHighlightFirstOption="true"
/>
</ListItem>
<ListItem>
<Multiselect
style={{ width: '100%' }}
id="Branch"
closeOnSelect="false"
placeholder="Select VSRC"
onSelect={handleAddSelectedValueDCSweepComp}
onRemove={handleRemSelectedValueDCSweepComp}
options={analysisCompArray} displayValue="key"
avoidHighlightFirstOption="true"
/>
</ListItem>
<ListItem>
<Button aria-describedby={id} variant="outlined" color="primary" size="small" onClick={handleAddExpressionClick}>
Add Expression
</Button>
<Tooltip title={'Add expression seperated by spaces.\n Include #branch at end of expression to indicate current e.g v1#branch. To add multiple expression seperate them by spaces eg. v1 v2 v3#branch'}>
<IconButton aria-label="info">
<InfoOutlinedIcon style={{ fontSize: 'large' }} />
</IconButton>
</Tooltip>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleAddExpressionClose}
anchorOrigin={{
vertical: 'center',
horizontal: 'left'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left'
}}
>
<TextField id="controlBlockParam" placeHolder="enter expression" size='large' variant="outlined"
value={controlBlockParam}
onChange={handleControlBlockParam}
/>
</Popover>
</ListItem>
<ListItem>
<Button id="dcSweepSimulate" size='small' variant="contained" color="primary" onClick={(e) => { startSimulate('DcSweep') }}>
Simulate
</Button>
</ListItem>
</List>
</form>
</ExpansionPanelDetails>
</ExpansionPanel>
</ListItem>
{/* Transient Analysis */}
<ListItem className={classes.simulationOptions} divider>
<ExpansionPanel onClick={onTabExpand}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
style={{ width: '97%' }}
>
<Typography className={classes.heading}>Transient Analysis</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<form className={classes.propertiesBox} noValidate autoComplete="off">
<List>
<ListItem>
<TextField id="start" label="Start Time" size='small' variant="outlined"
value={transientAnalysisControlLine.start}
error={!transientAnalysisControlLine.start}
onChange={handleTransientAnalysisControlLine}
/>
<span style={{ marginLeft: '10px' }}>S</span>
</ListItem>
<ListItem>
<TextField id="stop" label="Stop Time" size='small' variant="outlined"
value={transientAnalysisControlLine.stop}
error={!transientAnalysisControlLine.stop}
onChange={handleTransientAnalysisControlLine}
/>
<span style={{ marginLeft: '10px' }}>S</span>
</ListItem>
<ListItem>
<TextField id="step" label="Time Step" size='small' variant="outlined"
value={transientAnalysisControlLine.step}
error={!transientAnalysisControlLine.step}
onChange={handleTransientAnalysisControlLine}
/>
<span style={{ marginLeft: '10px' }}>S</span>
</ListItem>
<ListItem>
<Checkbox id="skipInitial" label="Use Initial Conditions" size='small' variant="outlined"
value={transientAnalysisControlLine.skipInitial}
checked={transientAnalysisControlLine.skipInitial}
onChange={handleTransientAnalysisControlLineUIC}
/>
<span style={{ marginLeft: '10px' }}>Use Initial Conditions</span>
</ListItem>
<ListItem>
{nodeList.forEach((value) => {
if (value !== null && value !== '') {
analysisNodeArray.push({ key: value })
}
})
}
<Multiselect
style={{ width: '100%' }}
id="Nodes"
closeOnSelect="false"
placeholder="Select Node"
onSelect={handleAddSelectedValueTransientAnal}
onRemove={handleRemSelectedValueTransientAnal}
options={analysisNodeArray} displayValue="key"
avoidHighlightFirstOption="true"
/>
</ListItem>
<ListItem>
{
componentsList.forEach((value) => {
if (value !== null && value !== '') {
if (value.charAt(0) === 'V' || value.charAt(0) === 'v') {
analysisCompArray.push({ key: value })
}
}
})
}
<Multiselect
style={{ width: '100%' }}
id="Branch"
closeOnSelect="false"
placeholder="Select VSRC"
onSelect={handleAddSelectedValueTransientAnalComp}
onRemove={handleRemSelectedValueTransientAnalComp}
options={analysisCompArray} displayValue="key"
avoidHighlightFirstOption="true"
/>
</ListItem>
<ListItem>
<Button aria-describedby={id} variant="outlined" color="primary" size="small" onClick={handleAddExpressionClick}>
Add Expression
</Button>
<Tooltip title={'Add expression seperated by spaces.\n Include #branch at end of expression to indicate current e.g v1#branch. To add multiple expression seperate them by spaces eg. v1 v2 v3#branch'}>
<IconButton aria-label="info">
<InfoOutlinedIcon style={{ fontSize: 'large' }} />
</IconButton>
</Tooltip>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleAddExpressionClose}
anchorOrigin={{
vertical: 'center',
horizontal: 'left'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left'
}}
>
<TextField id="controlBlockParam" placeHolder="enter expression" size='large' variant="outlined"
value={controlBlockParam}
onChange={handleControlBlockParam}
/>
</Popover>
</ListItem>
<ListItem>
<Button id="transientAnalysisSimulate" size='small' variant="contained" color="primary" onClick={(e) => { startSimulate('Transient') }}>
Simulate
</Button>
</ListItem>
</List>
</form>
</ExpansionPanelDetails>
</ExpansionPanel>
</ListItem>
{/* AC Analysis */}
<ListItem className={classes.simulationOptions} divider>
<ExpansionPanel onClick={onTabExpand}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
style={{ width: '100%' }}
>
<Typography className={classes.heading}>AC Analysis</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<form className={classes.propertiesBox} noValidate autoComplete="off">
<List>
<ListItem>
<TextField
style={{ width: '100%' }}
id="input"
size='small'
variant="outlined"
select
label="Type"
value={acAnalysisControlLine.input}
onChange={handleAcAnalysisControlLine}
SelectProps={{
native: true
}}
>
<option key="linear" value="lin">
Linear
</option>
<option key="decade" value="dec">
Decade
</option>
<option key="octave" value="oct">
Octave
</option>
</TextField>
</ListItem>
<ListItem>
<TextField id="pointsBydecade" label="Points/scale" size='small' variant="outlined"
value={acAnalysisControlLine.pointsBydecade}
error={!acAnalysisControlLine.pointsBydecade}
onChange={handleAcAnalysisControlLine}
/>
</ListItem>
<ListItem>
<TextField id="start" label="Start Frequency" size='small' variant="outlined"
value={acAnalysisControlLine.start}
error={!acAnalysisControlLine.start}
onChange={handleAcAnalysisControlLine}
/>
<span style={{ marginLeft: '10px' }}>Hz</span>
</ListItem>
<ListItem>
<TextField id="stop" label="Stop Frequency" size='small' variant="outlined"
value={acAnalysisControlLine.stop}
error={!acAnalysisControlLine.stop}
onChange={handleAcAnalysisControlLine}
/>
<span style={{ marginLeft: '10px' }}>Hz</span>
</ListItem>
<ListItem>
<Button aria-describedby={id} variant="outlined" color="primary" size="small" onClick={handleAddExpressionClick}>
Add Expression
</Button>
<Tooltip title={'Add expression seperated by spaces. Include #branch at end of expression to indicate current e.g v1#branch. To add multiple expression seperate them by spaces eg. v1 v2 v3#branch'}>
<IconButton aria-label="info">
<InfoOutlinedIcon style={{ fontSize: 'large' }} />
</IconButton>
</Tooltip>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleAddExpressionClose}
anchorOrigin={{
vertical: 'center',
horizontal: 'left'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left'
}}
>
<TextField id="controlBlockParam" placeHolder="enter expression" size='large' variant="outlined"
value={controlBlockParam}
onChange={handleControlBlockParam}
/>
</Popover>
</ListItem>
<ListItem>
<Button size='small' variant="contained" color="primary" onClick={(e) => { startSimulate('Ac') }}>
Simulate
</Button>
</ListItem>
</List>
</form>
</ExpansionPanelDetails>
</ExpansionPanel>
</ListItem>
{/* Transfer Function Analysis */}
<ListItem className={classes.simulationOptions} divider>
<ExpansionPanel onClick={onTabExpand}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
style={{ width: '97%' }}
>
<Typography className={classes.heading}>Transfer Function Analysis</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<form className={classes.propertiesBox} noValidate autoComplete="off">
<List>
<ListItem>
<input
type="checkbox"
name="Between Nodes"
value={tfAnalysisControlLine.outputNodes}
checked={tfAnalysisControlLine.outputNodes}
onChange={handleTfAnalysisControlLineNodes}
id="outputNodes"
/>
<span style={{ marginLeft: '10px' }}>Output By Nodes</span>
</ListItem>
{nodeList.forEach((value) => {
if (value !== null && value !== '') {
nodeArray.push({ key: value })
}
})
}
{/* {pushZero(nodeArray)} */}
<ListItem>
<Multiselect
style={{ width: '100%' }}
id="Nodes"
closeOnSelect="false"
placeholder="Voltage between Nodes"
onSelect={handleAddSelectedValueTFAnal}
onRemove={handleRemSelectedValueTFAnal}
selectionLimit="2"
options={nodeArray} displayValue="key"
disable={!tfAnalysisControlLine.outputNodes}
avoidHighlightFirstOption="true"
/>
</ListItem>
<ListItem>
<TextField
style={{ width: '100%' }}
id="outputVoltageSource"
size='small'
variant="outlined"
select
label="Output Voltage SRC"
value={tfAnalysisControlLine.outputVoltageSource}
onChange={handleTfAnalysisControlLine}
SelectProps={{
native: true
}}
disabled={tfAnalysisControlLine.outputNodes}
>
{
componentsList.map((value, i) => {
if (value.charAt(0) === 'V' || value.charAt(0) === 'v' || value.charAt(0) === 'I' || value.charAt(0) === 'i' || value === '') {
return (<option key={i} value={value}>
{value}
</option>)
} else {
return null
}
})
}
</TextField>
</ListItem>
<ListItem>
<TextField
style={{ width: '100%' }}
id="inputVoltageSource"
size='small'
variant="outlined"
select
label="Input Voltage SRC"
value={tfAnalysisControlLine.inputVoltageSource}
error={!tfAnalysisControlLine.inputVoltageSource}
onChange={handleTfAnalysisControlLine}
SelectProps={{
native: true
}}
>
{
componentsList.map((value, i) => {
if (value.charAt(0) === 'V' || value.charAt(0) === 'v' || value.charAt(0) === 'I' || value.charAt(0) === 'i' || value === '') {
return (<option key={i} value={value}>
{value}
</option>)
} else {
return null
}
})
}
</TextField>
</ListItem>
<ListItem>
<Button aria-describedby={id} variant="outlined" color="primary" size="small" onClick={handleAddExpressionClick}>
Add Expression
</Button>
<Tooltip title={'Add expression seperated by spaces.\n Include #branch at end of expression to indicate current e.g v1#branch. To add multiple expression seperate them by spaces eg. v1 v2 v3#branch'}>
<IconButton aria-label="info">
<InfoOutlinedIcon style={{ fontSize: 'large' }} />
</IconButton>
</Tooltip>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleAddExpressionClose}
anchorOrigin={{
vertical: 'center',
horizontal: 'left'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left'
}}
>
<TextField id="controlBlockParam" placeHolder="enter expression" size='large' variant="outlined"
value={controlBlockParam}
onChange={handleControlBlockParam}
/>
</Popover>
</ListItem>
<ListItem>
<Button id="tfAnalysisSimulate" size='small' variant="contained" color="primary" onClick={(e) => { startSimulate('tfAnalysis') }}>
Simulate
</Button>
</ListItem>
</List>
</form>
</ExpansionPanelDetails>
</ExpansionPanel>
</ListItem>
{/* Noise Analysis */}
<ListItem className={classes.simulationOptions} divider>
<ExpansionPanel onClick={onTabExpand}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
style={{ width: '97%' }}
>
<Typography className={classes.heading}>Noise Analysis</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<form className={classes.propertiesBox} noValidate autoComplete="off">
<List>
{nodeList.forEach((value) => {
if (value !== null && value !== '') {
nodeNoiseArray.push({ key: value })
}
})
}
{/* {pushZero(nodeArray)} */}
<ListItem>
<Multiselect
style={{ width: '100%' }}
id="Nodes"
closeOnSelect="false"
placeholder="Voltage between Nodes"
onSelect={handleAddSelectedValueNoiseAnal}
onRemove={handleRemSelectedValueNoiseAnal}
selectionLimit="2"
options={nodeNoiseArray} displayValue="key"
avoidHighlightFirstOption="true"
/>
</ListItem>
<ListItem>
<TextField
style={{ width: '100%' }}
id="inputVoltageSource"
size='small'
variant="outlined"
select
label="Input Voltage SRC"
value={handleNoiseAnalysisControlLine.inputVoltageSource}
error={!handleNoiseAnalysisControlLine.inputVoltageSource}
onChange={handleNoiseAnalysisControlLine}
SelectProps={{
native: true
}}
>
{
componentsList.map((value, i) => {
if (value.charAt(0) === 'V' || value.charAt(0) === 'v' || value.charAt(0) === 'I' || value.charAt(0) === 'i' || value === '') {
return (<option key={i} value={value}>
{value}
</option>)
} else {
return null
}
})
}
</TextField>
</ListItem>
<ListItem>
<TextField
style={{ width: '100%' }}
id="input"
size='small'
variant="outlined"
select
label="Type"
value={handleNoiseAnalysisControlLine.input}
onChange={handleNoiseAnalysisControlLine}
SelectProps={{
native: true
}}
>
<option key="linear" value="lin">
Linear
</option>
<option key="decade" value="dec">
Decade
</option>
<option key="octave" value="oct">
Octave
</option>
</TextField>
</ListItem>
<ListItem>
<TextField id="pointsBydecade" label="Points/scale" size='small' variant="outlined"
value={NoiseAnalysisControlLine.pointsBydecade}
error={!NoiseAnalysisControlLine.pointsBydecade}
onChange={handleNoiseAnalysisControlLine}
/>
</ListItem>
<ListItem>
<TextField id="start" label="Start Frequency" size='small' variant="outlined"
value={NoiseAnalysisControlLine.start}
error={!NoiseAnalysisControlLine.start}
onChange={handleNoiseAnalysisControlLine}
/>
<span style={{ marginLeft: '10px' }}>Hz</span>
</ListItem>
<ListItem>
<TextField id="stop" label="Stop Frequency" size='small' variant="outlined"
value={NoiseAnalysisControlLine.stop}
error={!NoiseAnalysisControlLine.stop}
onChange={handleNoiseAnalysisControlLine}
/>
<span style={{ marginLeft: '10px' }}>Hz</span>
</ListItem>
<ListItem>
<input
type="checkbox"
name="Between Nodes"
value={NoiseAnalysisControlLine.outputSpectrum}
checked={NoiseAnalysisControlLine.outputSpectrum}
onChange={handleNoiseOutputMode}
id="outputSpectrum"
/>
<span style={{ marginLeft: '10px' }}>Show Noise Spectrum</span>
</ListItem>
<ListItem>
<Button aria-describedby={id} variant="outlined" color="primary" size="small" onClick={handleAddExpressionClick}>
Add Expression
</Button>
<Tooltip title={'Add expression seperated by spaces.\n Include #branch at end of expression to indicate current e.g v1#branch. To add multiple expression seperate them by spaces eg. v1 v2 v3#branch'}>
<IconButton aria-label="info">
<InfoOutlinedIcon style={{ fontSize: 'large' }} />
</IconButton>
</Tooltip>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleAddExpressionClose}
anchorOrigin={{
vertical: 'center',
horizontal: 'left'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left'
}}
>
<TextField id="controlBlockParam" placeHolder="enter expression" size='large' variant="outlined"
value={controlBlockParam}
onChange={handleControlBlockParam}
/>
</Popover>
</ListItem>
<ListItem>
<Button id="noiseAnalysisSimulate" size='small' variant="contained" color="primary" onClick={(e) => { startSimulate('noiseAnalysis') }}>
Simulate
</Button>
</ListItem>
</List>
</form>
</ExpansionPanelDetails>
</ExpansionPanel>
</ListItem>
<ListItem style={isSimRes ? {} : { display: 'none' }} onClick={handlesimulateOpen} >
<Button size='small' variant="contained" color="primary" style={{ margin: '10px auto' }} onClick={handlesimulateOpen}>
Simulation Result
</Button>
</ListItem>
</List>
</div>
</>
)
}
