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>

front/src/BookListElement.vue

@@ -16,7 +16,7 @@
   const error = ref(null)
 
 async function onUserBookRead() {
-  const res = await putReadBook(props.id);
+  const res = await putReadBook(props.id, {read: true});
   if (res.ok) {
     router.push('/books')
   } else {

front/src/api.js

@@ -5,7 +5,7 @@ const baseUrl = "http://localhost:8080"
 
 export function getImagePathOrDefault(path) {
   return (path == "" || typeof path === 'undefined') ?
-  "../defaultbook.png" : "http://localhost:8080" + path;
+  "../defaultbook.png" : baseUrl + path;
 }
 
 function useFetch(url) {
@@ -45,12 +45,16 @@ export function postBook(book) {
   return genericPayloadCall('/book', book.value, 'POST')
 }
 
-export async function putReadBook(bookId) {
-  return putBookUpdate(bookId, {read: true})
+export async function putReadBook(bookId, payload) {
+  return genericPayloadCall('/book/' + bookId + "/read", payload, 'PUT')
 }
 
-export async function putBookUpdate(bookId, payload) {
-  return genericPayloadCall('/book/' + bookId, payload, 'PUT')
+export async function putWantReadBook(bookId, payload) {
+  return genericPayloadCall('/book/' + bookId + "/wantread", payload, 'PUT')
+}
+
+export async function putRateBook(bookId, payload) {
+  return genericPayloadCall('/book/' + bookId + "/rate", payload, 'PUT')
 }
 
 export function postLogin(user) {