add basic functionality to front end

frontend/js/app/nginx/access/form.js

@@ -3,6 +3,7 @@ const App             = require('../../main');
 const AccessListModel = require('../../../models/access-list');
 const template        = require('./form.ejs');
 const ItemView        = require('./form/item');
+const ClientView      = require('./form/client');
 
 require('jquery-serializejson');
 
@@ -10,20 +11,26 @@ const ItemsView = Mn.CollectionView.extend({
     childView: ItemView
 });
 
+const ClientsView = Mn.CollectionView.extend({
+    childView: ClientView
+});
+
 module.exports = Mn.View.extend({
     template:  template,
     className: 'modal-dialog',
 
     ui: {
-        items_region: '.items',
-        form:         'form',
-        buttons:      '.modal-footer button',
-        cancel:       'button.cancel',
-        save:         'button.save'
+        items_region:   '.items',
+        clients_region: '.clients',
+        form:           'form',
+        buttons:        '.modal-footer button',
+        cancel:         'button.cancel',
+        save:           'button.save'
     },
 
     regions: {
-        items_region: '@ui.items_region'
+        items_region:   '@ui.items_region',
+        clients_region: '@ui.clients_region'
     },
 
     events: {
@@ -35,9 +42,10 @@ module.exports = Mn.View.extend({
                 return;
             }
 
-            let view       = this;
-            let form_data  = this.ui.form.serializeJSON();
-            let items_data = [];
+            let view         = this;
+            let form_data    = this.ui.form.serializeJSON();
+            let items_data   = [];
+            let clients_data = [];
 
             form_data.username.map(function (val, idx) {
                 if (val.trim().length) {
@@ -48,14 +56,24 @@ module.exports = Mn.View.extend({
                 }
             });
 
+            form_data.address.map(function (val, idx) {
+                if (val.trim().length) {
+                    clients_data.push({
+                        address: val.trim(),
+                        directive: form_data.directive[idx]
+                    })
+                }
+            });
+
             if (!items_data.length) {
                 alert('You must specify at least 1 Username and Password combination');
                 return;
             }
 
             let data = {
-                name:  form_data.name,
-                items: items_data
+                name:    form_data.name,
+                items:   items_data,
+                clients: clients_data
             };
 
             let method = App.Api.Nginx.AccessLists.create;
@@ -88,6 +106,7 @@ module.exports = Mn.View.extend({
 
     onRender: function () {
         let items = this.model.get('items');
+        let clients = this.model.get('clients');
 
         // Add empty items to the end of the list. This is cheating but hey I don't have the time to do it right
         let items_to_add = 5 - items.length;
@@ -97,9 +116,20 @@ module.exports = Mn.View.extend({
             }
         }
 
+        let clients_to_add = 5 - clients.length;
+        if (clients_to_add) {
+            for (let i = 0; i < clients_to_add; i++) {
+                clients.push({});
+            }
+        }
+
         this.showChildView('items_region', new ItemsView({
             collection: new Backbone.Collection(items)
         }));
+
+        this.showChildView('clients_region', new ClientsView({
+            collection: new Backbone.Collection(clients)
+        }));
     },
 
     initialize: function (options) {