added universal form

web/src/components/BindingEntry.vue

@@ -22,12 +22,13 @@
             <i data-feather="tool" class="w-5"></i>
             <span class="sr-only">Reinstall binding</span>
           </button>
-          <!-- - NOT IMPLEMENTED -->
+          <button type="button" title="Settings"
-          <!-- <button type="button" title="Settings - Not implemented"
+            class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center " @click.stop="toggleSettings">
-            class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center " @click.stop="">
             <i data-feather="sliders" class="w-5"></i>
             <span class="sr-only">Settings</span>
           </button>
+          <!-- - NOT IMPLEMENTED -->
+          <!-- 
           <button type="button" title="Help - Not implemented"
             class="hover:text-secondary duration-75 active:scale-90 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center " @click.stop="">
             <i data-feather="help-circle" class="w-5"></i>
@@ -92,6 +93,7 @@ export default {
     binding: {},
     onSelected: Function,
     onReinstall: Function,
+    onSettings: Function,
     selected: Boolean,
 
   },
@@ -125,6 +127,9 @@ export default {
     toggleReinstall() {
       this.onReinstall(this)
     },
+    toggleSettings() {
+      this.onSettings(this)
+    },
     getStatus() {
       if (this.binding.folder === 'backend_template' || this.binding.folder === 'binding_template') {
         this.isTemplate = true

web/src/components/UniversalForm.vue

@@ -0,0 +1,136 @@
+<template>
+    <div v-if="show" class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-50 p-4">
+        <div class="relative w-full max-w-md">
+
+            <div
+                class="flex flex-col mb-2 p-3 rounded-lg bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel duration-150 shadow-lg h-screen no-scrollbar overflow-auto ">
+                <div class="flex flex-row flex-grow items-center mb-2">
+                    <div class="grow flex items-center">
+                        <i data-feather="sliders" class="mr-2 flex-shrink-0"></i>
+                        <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
+                            {{ title }}</h3>
+                    </div>
+
+
+                    <!-- CLOSE BUTTON -->
+                    <div class="items-end">
+                        <button type="button" @click.stop="hide(false)" title="Close"
+                            class=" text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white">
+                            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd"
+                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                    clip-rule="evenodd"></path>
+                            </svg>
+                            <span class="sr-only">Close form modal</span>
+                        </button>
+                    </div>
+                </div>
+                <!-- FORM AREA -->
+                <div class="flex flex-col relative">
+
+                    <div class="mb-2 " v-for="(item, index) in controls_array">
+
+
+                        <div class="mb-3">
+                            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">
+                                {{ item.name }}:
+                            </label>
+
+                            <input type="text" v-model="item.value"
+                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                                placeholder="Enter value">
+
+                            <input v-if="(item.min != null && item.max != null)" type="range" v-model="item.value"
+                                :min="item.min" :max="item.max" step="0.1"
+                                class="flex-none h-2 w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700  focus:ring-blue-500 focus:border-blue-500  dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500">
+
+                        </div>
+
+                    </div>
+
+                    <!-- SUBMIT AND CANCEL BUTTONS -->
+                    <div class="flex  flex-row flex-grow gap-3">
+                        <div class="p-2 text-center grow">
+                            <button @click.stop="hide(true)" type="submit"
+                                class="mr-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm  sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                                {{ ConfirmButtonText }}
+                            </button>
+                            <button @click.stop="hide(false)" type="button"
+                                class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
+                                {{ DenyButtonText }}
+                            </button>
+                        </div>
+
+                    </div>
+
+
+
+                </div>
+
+
+
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script >
+import feather from 'feather-icons'
+import { nextTick, TransitionGroup } from 'vue'
+export default {
+    setup() {
+        return {}
+    },
+    name: 'UniversalForm',
+    //emits: ['panelLeave', 'panelDrop'],
+
+    data() {
+        return {
+            show: false,
+            resolve: null,
+            controls_array: [],
+            title: "Universal form",
+            ConfirmButtonText: "Submit",
+            DenyButtonText: "Cancel",
+        }
+    },
+    mounted() {
+
+        nextTick(() => {
+            feather.replace()
+
+        })
+    },
+    methods: {
+        hide(response) {
+            this.show = false;
+            if (this.resolve) {
+                this.resolve(response);
+                this.resolve = null;
+            }
+        },
+        showForm(controls_array, title, ConfirmButtonText, DenyButtonText) {
+      this.ConfirmButtonText =ConfirmButtonText || this.ConfirmButtonText
+      this.DenyButtonText =DenyButtonText || this.DenyButtonText
+      return new Promise((resolve) => {
+        this.controls_array = controls_array;
+        this.show = true;
+        this.title=title || this.title
+        this.resolve = resolve;
+      });
+    },
+
+    },
+    watch: {
+        show() {
+            nextTick(() => {
+                feather.replace()
+
+            })
+        }
+    }
+}
+</script>
+

web/src/views/SettingsView.vue

@@ -182,7 +182,7 @@
                                 <BindingEntry ref="bindingZoo" v-for="(binding, index) in bindings"
                                     :key="'index-' + index + '-' + binding.folder" :binding="binding"
                                     :on-selected="onSelectedBinding" :on-reinstall="onReinstallBinding"
-                                    :selected="binding.folder === configFile.binding_name">
+                                    :on-settings="onSettingsBinding" :selected="binding.folder === configFile.binding_name">
                                 </BindingEntry>
                             </TransitionGroup>
                         </div>
@@ -331,7 +331,7 @@
                         <i :data-feather="mzdc_collapsed ? 'chevron-right' : 'chevron-down'" class="mr-2 flex-shrink-0"></i>
                         <h3 class="text-lg font-semibold cursor-pointer select-none mr-2">
                             Add models for binding</h3>
-                            <div v-if="!configFile.binding_name" class="text-base text-red-600 flex gap-3 items-center mr-2">
+                        <div v-if="!configFile.binding_name" class="text-base text-red-600 flex gap-3 items-center mr-2">
                             <i data-feather="alert-triangle" class="flex-shrink-0"></i>
                             No binding selected!
                         </div>
@@ -759,6 +759,7 @@
     <AddModelDialog ref="addmodeldialog" />
     <MessageBox ref="messageBox" />
     <Toast ref="toast" />
+    <UniversalForm ref="universalForm" class="z-20" />
 </template>
 <style scoped>
 /* THESE ARE FOR TransitionGroup components */
@@ -834,7 +835,7 @@ import socket from '@/services/websocket.js'
 import defaultModelImgPlaceholder from "../assets/default_model.png"
 import defaultPersonalityImgPlaceholder from "../assets/logo.svg"
 import AddModelDialog from "@/components/AddModelDialog.vue";
-
+import UniversalForm from '../components/UniversalForm.vue';
 const bUrl = import.meta.env.VITE_GPT4ALL_API_BASEURL
 axios.defaults.baseURL = import.meta.env.VITE_GPT4ALL_API_BASEURL
 export default {
@@ -848,7 +849,7 @@ export default {
         Toast,
         PersonalityEntry,
         BindingEntry,
-
+        UniversalForm
     },
     data() {
 
@@ -1189,6 +1190,15 @@ export default {
                     return { 'status': false }
                 });
         },
+        onSettingsBinding() {
+
+            const arr = '[{"name":"Configuration 1","value":0,"type":"int","min":0,"max":100},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null},{"name":"Configuration 1.1","value":0,"type":"int","min":null,"max":null},{"name":"Configuration 2","value":"blabla","type":"str","min":null,"max":null}]'
+            const arr2 = JSON.parse(arr)
+            //console.log(this.controls_array)
+
+
+            this.$refs.universalForm.showForm(arr2, "Baba booey form", "Go for torps", "go home")
+        },
         // messagebox ok stuff
         onMessageBoxOk() {
             console.log("OK button clicked");