Default Site customisation and new Settings space (#91)

This commit is contained in:
jc21
2019-03-04 21:19:36 +10:00
committed by GitHub
parent 6f1d38a0e2
commit 133d66c2fe
31 changed files with 893 additions and 15 deletions

View File

@ -662,5 +662,34 @@ module.exports = {
getHostStats: function () {
return fetch('get', 'reports/hosts');
}
},
Settings: {
/**
* @param {String} setting_id
* @returns {Promise}
*/
getById: function (setting_id) {
return fetch('get', 'settings/' + setting_id);
},
/**
* @returns {Promise}
*/
getAll: function () {
return getAllObjects('settings');
},
/**
* @param {Object} data
* @param {Number} data.id
* @returns {Promise}
*/
update: function (data) {
let id = data.id;
delete data.id;
return fetch('put', 'settings/' + id, data);
}
}
};

View File

@ -383,6 +383,36 @@ module.exports = {
}
},
/**
* Settings
*/
showSettings: function () {
let controller = this;
if (Cache.User.isAdmin()) {
require(['./main', './settings/main'], (App, View) => {
controller.navigate('/settings');
App.UI.showAppContent(new View());
});
} else {
this.showDashboard();
}
},
/**
* Settings Item Form
*
* @param model
*/
showSettingForm: function (model) {
if (Cache.User.isAdmin()) {
if (model.get('id') === 'default-site') {
require(['./main', './settings/default-site/main'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
}
},
/**
* Logout
*/

View File

@ -15,6 +15,7 @@ module.exports = AppRouter.default.extend({
'nginx/access': 'showNginxAccess',
'nginx/certificates': 'showNginxCertificates',
'audit-log': 'showAuditLog',
'settings': 'showSettings',
'*default': 'showDashboard'
}
});

View File

@ -0,0 +1,77 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><%- i18n('settings', id) %></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">
<div class="form-label"><%- description %></div>
<div class="custom-controls-stacked">
<label class="custom-control custom-radio">
<input class="custom-control-input" name="value" value="congratulations" type="radio" required <%- value === 'congratulations' ? 'checked' : '' %>>
<div class="custom-control-label"><%- i18n('settings', 'default-site-congratulations') %></div>
</label>
<label class="custom-control custom-radio">
<input class="custom-control-input" name="value" value="404" type="radio" required <%- value === '404' ? 'checked' : '' %>>
<div class="custom-control-label"><%- i18n('settings', 'default-site-404') %></div>
</label>
<label class="custom-control custom-radio">
<input class="custom-control-input" name="value" value="redirect" type="radio" required <%- value === 'redirect' ? 'checked' : '' %>>
<div class="custom-control-label"><%- i18n('settings', 'default-site-redirect') %></div>
</label>
<label class="custom-control custom-radio">
<input class="custom-control-input" name="value" value="html" type="radio" required <%- value === 'html' ? 'checked' : '' %>>
<div class="custom-control-label"><%- i18n('settings', 'default-site-html') %></div>
</label>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 option-item option-redirect">
<div class="form-group">
<div class="form-label">Redirect to</div>
<input class="form-control redirect-input" name="meta[redirect]" placeholder="https://" type="url" value="<%- meta && typeof meta.redirect !== 'undefined' ? meta.redirect : '' %>">
</div>
</div>
<div class="col-sm-12 col-md-12 option-item option-html">
<div class="form-group">
<label class="form-label">HTTP Status Code</label>
<%
var code = meta && typeof meta.http_code !== 'undefined' ? parseInt(meta.http_code, 10) : 200;
var codes = [
[200, 'OK'],
[204, 'No Content'],
[400, 'Bad Request'],
[401, 'Unauthorized'],
[403, 'Forbidden'],
[404, 'Not Found'],
[418, 'I\'m a Teapot'],
[500, 'Internal Server Error'],
[501, 'Not Implemented'],
[502, 'Bad Gateway'],
[503, 'Service Unavailable']
];
%>
<select class="custom-select" name="meta[http_code]">
<% codes.map(function(item) { %>
<option value="<%- item[0] %>"<%- code === item[0] ? ' selected' : '' %>><%- item[0] %> - <%- item[1] %></option>
<% }); %>
</select>
</div>
<div class="form-group">
<div class="form-label">HTML Content</div>
<textarea class="form-control text-monospace html-content" name="meta[html]" rows="6" placeholder="<!-- Enter your HTML here -->"><%- meta && typeof meta.html !== 'undefined' ? meta.html : '' %></textarea>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary cancel" data-dismiss="modal"><%- i18n('str', 'cancel') %></button>
<button type="button" class="btn btn-teal save"><%- i18n('str', 'save') %></button>
</div>
</div>

View File

@ -0,0 +1,71 @@
'use strict';
const Mn = require('backbone.marionette');
const App = require('../../main');
const template = require('./main.ejs');
require('jquery-serializejson');
require('selectize');
module.exports = Mn.View.extend({
template: template,
className: 'modal-dialog',
ui: {
form: 'form',
buttons: '.modal-footer button',
cancel: 'button.cancel',
save: 'button.save',
options: '.option-item',
value: 'input[name="value"]',
redirect: '.redirect-input',
html: '.html-content'
},
events: {
'change @ui.value': function (e) {
let val = this.ui.value.filter(':checked').val();
this.ui.options.hide();
this.ui.options.filter('.option-' + val).show();
},
'click @ui.save': function (e) {
e.preventDefault();
let val = this.ui.value.filter(':checked').val();
// Clear redirect field before validation
if (val !== 'redirect') {
this.ui.redirect.val('').attr('required', false);
} else {
this.ui.redirect.attr('required', true);
}
this.ui.html.attr('required', val === 'html');
if (!this.ui.form[0].checkValidity()) {
$('<input type="submit">').hide().appendTo(this.ui.form).click().remove();
return;
}
let view = this;
let data = this.ui.form.serializeJSON();
data.id = this.model.get('id');
this.ui.buttons.prop('disabled', true).addClass('btn-disabled');
App.Api.Settings.update(data)
.then(result => {
view.model.set(result);
App.UI.closeModal();
})
.catch(err => {
alert(err.message);
this.ui.buttons.prop('disabled', false).removeClass('btn-disabled');
});
}
},
onRender: function () {
this.ui.value.trigger('change');
}
});

View File

@ -0,0 +1,21 @@
<td>
<div><%- name %></div>
<div class="small text-muted">
<%- description %>
</div>
</td>
<td>
<div>
<% if (id === 'default-site') { %>
<%- i18n('settings', 'default-site-' + value) %>
<% } %>
</div>
</td>
<td class="text-right">
<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 dropdown-item"><i class="dropdown-icon fe fe-edit"></i> <%- i18n('str', 'edit') %></a>
</div>
</div>
</td>

View File

@ -0,0 +1,25 @@
'use strict';
const Mn = require('backbone.marionette');
const App = require('../../main');
const template = require('./item.ejs');
module.exports = Mn.View.extend({
template: template,
tagName: 'tr',
ui: {
edit: 'a.edit'
},
events: {
'click @ui.edit': function (e) {
e.preventDefault();
App.Controller.showSettingForm(this.model);
}
},
initialize: function () {
this.listenTo(this.model, 'change', this.render);
}
});

View File

@ -0,0 +1,8 @@
<thead>
<th><%- i18n('str', 'name') %></th>
<th><%- i18n('str', 'value') %></th>
<th>&nbsp;</th>
</thead>
<tbody>
<!-- items -->
</tbody>

View File

@ -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
}));
}
});

