From f5bc2bc3f52aeb295f5571468f9d02557bc0220b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Thuret?= <contact@sebastien-thuret.fr>
Date: Fri, 8 Oct 2021 19:02:30 +0200
Subject: [PATCH] fix

---
 app/static/css/main.css  |  7 +++++
 app/templates/index.html | 63 +++++++++++++++++++++++++++-------------
 2 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/app/static/css/main.css b/app/static/css/main.css
index 5ebfe14..728093b 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -124,6 +124,13 @@ h3.header {
   cursor: pointer;
 }
 
+.btn-blue {
+  color: #42A5F5;
+}
+.btn-action:disabled {
+    color: #777;
+}
+
 .btn-action span {
   padding-right: 0.5rem;
 }
diff --git a/app/templates/index.html b/app/templates/index.html
index 1f6154f..758a2b9 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -126,7 +126,7 @@
 									<template v-for="option in langs">
 										<option v-if="option.code !== 'auto'" :value="option.code">[[ option.name ]]</option>
 									</template>
-								</select>								
+								</select>
 							</div>
 						</div>
 
@@ -134,11 +134,11 @@
 							<div class="input-field textarea-container col s6">
 								<label for="textarea1" class="sr-only">
 									Text to translate
-								</label>								
+								</label>
 								<textarea id="textarea1" v-model="inputText" @input="handleInput" ref="inputTextarea" dir="auto"></textarea>
 								<button class="btn-delete-text" title="Delete text" @click="deleteText">
 									<i class="material-icons">close</i>
-								</button>							
+								</button>
 								<div class="characters-limit-container" v-if="charactersLimit !== -1">
 									<label>[[ inputText.length ]] / [[ charactersLimit ]]</label>
 								</div>
@@ -147,24 +147,26 @@
 							<div class="input-field textarea-container col s6">
 								<label for="textarea2" class="sr-only">
 									Translated text
-								</label>									
-								<textarea id="textarea2" v-model="translatedText" ref="translatedTextarea" dir="auto" readonly></textarea>
+								</label>
+								<textarea id="textarea2" v-model="translatedText" ref="translatedTextarea" dir="auto" v-bind:readonly="!isSuggesting"></textarea>
                                 <div class="actions">
                                     <button v-if="inputText.length && !isSuggesting" class="btn-action" @click="suggestTranslation">
                                         <i class="material-icons">edit</i>
                                     </button>
-                                    <button v-if="inputText.length && isSuggesting" class="btn-action" @click="closeSuggestTranslation">
-                                        <i class="material-icons">close</i>
+                                    <button v-if="inputText.length && isSuggesting" class="btn-action btn-blue" @click="closeSuggestTranslation">
+                                        <span>Cancel</span>
                                     </button>
-
-                                    <button class="btn-action btn-copy-translated" @click="copyText">
+                                    <button v-if="inputText.length && isSuggesting" :disabled="!canSendSuggestion" class="btn-action btn-blue" @click="sendSuggestion">
+                                        <span>Send</span>
+                                    </button>
+                                    <button v-if="!isSuggesting" class="btn-action btn-copy-translated" @click="copyText">
                                         <span>[[ copyTextLabel ]]</span> <i class="material-icons">content_copy</i>
                                     </button>
                                 </div>
-								<div class="position-relative">									
+								<div class="position-relative">
 									<div class="progress translate" v-if="loadingTranslation">
 										<div class="indeterminate"></div>
-									</div>																		
+									</div>
 								</div>
 							</div>
 						</div>
@@ -346,7 +348,7 @@
 				if (this.charactersLimit !== -1 && this.inputText.length >= this.charactersLimit){
 					this.inputText = this.inputText.substring(0, this.charactersLimit);
 				}
-				
+
 				// Update "selected" attribute (to overcome a vue.js limitation)
 				// but properly display checkmarks on supported browsers.
 				// Also change the <select> width value depending on the <option> length
@@ -355,7 +357,7 @@
 					if (el.value === this.sourceLang){
 						el.setAttribute('selected', '');
 						this.$refs.sourceLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
-					}else{ 
+					}else{
 						el.removeAttribute('selected');
 					}
 				}
@@ -366,9 +368,9 @@
 						this.$refs.targetLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
 					}else{
 						el.removeAttribute('selected');
-					} 
+					}
 				}
-				
+
 		},
 		computed: {
 			requestCode: function(){
@@ -388,8 +390,11 @@
 
 			isHtml: function(){
 				return htmlRegex.test(this.inputText);
-			}
-		},
+			},
+            canSendSuggestion() {
+                return this.translatedText.trim() !== "" && this.translatedText !== this.inputText;
+            }
+        },
 		filters: {
 			escape: function(v){
 				return v.replace('"', '\\\"');
@@ -405,7 +410,9 @@
 					this.transRequest = null;
 				}
 			},
-			swapLangs: function(){
+			swapLangs: function(e){
+                this.closeSuggestTranslation(e)
+
 				var t = this.sourceLang;
 				this.sourceLang = this.targetLang;
 				this.targetLang = t;
@@ -417,6 +424,8 @@
 				this.error = '';
 			},
 			handleInput: function(e){
+                this.closeSuggestTranslation(e)
+
 				if (this.timeout) clearTimeout(this.timeout);
 				this.timeout = null;
 
@@ -494,6 +503,20 @@
                 e.preventDefault();
 
                 this.isSuggesting = false;
+            },
+            sendSuggestion: function(e) {
+                e.preventDefault();
+
+                var request = new XMLHttpRequest();
+                self.transRequest = request;
+
+                var data = new FormData();
+                data.append("q", self.inputText);
+                data.append("s", self.inputText);
+                data.append("source", self.sourceLang);
+                data.append("target", self.targetLang);
+
+                request.open('POST', BaseUrl + '/translate', true);
             },
 			deleteText: function(e){
 				e.preventDefault();
@@ -510,7 +533,7 @@
 		ctx.font = 'bold 16px sans-serif';
 		var textWidth = Math.ceil(ctx.measureText(text).width);
 		return textWidth;
-	}	
+	}
 
 	function setApiKey(){
 		var prevKey = localStorage.getItem("api_key") || "";
@@ -520,7 +543,7 @@
 
 		localStorage.setItem("api_key", newKey);
 	}
-	
+
 	// @license-end
 	</script>
 </body>