Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-08 15:25:22 +02:00
Code Issues Releases Activity

refactor(code-editor): introduce code-editor component (#1674)

Browse source 
* refactor(code-editor): introduce code-editor component

* refactor(code-editor): add some extra validation
This commit is contained in:
Anthony Lapenna 2018-02-27 08:19:21 +01:00 • committed by GitHub
parent eb43579378
commit 9b80b6adb2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 104 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

29
app/docker/views/configs/create/createConfigController.js
View file

@ -1,11 +1,12 @@
angular.module('portainer.docker')
.controller('CreateConfigController', ['$scope', '$state', '$document', 'Notifications', 'ConfigService', 'Authentication', 'FormValidator', 'ResourceControlService', 'CodeMirrorService',
function ($scope, $state, $document, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService, CodeMirrorService) {
.controller('CreateConfigController', ['$scope', '$state', 'Notifications', 'ConfigService', 'Authentication', 'FormValidator', 'ResourceControlService',
function ($scope, $state, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
$scope.formValues = {
Name: '',
Labels: [],
AccessControlData: new AccessControlFormData()
AccessControlData: new AccessControlFormData(),
ConfigContent: ''
};
$scope.state = {
@ -31,9 +32,7 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
}
function prepareConfigData(config) {
// The codemirror editor does not work with ng-model so we need to retrieve
// the value directly from the editor.
var configData = $scope.editor.getValue();
var configData = $scope.formValues.ConfigContent;
config.Data = btoa(unescape(encodeURIComponent(configData)));
}
@ -62,6 +61,11 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
var userDetails = Authentication.getUserDetails();
var isAdmin = userDetails.role === 1;
if ($scope.formValues.ConfigContent === '') {
$scope.state.formValidationError = 'Config content must not be empty';
return;
}
if (!validateForm(accessControlData, isAdmin)) {
return;
}
@ -83,14 +87,7 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
});
};
function initView() {
$document.ready(function() {
var webEditorElement = $document[0].getElementById('config-editor', false);
if (webEditorElement) {
$scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, false, false);
}
});
}
initView();
$scope.editorUpdate = function(cm) {
$scope.formValues.ConfigContent = cm.getValue();
};
}]);

8
app/docker/views/configs/create/createconfig.html
View file

@ -21,7 +21,12 @@
<!-- config-data -->
<div class="form-group">
<div class="col-sm-12">
<textarea id="config-editor" class="form-control"></textarea>
<code-editor
identifier="config-creation-editor"
placeholder="Define or paste the content of your config here"
yml="false"
on-change="editorUpdate"
></code-editor>
</div>
</div>
<!-- !config-data -->
@ -62,6 +67,7 @@
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Name" ng-click="create()">Create config</button>
<span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
</div>
</div>
<!-- !actions -->

7
app/docker/views/configs/edit/config.html
View file

@ -70,7 +70,12 @@
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<textarea id="config-editor" ng-model="config.Data" class="form-control"></textarea>
<code-editor
identifier="config-editor"
yml="false"
read-only="true"
value="config.Data"
></code-editor>
</div>
</div>
</form>

14
app/docker/views/configs/edit/configController.js
View file

@ -1,6 +1,6 @@
angular.module('portainer.docker')
.controller('ConfigController', ['$scope', '$transition$', '$state', '$document', 'ConfigService', 'Notifications', 'CodeMirrorService',
function ($scope, $transition$, $state, $document, ConfigService, Notifications, CodeMirrorService) {
.controller('ConfigController', ['$scope', '$transition$', '$state', 'ConfigService', 'Notifications',
function ($scope, $transition$, $state, ConfigService, Notifications) {
$scope.removeConfig = function removeConfig(configId) {
ConfigService.remove(configId)
@ -13,20 +13,10 @@ function ($scope, $transition$, $state, $document, ConfigService, Notifications,
});
};
function initEditor() {
$document.ready(function() {
var webEditorElement = $document[0].getElementById('config-editor');
if (webEditorElement) {
$scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, false, true);
}
});
}
function initView() {
ConfigService.config($transition$.params().id)
.then(function success(data) {
$scope.config = data;
initEditor();
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve config details');