added some fixes and installed

This commit is contained in:
AndzejsP 2023-06-23 10:18:37 +03:00
parent 33736a7020
commit b53cd92f7a
3 changed files with 85 additions and 66 deletions

6
web/package-lock.json generated
View File

@ -2745,9 +2745,9 @@
} }
}, },
"node_modules/semver": { "node_modules/semver": {
"version": "7.5.0", "version": "7.5.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
"integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==", "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"lru-cache": "^6.0.0" "lru-cache": "^6.0.0"

View File

@ -1,14 +1,13 @@
<template> <template>
<div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer select-none" <div class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer select-none"
@click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'"> @click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'"
:title="!binding.installed ? 'Not installed' : ''">
<div :class="isTemplate ? 'opacity-50' : ''">
<!--
<div class="inline-flex items-center"> -->
<div :class="!binding.installed ? 'opacity-50' : ''">
<div class="flex flex-row items-center gap-3 "> <div class="flex flex-row items-center gap-3 ">
<img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-blue-700"> <img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)"
class="w-10 h-10 rounded-full object-fill text-blue-700">
<h3 class="font-bold font-large text-lg truncate"> <h3 class="font-bold font-large text-lg truncate">
{{ binding.name }} {{ binding.name }}
</h3> </h3>
@ -16,14 +15,23 @@
<!-- EMPTY SPACE FILLER --> <!-- EMPTY SPACE FILLER -->
</div> </div>
<!-- ADVANCED OPTIONS --> <!-- ADVANCED OPTIONS -->
<div class="flex-none gap-1"> <div class="flex-none gap-1">
<button type="button" title="Reinstall binding" <button v-if="!binding.installed" type="button" title="Not installed"
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="toggleReinstall"> class="hover:text-red-600 duration-75 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
@click.stop="">
<i data-feather="slash" class="w-5"></i>
<span class="sr-only">Not installed</span>
</button>
<button v-if="binding.installed" type="button" title="Reinstall binding"
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="toggleReinstall">
<i data-feather="tool" class="w-5"></i> <i data-feather="tool" class="w-5"></i>
<span class="sr-only">Reinstall binding</span> <span class="sr-only">Reinstall binding</span>
</button> </button>
<button v-if="selected" type="button" title="Settings" <button v-if="selected" 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"> 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> <i data-feather="sliders" class="w-5"></i>
<span class="sr-only">Settings</span> <span class="sr-only">Settings</span>
</button> </button>
@ -62,13 +70,14 @@
{{ binding.version }} {{ binding.version }}
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<i data-feather="github" class="w-5 m-1"></i> <i data-feather="github" class="w-5 m-1"></i>
<b>Link:&nbsp;</b> <b>Link:&nbsp;</b>
<a :href="binding.link" target="_blank" class="flex items-center hover:text-secondary duration-75 active:scale-90"> <a :href="binding.link" target="_blank"
{{ binding.link }} class="flex items-center hover:text-secondary duration-75 active:scale-90">
</a> {{ binding.link }}
</div> </a>
</div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<i data-feather="info" class="w-5 m-1"></i> <i data-feather="info" class="w-5 m-1"></i>
@ -100,7 +109,7 @@ export default {
data() { data() {
return { return {
isTemplate: false, isTemplate: false,
}; };
}, },
mounted() { mounted() {
@ -139,13 +148,13 @@ export default {
} }
}, },
watch:{ watch: {
selected(){ selected() {
nextTick(() => { nextTick(() => {
feather.replace() feather.replace()
}) })
} }
} }

View File

@ -1,48 +1,58 @@
<template> <template>
<div <div
class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer active:scale-95 duration-75 select-none" class=" items-start p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer active:scale-95 duration-75 select-none"
@click.stop="toggleSelected" :class="selected ? 'border-primary-light' : 'border-transparent'"> @click.stop="toggleSelected" :class="selected ? 'border-primary-light' : 'border-transparent'"
:title="!personality.installed ? 'Not installed' : ''">
<div :class="!personality.installed ? 'opacity-50' : ''">
<div class="flex flex-row items-center flex-shrink-0 gap-3"> <div class="flex flex-row items-center flex-shrink-0 gap-3">
<img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)" <img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)"
class="w-10 h-10 rounded-full object-fill text-red-700" > class="w-10 h-10 rounded-full object-fill text-red-700">
<!-- :class="personality.installed ? 'grayscale-0':'grayscale'" --> <!-- :class="personality.installed ? 'grayscale-0':'grayscale'" -->
<h3 class="font-bold font-large text-lg line-clamp-3"> <h3 class="font-bold font-large text-lg line-clamp-3">
{{ personality.name }} {{ personality.name }}
</h3> </h3>
<div class="grow"> <div class="grow">
<!-- EMPTY SPACE FILLER --> <!-- EMPTY SPACE FILLER -->
</div> </div>
<!-- ADVANCED OPTIONS - NOT IMPLEMENTED --> <!-- ADVANCED OPTIONS - NOT IMPLEMENTED -->
<div class="flex items-center"> <div class="flex items-center">
<button v-if="selected" type="button" title="Settings" <button v-if="!personality.installed" type="button" title="Not installed"
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-red-600 duration-75 font-medium rounded-lg text-sm p-2 text-center inline-flex items-center "
@click.stop="">
<i data-feather="slash" class="w-5"></i>
<span class="sr-only">Not installed</span>
</button>
<button v-if="selected" 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> <i data-feather="sliders" class="w-5"></i>
<span class="sr-only">Settings</span> <span class="sr-only">Settings</span>
</button> </button>
<!-- BUTTON MOUNTED --> <!-- BUTTON MOUNTED -->
<button type="button" @click.stop="toggleMounted" <button type="button" @click.stop="toggleMounted"
class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" :class="isMounted ? ' bg-red-700 rounded-lg hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800':''"> class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
{{isMounted ? 'Unmount':'Mount'}} :class="isMounted ? ' bg-red-700 rounded-lg hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800' : ''">
{{ isMounted ? 'Unmount' : 'Mount' }}
</button> </button>
</div>
</div> </div>
</div>
<div class="">
<div class=""> <div class="">
<div class="">
<div class="flex items-center"> <div class="flex items-center">
<i data-feather="user" class="w-5 m-1"></i> <i data-feather="user" class="w-5 m-1"></i>
<b>Author:&nbsp;</b> <b>Author:&nbsp;</b>
{{ personality.author }} {{ personality.author }}
</div> </div>
<!-- <div class=""> <!-- <div class="">
<b>Language:&nbsp;</b> <b>Language:&nbsp;</b>
{{ personality.language }} {{ personality.language }}
</div> </div>
@ -50,16 +60,16 @@
<b>Category:&nbsp;</b> <b>Category:&nbsp;</b>
{{ personality.category }} {{ personality.category }}
</div> --> </div> -->
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<i data-feather="info" class="w-5 m-1"></i> <i data-feather="info" class="w-5 m-1"></i>
<b>Description:&nbsp;</b><br> <b>Description:&nbsp;</b><br>
</div> </div>
<p class="mx-1 opacity-80 line-clamp-3" :title="personality.description">{{ personality.description }}</p> <p class="mx-1 opacity-80 line-clamp-3" :title="personality.description">{{ personality.description }}</p>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -75,15 +85,15 @@ export default {
onSelected: Function, onSelected: Function,
selected: Boolean, selected: Boolean,
onMounted: Function, onMounted: Function,
full_path:String, full_path: String,
onSettings:Function onSettings: Function
}, },
data() { data() {
return { return {
isMounted: false, isMounted: false,
name:this.personality.name name: this.personality.name
}; };
}, },
mounted() { mounted() {
@ -117,13 +127,13 @@ export default {
}, },
}, },
watch:{ watch: {
selected(){ selected() {
nextTick(() => { nextTick(() => {
feather.replace() feather.replace()
}) })
} }
} }
}; };