ric/dockge
1
0
Fork 0
mirror of https://github.com/louislam/dockge.git synced 2024-11-23 19:34:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add support for extra info: URLs (#182)

Browse source 
* Always show Down button

* Add URL and improve ArrayInput handling

* Minor
This commit is contained in:
Louis Lam 2023-11-25 22:14:21 +08:00 committed by GitHub
parent d23e2d8aa1
commit 631bc60cb2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 99 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/src/components/ArrayInput.vue
View file

@ -30,6 +30,10 @@ export default {
displayName: {
type: String,
required: true,
},
objectType: {
type: String,
default: "service",
}
},
data() {
@ -41,8 +45,7 @@ export default {
array() {
// Create the array if not exists, it should be safe.
if (!this.service[this.name]) {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.service[this.name] = [];
return [];
}
return this.service[this.name];
},
@ -56,8 +59,24 @@ export default {
return this.service[this.name] !== undefined;
},
/**
* Not a good name, but it is used to get the object.
*/
service() {
return this.$parent.$parent.service;
if (this.objectType === "service") {
// Used in Container.vue
return this.$parent.$parent.service;
} else if (this.objectType === "x-dockge") {
if (!this.$parent.$parent.jsonConfig["x-dockge"]) {
return {};
}
// Used in Compose.vue
return this.$parent.$parent.jsonConfig["x-dockge"];
} else {
return {};
}
},
valid() {
@ -81,6 +100,19 @@ export default {
},
methods: {
addField() {
// Create the object if not exists.
if (this.objectType === "x-dockge") {
if (!this.$parent.$parent.jsonConfig["x-dockge"]) {
this.$parent.$parent.jsonConfig["x-dockge"] = {};
}
}
// Create the array if not exists.
if (!this.service[this.name]) {
this.service[this.name] = [];
}
this.array.push("");
},
remove(index) {

7
frontend/src/components/ArraySelect.vue
View file

@ -49,8 +49,7 @@ export default {
array() {
// Create the array if not exists, it should be safe.
if (!this.service[this.name]) {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.service[this.name] = [];
return [];
}
return this.service[this.name];
},
@ -89,6 +88,10 @@ export default {
},
methods: {
addField() {
// Create the array if not exists.
if (!this.service[this.name]) {
this.service[this.name] = [];
}
this.array.push("");
},
remove(index) {

3
frontend/src/lang/en.json
View file

@ -96,5 +96,6 @@
"reverseProxyMsg2": "Check how to config it for WebSocket",
"Cannot connect to the socket server.": "Cannot connect to the socket server.",
"reconnecting...": "Reconnecting...",
"connecting...": "Connecting to the socket server..."
"connecting...": "Connecting to the socket server...",
"url": "URL | URLs"
}

57
frontend/src/pages/Compose.vue
View file

@ -56,6 +56,13 @@
</button>
</div>
<!-- URLs -->
<div v-if="urls.length > 0" class="mb-3">
<a v-for="(url, index) in urls" :key="index" target="_blank" :href="url.url">
<span class="badge bg-secondary me-2">{{ url.display }}</span>
</a>
</div>
<!-- Progress Terminal -->
<transition name="slide-fade" appear>
<Terminal
@ -80,6 +87,14 @@
<input id="name" v-model="stack.name" type="text" class="form-control" required @blur="stackNameToLowercase">
<div class="form-text">{{ $t("Lowercase only") }}</div>
</div>
<!-- URLs -->
<div class="mb-4">
<label class="form-label">
{{ $tc("url", 2) }}
</label>
<ArrayInput name="urls" :display-name="$t('url')" placeholder="https://" object-type="x-dockge" />
</div>
</div>
</div>
@ -111,6 +126,20 @@
<button v-if="false && isEditMode && jsonConfig.services && Object.keys(jsonConfig.services).length > 0" class="btn btn-normal mb-3" @click="addContainer">{{ $t("addContainer") }}</button>
<!-- General -->
<div v-if="isEditMode">
<h4 class="mb-3">{{ $t("Extra") }}</h4>
<div class="shadow-box big-padding mb-3">
<!-- URLs -->
<div class="mb-4">
<label class="form-label">
{{ $tc("url", 2) }}
</label>
<ArrayInput name="urls" :display-name="$t('url')" placeholder="https://" object-type="x-dockge" />
</div>
</div>
</div>
<!-- Combined Terminal Output -->
<div v-show="!isEditMode">
<h4 class="mb-3">Terminal</h4>
@ -252,6 +281,34 @@ export default {
};
},
computed: {
urls() {
if (!this.jsonConfig["x-dockge"] || !this.jsonConfig["x-dockge"].urls || !Array.isArray(this.jsonConfig["x-dockge"].urls)) {
return [];
}
let urls = [];
for (const url of this.jsonConfig["x-dockge"].urls) {
let display;
try {
let obj = new URL(url);
let pathname = obj.pathname;
if (pathname === "/") {
pathname = "";
}
display = obj.host + pathname + obj.search;
} catch (e) {
display = url;
}
urls.push({
display,
url,
});
}
return urls;
},
isAdd() {
return this.$route.path === "/compose" && !this.submitted;
},