updated assessment launch to include validation

mvillis · Jan 5, 2016 · 00be7e2 · 00be7e2
1 parent 092016c
commit 00be7e2
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 43 deletions.
diff --git a/measure_mate/static/css/measure-mate.css b/measure_mate/static/css/measure-mate.css
@@ -10,4 +10,9 @@ a,tr.clickable-row {
 
 .like-pre {
     white-space: pre-wrap;
-}
+}
+
+.v-cent {
+  padding-top: 6px;
+  padding-left: 6px;
+}
diff --git a/measure_mate/templates/index.html b/measure_mate/templates/index.html
@@ -129,52 +129,79 @@ <h1>Welcome to Measure Mate!</h1>
                   })
                   console.log(val);
               },
-              handleSubmit: function() {
-                var template = this.state.template;
-                var tags = this.state.tags.map(function (value) {
-                  return (
-                    value.value
-                  );
-                });
+              handleSubmit: function(e) {
+                e.preventDefault();
+                if (this.state.template && this.state.tags) {
+                  var template = this.state.template;
+                  var tags = this.state.tags.map(function (value) {
+                    return (
+                      value.value
+                    );
+                  });
+                  this.createAssessment(template, tags);
+                } else {
+                  var message = "Template &amp; tag/s required."
+                  this.showError(message);
+                }
+              },
+
+              showError: function(message) {
+                document.getElementById("form-error").innerHTML = message;
+                document.getElementById("form-error").className =
+                document.getElementById("form-error").className.replace
+                ( /(?:^|\s)hidden(?!\S)/g , '' );
+              },
 
-                setTimeout(function() {
-                    $.ajax({
-                      url: "/api/assessments/",
-                      contentType: "application/json; charset=utf-8",
-                      dataType: 'json',
-                      data: '{"template":' + template + ',"tags":[' + tags + ']}',
-                      type: "POST",
-                      cache: true,
-                      success: function(output) {
-                        console.log(output);
-                        window.location = '/assessment/'+output.id+'/';
-                      },
-                      error: function(xhr, status, err) {
-                        console.error("fail");
-                      }
-                    });
-                }, 500);
+              createAssessment: function(template, tags) {
+                  $.ajax({
+                    context: this,
+                    url: "/api/assessments/",
+                    contentType: "application/json; charset=utf-8",
+                    dataType: 'json',
+                    data: '{"template":' + template + ',"tags":[' + tags + ']}',
+                    type: "POST",
+                    cache: true,
+                    success: function(output) {
+                      console.log(output);
+                      window.location = '/assessment/'+output.id+'/';
+                    },
+                    error: function(xhr, status, err) {
+                      var message = "Launch failed due to unknown reason. Try again later.";
+                      this.showError(message);
+                    }
+                  });
               },
+
               render: function() {
                 return (
-                  <div>
-                    <TemplateSelect
-                        label="Template"
-                        ref="template"
-                        {...this.props}
-                        value={this.state.template}
-                        onChange={this.changeHandlerTemplate}
-                    />
-                    <TagSelect
-                        label="Tags"
-                        ref="tags"
-                        {...this.props}
-                        value={this.state.tags}
-                        onChange={this.changeHandlerTags}
-                        />
-                    <input className="btn btn-default" type="submit" value="Launch" onClick={this.handleSubmit}/>
-                    <div id="validation-failure"/>
-                  </div>
+                  <form className="form-horizontal">
+                    <div className="form-group">
+                      <TemplateSelect
+                          label="Template"
+                          ref="template"
+                          {...this.props}
+                          value={this.state.template}
+                          onChange={this.changeHandlerTemplate}
+                      />
+                    </div>
+                    <div className="form-group">
+                      <TagSelect
+                          label="Tags"
+                          ref="tags"
+                          {...this.props}
+                          value={this.state.tags}
+                          onChange={this.changeHandlerTags}
+                          />
+                    </div>
+                    <div className="form-group">
+                      <div className="col-md-1">
+                        <input className="btn btn-default" type="submit" value="Launch" onClick={this.handleSubmit} aria-describedby="helpBlock"/>
+                      </div>
+                      <div className="col-md-11">
+                        <div id="form-error" className="text-danger v-cent hidden"/>
+                      </div>
+                    </div>
+                  </form>
                 )
               }
             });