Make "want read" button work

front/src/BookForm.vue

@@ -1,6 +1,6 @@
 <script setup>
   import { computed } from 'vue'
-  import { getBook, getImagePathOrDefault, putBookUpdate } from './api.js'
+  import { getBook, getImagePathOrDefault, putReadBook, putWantReadBook, putRateBook } from './api.js'
   import { onBeforeRouteUpdate } from 'vue-router'
   import { VRating } from 'vuetify/components/VRating';
   import BigIcon from './BigIcon.vue';
@@ -19,12 +19,20 @@
 
   function onRatingUpdate(rating) {
     data.value.rating = rating * 2;
-    putBookUpdate(props.id, {rating: data.value.rating});
+    putRateBook(props.id, {rating: data.value.rating});
   }
 
   function onReadIconClick() {
     data.value.read = !data.value.read;
-    putBookUpdate(props.id, {read: data.value.read});
+    if (data.value.read) {
+      data.value.wantread = false;
+    }
+    putReadBook(props.id, {read: data.value.read});
+  }
+
+  function onWantReadIconClick() {
+    data.value.wantread = !data.value.wantread;
+    putWantReadBook(props.id, {wantread: data.value.wantread});
   }
 
 </script>
@@ -55,9 +63,16 @@
     </div>
     <div class="column">
       <div class="iconscontainer">
-        <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"
+        <BigIcon icon="BIconEye"
+                 :legend="$t('bookform.wantread')"
+                 :isSet="data.wantread"
+                 @click="onWantReadIconClick"/>
+        <BigIcon icon="BIconBook"
+                 :legend="$t('bookform.startread')"
+                 :isSet="false"/>
+        <BigIcon icon="BIconCheckCircle"
+                 :legend="$t('bookform.read')"
+                 :isSet="data.read"
                  @click="onReadIconClick"/>
       </div>
     </div>