From 868871a93c7d5be88ab9bfaf73d26e5b57aa293e Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Wed, 21 Jun 2023 17:56:03 +0300
Subject: [PATCH] somehow ready

---
 web/src/components/UniversalForm.vue | 148 ++++++++++++++++++++++++---
 web/src/views/SettingsView.vue       |   8 +-
 2 files changed, 137 insertions(+), 19 deletions(-)

diff --git a/web/src/components/UniversalForm.vue b/web/src/components/UniversalForm.vue
index 718d452e..8912c354 100644
--- a/web/src/components/UniversalForm.vue
+++ b/web/src/components/UniversalForm.vue
@@ -31,13 +31,16 @@
                 <div class="flex flex-col relative no-scrollbar overflow-y-scroll p-2">
                     <!-- odd:bg-bg-light-tone odd:dark:bg-bg-dark-tone even:bg-bg-light-tone-panel dark:even:bg-bg-dark-tone-panel -->
                     <div class="px-2 " v-for="(item, index) in controls_array">
-                        <div class="">
-                            <div v-if="item.type != 'bool'">
+
+                        <div v-if="item.type == 'str'">
+                            <div v-if="!item.options">
+
+
                                 <label
-                                    class="mb-2 relative flex item-center gap-2 text-sm font-medium text-gray-900 dark:text-white select-none"
+                                    class="mb-2 relative flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white select-none"
                                     :class="item.help ? 'cursor-pointer ' : ''">
                                     <!-- TITLE -->
-                                    <div>
+                                    <div class="text-base font-semibold">
                                         {{ item.name }}:
                                     </div>
 
@@ -45,7 +48,7 @@
                                     <label v-if="item.help" class="relative inline-flex">
                                         <input type="checkbox" v-model="item.isHelp" class="sr-only peer">
                                         <div
-                                            class="hover:text-secondary duration-75 active:scale-90 peer-checked:text-secondary">
+                                            class="hover:text-secondary duration-75 active:scale-90 peer-checked:text-primary">
                                             <i data-feather="help-circle" class="w-5 h-5 "></i>
                                         </div>
                                     </label>
@@ -58,21 +61,130 @@
 
                                 <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">
+                                    placeholder="Enter string">
                             </div>
+                            <div v-if="item.options">
+                                <label
+                                    class="mb-2 relative flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white select-none"
+                                    :class="item.help ? 'cursor-pointer ' : ''">
+                                    <!-- TITLE -->
+                                    <div class="text-base font-semibold">
+                                        {{ item.name }}:
+                                    </div>
+
+                                    <!-- HELP BUTTON -->
+                                    <label v-if="item.help" class="relative inline-flex">
+                                        <input type="checkbox" v-model="item.isHelp" class="sr-only peer">
+                                        <div
+                                            class="hover:text-secondary duration-75 active:scale-90 peer-checked:text-primary">
+                                            <i data-feather="help-circle" class="w-5 h-5 "></i>
+                                        </div>
+                                    </label>
+
+                                </label>
+                                <!-- HELP DESCRIPTION -->
+                                <p v-if="item.isHelp" class="text-sm font-normal text-gray-700 dark:text-gray-400 mb-2">
+                                    {{ item.help }}
+                                </p>
+                                <select 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">
+
+                                    <option v-for="op in item.options" :value="op" :selected="item.value === op">{{
+                                        op
+                                    }}
+
+                                    </option>
+
+                                </select>
+
+                            </div>
+
+
+                        </div>
+                        <div v-if="item.type == 'int' || item.type == 'float'">
+                            <label
+                                class="mb-2 relative flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white select-none"
+                                :class="item.help ? 'cursor-pointer ' : ''">
+                                <!-- TITLE -->
+                                <div class="text-base font-semibold">
+                                    {{ item.name }}:
+                                </div>
+
+                                <!-- HELP BUTTON -->
+                                <label v-if="item.help" class="relative inline-flex">
+                                    <input type="checkbox" v-model="item.isHelp" class="sr-only peer">
+                                    <div class="hover:text-secondary duration-75 active:scale-90 peer-checked:text-primary">
+                                        <i data-feather="help-circle" class="w-5 h-5 "></i>
+                                    </div>
+                                </label>
+
+                            </label>
+                            <!-- HELP DESCRIPTION -->
+                            <p v-if="item.isHelp" class="text-sm font-normal text-gray-700 dark:text-gray-400 mb-2">
+                                {{ item.help }}
+                            </p>
+
+                            <input type="number" 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 number">
+
+                            <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 v-if="item.type == 'bool'">
-                            <div class="flex items-center ">
+                            <div class="mb-2 relative flex items-center gap-2">
+
+                                <label for="default-checkbox" class="text-base font-semibold">
+                                    {{ item.name }}:
+                                </label>
                                 <input type="checkbox" v-model="item.value"
                                     class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                                <label for="default-checkbox" class="ml-2 text-sm font-medium">{{ item.name
-                                }}</label>
-                            </div>
 
