New interface

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 =
-    '<xml xmlns="http://www.w3.org/1999/xhtml"><block type="ApplicableSet" x="30" y="30"></block><block type="rootCause" x="200" y="300"></block><block type="Detector" x="30" y="145"></block><block type="StrategiesWrapper" x="30" y="200"></block><block type="Strategies" x="200" y="200"></block></xml>';
+    '<xml xmlns="http://www.w3.org/1999/xhtml"><block type="ApplicableSet" x="30" y="30"></block><block type="Detector" x="30" y="145"></block></xml>';
 
   function workspaceDidChange(workspace) {
     // console.log(workspace);
@@ -19,7 +25,9 @@ export default function BlockEditor() {
 
   return (
     <>
+    {workspaceId === 'workspace1' && (
       <BlocklyWorkspace
+        id="workspace1"
         toolboxConfiguration={toolboxCategories}
         initialXml={initialXml}
         className="blocklyWorkspace"
@@ -32,8 +40,162 @@ export default function BlockEditor() {
           },
         }}
         onWorkspaceChange={workspaceDidChange}
-        onXmlChange={setXml}
+        // onXmlChange={setXml}
       />
+    )}
+    {workspaceId === 'workspace2' && (
+      <BlocklyWorkspace
+        id="workspace2"
+        toolboxConfiguration={toolboxCategories}
+        initialXml={RCs[index].strategy}
+        className="blocklyWorkspace"
+        workspaceConfiguration={{
+          grid: {
+            spacing: 20,
+            length: 3,
+            colour: 'red',
+            snap: true,
+          },
+        }}
+        onWorkspaceChange={workspaceDidChange}
+        onXmlChange={setXml}
+      />)}
+      {workspaceId === 'workspace3' && (
+      <BlocklyWorkspace
+        id="workspace3"
+        toolboxConfiguration={toolboxCategories}
+        initialXml={RCs[index].strategy}
+        className="blocklyWorkspace"
+        workspaceConfiguration={{
+          grid: {
+            spacing: 20,
+            length: 3,
+            colour: 'blue',
+            snap: true,
+          },
+        }}
+        onWorkspaceChange={workspaceDidChange}
+        onXmlChange={setXml}
+      />)}
+      {workspaceId === 'workspace4' && (
+      <BlocklyWorkspace
+        id="workspace4"
+        toolboxConfiguration={toolboxCategories}
+        initialXml={RCs[index].strategy}
+        className="blocklyWorkspace"
+        workspaceConfiguration={{
+          grid: {
+            spacing: 20,
+            length: 3,
+            colour: 'green',
+            snap: true,
+          },
+        }}
+        onWorkspaceChange={workspaceDidChange}
+        onXmlChange={setXml}
+      />)}
+      {workspaceId === 'workspace5' && (
+      <BlocklyWorkspace
+        id="workspace5"
+        toolboxConfiguration={toolboxCategories}
+        initialXml={RCs[index].strategy}
+        className="blocklyWorkspace"
+        workspaceConfiguration={{
+          grid: {
+            spacing: 20,
+            length: 3,
+            colour: 'purple',
+            snap: true,
+          },
+        }}
+        onWorkspaceChange={workspaceDidChange}
+        onXmlChange={setXml}
+      />)}
+      {workspaceId === 'workspace6' && (
+      <BlocklyWorkspace
+        id="workspace6"
+        toolboxConfiguration={toolboxCategories}
+        initialXml={RCs[index].strategy}
+        className="blocklyWorkspace"
+        workspaceConfiguration={{
+          grid: {
+            spacing: 20,
+            length: 3,
+            colour: 'pink',
+            snap: true,
+          },
+        }}
+        onWorkspaceChange={workspaceDidChange}
+        onXmlChange={setXml}
+      />)}
+      {workspaceId === 'workspace7' && (
+      <BlocklyWorkspace
+        id="workspace7"
+        toolboxConfiguration={toolboxCategories}
+        initialXml={RCs[index].strategy}
+        className="blocklyWorkspace"
+        workspaceConfiguration={{
+          grid: {
+            spacing: 20,
+            length: 3,
+            colour: 'yellow',
+            snap: true,
+          },
+        }}
+        onWorkspaceChange={workspaceDidChange}
+        onXmlChange={setXml}
+      />)}
+      {workspaceId === 'workspace8' && (
+      <BlocklyWorkspace
+        id="workspace8"
+        toolboxConfiguration={toolboxCategories}
+        initialXml={RCs[index].strategy}
+        className="blocklyWorkspace"
+        workspaceConfiguration={{
+          grid: {
+            spacing: 20,
+            length: 3,
+            colour: 'orange',
+            snap: true,
+          },
+        }}
+        onWorkspaceChange={workspaceDidChange}
+        onXmlChange={setXml}
+      />)}
+      {workspaceId === 'workspace9' && (
+      <BlocklyWorkspace
+        id="workspace9"
+        toolboxConfiguration={toolboxCategories}
+        initialXml={RCs[index].strategy}
+        className="blocklyWorkspace"
+        workspaceConfiguration={{
+          grid: {
+            spacing: 20,
+            length: 3,
+            colour: 'lavender',
+            snap: true,
+          },
+        }}
+        onWorkspaceChange={workspaceDidChange}
+        onXmlChange={setXml}
+      />)}
+      {workspaceId === 'workspace10' && (
+      <BlocklyWorkspace
+        id="workspace10"
+        toolboxConfiguration={toolboxCategories}
+        initialXml={RCs[index].strategy}
+        className="blocklyWorkspace"
+        workspaceConfiguration={{
+          grid: {
+            spacing: 20,
+            length: 3,
+            colour: 'black',
+            snap: true,
+          },
+        }}
+        onWorkspaceChange={workspaceDidChange}
+        onXmlChange={setXml}
+      />)}
     </>
   );
-}
+}

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;
+}

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 (
+        <div className={styles.container}>
+            <select onChange={(e) => addContext(e.target.value)} value="Select context">
+                <option>Select context</option>
+                {options.map((x) => <option>{x}</option>)}
+            </select>
+            <div className={styles.contexts}>
+                {[...RCs[index].context].map((x: any) => <Tag name={x} RCs={RCs} index={index} setRCs={setRCs} />)}
+            </div>
+        </div>
+    )
+}

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;
+}

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 (
+        <div className={styles.container}>
+            <h2>Detector</h2>
+
+            <div className={styles.blockly}>
+                <BlocklyEditor workspaceId="workspace1"/>
+            </div>
+        </div>
+    )
+}