Dynamic blocks

client/src/blocks/index.js

@@ -0,0 +1,4 @@
+module.exports = {
+  input: require("./input.js"),
+  output: require("./output.js")
+}

client/src/blocks/input.js

@@ -0,0 +1,13 @@
+module.exports =  {
+  name: "Input",
+  inputs: {
+  },
+  output: true,
+  execute: function({}, block){
+    block.find("input[name='input']").val();
+  },
+  pageBlock: {
+    html: "<input type='text' name='input'></input>",
+    js: function(){}
+  }
+}

client/src/blocks/output.js

@@ -0,0 +1,14 @@
+module.exports =  {
+  name: "Output",
+  inputs: {
+    input: "Input"
+  },
+  output: false,
+  execute: function({input}, block){
+    $(elem).find("div.output").html(input1);
+  },
+  pageBlock: {
+    html: "<span class='output'></span>",
+    js: function(){}
+  }
+}

client/src/blocks/template.js

@@ -0,0 +1,15 @@
+module.exports =  {
+  name: "Example Block",
+  inputs: {
+    input1: "Input 1"
+  },
+  output: true,
+  execute: function({input1}, elem){
+    $(elem).find("div.input1").html(input1);
+    return (output = parseInt(input1) + 1).toString();
+  },
+  pageBlock: {
+    html: "<div class='input1'></div>",
+    js: function(){}
+  }
+}

client/src/document.js

@@ -0,0 +1 @@
+module.exports = {};

client/src/index.html

@@ -7,38 +7,8 @@
       Header will go here
     </div>
     <div id="blocks">
-      <div class="block">
-        <div class="inputs">
-          <div id="input1">Input 1</div>
-          <div id="input2">Input 2</div>
-        </div>
-        <div class="main">
-          <div>
-            <div class="title">Test Block</div>
-            <div class="content">Custom code will go here</div>
-          </div>
-        </div>
-        <div class="output">
-          Output
-        </div>
-      </div>
     </div>
     <div id="workspace">
-      <div class="block">
-        <div class="inputs">
-          <div id="input1">Input 1</div>
-          <div id="input2">Input 2</div>
-        </div>
-        <div class="main">
-          <div>
-            <div class="title">Test Block</div>
-            <div class="content">Custom code will go here</div>
-          </div>
-        </div>
-        <div class="output">
-          Output
-        </div>
-      </div>
     </div>
   </body>
 </html>

client/src/index.js

@@ -1 +1,2 @@
 require("./styles.scss");
+require("./pageInteraction");

client/src/pageInteraction/block.hbs

@@ -0,0 +1,18 @@
+<div class="block">
+  <div class="inputs">
+    {{#each inputs as |desc name|}}
+      <div id="{{name}}">{{desc}}</div>
+    {{/each}}
+  </div>
+  <div class="main">
+    <div>
+      <div class="title">{{name}}</div>
+      {{{pageBlock.html}}}
+    </div>
+  </div>
+  {{#if output}}
+    <div class="output">
+      Output
+    </div>
+  {{/if}}
+</div>

client/src/pageInteraction/index.js

@@ -0,0 +1 @@
+require("./setupBlocks.js");

client/src/pageInteraction/setupBlocks.js

@@ -0,0 +1,5 @@
+var $ = require("jquery");
+var blocks = require("../blocks");
+for(var block of Object.keys(blocks)){
+  $("#blocks").append(require("./block.hbs")(blocks[block]));
+}

client/src/styles.scss

@@ -9,6 +9,14 @@ body{
   flex-direction: column;
 }
 
+#blocks{
+  display: flex;
+  flex-direction: row;
+  .block{
+    margin: 10px;
+  }
+}
+
 .block{
   width: 200px;
   height: 200px;
@@ -19,6 +27,7 @@ body{
     display: flex;
     flex-direction: row;
     >div{
+      font-weight: bold;
       border: 1px solid black;
       flex-grow: 1;
       text-align: center;
@@ -37,6 +46,7 @@ body{
     }
   }
   >.output{
+    font-weight: bold;
     border: 1px solid black;
     text-align: center;
     padding-top: 5px;
@@ -48,7 +58,5 @@ body{
   position: relative;
   .block{
     position: absolute;
-    top: 40px;
-    left: 40px;
   }
 }

client/webpack.config.js

@@ -24,6 +24,14 @@ module.exports = {
         }, {
           loader: "sass-loader"
         }]
+      },
+      {
+        test: /\.hbs$/,
+        use: [
+          {
+            loader: "handlebars-loader"
+          }
+        ]
       }
     ]
   }

package.json

@@ -19,7 +19,10 @@
   "homepage": "https://github.com/TimStallard/CryptoAssist#readme",
   "devDependencies": {
     "css-loader": "^0.26.1",
+    "handlebars": "^4.0.6",
+    "handlebars-loader": "^1.4.0",
     "html-webpack-plugin": "^2.28.0",
+    "jquery": "^3.1.1",
     "node-sass": "^4.5.0",
     "sass-loader": "^6.0.1",
     "style-loader": "^0.13.1",