Implemented editor

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "lodash": "^4.17.20",
     "node-sass": "^5.0.0",
     "sass-loader": "^10.1.0",
     "vue": "^2.6.12",

src/components/LoginBoxContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <md-tabs>
+    <md-tabs md-dynamic-height>
       <md-tab id="tab-login" md-label="Login" exact>
         <login/>
       </md-tab>

src/simple-flowchart/components/FlowchartNode.vue

@@ -1,36 +1,106 @@
 <template>
-  <div class="flowchart-node" :style="nodeStyle"
+  <div>
-       @mousedown.prevent="handleMousedown"
+
-       @mouseover.prevent="handleMouseOver"
+    <md-dialog :md-active.sync="show.editor">
-       @mouseleave.prevent="handleMouseLeave"
+      <md-dialog-title>{{ capitalizedType }} preferences</md-dialog-title>
-       @dblclick.prevent="editProperties"
+
-       v-bind:class="{selected: options.selected === id}">
+      <form class="editor-form">
+
+        <div v-if="type === 'ingest'">
+
+          <md-field>
+            <label>Url</label>
+            <md-input readonly="true" v-model="editorData.url"></md-input>
+          </md-field>
+
+        </div>
+        <div v-else-if="type === 'encoder'">
+
+          <md-field>
+            <label>Width</label>
+            <md-input type="number" v-model="editorData.width"></md-input>
+          </md-field>
+
+          <md-field>
+            <label>Height</label>
+            <md-input type="number" v-model="editorData.height"></md-input>
+          </md-field>
+
+          <md-field>
+            <label>Bitrate</label>
+            <md-input type="number" v-model="editorData.bitrate"></md-input>
+          </md-field>
+
+
+        </div>
+        <div v-else-if="type === 'restreamer'">
+
+          <md-field>
+            <label>Url</label>
+            <md-input v-model="editorData.url"></md-input>
+          </md-field>
+
+          <md-field>
+            <label>Stream Key</label>
+            <md-input type="password" v-model="editorData.streamkey"></md-input>
+          </md-field>
+
+
+        </div>
+
+      </form>
+
+
+      <md-dialog-actions>
+        <md-button @click="show.editor = false">Discard</md-button>
+        <md-button class="md-primary" @click="saveEdit">Save</md-button>
+      </md-dialog-actions>
+    </md-dialog>
+
+    <div class="flowchart-node" :style="nodeStyle"
+         @mousedown.prevent="handleMousedown"
+         @mouseover.prevent="handleMouseOver"
+         @mouseleave.prevent="handleMouseLeave"
+         @dblclick.prevent="editProperties"
+         v-bind:class="{selected: options.selected === id}">
+
+      <!--- Input port --->
+      <div class="node-port node-input"
+           v-if="haveInput"
+           @mousedown.prevent
+           @mouseup.prevent="inputMouseUp">
+      </div>
+
+      <!--- The box itself --->
+      <div class="node-main">
+        <div v-text="capitalizedType" class="node-type"></div>
+        <div class="node-content">
+          <table>
+            <tr :key="k" v-for="(v, k) in data">
+              <th>{{ k }}</th>
+              <td>{{ v }}</td>
+            </tr>
+          </table>
+
+        </div>
+      </div>
+
+      <!--- Output port --->
+      <div class="node-port node-output"
+           v-if="haveOutput"
+           @mousedown.prevent="outputMouseDown">
+      </div>
+
+      <div v-show="show.delete" class="node-delete">&times;</div>
 
-    <!--- Input port --->
-    <div class="node-port node-input"
-         v-if="haveInput"
-         @mousedown.prevent
-         @mouseup.prevent="inputMouseUp">
     </div>
-
-    <!--- The box itself --->
-    <div class="node-main">
-      <div v-text="type" class="node-type"></div>
-      <div class="node-label">Content</div>
-    </div>
-
-    <!--- Output port --->
-    <div class="node-port node-output"
-         v-if="haveOutput"
-         @mousedown.prevent="outputMouseDown">
-    </div>
-
-    <div v-show="show.delete" class="node-delete">&times;</div>
-
   </div>
 </template>
 
 <script>
