upgraded model entries

This commit is contained in:
AndzejsP
2023-05-19 17:33:31 +03:00
parent 3f4764c6e5
commit e7c3e1893a
2 changed files with 131 additions and 91 deletions

View File

@ -1,5 +1,5 @@
<template>
<div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg">
<div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer" @click.stop="toggleSelected" :class="selected?' border-primary-light':'border-transparent'">
<div class="flex-shrink-0">
<i :class="`fas ${icon} text-xl`"></i>
</div>
@ -7,20 +7,27 @@
<h3 class="font-bold text-lg">
{{ title }}
</h3>
<a :href="path" title="Download this manually (faster) and put it in the models/<your backend> folder then refresh">{{ title }}</a>
<div @click.stop class="flex flex-shrink-0">
<a :href="path"
class="flex hover:text-secondary duration-75 active:scale-90"
title="Download this manually (faster) and put it in the models/<your backend> folder then refresh">
<i data-feather="link" class="w-5 p-1"></i>
{{ title }}
</a>
</div>
<p class="opacity-80">{{ description }}</p>
</div>
<div class="flex-shrink-0">
<button
class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
<button class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
:class="[isInstalled ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600']"
:disabled="installing || uninstalling"
@click="toggleInstall"
>
:disabled="installing || uninstalling" @click.stop="toggleInstall">
<template v-if="installing">
<div class="flex items-center space-x-2">
<div class="h-2 w-20 bg-gray-300 rounded">
<div :style="{ width: progress + '%'}" class="h-full bg-red-500 rounded"></div>
<div :style="{ width: progress + '%' }" class="h-full bg-red-500 rounded"></div>
</div>
<span>Installing...{{ Math.floor(progress) }}%</span>
</div>
@ -42,7 +49,8 @@
</template>
<script>
import socket from '@/services/websocket.js'
import { nextTick } from 'vue'
import feather from 'feather-icons'
export default {
props: {
title: String,
@ -62,6 +70,13 @@ export default {
uninstalling: false
};
},
mounted() {
nextTick(() => {
feather.replace()
})
},
methods: {
toggleInstall() {
if (this.isInstalled) {
@ -74,6 +89,9 @@ export default {
}
},
toggleSelected(){
this.onSelected(this)
},
handleSelection() {
if (this.isInstalled && !this.selected) {
this.onSelected(this);