Contextual host type colors

This commit is contained in:
Jamie Curnow
2018-07-09 12:21:03 +10:00
parent 54d220a191
commit 0455920355
16 changed files with 231 additions and 28 deletions

View File

@ -1,8 +1,9 @@
<div class="card">
<div class="card-status bg-danger"></div>
<div class="card-header">
<h3 class="card-title">404 Hosts</h3>
<div class="card-options">
<a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add 404 Host</a>
<a href="#" class="btn btn-outline-danger btn-sm ml-2 add-item">Add 404 Host</a>
</div>
</div>
<div class="card-body no-padding min-100">

View File

@ -42,10 +42,11 @@ module.exports = Mn.View.extend({
}));
} else {
view.showChildView('list_region', new EmptyView({
title: 'There are no 404 Hosts',
subtitle: 'Why don\'t you create one?',
link: 'Add 404 Host',
action: function () {
title: 'There are no 404 Hosts',
subtitle: 'Why don\'t you create one?',
link: 'Add 404 Host',
btn_color: 'danger',
action: function () {
Controller.showNginxDeadForm();
}
}));

View File

@ -0,0 +1,34 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><% if (typeof id !== 'undefined') { %>Edit<% } else { %>New<% } %> Proxy Host</h5>
<button type="button" class="close cancel" aria-label="Close" data-dismiss="modal">&nbsp;</button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<label class="form-label">Domain Name <span class="form-required">*</span></label>
<input name="domain_name" type="text" class="form-control" placeholder="example.com" value="<%- domain_name %>" required>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div class="form-group">
<label class="form-label">Forward IP <span class="form-required">*</span></label>
<input type="text" name="forward_ip" class="form-control" placeholder="000.000.000.000" autocomplete="off" maxlength="15" required>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">Forward Port <span class="form-required">*</span></label>
<input name="forward_port" type="number" class="form-control" placeholder="80" value="<%- forward_port %>" required>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-teal save">Save</button>
</div>
</div>

View File

@ -0,0 +1,98 @@
'use strict';
const Mn = require('backbone.marionette');
const template = require('./form.ejs');
const Controller = require('../../controller');
const Cache = require('../../cache');
const Api = require('../../api');
const App = require('../../main');
const ProxyHostModel = require('../../../models/proxy-host');
require('jquery-serializejson');
require('jquery-mask-plugin');
module.exports = Mn.View.extend({
template: template,
className: 'modal-dialog',
ui: {
form: 'form',
forward_ip: 'input[name="forward_ip"]',
buttons: '.modal-footer button',
cancel: 'button.cancel',
save: 'button.save',
error: '.secret-error'
},
events: {
'click @ui.save': function (e) {
e.preventDefault();
return;
this.ui.error.hide();
let view = this;
let data = this.ui.form.serializeJSON();
// Manipulate
data.roles = [];
if ((this.model.get('id') === Cache.User.get('id') && this.model.isAdmin()) || (typeof data.is_admin !== 'undefined' && data.is_admin)) {
data.roles.push('admin');
delete data.is_admin;
}
data.is_disabled = typeof data.is_disabled !== 'undefined' ? !!data.is_disabled : false;
this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
let method = Api.Users.create;
if (this.model.get('id')) {
// edit
method = Api.Users.update;
data.id = this.model.get('id');
}
method(data)
.then(result => {
if (result.id === Cache.User.get('id')) {
Cache.User.set(result);
}
if (view.model.get('id') !== Cache.User.get('id')) {
Controller.showUsers();
}
view.model.set(result);
App.UI.closeModal(function () {
if (method === Api.Users.create) {
// Show permissions dialog immediately
Controller.showUserPermissions(view.model);
}
});
})
.catch(err => {
this.ui.error.text(err.message).show();
this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
});
}
},
onRender: function () {
this.ui.forward_ip.mask('099.099.099.099', {
clearIfNotMatch: true,
placeholder: '000.000.000.000'
});
/*
this.ui.forward_ip.mask('099.099.099.099', {
reverse: true,
clearIfNotMatch: true,
placeholder: '000.000.000.000'
});
*/
},
initialize: function (options) {
if (typeof options.model === 'undefined' || !options.model) {
this.model = new ProxyHostModel.Model();
}
}
});

View File

@ -1,8 +1,9 @@
<div class="card">
<div class="card-status bg-success"></div>
<div class="card-header">
<h3 class="card-title">Proxy Hosts</h3>
<div class="card-options">
<a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add Proxy Host</a>
<a href="#" class="btn btn-outline-success btn-sm ml-2 add-item">Add Proxy Host</a>
</div>
</div>
<div class="card-body no-padding min-100">

View File

@ -42,10 +42,11 @@ module.exports = Mn.View.extend({
}));
} else {
view.showChildView('list_region', new EmptyView({
title: 'There are no Proxy Hosts',
subtitle: 'Why don\'t you create one?',
link: 'Add Proxy Host',
action: function () {
title: 'There are no Proxy Hosts',
subtitle: 'Why don\'t you create one?',
link: 'Add Proxy Host',
btn_color: 'success',
action: function () {
Controller.showNginxProxyForm();
}
}));

View File

@ -1,8 +1,9 @@
<div class="card">
<div class="card-status bg-yellow"></div>
<div class="card-header">
<h3 class="card-title">Redirection Hosts</h3>
<div class="card-options">
<a href="#" class="btn btn-outline-teal btn-sm ml-2 add-item">Add Redirection Host</a>
<a href="#" class="btn btn-outline-yellow btn-sm ml-2 add-item">Add Redirection Host</a>
</div>
</div>
<div class="card-body no-padding min-100">

View File

@ -42,10 +42,11 @@ module.exports = Mn.View.extend({
}));
} else {
view.showChildView('list_region', new EmptyView({
title: 'There are no Redirection Hosts',
subtitle: 'Why don\'t you create one?',
link: 'Add Redirection Host',
action: function () {
title: 'There are no Redirection Hosts',
subtitle: 'Why don\'t you create one?',
link: 'Add Redirection Host',
btn_color: 'yellow',
action: function () {
Controller.showNginxRedirectionForm();
}
}));

View File

@ -1,8 +1,9 @@
<div class="card">
<div class="card-status bg-blue"></div>
<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>
<a href="#" class="btn btn-outline-blue btn-sm ml-2 add-item">Add Stream</a>
</div>
</div>
<div class="card-body no-padding min-100">

View File

@ -42,10 +42,11 @@ module.exports = Mn.View.extend({
}));
} else {
view.showChildView('list_region', new EmptyView({
title: 'There are no Streams',
subtitle: 'Why don\'t you create one?',
link: 'Add Stream',
action: function () {
title: 'There are no Streams',
subtitle: 'Why don\'t you create one?',
link: 'Add Stream',
btn_color: 'blue',
action: function () {
Controller.showNginxStreamForm();
}
}));