+                                <!-- HELP BUTTON -->
+                                <label v-if="item.help" class="relative inline-flex">
+                                    <input type="checkbox" v-model="item.isHelp" class="sr-only peer">
+                                    <div class="hover:text-secondary duration-75 active:scale-90 peer-checked:text-primary">
+                                        <i data-feather="help-circle" class="w-5 h-5 "></i>
+                                    </div>
+                                </label>
+
+
+                            </div>
+                            <!-- HELP DESCRIPTION -->
+                            <p v-if="item.isHelp" class="text-sm font-normal text-gray-700 dark:text-gray-400 mb-2">
+                                {{ item.help }}
+                            </p>
+
+                        </div>
+                        <div v-if="item.type == 'list'">
+
+
+                            <label
+                                class="mb-2 relative flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white select-none"
+                                :class="item.help ? 'cursor-pointer ' : ''">
+                                <!-- TITLE -->
+                                <div class="text-base font-semibold">
+                                    {{ item.name }}:
+                                </div>
+
+                                <!-- HELP BUTTON -->
+                                <label v-if="item.help" class="relative inline-flex">
+                                    <input type="checkbox" v-model="item.isHelp" class="sr-only peer">
+                                    <div class="hover:text-secondary duration-75 active:scale-90 peer-checked:text-primary">
+                                        <i data-feather="help-circle" class="w-5 h-5 "></i>
+                                    </div>
+                                </label>
+
+                            </label>
+                            <!-- HELP DESCRIPTION -->
+                            <p v-if="item.isHelp" class="text-sm font-normal text-gray-700 dark:text-gray-400 mb-2">
+                                {{ item.help }}
+                            </p>
+
+                            <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 comma separated values">
                         </div>
                         <hr class="h-px my-4 bg-gray-200 border-0 dark:bg-gray-700">
                     </div>
@@ -80,7 +192,7 @@
                     <!-- 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"
+                            <button @click.stop="hide(true)" type="button"
                                 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>
@@ -134,9 +246,13 @@ export default {
     methods: {
         hide(response) {
             this.show = false;
+            
             if (this.resolve) {
-                this.resolve(response);
+                if(response){
+                    this.resolve(this.controls_array);
                 this.resolve = null;
+                }
+
             }
         },
         showForm(controls_array, title, ConfirmButtonText, DenyButtonText) {
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 0dda61b8..1e02b26b 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1195,9 +1195,11 @@ export default {
             const arr = '[{"name":"model_name","type":"str","value":"DreamShaper_5_beta2_noVae_half_pruned.ckpt", "help":"Name of the model to be loaded for stable diffusion generation"},{"name":"ddim_steps","type":"int","value":50, "min":10, "max":1024},{"name":"scale","type":"float","value":7.5, "min":0.1, "max":100.0},{"name":"W","type":"int","value":512, "min":10, "max":2048},{"name":"H","type":"int","value":512, "min":10, "max":2048},{"name":"skip_grid","type":"bool","value":true,"help":"Skip building a grid of generated images"},{"name":"batch_size","type":"int","value":1, "min":1, "max":100,"help":"Number of images per batch (requires more memory)"},{"name":"num_images","type":"int","value":1, "min":1, "max":100,"help":"Number of batch of images to generate (to speed up put a batch of n and a single num images, to save vram, put a batch of 1 and num_img of n)"},{"name":"seed","type":"int","value":-1},                {"name":"servers_addresses","type":"list","value":[], "help":"A list of server addresses for example [\'http://localhost:9601\', \'http://localhost:9602\']"},{"name":"keep_only_active_servers","type":"bool","value":true, "help":"If true, then only active servers will be kept in the loop"},{"name":"sampler_name","type":"str","value":"ddim","help":"Supported sampler names: ddim, dpms, plms", "options":["ddim","dpms","plms"]}]'
             const arr2 = JSON.parse(arr)
 
-
-
-            this.$refs.universalForm.showForm(arr2, "Baba booey form", "Go for torps", "go home") // disabled to not break UI just add endpoint or anything
+            const newItem = { name: "babagaga", value: ['lol', 'asdasd', 'hhhhhh'], type: 'list', help: 'smelly ' }
+            arr2.push(newItem)
+           // this.$refs.universalForm.showForm(arr2, "Baba booey form", "Go for torps", "go home").then(res => {
+           //     console.log('finished', res)
+           // }) // disabled to not break UI just add endpoint or anything
         },
         // messagebox ok stuff
         onMessageBoxOk() {