Basic structure for the Add New Allowance Modal.

edx_proctoring/static/proctoring/js/views/proctored_exam_add_allowance_view.js

+var edx = edx || {};
+
+(function(Backbone, $, _) {
+    'use strict';
+
+    edx.instructor_dashboard = edx.instructor_dashboard || {};
+    edx.instructor_dashboard.proctoring = edx.instructor_dashboard.proctoring || {};
+
+    edx.instructor_dashboard.proctoring.AddAllowanceView = Backbone.ModalView.extend(
+	{
+		name: "AddAllowanceView",
+		template: null,
+        model: edx.instructor_dashboard.proctoring.ProctoredExamAllowanceModel,
+        tempate_url: '/static/proctoring/templates/add-new-allowance.underscore',
+		initialize: function() {
+            _.bindAll( this, "render");
+            this.loadTemplateData();
+            // Backbone.Validation.bind( this,  {valid:this.hideError, invalid:this.showError});
+        },
+		events: {
+            "submit form": "addAllowance"
+	    },
+        loadTemplateData: function(){
+            var self = this;
+            $.ajax({url: self.tempate_url, dataType: "html"})
+            .error(function(jqXHR, textStatus, errorThrown){
+
+            })
+            .done(function(template_data) {
+                self.template  = _.template(template_data);
+                self.render();
+                self.showModal();
+            });
+        },
+
+		getCurrentFormValues: function() {
+            return {
+                name: $("#name").val(),
+                email: $("#email").val(),
+                phone: $("#phone").val()
+            };
+        },
+		hideError:
+			function(  view, attr, selector)
+			{
+				var $element = view.$form[attr];
+
+				$element.removeClass( "error");
+				$element.parent().find( ".error-message").empty();
+			},
+		showError:
+			function( view, attr, errorMessage, selector)
+			{
+				var $element = view.$form[attr];
+
+				$element.addClass( "error");
+				var $errorMessage = $element.parent().find(".error-message");
+				if( $errorMessage.length == 0)
+				{
+					$errorMessage = $("<div class='error-message'></div>");
+					$element.parent().append( $errorMessage);
+				}
+
+				$errorMessage.empty().append( errorMessage);
+			},
+		addAllowance:
+			function( event)
+			{
+				event.preventDefault();
+
+//				if( this.model.set( this.getCurrentFormValues()))
+//				{
+					this.hideModal();
+//				}
+			},
+
+		render:
+			function()
+			{
+                var exams_data = [{'exam_name':'exam12'},{'exam_name':'exam22'},{'exam_name':'exam32'}];
+                var allowance_types = ['Additional time (minutes)'];
+
+				$(this.el).html( this.template({
+                    proctored_exams: exams_data,
+                    allowance_types: allowance_types
+                }));
+
+				this.$form = {
+					name: this.$("#name"),
+					email: this.$("#email"),
+					phone: this.$("#phone")}
+
+				return this;
+			}
+	});
+}).call(this, Backbone, $, _);

edx_proctoring/static/proctoring/js/views/proctored_exam_allowance_view.js

@@ -123,6 +123,9 @@ var edx = edx || {};
                 this.$el.html(html);
                 this.$el.show();
             }
+        },
+        showAddModal: function() {
+            var add_allowance_view = new edx.instructor_dashboard.proctoring.AddAllowanceView();
         }
     });
 }).call(this, Backbone, $, _);

edx_proctoring/static/proctoring/templates/add-new-allowance.underscore

+<div class='modal-header'>Add a new Allowance</div>
+<form>
+    <table class='compact'>
+        <tr>
+            <td>
+                <label>Proctored Exam</label>
+            </td>
+            <td>
+                <select name='exams'>
+                    <% _.each(proctored_exams, function(proctored_exam){ %>
+                    <option value="<%= proctored_exam.exam_name %>"><%= proctored_exam.exam_name %></option>
+                    <% }); %>
+                </select>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <label>Allowance Type</label>
+            </td>
+            <td>
+                <select>
+                    <% _.each(allowance_types, function(allowance_type){ %>
+                    <option value="<%= allowance_type %>"><%= allowance_type %></option>
+                    <% }); %>
+                </select>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <label>Value</label>
+            </td>
+            <td>
+                <input>
+                </input>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <label>Username or Email</label>
+            </td>
+            <td>
+                <input>
+                </input>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <input id='addNewAllowance' type='submit' value='Save' />
+            </td>
+        </tr>
+    </table>
+</form>
\ No newline at end of file