From b53cd92f7a42fe1dcf7c89df6f9541eb91e37642 Mon Sep 17 00:00:00 2001
From: AndzejsP <andzejs.poprockis@gmail.com>
Date: Fri, 23 Jun 2023 10:18:37 +0300
Subject: [PATCH] added some fixes and installed

---
 web/package-lock.json                   |  6 +-
 web/src/components/BindingEntry.vue     | 49 +++++++------
 web/src/components/PersonalityEntry.vue | 96 ++++++++++++++-----------
 3 files changed, 85 insertions(+), 66 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index d1c32938..6165390c 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -2745,9 +2745,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
-      "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
diff --git a/web/src/components/BindingEntry.vue b/web/src/components/BindingEntry.vue
index c031b293..41789bc9 100644
--- a/web/src/components/BindingEntry.vue
+++ b/web/src/components/BindingEntry.vue
@@ -1,14 +1,13 @@
 <template>
   <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'">
-
-    <div :class="isTemplate ? 'opacity-50' : ''">
-      <!-- 
-<div class="inline-flex items-center"> -->
+    @click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'"
+    :title="!binding.installed ? 'Not installed' : ''">
 
+    <div :class="!binding.installed ? 'opacity-50' : ''">
 
       <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">
           {{ binding.name }}
         </h3>
@@ -16,14 +15,23 @@
           <!-- EMPTY SPACE FILLER -->
         </div>
         <!-- ADVANCED OPTIONS -->
-        <div  class="flex-none gap-1">
-          <button 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">
+        <div class="flex-none gap-1">
+          <button v-if="!binding.installed" type="button" title="Not installed"
+            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>
             <span class="sr-only">Reinstall binding</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">
+            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>
@@ -62,13 +70,14 @@
             {{ binding.version }}
           </div>
           <div class="flex items-center">
-         
+
             <i data-feather="github" class="w-5 m-1"></i>
             <b>Link:&nbsp;</b>
-            <a :href="binding.link" target="_blank" class="flex items-center  hover:text-secondary duration-75 active:scale-90">
-            {{ binding.link }}
-          </a>
-        </div>
+            <a :href="binding.link" target="_blank"
+              class="flex items-center  hover:text-secondary duration-75 active:scale-90">
+              {{ binding.link }}
+            </a>
+          </div>
         </div>
         <div class="flex items-center">
           <i data-feather="info" class="w-5 m-1"></i>
@@ -100,7 +109,7 @@ export default {
   data() {
     return {
       isTemplate: false,
-      
+
     };
   },
   mounted() {
@@ -139,13 +148,13 @@ export default {
     }
 
   },
-  watch:{
-    selected(){
+  watch: {
+    selected() {
       nextTick(() => {
-      feather.replace()
+        feather.replace()
 
 
-    })
+      })
     }
   }
 
diff --git a/web/src/components/PersonalityEntry.vue b/web/src/components/PersonalityEntry.vue
index 3290bf65..130197a2 100644
--- a/web/src/components/PersonalityEntry.vue
+++ b/web/src/components/PersonalityEntry.vue
@@ -1,48 +1,58 @@
 <template>
   <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"
-    @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">
-      <img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)"
-        class="w-10 h-10 rounded-full object-fill text-red-700" >
+      <div class="flex flex-row items-center  flex-shrink-0 gap-3">
+        <img ref="imgElement" :src="getImgUrl()" @error="defaultImg($event)"
+          class="w-10 h-10 rounded-full object-fill text-red-700">
         <!-- :class="personality.installed ? 'grayscale-0':'grayscale'" -->
-      <h3 class="font-bold font-large text-lg line-clamp-3">
-        {{ personality.name }}
-      </h3>
-      <div class="grow">
-        <!-- EMPTY SPACE FILLER -->
-      </div>
-      <!-- ADVANCED OPTIONS - NOT IMPLEMENTED -->
-      <div class="flex items-center">
-        <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">
+        <h3 class="font-bold font-large text-lg line-clamp-3">
+          {{ personality.name }}
+        </h3>
+        <div class="grow">
+          <!-- EMPTY SPACE FILLER -->
+        </div>
+        <!-- ADVANCED OPTIONS - NOT IMPLEMENTED -->
+        <div class="flex items-center">
+          <button v-if="!personality.installed" type="button" title="Not installed"
+            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>
             <span class="sr-only">Settings</span>
           </button>
-        <!-- BUTTON MOUNTED  -->
-        <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':''">
-          {{isMounted ? 'Unmount':'Mount'}}
+          <!-- BUTTON MOUNTED  -->
+          <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' : ''">
+            {{ isMounted ? 'Unmount' : 'Mount' }}
 
-        </button>
+          </button>
+
+
+        </div>
 
 
       </div>
-
-
-    </div>
-    <div class="">
       <div class="">
+        <div class="">
 
-        <div class="flex items-center">
-          <i data-feather="user" class="w-5 m-1"></i>
-          <b>Author:&nbsp;</b>
+          <div class="flex items-center">
+            <i data-feather="user" class="w-5 m-1"></i>
+            <b>Author:&nbsp;</b>
 
-          {{ personality.author }}
-        </div>
-        <!-- <div class="">
+            {{ personality.author }}
+          </div>
+          <!-- <div class="">
   <b>Language:&nbsp;</b>
   {{ personality.language }}
 </div>
@@ -50,16 +60,16 @@
   <b>Category:&nbsp;</b>
   {{ personality.category }}
 </div> -->
-      </div>
-      <div class="flex items-center">
-        <i data-feather="info" class="w-5 m-1"></i>
-        <b>Description:&nbsp;</b><br>
-      </div>
-      <p class="mx-1 opacity-80 line-clamp-3" :title="personality.description">{{ personality.description }}</p>
+        </div>
+        <div class="flex items-center">
+          <i data-feather="info" class="w-5 m-1"></i>
+          <b>Description:&nbsp;</b><br>
+        </div>
+        <p class="mx-1 opacity-80 line-clamp-3" :title="personality.description">{{ personality.description }}</p>
 
 
+      </div>
     </div>
-
   </div>
 </template>
 
@@ -75,15 +85,15 @@ export default {
     onSelected: Function,
     selected: Boolean,
     onMounted: Function,
-    full_path:String,
-    onSettings:Function
+    full_path: String,
+    onSettings: Function
 
 
   },
   data() {
     return {
       isMounted: false,
-      name:this.personality.name
+      name: this.personality.name
     };
   },
   mounted() {
@@ -117,13 +127,13 @@ export default {
     },
 
   },
-  watch:{
-    selected(){
+  watch: {
+    selected() {
       nextTick(() => {
-      feather.replace()
+        feather.replace()
 
 
-    })
+      })
     }
   }
 };