sysadmin/dockge
1
0
Fork 0
mirror of https://github.com/louislam/dockge.git synced 2026-05-21 14:02:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI for editing .env file (#218)

Browse Source 
* Add .env file editing with syntax highlighting

* Add example env file to new compose

* Changed .env editing section title

* Better stack constuctor parameter order

* Minor

---------

Co-authored-by: Louis Lam <louislam@users.noreply.github.com>
This commit is contained in:
syko9000
2023-12-03 05:12:54 -05:00
committed by GitHub
parent e2c81bd3e0
commit a8d95d06b9
3 changed files with 98 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
frontend/src/pages/Compose.vue
View File

@@ -154,7 +154,7 @@
ref="editor"
v-model="stack.composeYAML"
class="yaml-editor"
:highlight="highlighter"
:highlight="highlighterYAML"
line-numbers :readonly="!isEditMode"
@input="yamlCodeChange"
@focus="editorFocus = true"
@@ -165,6 +165,22 @@
{{ yamlError }}
</div>
<!-- ENV editor -->
<div v-if="isEditMode">
<h4 class="mb-3">.env</h4>
<div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
<prism-editor
ref="editor"
v-model="stack.composeENV"
class="env-editor"
:highlight="highlighterENV"
line-numbers :readonly="!isEditMode"
@focus="editorFocus = true"
@blur="editorFocus = false"
></prism-editor>
</div>
</div>
<div v-if="isEditMode">
<!-- Volumes -->
<div v-if="false">
@@ -232,10 +248,16 @@ services:
ports:
- "8080:80"
`;
const envDefault = "# VARIABLE=value #comment";
let yamlErrorTimeout = null;
let serviceStatusTimeout = null;
let prismjsSymbolDefinition = {
"symbol": {
pattern: /(?<!\$)\$(\{[^{}]*\}|\w+)/,
}
};
export default {
components: {
@@ -381,19 +403,26 @@ export default {
this.isEditMode = true;
let composeYAML;
let composeENV;
if (this.$root.composeTemplate) {
composeYAML = this.$root.composeTemplate;
this.$root.composeTemplate = "";
} else {
composeYAML = template;
}
if (this.$root.envTemplate) {
composeENV = this.$root.envTemplate;
this.$root.envTemplate = "";
} else {
composeENV = envDefault;
}
// Default Values
this.stack = {
name: "",
composeYAML,
composeENV,
isManagedByDockge: true,
};
@@ -492,7 +521,7 @@ export default {
this.bindTerminal(this.terminalName);
this.$root.getSocket().emit("deployStack", this.stack.name, this.stack.composeYAML, this.isAdd, (res) => {
this.$root.getSocket().emit("deployStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
this.processing = false;
this.$root.toastRes(res);
@@ -506,7 +535,7 @@ export default {
saveStack() {
this.processing = true;
this.$root.getSocket().emit("saveStack", this.stack.name, this.stack.composeYAML, this.isAdd, (res) => {
this.$root.getSocket().emit("saveStack", this.stack.name, this.stack.composeYAML, this.stack.composeENV, this.isAdd, (res) => {
this.processing = false;
this.$root.toastRes(res);
@@ -576,8 +605,44 @@ export default {
this.isEditMode = false;
},
highlighter(code) {
return highlight(code, languages.yaml);
highlighterYAML(code) {
if (!languages.yaml_with_symbols) {
languages.yaml_with_symbols = languages.insertBefore("yaml", "punctuation", {
"symbol": prismjsSymbolDefinition["symbol"]
});
}
return highlight(code, languages.yaml_with_symbols);
},
highlighterENV(code) {
if (!languages.docker_env) {
languages.docker_env = {
"comment": {
pattern: /(^#| #).*$/m,
greedy: true
},
"keyword": {
pattern: /^[^ :=]*(?=[:=])/m,
greedy: true
},
"value": {
pattern: /(?<=[:=]).*?((?= #)|$)/m,
greedy: true,
inside: {
"string": [
{
pattern: /^ *'.*?(?<!\\)'/m,
},
{
pattern: /^ *".*?(?<!\\)"|^.*$/m,
inside: prismjsSymbolDefinition
},
],
},
},
};
}
return highlight(code, languages.docker_env);
},
yamlCodeChange() {