mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-01-18 02:39:47 +00:00
added universal form
This commit is contained in:
AndzejsP
parent
8abfb250f6
commit
74552365f9
@ -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 - 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="">
|
||||
<button type="button" title="Settings"
|
||||
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">
|
||||
<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
|
||||
|
||||
136
web/src/components/UniversalForm.vue
Normal file
136
web/src/components/UniversalForm.vue
Normal file
@ -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>
|
||||
|
||||
@ -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");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user