display error front

frontend/src/components/CustomSelector.vue

@@ -44,7 +44,6 @@ export default defineComponent({
 
 <style scoped>
 .custom-select {
-	width: 100%;
 	text-align: left;
 	outline: none;
 	height: 47px;

frontend/src/components/Home.vue

@@ -34,7 +34,8 @@ export default defineComponent({
 			newId: -1,
 			selectedArea: new Area(0, 0, 0, 0),
 			processed: false,
-			progress: 0
+			progress: 0,
+			serverError: false
 		}
 	},
 	created() {
@@ -69,15 +70,14 @@ export default defineComponent({
 				this.imageSelectedId = this.images.keys().next().value;
 		},
 		async applyFilter(filter: Filter) {
-			console.log("applyfilter")
 			if (filter === undefined || filter === null) {
 				return;
 			}
 			// if filter contain AreaParameter, we need to set the area
 			for (const arg of filter.parameters) {
-				console.log("applyfilter")
 				if (arg.type === FilterType.area) {
-					arg.value = this.selectedArea;
+					arg.value = this.selectedArea.clone();
+					this.selectedArea.clear();
 				}
 			}
 			const newImage = api.applyAlgorithm(this.imageSelectedId, filter);
@@ -91,6 +91,7 @@ export default defineComponent({
 			newImage.catch((err) => {
 				console.log(err);
 				clearInterval(timer);
+				this.serverError = !this.serverError;
 			});
 			// set a timer to get the progress of the filter
 			const timer = setInterval(async () => {
@@ -126,8 +127,8 @@ export default defineComponent({
 			@updateImageSelectedId="id => updateImageSelectedId(id)" />
 		<HomeEditor v-else @apply-filter="(filter) => applyFilter(filter)" :filters="filters"
 			:image-filtered="isImageFiltered(imageSelectedId)" @delete-image="$emit('delete', imageSelectedId)"
-			@update-image-selected-id="(newid) => updateImageSelectedId(newid)" :processed="processed"
-			:progress="progress" />
+			@update-image-selected-id="(newid) => updateImageSelectedId(newid)" :processed="processed" :progress="progress"
+			:server-error="serverError" />
 		<Image class="home" v-if="imageSelectedId !== undefined && imageSelectedId !== -1" :id="imageSelectedId"
 			:images="images" :redirect="editor ? 'disabled' : ''" :selected-area="selectedArea">
 		</Image>

frontend/src/components/HomeEditor.vue

@@ -25,6 +25,10 @@ export default defineComponent({
 			type: Number,
 			required: true,
 		},
+		serverError: {
+			type: Boolean,
+			required: true,
+		},
 	},
 	emits: {
 		deleteImage() {
@@ -97,6 +101,9 @@ export default defineComponent({
 			return "Appliquer le filtre";
 		},
 		styledProgress() {
+			if (this.error != '') {
+				return "red";
+			}
 			return "linear-gradient(to right, #00ff00 " + this.progress + "%, var(--button-color) " + this.progress + "%)";
 		}
 	},
@@ -112,6 +119,10 @@ export default defineComponent({
 		},
 		processed() {
 			this.sent = false;
+		},
+		serverError() {
+			this.error = "Erreur serveur";
+			this.sent = false;
 		}
 	},
 	components: { CustomSelector }
@@ -152,8 +163,7 @@ export default defineComponent({
 			</div>
 		</div>
 		<button :style="{ background: styledProgress() }" @mouseenter="error = areInputValid()"
-			@mouseleave="error = areInputValid()" class="button" :class="{ errorClass: error !== '' }"
-			@click="applyFilter()">{{ titleApply() }}</button>
+			@mouseleave="error = areInputValid()" class="button" @click="applyFilter()">{{ titleApply() }}</button>
 		<button v-if="imageFiltered !== -1" class="button" @click="deleteFilter()">Supprimer les filtres</button>
 	</div>
 </template>

frontend/src/filter.ts

@@ -69,6 +69,17 @@ export class Area {
 	toString(): string {
 		return Math.round(this.xMin) + ";" + Math.round(this.yMin) + ";" + Math.round(this.xMax) + ";" + Math.round(this.yMax)
 	}
+
+	clear(): void {
+		this.xMin = 0
+		this.xMax = 0
+		this.yMin = 0
+		this.yMax = 0
+	}
+
+	clone(): Area {
+		return new Area(this.xMin, this.xMax, this.yMin, this.yMax)
+	}
 }
 
 export class AreaParameters extends Parameters {