diff --git a/components/BlocklyEditor.tsx b/components/BlocklyEditor.tsx index 8b58fdf..0567bb8 100644 --- a/components/BlocklyEditor.tsx +++ b/components/BlocklyEditor.tsx @@ -1,14 +1,20 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { BlocklyWorkspace } from 'react-blockly'; import { toolboxCategories } from '../lib/blockly/customBlocks/customToolboxCategories'; import { javascriptGenerator } from 'blockly/javascript'; -export default function BlockEditor() { - const [xml, setXml] = useState(''); +export default function BlockEditor({ workspaceId, RCs, setRCs, index } : any) { + // const [xml, setXml] = useState(''); const [javascriptCode, setJavascriptCode] = useState(''); + const setXml = (e : any) => { + let copy = [...RCs] + copy[index].strategy = e + setRCs(copy) + } + const initialXml = - ''; + ''; function workspaceDidChange(workspace) { // console.log(workspace); @@ -19,7 +25,9 @@ export default function BlockEditor() { return ( <> + {workspaceId === 'workspace1' && ( + )} + {workspaceId === 'workspace2' && ( + )} + {workspaceId === 'workspace3' && ( + )} + {workspaceId === 'workspace4' && ( + )} + {workspaceId === 'workspace5' && ( + )} + {workspaceId === 'workspace6' && ( + )} + {workspaceId === 'workspace7' && ( + )} + {workspaceId === 'workspace8' && ( + )} + {workspaceId === 'workspace9' && ( + )} + {workspaceId === 'workspace10' && ( + )} ); -} +} \ No newline at end of file diff --git a/components/Context.module.css b/components/Context.module.css new file mode 100644 index 0000000..3ad1368 --- /dev/null +++ b/components/Context.module.css @@ -0,0 +1,18 @@ + +.container { + background-color: #BBB; + height: 100%; + padding: 10px; +} + +.container select { + width: 100%; + border-radius: 5px; + margin-bottom: 10px; +} + +.contexts { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px 20px; +} \ No newline at end of file diff --git a/components/Context.tsx b/components/Context.tsx new file mode 100644 index 0000000..179f059 --- /dev/null +++ b/components/Context.tsx @@ -0,0 +1,35 @@ +import styles from "./Context.module.css" +import { Tag } from "./Tag" + +const options = ["Sprint log-Total Points Spent this Sprint", + "Sprint log-Total Points Commited this Sprint", + "Sprint log-Summary of Stories", + "Sprint log-Summary of Tasks", + "Sprint log-Riskiest Risk specified in Planning View", + "PRC-Specific Slides (Under construction)", + "PRC-Time Last Edited", + "PRC-Slides Updated in this sprint", + "Github-Number of Lines Code Committed this sprint", + "Github-Number of Branches Created this sprint", + "Github-Summary of Commits made this sprint"] + +export const Context = ({index, RCs, setRCs} : any) => { + + const addContext = (val : string) => { + let copy = [...RCs] + copy[index].context.add(val) + setRCs(copy) + } + + return ( +
+ +
+ {[...RCs[index].context].map((x: any) => )} +
+
+ ) +} \ No newline at end of file diff --git a/components/Detector.module.css b/components/Detector.module.css new file mode 100644 index 0000000..c0a082c --- /dev/null +++ b/components/Detector.module.css @@ -0,0 +1,14 @@ +.container { + margin-bottom: 40px; +} + +.container .blockly { + width: '100%'; + height: 300px; + border: 2px solid gray; +} + +.container h2 { + font-size: 20px; + margin-bottom: 10px; +} \ No newline at end of file diff --git a/components/Detector.tsx b/components/Detector.tsx new file mode 100644 index 0000000..41ff111 --- /dev/null +++ b/components/Detector.tsx @@ -0,0 +1,17 @@ +import dynamic from 'next/dynamic'; +import styles from './Detector.module.css' + +const BlocklyEditor = dynamic(() => import('./BlocklyEditor'), { ssr: false }); + +export const Detector = () => { + + return ( +
+

Detector

+ +
+ +
+
+ ) +} \ No newline at end of file diff --git a/components/MainBody.module.css b/components/MainBody.module.css index 3ef3514..3e82992 100644 --- a/components/MainBody.module.css +++ b/components/MainBody.module.css @@ -1,108 +1,4 @@ -.carouselContainer { - width: 100%; - position: relative; - display: flex; - justify-content: start; -} - -.guideStep { - margin-top: 1rem; - margin-left: 2rem; - padding: 0; - margin-bottom: 1rem; -} - -.guideHeader { - font-size: 1.5rem; - font-weight: 600; -} - -.guideDescription { - font-size: 1rem; - font-weight: 400; -} - -.list { - margin: 20px 0; - padding: 0; - list-style-type: none; -} - -.listItem { - display: flex; - align-items: center; - margin-right: 40px; -} - -.itemNumber { - margin-right: 10px; - font-weight: bold; - margin-left: 6px; -} - -.addItem { - margin-left: 10px; - background-color: #4caf50; - border: none; - border-radius: 2px; - color: white; - padding: 5px 10px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 14px; - cursor: pointer; -} - -.addItem:hover { - background-color: #3e8e41; -} - -.causeInput { - padding: 5px; - border: 1px solid #ccc; - display: block; - width: 100%; - overflow: hidden; - resize: both; - min-height: 40px; - line-height: 20px; -} - -.causeInput[contenteditable]:empty::before { - content: 'Write your root cause here...'; - color: gray; -} - -.strategyInput { - padding: 5px; - border: 1px solid #ccc; - display: block; - width: 100%; - overflow: hidden; - resize: both; - min-height: 40px; - line-height: 20px; -} - -.strategyInput[contenteditable]:empty::before { - content: 'Write your strategy here...'; - color: gray; -} - -.scaffoldingHeader { - margin-left: 6px; - margin-top: 6px; -} - -.textInput { - margin: 6px; - border: 1px solid #ccc; - padding: 10px; - width: 90%; - height: auto; - min-height: 150px; - max-height: 250px; +.container { + padding: 20px; overflow-y: scroll; - resize: vertical; -} +} \ No newline at end of file diff --git a/components/MainBody.tsx b/components/MainBody.tsx index f6d715c..9d958c7 100644 --- a/components/MainBody.tsx +++ b/components/MainBody.tsx @@ -1,338 +1,13 @@ -import dynamic from 'next/dynamic'; import styles from './MainBody.module.css'; -import { Carousel } from '@mantine/carousel'; -import { rem } from '@mantine/core'; -import { BottomRow } from 'blockly/core/renderers/zelos/zelos'; -// import List from '../components/List.jsx'; - -const BlocklyEditor = dynamic(() => import('./BlocklyEditor'), { ssr: false }); +import { Detector } from './Detector'; +import { RootCauses } from './RootCauses'; export const MainBody = () => { - const scaffoldingSteps = [ - { - step: 'Step 1: Describe the situation to script for', - prompt: ( - <> - Think back to a time when one of your students was not working or - learning effectively this quarter. Describe what the student did and - how you noticed it was happening. - - ), - example: ( - <> -

- {' '} - Example:
- Student was building prototype to polish, and not actively - thinking about how what they were building would help them test. I - noticed this during office hours when the student felt like - they needed to build features but didn't have plans to test - them.{' '} -

- - ), - }, - { - step: 'Step 2: Based on your understanding of your students, what do you think is causing this situation? List several if you think there are multiple potential causes', - prompt: ( - <> - After you noticed the above situation, how did you support your - student in practicing a more effective working or learning strategy? - - ), - example: ( - <> -

- {' '} - Example:
I encouraged the student to - test the prototype - {' '} - in its imperfect state so we could understand its implications.{' '} -

- - ), - }, - { - step: 'Step 3: Formulate a help strategy for the potential cause(s) identified in step 2. If you identified multiple potential causes, strategize for each one.', - prompt: ( - <> - Based on your answers for Steps 1 and 2, write pseudocode for both the - situation and the support strategy. There's no need to get all - the details in the pseudocode here, please refer to the example below. - - ), - example: ( - <> -

- Example:
-

-
    -
  • - Situation: when student is building prototype but does not - have a plan to test it -
    • -
  • - Strategy: send Slack message: "Before you continue - building tech, could you test the ARGUMENTS faster in a lower - fidelity" at 1 hour before SIG -
    • -
- - ), - }, - ]; return ( -
-
-
-
-
- {' '} - {scaffoldingSteps[0].step} -

{scaffoldingSteps[0].example}

-
- -
-
-
- {' '} - {scaffoldingSteps[1].step} -
-
-
- 1 - -
-
-
-
- 2 - -
-
-
-
- 3 - - -
-
-
-
-
- {' '} - {scaffoldingSteps[2].step} -
-
-
- 1 - -
-
-
-
- 2 - -
-
-
- 3 - - -
-
-
- - {/* Blockly Interface */} -
-
- -

Next

-
- } - previousControlIcon={ -
-

Back

-
- } - styles={{ - controls: { - marginTop: 75, - justifyContent: 'center', - gap: 20, - height: rem(50), - borderColor: 'black', - }, - control: { - padding: 12, - borderRadius: 2, - borderStyle: 'solid', - borderWidth: 1, - borderColor: 'black', - }, - // indicators: { - // width: rem(50), - // height: rem(4), - // transition: 'width 250ms ease', - // backgroundColor: 'black', - - // '&[data-active]': { - // width: rem(40), - // }, - // }, - }} - > - -
-

- Step 1: Getting started -

-

- The execution flow of a script is as such:

- -- Detector triggers

- -- send message to you that provide 1. suggestions for root - causes 2. context information to help you diagnose the cause - of the problem -

-- you select a root cause by replying to the - message -

-- system execute strategy for the root cause - selected -

-
- - -
-

Step 2: Script Scope

-

- A general script consists of 4 parts:{' '} - Scope, Detector, Message Constructor, and Strategies.{' '} -

-

- Let's first define the scope of this script! Who do you want - this script to apply for? Is it a specific SIG? Is it all - projects?

- You will specify your scope by attaching a "Scope" block to - the "I want this script to apply to" block.

- - Take a look at the "Scope" blocks under Social Structures - -

-
- - -
-

- Step 3: Script Detector -

-

- - Now that we have a scope, let's define how we will detect - the situation. - {' '} -

- You can build the detector by attaching different condition - blocks to the blue "Detector (=if)" block.

- After the Don't worry about detecting any root causes in the - detector.{' '} - {/* - Hint: you can combine different conditions using the - "Logic" blocks. - */} - {/*

- Note: if your scope contains more than one object (1+ - projects, SIGs etc.), the detector and strategy will - automatically run for each object. */} -

-
- - -
-

- Step 4: Construct Message -

-

- - After the Detector triggers, the system will send a slack - message to you to notify you of the situation. - {' '} -

- You can customize your own message under the yellow - "Construct Message" block, adding situation name, root - causes, context, memo to yourself etc..

- For each root causes, first enter a description, then some - context information that you would like to know to help you - diagnose the situation. - - e.g. you can use data from the tools (check under "Sprint" - "Canvases") or use a text block to write a memo to - yourself to remind you to ask further about the issue! - -

-
- - -
-

- Step 4: Script Strategies -

-

- - When this situation is detected, what do you want to do - about it? - {' '} -

You can use the blue "Strategy" block to include - how you want to support your students.

A situation - can also have multiple strategies. Use the "Set of" green - block to declare a set of strategies. Then, attach the - strategies to a "Root Cause" block to specify which root - cause it addresses.

- - e.g. one strategy could be to send a slack message to - yourself/your student when something comes up (look under - "Communication") - -

-
- - -
- -
- -
+
+ + +
); }; diff --git a/components/RootCause.module.css b/components/RootCause.module.css new file mode 100644 index 0000000..c037999 --- /dev/null +++ b/components/RootCause.module.css @@ -0,0 +1,19 @@ +.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 50px; + background-color: lightblue; + justify-content: center; + margin-bottom: 20px; + align-items: center; + height: 100%; +} + +.container textarea { + width: 100%; + height: 100px; +} + +.container > * { + padding: 20px; + height: 100%; +} \ No newline at end of file diff --git a/components/RootCause.tsx b/components/RootCause.tsx new file mode 100644 index 0000000..84ab7c4 --- /dev/null +++ b/components/RootCause.tsx @@ -0,0 +1,30 @@ +import styles from "./RootCause.module.css" +import React, { useState, useEffect } from 'react'; +import { Context } from "./Context" +import { Strategy } from "./Strategy" + +export const RootCause = ({index, RCs, setRCs, id} : any) => { + const workspaceId = `workspace${id+1}` + + const deleteRC = () => { + let copy = [...RCs] + copy.splice(index, 1) + console.log(index, copy) + setRCs(copy) + } + + const updateRC = (val : string, field : string) => { + let copy = [...RCs] + copy[index][field] = val + setRCs(copy) + } + + return ( +
+