Initial commit

manager/src/frontend/js/app/access/empty.ejs

@@ -0,0 +1,5 @@
+<td colspan="10" class="text-center">
+    <br><br>
+    <p>It looks like there are no access lists configured.</p>
+    <p><button type="button" class="btn btn-sm btn-success">Create your first Access List</button></p>
+</td>

manager/src/frontend/js/app/access/empty.js

@@ -0,0 +1,23 @@
+'use strict';
+
+import Mn from 'backbone.marionette';
+
+const template    = require('./empty.ejs');
+const AccessModel = require('../../models/access');
+const Controller  = require('../controller');
+
+module.exports = Mn.View.extend({
+    template: template,
+    tagName:  'tr',
+
+    ui: {
+        create: 'button'
+    },
+
+    events: {
+        'click @ui.create': function (e) {
+            e.preventDefault();
+            Controller.showAccessListForm(new AccessModel.Model);
+        }
+    }
+});

manager/src/frontend/js/app/access/main.ejs

@@ -0,0 +1,11 @@
+<table class="table table-condensed table-striped">
+    <thead>
+        <th>Access List Name</th>
+        <th>User Count</th>
+        <th>Host Count</th>
+        <th class="text-right"><button type="button" class="btn btn-xs btn-info">Create Access List</button></th>
+    </thead>
+    <tbody>
+        <!-- items -->
+    </tbody>
+</table>

manager/src/frontend/js/app/access/main.js

@@ -0,0 +1,62 @@
+'use strict';
+
+import Mn from 'backbone.marionette';
+
+const Api             = require('../api');
+const template        = require('./main.ejs');
+const Controller      = require('../controller');
+const RowView         = require('./row');
+const AccessListModel = require('../../models/access');
+const EmptyView       = require('./empty');
+
+const TableBody = Mn.CollectionView.extend({
+    tagName:   'tbody',
+    childView: RowView
+});
+
+module.exports = Mn.View.extend({
+    template: template,
+    id:       'access',
+
+    regions: {
+        list_region: {
+            el:             'tbody',
+            replaceElement: true
+        }
+    },
+
+    ui: {
+        'create': 'th button'
+    },
+
+    events: {
+        'click @ui.create': function (e) {
+            e.preventDefault();
+            Controller.showAccessListForm(new AccessListModel.Model);
+        }
+    },
+
+    onRender: function () {
+        let view = this;
+
+        Api.Access.getAll()
+            .then(response => {
+                if (!view.isDestroyed()) {
+                    if (response && response.length) {
+                        view.showChildView('list_region', new TableBody({
+                            collection: new AccessListModel.Collection(response)
+                        }));
+                    } else {
+                        view.showChildView('list_region', new EmptyView());
+                    }
+
+                    view.trigger('loaded');
+                }
+            })
+            .catch(err => {
+                Controller.showError(err, 'Could not fetch Access Lists');
+                view.trigger('loaded');
+            });
+    }
+});
+

manager/src/frontend/js/app/access/row.ejs

@@ -0,0 +1,7 @@
+<td><%- name %></td>
+<td><%- items.length %></td>
+<td><%- hosts.length %></td>
+<td class="text-right">
+    <button type="button" class="btn btn-default btn-xs edit" title="Edit"><i class="fa fa-pencil" aria-hidden="true"></i></button>
+    <button type="button" class="btn btn-default btn-xs delete" title="Delete"><i class="fa fa-times" aria-hidden="true"></i></button>
+</td>

manager/src/frontend/js/app/access/row.js

@@ -0,0 +1,32 @@
+'use strict';
+
+import Mn from 'backbone.marionette';
+
+const template   = require('./row.ejs');
+const Controller = require('../controller');
+
+module.exports = Mn.View.extend({
+    template: template,
+    tagName:  'tr',
+
+    ui: {
+        edit:   'button.edit',
+        delete: 'button.delete'
+    },
+
+    events: {
+        'click @ui.edit': function (e) {
+            e.preventDefault();
+            Controller.showAccessListForm(this.model);
+        },
+
+        'click @ui.delete': function (e) {
+            e.preventDefault();
+            Controller.showDeleteAccessList(this.model);
+        }
+    },
+
+    initialize: function () {
+        this.listenTo(this.model, 'change', this.render);
+    }
+});