From 8dff795300d3a7cf329c40eae7eb8cde19135a48 Mon Sep 17 00:00:00 2001
From: Carter Mayeux <159168644+cmayeux05@users.noreply.github.com>
Date: Sun, 28 Apr 2024 12:41:47 -0500
Subject: [PATCH] workspace visualizer by ID lookup
---
client/src/App.jsx | 3 +
.../views/Researcher/DayLevelReportView.jsx | 2 +-
client/src/views/Researcher/viz.jsx | 97 +++
client/src/views/Researcher/viz.less | 555 ++++++++++++++++++
.../1.0.0/full_documentation.json | 2 +-
5 files changed, 657 insertions(+), 2 deletions(-)
create mode 100644 client/src/views/Researcher/viz.jsx
create mode 100644 client/src/views/Researcher/viz.less
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 485e1939..06480559 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -25,6 +25,7 @@ import ConfirmEmail from './views/TeacherLogin/ConfirmEmail';
import { getConfirmed } from './Utils/AuthRequests';
import MentorRegister from './views/Mentor/Dashboard/MentorRegister';
import AddMentor from './views/Mentor/Dashboard/AddMentor';
+import CodeViz from './views/Researcher/viz';
export function confirmRedirect () {
const navigate = useNavigate();
@@ -57,6 +58,8 @@ const App = () => {
} />
} />
+
+ } />
{
.catch(error => {
console.log(error)
});
- workspaceRef.current.dispose();
+ //workspaceRef.current.dispose();
setSession(session.data);
const fetchedStudents = session.data.students[0].name;
diff --git a/client/src/views/Researcher/viz.jsx b/client/src/views/Researcher/viz.jsx
new file mode 100644
index 00000000..d03d639d
--- /dev/null
+++ b/client/src/views/Researcher/viz.jsx
@@ -0,0 +1,97 @@
+import { message } from 'antd';
+import React, { useState, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import NavBar from '../../components/NavBar/NavBar';
+import { getArduinoXML } from '../../components/DayPanels/Utils/helpers';
+import { getSession } from '../../Utils/requests';
+import './viz.less';
+//import { findSuperAdmins } from '../../../../server/extensions/users-permissions/controllers/Auth';
+
+
+const useFormInput = (initialValue) => {
+ const [value, setValue] = useState(initialValue);
+
+ const handleChange = (e) => {
+ setValue(e.target.value);
+ };
+ return {
+ value,
+ onChange: handleChange,
+ };
+};
+
+export default function CodeViz() {
+ const rID = useFormInput('');
+ const [loading, setLoading] = useState(false);
+ const navigate = useNavigate();
+ const workspaceRef = useRef(null);
+ const superEmails = [];
+
+ const handleLogin = () => {
+ setLoading(true);
+ //console.log(rID)
+ getSession(parseInt(rID.value))
+ .then((response) => {
+ //console.log(response)
+ if (workspaceRef.current) {
+ workspaceRef.current.dispose()
+ }
+ workspaceRef.current = window.Blockly.inject('blockly-box', {
+ toolbox: document.getElementById('toolbox'),
+ readOnly: true,
+ });
+
+
+
+ if (response.data === '') {
+ workspaceRef.current.dispose();
+ message.error('No workspace associated with ID');
+ setLoading(false);
+ }
+ else {
+ setLoading(false);
+ console.log(getArduinoXML(response.data.saves[response.data.saves.length - 1].workspace, workspaceRef.current));
+ }
+
+
+ })
+ .catch((error) => {
+ message.error('Please enter a valid workspace ID');
+ setLoading(false);
+ workspaceRef.current.dispose();
+
+ });
+ };
+
+ return (
+
+ );
+}
diff --git a/client/src/views/Researcher/viz.less b/client/src/views/Researcher/viz.less
new file mode 100644
index 00000000..3218e5cd
--- /dev/null
+++ b/client/src/views/Researcher/viz.less
@@ -0,0 +1,555 @@
+@import '../../assets/style.less';
+
+.container {
+ background-color: #colors[primary];
+ height: 100%;
+ min-height: 100vh;
+ width: 100%;
+ min-width: 100vw;
+ text-align: center;
+}
+
+#content-wrapper {
+ margin: 12vh auto 8vh auto;
+ display: inline-block;
+}
+
+#box {
+ width: 300px;
+ padding: 40px 20px;
+ background-color: #colors[tertiary];
+ text-align: center;
+ border-radius: 15px;
+ border: 4px solid;
+ border-color: #colors[secondary];
+}
+
+#box-title {
+ background-color: #colors[secondary];
+ border-radius: 80px;
+ width: 80%;
+ min-height: 8%;
+ color: #colors[text-secondary];
+ font-size: 1.5em;
+ font-weight: bold;
+ position: relative;
+ top: -60px;
+ left: -40px;
+ line-height: 50px;
+ text-align: center;
+}
+
+#box input[type='text'],
+#box input[type='email'],
+#box input[type='password'] {
+ display: block;
+ background: none;
+ margin: 20px auto 0px;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 10px;
+ width: 200px;
+ outline: none;
+ color: #colors[text-primary];
+ border-radius: 8px;
+ transition: 0.25s;
+}
+
+#box input[type='text']:focus,
+#box input[type='email']:focus,
+#box input[type='password']:focus {
+ width: 220px;
+}
+
+#box input[type='button'] {
+ background: darken(#colors[tertiary], 30%);
+ width: 80%;
+ display: block;
+ margin: 0 auto;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 40px;
+ outline: none;
+ color: #colors[text-primary];
+ background-color: #colors[quaternary];
+ font-size: 1.2em;
+ font-weight: 500;
+ border-radius: 30px;
+ cursor: pointer;
+ transition: 0.25s;
+ position: relative;
+ bottom: -65px;
+
+ &:hover {
+ background-color: #colors[quinary];
+ color: #colors[text-primary];
+ }
+}
+
+#box #forgot-password {
+ margin-top: 10px;
+ margin-bottom: 0px;
+ float: none;
+
+
+ &:hover {
+ cursor: pointer;
+ }
+}
+#box #create-account {
+ margin-top: 15px;
+ margin-bottom: 0px;
+ float: none;
+
+
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+//ForgetPassword
+
+#forgot-pass-wrapper {
+ margin: 12vh auto 8vh auto;
+ display: inline-block;
+}
+
+#forgot-pass-title {
+ background-color: #colors[secondary];
+ border-radius: 80px;
+ width: 80%;
+ min-height: 8%;
+ color: #colors[text-secondary];
+ font-size: 1.4em;
+ font-weight: bold;
+ position: relative;
+ top: 25px;
+ left: -40px;
+ line-height: 50px;
+ text-align: center;
+}
+
+#forgot-pass-form {
+ width: 400px;
+ padding: 40px 20px;
+ background-color: #colors[tertiary];
+ text-align: center;
+ border-radius: 15px;
+ border: 4px solid;
+ border-color: #colors[secondary];
+
+ input,
+ textarea {
+ display: block;
+ background: none;
+ margin: 20px auto 0px;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 10px;
+ width: 300px;
+ outline: none;
+ color: #colors[text-primary];
+ border-radius: 8px;
+ transition: 0.25s;
+ }
+
+ .ant-btn-primary {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #colors[quaternary];
+ width: 50%;
+ // display: block;
+ margin: 0 auto;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 40px;
+ outline: none;
+ color: #colors[text-primary];
+ font-size: 1.2em;
+ font-weight: 500;
+ border-radius: 30px;
+ position: relative;
+ bottom: -90px;
+
+ &:hover {
+ background-color: #colors[quinary];
+ }
+ }
+}
+
+//ResetPassword
+
+#reset-pass-wrapper {
+ margin: 12vh auto 8vh auto;
+ display: inline-block;
+}
+
+#reset-pass-title {
+ background-color: #colors[secondary];
+ border-radius: 80px;
+ width: 80%;
+ min-height: 8%;
+ color: #colors[text-secondary];
+ font-size: 1.4em;
+ font-weight: bold;
+ position: relative;
+ top: 25px;
+ left: -40px;
+ line-height: 50px;
+ text-align: center;
+}
+
+#reset-pass-form {
+ width: 400px;
+ padding: 40px 20px;
+ background-color: #colors[tertiary];
+ text-align: center;
+ border-radius: 15px;
+ border: 4px solid;
+ border-color: #colors[secondary];
+
+ input[type='password'] {
+ display: block;
+ background: none;
+ margin: 20px auto 0px;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 10px;
+ width: 300px;
+ outline: none;
+ color: #colors[text-primary];
+ border-radius: 8px;
+ transition: 0.25s;
+ }
+
+ .ant-btn-primary {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #colors[quaternary];
+ width: 50%;
+ // display: block;
+ margin: 0 auto;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 40px;
+ outline: none;
+ color: #colors[text-primary];
+ font-size: 1.2em;
+ font-weight: 500;
+ border-radius: 30px;
+ position: relative;
+ bottom: -90px;
+
+ &:hover {
+ background-color: #colors[quinary];
+ }
+ }
+}
+
+#forgot-pass-form {
+ width: 400px;
+ padding: 40px 20px;
+ background-color: #colors[tertiary];
+ text-align: center;
+ border-radius: 15px;
+ border: 4px solid;
+ border-color: #colors[secondary];
+
+ input[type='email'] {
+ display: block;
+ background: none;
+ margin: 20px auto 0px;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 10px;
+ width: 300px;
+ outline: none;
+ color: #colors[text-primary];
+ border-radius: 8px;
+ transition: 0.25s;
+ }
+
+ .ant-btn-primary {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #colors[quaternary];
+ width: 50%;
+ // display: block;
+ margin: 0 auto;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 40px;
+ outline: none;
+ color: #colors[text-primary];
+ font-size: 1.2em;
+ font-weight: 500;
+ border-radius: 30px;
+ position: relative;
+ bottom: -90px;
+
+ &:hover {
+ background-color: #colors[quinary];
+ }
+ }
+
+
+}
+
+
+//ResetPassword
+
+#reset-pass-wrapper {
+ margin: 12vh auto 8vh auto;
+ display: inline-block;
+}
+
+#reset-pass-title {
+ background-color: #colors[secondary];
+ border-radius: 80px;
+ width: 80%;
+ min-height: 8%;
+ color: #colors[text-secondary];
+ font-size: 1.4em;
+ font-weight: bold;
+ position: relative;
+ top: 25px;
+ left: -40px;
+ line-height: 50px;
+ text-align: center;
+}
+
+#reset-pass-form {
+ width: 400px;
+ padding: 40px 20px;
+ background-color: #colors[tertiary];
+ text-align: center;
+ border-radius: 15px;
+ border: 4px solid;
+ border-color: #colors[secondary];
+
+ input[type='password'] {
+ display: block;
+ background: none;
+ margin: 20px auto 0px;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 10px;
+ width: 300px;
+ outline: none;
+ color: #colors[text-primary];
+ border-radius: 8px;
+ transition: 0.25s;
+ }
+
+ .ant-btn-primary {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #colors[quaternary];
+ width: 50%;
+ // display: block;
+ margin: 0 auto;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 40px;
+ outline: none;
+ color: #colors[text-primary];
+ font-size: 1.2em;
+ font-weight: 500;
+ border-radius: 30px;
+ position: relative;
+ bottom: -90px;
+
+ &:hover {
+ background-color: #colors[quinary];
+ }
+ }
+
+}
+
+//CreateAccount
+.container {
+ background-color: #colors[primary];
+ height: 100%;
+ min-height: 100vh;
+ width: 100%;
+ min-width: 100vw;
+ text-align: center;
+}
+
+#create-account-wrapper {
+ margin: 12vh auto 8vh auto;
+ display: inline-block;
+}
+
+#create-account-box {
+ width: 300px;
+ padding: 40px 20px;
+ background-color: #colors[tertiary];
+ text-align: center;
+ border-radius: 15px;
+ border: 4px solid;
+ border-color: #colors[secondary];
+}
+
+#create-account-box-title {
+ background-color: #colors[secondary];
+ border-radius: 80px;
+ width: 80%;
+ min-height: 8%;
+ color: #colors[text-secondary];
+ font-size: 1.5em;
+ font-weight: bold;
+ position: relative;
+ top: -60px;
+ left: -40px;
+ line-height: 50px;
+ text-align: center;
+}
+
+#box input[type='text'],
+#box input[type='email'],
+#box input[type='password'] {
+ display: block;
+ background: none;
+ margin: 20px auto 0px;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 10px;
+ width: 200px;
+ outline: none;
+ color: #colors[text-primary];
+ border-radius: 8px;
+ transition: 0.25s;
+}
+
+#box input[type='text']:focus,
+#box input[type='email']:focus,
+#box input[type='password']:focus {
+ width: 220px;
+}
+#box input[type='radio']:focus{
+ size: 100px;
+ bottom: 200px
+}
+
+#box input[type='button'] {
+ background: darken(#colors[tertiary], 30%);
+ width: 80%;
+ display: block;
+ margin: 0 auto;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 40px;
+ outline: none;
+ color: #colors[text-primary];
+ background-color: #colors[quaternary];
+ font-size: 1.2em;
+ font-weight: 500;
+ border-radius: 30px;
+ cursor: pointer;
+ transition: 0.25s;
+ position: relative;
+ bottom: -65px;
+
+ &:hover {
+ background-color: #colors[quinary];
+ color: #colors[text-primary];
+ }
+}
+
+
+//MentorRegister
+.container {
+ background-color: #colors[primary];
+ height: 100%;
+ min-height: 100vh;
+ width: 100%;
+ min-width: 100vw;
+ text-align: center;
+}
+
+#create-account-wrapper {
+ margin: 12vh auto 8vh auto;
+ display: inline-block;
+}
+
+#create-account-box {
+ width: 300px;
+ padding: 40px 20px;
+ background-color: #colors[tertiary];
+ text-align: center;
+ border-radius: 15px;
+ border: 4px solid;
+ border-color: #colors[secondary];
+}
+
+#create-account-box-title {
+ background-color: #colors[secondary];
+ border-radius: 80px;
+ width: 80%;
+ min-height: 8%;
+ color: #colors[text-secondary];
+ font-size: 1.5em;
+ font-weight: bold;
+ position: relative;
+ top: -60px;
+ left: -40px;
+ line-height: 50px;
+ text-align: center;
+}
+
+#box input[type='text'],
+#box input[type='email'],
+#box input[type='password'] {
+ display: block;
+ background: none;
+ margin: 0px auto 0px;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 10px;
+ width: 200px;
+ outline: none;
+ color: #colors[text-primary];
+ border-radius: 8px;
+ transition: 0.25s;
+}
+
+#box input[type='text']:focus,
+#box input[type='email']:focus,
+#box input[type='password']:focus {
+ width: 220px;
+}
+#box input[type='radio']:focus{
+ size: 100px;
+ bottom: 200px
+}
+
+#box input[type='button'] {
+ background: darken(#colors[tertiary], 30%);
+ width: 80%;
+ display: block;
+ margin: 0 auto;
+ border: 2px solid;
+ border-color: #colors[secondary];
+ padding: 14px 40px;
+ outline: none;
+ color: #colors[text-primary];
+ background-color: #colors[quaternary];
+ font-size: 1.2em;
+ font-weight: 500;
+ text-align: center;
+ border-radius: 30px;
+ cursor: pointer;
+ transition: 0.25s;
+ position: relative;
+ bottom: -65px;
+
+ &:hover {
+ background-color: #colors[quinary];
+ color: #colors[text-primary];
+ }
+}
\ No newline at end of file
diff --git a/server/extensions/documentation/documentation/1.0.0/full_documentation.json b/server/extensions/documentation/documentation/1.0.0/full_documentation.json
index c270522c..8aece470 100755
--- a/server/extensions/documentation/documentation/1.0.0/full_documentation.json
+++ b/server/extensions/documentation/documentation/1.0.0/full_documentation.json
@@ -14,7 +14,7 @@
"name": "Apache 2.0",
"url": "https://www.apache.org/licenses/LICENSE-2.0.html"
},
- "x-generation-date": "04/25/2024 9:59:54 PM"
+ "x-generation-date": "04/28/2024 4:20:02 PM"
},
"x-strapi-config": {
"path": "/documentation",