Merge pull request #480 from STEM-C/charlietestin

Images Button

Author: mikelxk

client/package.json

@@ -4,20 +4,19 @@
   "private": true,
   "dependencies": {
     "@loadable/component": "^5.15.2",
-    "@vitejs/plugin-react": "^3.1.0",
-    "antd": "^4.23.6",
-    "axios": "^1.3.2",
+    "antd": "^4.24.8",
+    "axios": "^1.3.4",
     "cross-env": "^7.0.3",
     "emoji-picker-react": "^3.6.1",
     "http-server": "^0.12.3",
     "less": "^4.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hooks-global-state": "^2.0.0",
+    "react-hooks-global-state": "^2.1.0",
     "react-papaparse": "^3.17.1",
-    "react-router-dom": "^6.4.2",
-    "recharts": "^2.1.16",
-    "vite": "^4.1.1",
+    "react-router-dom": "^6.9.0",
+    "recharts": "^2.5.0",
+    "vite": "^4.2.0",
     "yarn": "^1.22.10"
   },
   "scripts": {
@@ -43,6 +42,7 @@
   },
   "devDependencies": {
     "@types/w3c-web-serial": "^1.0.3",
+    "@vitejs/plugin-react-swc": "^3.2.0",
     "parse-full-name": "^1.2.6"
   }
 }

client/src/Utils/requests.js

