Ongoing rewrite work

src/frontend/js/app/nginx/stream/list/item.ejs

@@ -0,0 +1,32 @@
+<td class="text-center">
+    <div class="avatar d-block" style="background-image: url(<%- avatar || '/images/default-avatar.jpg' %>)">
+        <span class="avatar-status <%- is_disabled ? 'bg-red' : 'bg-green' %>"></span>
+    </div>
+</td>
+<td>
+    <div><%- name %></div>
+    <div class="small text-muted">
+        Created: <%- formatDbDate(created_on, 'Do MMMM YYYY') %>
+    </div>
+</td>
+<td>
+    <div><%- email %></div>
+</td>
+<td>
+    <div><%- roles.join(', ') %></div>
+</td>
+<td class="text-center">
+    <div class="item-action dropdown">
+        <a href="#" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
+        <div class="dropdown-menu dropdown-menu-right">
+            <a href="#" class="edit-user dropdown-item"><i class="dropdown-icon fe fe-edit"></i> Edit Details</a>
+            <a href="#" class="edit-permissions dropdown-item"><i class="dropdown-icon fe fe-shield"></i> Edit Permissions</a>
+            <a href="#" class="set-password dropdown-item"><i class="dropdown-icon fe fe-lock"></i> Set Password</a>
+            <% if (!isSelf()) { %>
+            <a href="#" class="login dropdown-item"><i class="dropdown-icon fe fe-log-in"></i> Sign in as User</a>
+            <div class="dropdown-divider"></div>
+            <a href="#" class="delete-user dropdown-item"><i class="dropdown-icon fe fe-trash-2"></i> Delete User</a>
+            <% } %>
+        </div>
+    </div>
+</td>

src/frontend/js/app/nginx/stream/list/item.js

@@ -0,0 +1,72 @@
+'use strict';
+
+const Mn         = require('backbone.marionette');
+const Controller = require('../../../controller');
+const Api        = require('../../../api');
+const Cache      = require('../../../cache');
+const Tokens     = require('../../../tokens');
+const template   = require('./item.ejs');
+
+module.exports = Mn.View.extend({
+    template: template,
+    tagName:  'tr',
+
+    ui: {
+        edit:        'a.edit-user',
+        permissions: 'a.edit-permissions',
+        password:    'a.set-password',
+        login:       'a.login',
+        delete:      'a.delete-user'
+    },
+
+    events: {
+        'click @ui.edit': function (e) {
+            e.preventDefault();
+            Controller.showUserForm(this.model);
+        },
+
+        'click @ui.permissions': function (e) {
+            e.preventDefault();
+            Controller.showUserPermissions(this.model);
+        },
+
+        'click @ui.password': function (e) {
+            e.preventDefault();
+            Controller.showUserPasswordForm(this.model);
+        },
+
+        'click @ui.delete': function (e) {
+            e.preventDefault();
+            Controller.showUserDeleteConfirm(this.model);
+        },
+
+        'click @ui.login': function (e) {
+            e.preventDefault();
+
+            if (Cache.User.get('id') !== this.model.get('id')) {
+                this.ui.login.prop('disabled', true).addClass('btn-disabled');
+
+                Api.Users.loginAs(this.model.get('id'))
+                    .then(res => {
+                        Tokens.addToken(res.token, res.user.nickname || res.user.name);
+                        window.location = '/';
+                        window.location.reload();
+                    })
+                    .catch(err => {
+                        alert(err.message);
+                        this.ui.login.prop('disabled', false).removeClass('btn-disabled');
+                    });
+            }
+        }
+    },
+
+    templateContext: {
+        isSelf: function () {
+            return Cache.User.get('id') === this.id;
+        }
+    },
+
+    initialize: function () {
+        this.listenTo(this.model, 'change', this.render);
+    }
+});

src/frontend/js/app/nginx/stream/list/main.ejs

@@ -0,0 +1,10 @@
+<thead>
+    <th width="30">&nbsp;</th>
+    <th>Name</th>
+    <th>Email</th>
+    <th>Roles</th>
+    <th>&nbsp;</th>
+</thead>
+<tbody>
+    <!-- items -->
+</tbody>

src/frontend/js/app/nginx/stream/list/main.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const Mn         = require('backbone.marionette');
+const ItemView   = require('./item');
+const template   = require('./main.ejs');
+
+const TableBody = Mn.CollectionView.extend({
+    tagName:   'tbody',
+    childView: ItemView
+});
+
+module.exports = Mn.View.extend({
+    tagName:   'table',
+    className: 'table table-hover table-outline table-vcenter text-nowrap card-table',
+    template:  template,
+
+    regions: {
+        body: {
+            el:             'tbody',
+            replaceElement: true
+        }
+    },
+
+    onRender: function () {
+        this.showChildView('body', new TableBody({
+            collection: this.collection
+        }));
+    }
+});

src/frontend/js/app/nginx/stream/main.ejs

@@ -1 +1,16 @@
-stream
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">Streams</h3>
+        <div class="card-options">
+            <a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add Stream</a>
+        </div>
+    </div>
+    <div class="card-body no-padding min-100">
+        <div class="dimmer active">
+            <div class="loader"></div>
+            <div class="dimmer-content list-region">
+                <!-- List Region -->
+            </div>
+        </div>
+    </div>
+</div>

src/frontend/js/app/nginx/stream/main.js

@@ -1,9 +1,70 @@
 'use strict';
 
-const Mn       = require('backbone.marionette');
-const template = require('./main.ejs');
+const Mn          = require('backbone.marionette');
+const StreamModel = require('../../../models/stream');
+const Api         = require('../../api');
+const Controller  = require('../../controller');
+const ListView    = require('./list/main');
+const ErrorView   = require('../../error/main');
+const template    = require('./main.ejs');
+const EmptyView   = require('../../empty/main');
 
 module.exports = Mn.View.extend({
+    id:       'nginx-streams',
     template: template,
-    id:       'nginx-stream'
+
+    ui: {
+        list_region: '.list-region',
+        add:         '.add-item',
+        dimmer:      '.dimmer'
+    },
+
+    regions: {
+        list_region: '@ui.list_region'
+    },
+
+    events: {
+        'click @ui.add': function (e) {
+            e.preventDefault();
+            Controller.showNginxStreamForm();
+        }
+    },
+
+    onRender: function () {
+        let view = this;
+
+        Api.Nginx.RedirectionHosts.getAll()
+            .then(response => {
+                if (!view.isDestroyed()) {
+                    if (response && response.length) {
+                        view.showChildView('list_region', new ListView({
+                            collection: new StreamModel.Collection(response)
+                        }));
+                    } else {
+                        view.showChildView('list_region', new EmptyView({
+                            title:    'There are no Streams',
+                            subtitle: 'Why don\'t you create one?',
+                            link:     'Add Stream',
+                            action:   function () {
+                                Controller.showNginxStreamForm();
+                            }
+                        }));
+                    }
+                }
+            })
+            .catch(err => {
+                view.showChildView('list_region', new ErrorView({
+                    code:    err.code,
+                    message: err.message,
+                    retry:   function () {
+                        Controller.showNginxStream();
+                    }
+                }));
+
+                console.error(err);
+            })
+            .then(() => {
+                view.ui.dimmer.removeClass('active');
+            });
+    }
 });