From 4081048a4b9052fcfeb5f6b715b475f5a2aa306b Mon Sep 17 00:00:00 2001
From: Theophyl Hoguet <theophyl.hoguet@etu.u-bordeaux.fr>
Date: Sat, 11 Mar 2023 17:28:55 +0100
Subject: [PATCH] =?UTF-8?q?ajout=C3=A9=20une=20confirmation=20de=20deletio?=
 =?UTF-8?q?n=20et=20un=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Home.vue | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index 13415a9..7c58be3 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -18,7 +18,8 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			imageSelectedId: 0 as number
+			imageSelectedId: 0 as number,
+			sure: false as boolean
 		}
 	},
 	mounted() {
@@ -27,6 +28,17 @@ export default defineComponent({
 	watch: {
 		images() {
 			this.imageSelectedId = this.images.keys().next().value;
+		},
+		imageSelectedId() {
+			this.sure = false;
+		}
+	},
+	methods: {
+		confirmDelete() {
+			if (this.sure)
+				this.$emit('delete', this.imageSelectedId);
+			else
+				this.sure = true;
 		}
 	}
 })
@@ -34,10 +46,12 @@ export default defineComponent({
 <template>
 	<div class="flex" v-if="images.keys != null">
 		<div>
+			<label>Selectioner une image: </label>
 			<select v-model="imageSelectedId" style="width: min-content;margin: 15px;">
 				<option v-for="[id, image] in images" :key="id" :value="id">{{ image.name }}</option>
 			</select>
-			<button @click="$emit('delete', imageSelectedId)">Delete</button>
+			<button @click="confirmDelete()" :class="sure ? 'confirm' : ''">
+				{{ sure ? "Confirmer" : "Supprimer" }}</button>
 		</div>
 		<Image v-if="imageSelectedId !== undefined" :id="imageSelectedId"></Image>
 	</div>
@@ -50,6 +64,15 @@ export default defineComponent({
 	align-items: center;
 }
 
+.confirm {
+	background-color: red;
+	color: white;
+}
+
+label {
+	color: white;
+}
+
 img {
 	max-width: 90%;
 	max-height: 60%;