@@ -455,7 +455,9 @@ export const updateLearningStandard = async (
 export const updateDayDetails = async (
   id,
   description,
+  //template,
   TekS,
+  images,
   link,
   scienceComponents,
   makingComponents,
@@ -466,7 +468,9 @@ export const updateDayDetails = async (
     path: `${server}/days/${id}`,
     data: {
       description,
+      //template,
       TekS,
+      images,
       link,
       scienceComponents,
       makingComponents,

client/src/assets/style.css

@@ -77,4 +77,3 @@ h3, p {
     height: auto;
 }
 
-

client/src/components/DayPanels/BlocklyCanvasPanel/canvas/ContentCreatorCanvas.jsx

@@ -13,6 +13,7 @@ import ConsoleModal from '../modals/ConsoleModal';
 import PlotterModal from '../modals/PlotterModal';
 import StudentToolboxMenu from '../modals/StudentToolboxMenu';
 import LoadWorkspaceModal from '../modals/LoadWorkspaceModal';
+import DisplayDiagramModal from '../modals/DisplayDiagramModal'
 import {
   connectToPort,
   handleCloseConnection,
@@ -409,7 +410,9 @@ export default function ContentCreatorCanvas({
                             Upload to Arduino
                           </div>
                         )}
-
+                  <DisplayDiagramModal
+                      image={day.images}
+                    />
                         <i
                           onClick={() => handleConsole()}
                           className='fas fa-terminal hvr-info'

client/src/components/DayPanels/BlocklyCanvasPanel/canvas/MentorCanvas.jsx

@@ -8,6 +8,7 @@ import ConsoleModal from '../modals/ConsoleModal';
 import PlotterModal from '../modals/PlotterModal';
 import LoadWorkspaceModal from '../modals/LoadWorkspaceModal';
 import SaveAsModal from '../modals/SaveAsModal';
+import DisplayDiagramModal from '../modals/DisplayDiagramModal'
 import {
   connectToPort,
   handleCloseConnection,
@@ -332,7 +333,9 @@ export default function MentorCanvas({ day, isSandbox, setDay }) {
                             Upload to Arduino
                           </div>
                         )}
-
+                    <DisplayDiagramModal
+                      image={day.images}
+                    />
                         <i
                           onClick={() => handleConsole()}
                           className='fas fa-terminal hvr-info'

client/src/components/DayPanels/BlocklyCanvasPanel/canvas/StudentCanvas.jsx

@@ -6,6 +6,7 @@ import { getSaves } from '../../../../Utils/requests';
 import CodeModal from '../modals/CodeModal';
 import ConsoleModal from '../modals/ConsoleModal';
 import PlotterModal from '../modals/PlotterModal';
+import DisplayDiagramModal from '../modals/DisplayDiagramModal'
 import VersionHistoryModal from '../modals/VersionHistoryModal';
 import {
   connectToPort,
@@ -23,6 +24,7 @@ export default function StudentCanvas({ day }) {
   const [hoverUndo, setHoverUndo] = useState(false);
   const [hoverRedo, setHoverRedo] = useState(false);
   const [hoverCompile, setHoverCompile] = useState(false);
+  const [hoverImage, setHoverImage] = useState(false);
   const [hoverConsole, setHoverConsole] = useState(false);
   const [showConsole, setShowConsole] = useState(false);
   const [showPlotter, setShowPlotter] = useState(false);
@@ -296,7 +298,6 @@ export default function StudentCanvas({ day }) {
       setShowPlotter(false);
     }
   };
-
   const handleCompile = async () => {
     if (showConsole || showPlotter) {
       message.warning(
@@ -471,7 +472,9 @@ export default function StudentCanvas({ day }) {
                           Upload to Arduino
                         </div>
                       )}
-
+                    <DisplayDiagramModal
+                      image={day.images}
+                    />
                       <i
                         onClick={() => handleConsole()}
                         className='fas fa-terminal hvr-info'
@@ -508,7 +511,7 @@ export default function StudentCanvas({ day }) {
           plotData={plotData}
           setPlotData={setPlotData}
           plotId={plotId}
-        />
+        />          
       </div>
 
       {/* This xml is for the blocks' menu we will provide. Here are examples on how to include categories and subcategories */}

client/src/components/DayPanels/BlocklyCanvasPanel/modals/DisplayDiagramModal.jsx

@@ -0,0 +1,94 @@
+import { Modal, Button } from "antd"
+import React, { useState } from "react"
+
+export default function DisplayDiagramModal(props) {
+  const [visible, setVisible] = useState(false)
+  const { image } = props
+  const [hover, setHover] = useState(false)
+  const showModal = () => {
+    setVisible(true)
+  }
+  const onHover = () => {
+    setHover(true)
+  }
+  const onLeave = () => {
+    setHover(false)
+  }
+  const handleCancel = () => {
+    setVisible(false)
+  }
+
+  const handleOk = () => {
+    setVisible(false)
+  }
+
+  const links = new String(image)
+  let items = links.split("\n").filter(item => item != "" || item != " ")
+  let width = items.length * 700
+  return (
+    <div
+      id="display-diagram-modal"
+      onMouseEnter={onHover}
+      onMouseLeave={onLeave}
+    >
+      {hover ? <div className="popup ModalCompile">Diagrams</div> : ""}
+      <Button id="link">
+        <svg
+          width="25"
+          height="20px"
+          viewBox="0 -3.8 20 20"
+          version="1.1"
+          fill="none"
+          onClick={showModal}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs></defs>
+          <g
+            id="image"
+            stroke="none"
+            stroke-width="1"
+            fill="none"
+            fill-rule="evenodd"
+          >
+            <g
+              id="Dribbble-Light-Preview"
+              transform="translate(-380.000000, -3881.000000)"
+              fill="#000000"
+            >
+              <g id="image" transform="translate(56.000000, 160.000000)">
+                <path
+                  d="M336,3725.5 C336,3724.948 336.448,3724.5 337,3724.5 C337.552,3724.5 338,3724.948 338,3725.5 C338,3726.052 337.552,3726.5 337,3726.5 C336.448,3726.5 336,3726.052 336,3725.5 L336,3725.5 Z M340,3733 L328,3733 L332.518,3726.812 L335.354,3730.625 L336.75,3728.75 L340,3733 Z M326,3735 L342,3735 L342,3723 L326,3723 L326,3735 Z M324,3737 L344,3737 L344,3721 L324,3721 L324,3737 Z"
+                  id="image_picture-[#972]"
+                ></path>
+              </g>
+            </g>
+          </g>
+        </svg>
+      </Button>
+      <Modal
+        title={"Diagrams"}
+        visible={visible}
+        onCancel={handleCancel}
+        width={width}
+        footer={[
+          <Button key="ok" type="primary" onClick={handleOk}>
+            OK
+          </Button>,
+        ]}
+      >
+        <div id="code-display-text">
+          {items.map(src => (
+            <img
+              src={src}
+              display="block"
+              position="relative"
+              alt=""
+              width="auto"
+              height="300"
+            />
+          ))}
+        </div>
+      </Modal>
+    </div>
+  )
+}

client/src/components/DayPanels/BlocklyCanvasPanel/modals/StudentToolboxMenu.jsx

@@ -155,7 +155,7 @@ export default function StudentToolboxMenu(props) {
         <img
           height='95%'
           width='95%'
-          src={process.env.PUBLIC_URL + block.image_url}
+          src={block.image_url}
           alt={block.name}
         />
       );

client/src/components/DayPanels/DayPanels.less

@@ -305,6 +305,7 @@ p {
 #link {
   background: none !important;
   border: none;
+  box-shadow: none;
   padding: 0 !important;
   color: #colors[primary];
   text-align: center;

client/src/index.less

@@ -15,3 +15,9 @@ code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.blocklyTreeRow {
+    border-radius: 4px;
+    text-align: center;
+    line-height: initial!important;
+}