+
+import {cloneDeep, capitalize} from 'lodash';
+
 export default {
   name: 'FlowchartNode',
   props: {
@@ -79,7 +149,9 @@ export default {
     return {
       show: {
         delete: false,
-      }
+        editor: false
+      },
+      editorData: {}
     }
   },
   mounted() {
@@ -97,6 +169,9 @@ export default {
     },
     haveOutput() {
       return this.type !== "restreamer"
+    },
+    capitalizedType() {
+      return capitalize(this.type);
     }
   },
   methods: {
@@ -121,7 +196,12 @@ export default {
       this.$emit('linkingStop')
     },
     editProperties() {
-      this.$emit('update:data', {"text": "asd"});
+      this.editorData = cloneDeep(this.data);
+      this.show.editor = true;
+    },
+    saveEdit() {
+      this.show.editor = false;
+      this.$emit('update:data', this.editorData);
     }
   }
 }
@@ -146,17 +226,24 @@ $portSize: 14;
   transform-origin: top left;
 
   .node-main {
-    text-align: center;
+
+    overflow: hidden;
 
     .node-type {
       background: $themeColor;
       color: white;
       font-size: 13px;
       padding: 6px;
+      text-align: center;
     }
 
-    .node-label {
+    .node-content {
       font-size: 13px;
+
+      th {
+        width: 50%;
+      }
+
     }
   }
 
@@ -206,6 +293,10 @@ $portSize: 14;
   }
 }
 
+.editor-form {
+  padding: 1.5em;
+}
+
 .selected {
   box-shadow: 0 0 0 2px $themeColor;
 }

src/simple-flowchart/components/SimpleFlowchart.vue

@@ -116,7 +116,6 @@ export default {
   mounted() {
     this.rootDivOffset.top = this.$el ? this.$el.offsetTop : 0;
     this.rootDivOffset.left = this.$el ? this.$el.offsetLeft : 0;
-    // console.log(22222, this.rootDivOffset);
   },
   methods: {
     findNodeWithID(id) {

src/views/Dashboard.vue

@@ -5,14 +5,22 @@
       <md-dialog-title>Select the type of the new element</md-dialog-title>
 
 
-      <md-button @click="newElement('ingest')"><md-icon>vertical_align_bottom</md-icon> Ingest</md-button>
+      <md-button @click="newElement('ingest')">
+        <md-icon>vertical_align_bottom</md-icon>
+        Ingest
+      </md-button>
       <i></i> <!-- This is to prevent margin collapse -->
 
-      <md-button @click="newElement('encoder')"><md-icon>gradient</md-icon> Encoder</md-button>
+      <md-button @click="newElement('encoder')">
+        <md-icon>gradient</md-icon>
+        Encoder
+      </md-button>
       <i></i>
 
-      <md-button @click="newElement('restreamer')"><md-icon>publish</md-icon> Restreamer</md-button>
+      <md-button @click="newElement('restreamer')">
-
+        <md-icon>publish</md-icon>
+        Restreamer
+      </md-button>
 
 
     </md-dialog>
@@ -64,11 +72,11 @@
             <md-icon>publish</md-icon>
           </md-button>
 
-          <md-button @click="newElement('encoder')"  class="md-icon-button">
+          <md-button @click="newElement('encoder')" class="md-icon-button">
             <md-icon>gradient</md-icon>
           </md-button>
 
-          <md-button @click="newElement('ingest')"  class="md-icon-button">
+          <md-button @click="newElement('ingest')" class="md-icon-button">
             <md-icon>vertical_align_bottom</md-icon>
           </md-button>
 
@@ -101,21 +109,21 @@ export default {
           x: 100,
           y: 110,
           type: 'ingest',
-          data: {"text": "as"},
+          data: {"url": "rtmp://videon.test.kmlabz.com/test:6554"},
         },
         {
           id: 4,
           x: 357,
           y: 80,
           type: 'restreamer',
-          data: {"text": "asd"},
+          data: {"url": "rtmp://youtube.com/live/stream/ysos:55223", "streamkey": "asdjnao9gj9833tjkq389fjae9jf"},
         },
         {
           id: 6,
           x: 557,
           y: 80,
           type: 'encoder',
-          data: {"text": "asdasd"}
+          data: {"bitrate": 8000, "width": 600, "height": 800}
         }
       ],
       links: [