View File

@ -0,0 +1,14 @@
<div class="card">
<div class="card-status bg-teal"></div>
<div class="card-header">
<h3 class="card-title"><%- i18n('settings', 'title') %></h3>
</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>

View File

@ -0,0 +1,50 @@
'use strict';
const Mn = require('backbone.marionette');
const App = require('../main');
const SettingModel = require('../../models/setting');
const ListView = require('./list/main');
const ErrorView = require('../error/main');
const template = require('./main.ejs');
module.exports = Mn.View.extend({
id: 'settings',
template: template,
ui: {
list_region: '.list-region',
add: '.add-item',
dimmer: '.dimmer'
},
regions: {
list_region: '@ui.list_region'
},
onRender: function () {
let view = this;
App.Api.Settings.getAll()
.then(response => {
if (!view.isDestroyed() && response && response.length) {
view.showChildView('list_region', new ListView({
collection: new SettingModel.Collection(response)
}));
}
})
.catch(err => {
view.showChildView('list_region', new ErrorView({
code: err.code,
message: err.message,
retry: function () {
App.Controller.showSettings();
}
}));
console.error(err);
})
.then(() => {
view.ui.dimmer.removeClass('active');
});
}
});

View File

@ -42,6 +42,9 @@
<li class="nav-item">
<a href="/audit-log" class="nav-link"><i class="fe fe-book-open"></i> <%- i18n('audit-log', 'title') %></a>
</li>
<li class="nav-item">
<a href="/settings" class="nav-link"><i class="fe fe-settings"></i> <%- i18n('settings', 'title') %></a>
</li>
<% } %>
</ul>
</div>