added files

2024-12-18 20:17:50 +00:00 · 2024-01-06 12:35:52 +01:00 · 2024-01-06 12:35:52 +01:00 · f886db99b4
commit f886db99b4
parent 2736ae50bb
1 changed files with 132 additions and 0 deletions
--- a/scripts/python/lollms_installer/frontend/src/components/Toast.vue
+++ b/scripts/python/lollms_installer/frontend/src/components/Toast.vue
@ -0,0 +1,132 @@
+<template>
+    <div class="absolute bottom-16 right-2 z-20 flex flex-col gap-3 min-w-[300px]">
+        <TransitionGroup name="toastItem" tag="div">
+            <div v-for=" t in toastArr" :key="t.id" class="relative">
+                <div class="flex flex-row items-center w-full p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
+                    <div class="flex flex-row flex-grow items-center h-auto">
+                        <div v-if="t.log_type==0"
+                            class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
+                            <i data-feather="x"></i>
+                            <span class="sr-only">Cross icon</span>
+                        </div>
+                        <div v-if="t.log_type==1"
+                            class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
+                            <i data-feather="check"></i>
+                            <span class="sr-only">Check icon</span>
+                        </div>
+                        <div v-if="t.log_type==2"
+                            class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
+                            <i data-feather="info"></i>
+                            <span class="sr-only"></span>
+                        </div>
+                        <div v-if="t.log_type==3"
+                            class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-800 dark:text-orange-200">
+                            <i data-feather="alert-triangle"></i>
+                            <span class="sr-only"></span>
+                        </div>
+                        <div class="ml-3 text-sm font-normal whitespace-pre-wrap line-clamp-3 max-w-xs max-h-[400px] overflow-auto break-words" :title="t.message">{{ t.message }}</div>
+
+                    </div>
+                
+                    <div class="flex ">
+                        <button type="button" @click.stop="copyToClipBoard(t.message)" title="Copy message"
+                            class=" bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">
+                            <span class="sr-only">Copy message</span>
+                            <i data-feather="clipboard" class="w-5 h-5"></i>
+
+                        </button>
+                        <button type="button" @click="close(t.id)" title="Close"
+                            class=" bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">
+                            <span class="sr-only">Close</span>
+                            <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>
+                        </button>
+                    </div>
+
+                </div>
+            </div>
+        </TransitionGroup>
+    </div>
+</template>
+
+<script>
+import feather from 'feather-icons'
+import { nextTick, TransitionGroup } from 'vue'
+export default {
+    name: 'Toast',
+
+    props: {
+
+    },
+    data() {
+        return {
+            show: false,
+            log_type: 1, // 0=error, 1=success, 2=info, 3=warning
+            message: '',
+            toastArr: []
+        };
+    },
+    methods: {
+        close(id) {
+
+            this.toastArr = this.toastArr.filter(item => item.id != id)
+        },
+        copyToClipBoard(content) {
+
+            navigator.clipboard.writeText(content);
+
+          
+
+            nextTick(() => {
+                feather.replace()
+
+            })
+
+
+        },
+        showToast(message, duration_s = 3, log_type = true) {
+            const id = parseInt(((new Date()).getTime() * Math.random()).toString()).toString()
+            const toastObj = {
+                id: id,
+                log_type: log_type,
+                message: message,
+                show: true,
+                //copy: this.copyToClipBoard(message)
+            }
+
+
+            this.toastArr.push(toastObj)
+
+            nextTick(() => {
+                feather.replace()
+
+            })
+            setTimeout(() => {
+
+                this.toastArr = this.toastArr.filter(item => item.id != id)
+
+            }, duration_s * 1000);
+        }
+
+    },
+    watch: {
+
+    }
+}
+</script>
+<style scoped>
+.toastItem-enter-active,
+.toastItem-leave-active {
+    transition: all 0.5s ease;
+}
+
+.toastItem-enter-from,
+.toastItem-leave-to {
+    opacity: 0;
+    transform: translateX(-30px);
+}
+</style>