Add buttons on book form

front/src/BigIcon.vue

@@ -0,0 +1,58 @@
+<script setup>
+  import { ref, computed } from 'vue'
+
+  const props = defineProps({
+  icon: String,
+  legend: String
+});
+
+  const hovered = ref(false)
+
+  const computedIcon = computed(() => props.icon + (hovered.value ? "Fill" : ""));
+</script>
+
+<template>
+  <div class="bigiconandlegend"
+       @mouseover="hovered = true"
+       @mouseout="hovered = false"
+       >
+    <span class="bigicon" :title="props.legend">
+      <component :is="computedIcon"></component>
+    </span>
+    <div class="bigiconlegend">{{props.legend}}</div>
+  </div>
+</template>
+
+<style scoped>
+
+.bigiconandlegend {
+  border-radius:30px;
+  margin:25px;
+}
+
+.bigiconandlegend:hover {
+  transform: scale(1.01);
+  transition: ease-in-out 0.02s;
+  background-color: bulma-primary;
+  cursor: pointer;
+}
+
+.bigicon {
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  height: 90px;
+  width: 200px;
+  font-size: 78px;
+  padding-top:20px;
+}
+
+.bigiconlegend {
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  font-size: 34px;
+  width: 200px;
+  padding-bottom:30px;
+}
+</style>

front/src/BookForm.vue

@@ -3,6 +3,7 @@
   import { getBook, getImagePathOrDefault, putBookUpdate } from './api.js'
   import { onBeforeRouteUpdate } from 'vue-router'
   import { VRating } from 'vuetify/components/VRating';
+  import BigIcon from './BigIcon.vue';
 
   const props = defineProps({
   id: String
@@ -25,10 +26,8 @@
 
 <template>
   <div v-if="error">{{$t('bookform.error', {error: error.message})}}</div>
-  <div v-if="data">
-    <h3 class="title">{{data.title}}</h3>
-    <h3 class="subtitle">{{data.author}}</h3>
-    <div class="imagewithrating">
+  <div v-if="data" class="columns">
+    <div class="column is-narrow ml-6">
       <figure class="image">
         <img v-bind:src="imagePathOrDefault" v-bind:alt="data.title">
       </figure>
@@ -41,11 +40,21 @@
           :model-value="data.rating/2"
           @update:modelValue="onRatingUpdate"
           active-color="bulma-body-color"
+          class="centered"
           />
     </div>
-    <div>
+    <div class="column">
+      <h3 class="title">{{data.title}}</h3>
+      <h3 class="subtitle">{{data.author}}</h3>
       <p>{{data.summary}}</p>
     </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')"/>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -57,9 +66,17 @@ img {
   width:auto;
 }
 
-.imagewithrating {
-  vertical-align: top;
-  display: inline-block;
-  text-align: center;
+.centered {
+  display:flex;
+  justify-content:center;
+  align-items:center;
 }
+
+.iconscontainer {
+  border: solid;
+  border-radius: 50px;
+  width: 250px;
+}
+
+
 </style>

front/src/locales/en.json

@@ -41,6 +41,9 @@
     "wantread": "I want to read it"
   },
   "bookform": {
-    "error": "Error when loading book: {error}"
+    "error": "Error when loading book: {error}",
+    "read": "Read",
+    "startread": "Started",
+    "wantread": "Interested"
   }
 }

front/src/locales/fr.json

@@ -41,6 +41,9 @@
     "wantread": "Je veux le lire"
   },
   "bookform": {
-    "error": "Erreur pendant le chargement du livre: {error}"
+    "error": "Erreur pendant le chargement du livre: {error}",
+    "read": "Lu",
+    "startread": "Commencé",
+    "wantread": "Intéressé"
   }
 }