🎉 init: Multiple docker endpoint ui

Signed-off-by: Muhammed Hussein Karimi <info@karimi.dev>

frontend/src/components/settings/General.vue

@@ -57,6 +57,24 @@
                 <div class="form-text"></div>
             </div>
 
+            <!-- Docker Endpoint -->
+            <div class="mb-4">
+                <label class="form-label" for="dockerEndpointList">
+                    {{ $t("dockerEndpointList") }}
+                </label>
+
+                <Multiselect
+                    id="dockerEndpointList"
+                    v-model="settings.dockerEndpointList"
+                    mode="tags"
+                    :options="['/var/run/docker.sock']"
+                    :value="['/var/run/docker.sock']"
+                    :placeholder="$t('Enter The list of docker endpoints')"
+                    :searchable="true"
+                    :create-option="true"
+                ></Multiselect>
+            </div>
+
             <!-- Save Button -->
             <div>
                 <button class="btn btn-primary" type="submit">
@@ -71,10 +89,12 @@
 import HiddenInput from "../../components/HiddenInput.vue";
 import dayjs from "dayjs";
 import { timezoneList } from "../../util-frontend";
+import Multiselect from '@vueform/multiselect'
 
 export default {
     components: {
         HiddenInput,
+        Multiselect,
     },
 
     data() {
@@ -112,3 +132,18 @@ export default {
 };
 </script>
 
+<style src="@vueform/multiselect/themes/default.css">
+</style>
+<style>
+.multiselect {
+    background: #070a10;
+    border-color: #1d2634;
+    border-radius: var(--bs-border-radius);
+}
+.multiselect-tags-search {
+    background: none;
+}
+.multiselect-tag {
+    border-radius: var(--bs-border-radius);
+}
+</style>

frontend/src/lang/en.json

@@ -9,7 +9,7 @@
     "registry": "Registry",
     "compose": "Compose",
     "addFirstStackMsg": "Compose your first stack!",
-    "stackName" : "Stack Name",
+    "stackName": "Stack Name",
     "deployStack": "Deploy",
     "deleteStack": "Delete",
     "stopStack": "Stop",
@@ -19,7 +19,7 @@
     "editStack": "Edit",
     "discardStack": "Discard",
     "saveStackDraft": "Save",
-    "notAvailableShort" : "N/A",
+    "notAvailableShort": "N/A",
     "deleteStackMsg": "Are you sure you want to delete this stack?",
     "stackNotManagedByDockgeMsg": "This stack is not managed by Dockge.",
     "primaryHostname": "Primary Hostname",
@@ -49,5 +49,6 @@
     "add": "Add",
     "applyToYAML": "Apply to YAML",
     "createExternalNetwork": "Create",
-    "addInternalNetwork": "Add"
+    "addInternalNetwork": "Add",
+    "dockerEndpointList": "Docker Endpoint List"
 }

package.json

@@ -18,6 +18,7 @@
     "dependencies": {
         "@homebridge/node-pty-prebuilt-multiarch": "~0.11.10",
         "@louislam/sqlite3": "~15.1.6",
+        "@vueform/multiselect": "^2.6.6",
         "bcryptjs": "~2.4.3",
         "check-password-strength": "~2.0.7",
         "command-exists": "~1.2.9",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@louislam/sqlite3':
     specifier: ~15.1.6
     version: 15.1.6
+  '@vueform/multiselect':
+    specifier: ^2.6.6
+    version: 2.6.6
   bcryptjs:
     specifier: ~2.4.3
     version: 2.4.3
@@ -1036,6 +1039,10 @@ packages:
     resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
     dev: true
 
+  /@vueform/multiselect@2.6.6:
+    resolution: {integrity: sha512-JDWesVRmyGz9HmHp2Ooy1cb8XgKohiztwMDtjm8c0/Th+7wEZENZuYa0iY5CTvaJNANl3LVqh9BNnCc/YlM/Bg==}
+    dev: false
+
   /@vueuse/core@10.5.0(vue@3.3.8):
     resolution: {integrity: sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==}
     dependencies: