Make read button work

front/src/BigIcon.vue

@@ -3,19 +3,20 @@
 
   const props = defineProps({
   icon: String,
-  legend: String
+  legend: String,
+  isSet: Boolean
 });
 
   const hovered = ref(false)
 
-  const computedIcon = computed(() => props.icon + (hovered.value ? "Fill" : ""));
+  const computedIcon = computed(() => props.icon + (hovered.value || props.isSet ? "Fill" : ""));
+
 </script>
 
 <template>
   <div class="bigiconandlegend"
        @mouseover="hovered = true"
-       @mouseout="hovered = false"
-       >
+       @mouseout="hovered = false">
     <span class="bigicon" :title="props.legend">
       <component :is="computedIcon"></component>
     </span>
@@ -31,7 +32,7 @@
 }
 
 .bigiconandlegend:hover {
-  transform: scale(1.01);
+  transform: scale(1.03);
   transition: ease-in-out 0.02s;
   background-color: bulma-primary;
   cursor: pointer;

front/src/BookForm.vue

@@ -18,8 +18,13 @@
   })
 
   function onRatingUpdate(rating) {
-    data.value.rating = rating * 2
-    putBookUpdate(props.id, {rating: data.value.rating})
+    data.value.rating = rating * 2;
+    putBookUpdate(props.id, {rating: data.value.rating});
+  }
+
+  function onReadIconClick() {
+    data.value.read = !data.value.read;
+    putBookUpdate(props.id, {read: data.value.read});
   }
 
 </script>
@@ -50,9 +55,10 @@
     </div>
     <div class="column">
       <div class="iconscontainer">
-        <BigIcon icon="BIconEye" :legend="$t('bookform.wantread')"/>
-        <BigIcon icon="BIconBook" :legend="$t('bookform.startread')"/>
-        <BigIcon icon="BIconCheckCircle" :legend="$t('bookform.read')"/>
+        <BigIcon icon="BIconEye" :legend="$t('bookform.wantread')" :isSet="false"/>
+        <BigIcon icon="BIconBook" :legend="$t('bookform.startread')" :isSet="false"/>
+        <BigIcon icon="BIconCheckCircle" :legend="$t('bookform.read')" :isSet="data.read"
+                 @click="onReadIconClick"/>
       </div>
     </div>
   </div>