Added some basic form checks

src/simple-flowchart/components/FlowchartNode.vue

@@ -3,8 +3,8 @@
 
     <md-dialog :md-active.sync="show.editor">
       <md-dialog-title>{{ capitalizedType }} preferences</md-dialog-title>
+      <form novalidate class="editor-form" @submit.prevent="saveEdit">
 
-      <form class="editor-form">
 
         <div v-if="type === 'ingest' && apiId !== null">
 
@@ -30,16 +30,25 @@
           <md-field>
             <label>Width</label>
             <md-input type="number" v-model="editorData.width"></md-input>
+            <md-icon class="md-accent" v-if="show.mistakes && (!editorData.width || editorData.width <= 0)">
+              report_problem
+            </md-icon>
           </md-field>
 
           <md-field>
             <label>Height</label>
             <md-input type="number" v-model="editorData.height"></md-input>
+            <md-icon class="md-accent" v-if="show.mistakes && (!editorData.height || editorData.height <= 0)">
+              report_problem
+            </md-icon>
           </md-field>
 
           <md-field>
             <label>Bitrate</label>
             <md-input type="number" v-model="editorData.bitrate"></md-input>
+            <md-icon class="md-accent" v-if="show.mistakes && (!editorData.bitrate || editorData.bitrate <= 0)">
+              report_problem
+            </md-icon>
           </md-field>
 
 
@@ -49,6 +58,7 @@
           <md-field>
             <label>URL</label>
             <md-input v-model="editorData.url"></md-input>
+            <md-icon class="md-accent" v-if="show.mistakes && (!restreamerValid)">report_problem</md-icon>
           </md-field>
 
           <md-field>
@@ -61,11 +71,11 @@
 
       </form>
 
-
       <md-dialog-actions>
-        <md-button @click="show.editor = false">{{ discardButtonLabel }}</md-button>
+        <md-button @click.prevent="show.editor = false">{{ discardButtonLabel }}</md-button>
-        <md-button class="md-primary" @click="saveEdit" v-if="type !== 'ingest'">Save</md-button>
+        <md-button @click.prevent="saveEdit" class="md-primary" type="submit" v-if="type !== 'ingest'">Save</md-button>
       </md-dialog-actions>
+
     </md-dialog>
 
     <div class="flowchart-node" :style="nodeStyle"
@@ -88,7 +98,7 @@
         <div class="node-content node-content-long" v-if="type === 'ingest'">
 
           <span v-if="this.apiId === null">Apply first!</span>
-          <span v-else><b>URL:</b> {{this.data.url}}</span>
+          <span v-else><b>URL:</b> {{ this.data.url }}</span>
 
         </div>
         <div class="node-content" v-else-if="type === 'encoder'">
@@ -185,7 +195,8 @@ export default {
     return {
       show: {
         delete: false,
-        editor: false
+        editor: false,
+        mistakes: false
       },
       editorData: {}
     }
@@ -218,6 +229,15 @@ export default {
       } else {
         return "DISCARD";
       }
+    },
+    restreamerValid() {
+      let pattern = new RegExp('^((https?|rtmp):\\/\\/)?' + // protocol
+          '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+          '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+          '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+          '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+          '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+      return !!pattern.test(this.editorData.url);
     }
   },
 
@@ -247,9 +267,22 @@ export default {
       this.show.editor = true;
     },
     saveEdit() {
-      this.show.editor = false;
+      let form_valid = true;
-      this.$emit('update:data', this.editorData);
+      if (this.type === 'encoder') {
-      this.$emit("dataUpdated", this.data);
+        form_valid = this.editorData.width && this.editorData.height && this.editorData.bitrate &&
+            (this.editorData.width > 0) && (this.editorData.height > 0) && (this.editorData.bitrate > 0);
+      } else if (this.type === 'restreamer') {
+        form_valid = this.restreamerValid;
+      }
+
+      if (form_valid) {
+        this.show.editor = false;
+        this.show.mistakes = false;
+        this.$emit('update:data', this.editorData);
+        this.$emit("dataUpdated", this.data);
+      } else {
+        this.show.mistakes = true;
+      }
     }
   }
 }

src/views/Dashboard.vue

@@ -80,14 +80,14 @@ export default {
         case "ingest":
           newNode.data = {
             url: "",
-            streamkey: "demokey"
+            streamkey: ""
           }
           break;
         case "encoder":
           newNode.data = {
-            bitrate: 0,
+            bitrate: 2500,
-            width: 0,
+            width: 1280,
-            height: 0
+            height: 720
           }
           break;
         case "restreamer":