From 6e2df73a7fc31601b59ab47c1391b3f21e065634 Mon Sep 17 00:00:00 2001 From: Seth Falco Date: Tue, 21 Jun 2022 19:33:34 +0100 Subject: [PATCH] fix: fix race condition in settings and langs --- app/static/js/app.js | 160 +++++++++++++++++++++++-------------------- 1 file changed, 84 insertions(+), 76 deletions(-) diff --git a/app/static/js/app.js b/app/static/js/app.js index f81cdb2..57574e6 100644 --- a/app/static/js/app.js +++ b/app/static/js/app.js @@ -39,14 +39,17 @@ document.addEventListener('DOMContentLoaded', function(){ filesTranslation: true, frontendTimeout: 500 }, - mounted: function(){ - var self = this; - var requestSettings = new XMLHttpRequest(); - requestSettings.open('GET', BaseUrl + '/frontend/settings', true); + mounted: function() { + const self = this; - requestSettings.onload = function() { + const settingsRequest = new XMLHttpRequest(); + settingsRequest.open("GET", BaseUrl + "/frontend/settings", true); + + const langsRequest = new XMLHttpRequest(); + langsRequest.open("GET", BaseUrl + "/languages", true); + + settingsRequest.onload = function() { if (this.status >= 200 && this.status < 400) { - // Success! self.settings = JSON.parse(this.response); self.sourceLang = self.settings.language.source.code; self.targetLang = self.settings.language.target.code; @@ -55,74 +58,42 @@ document.addEventListener('DOMContentLoaded', function(){ self.supportedFilesFormat = self.settings.supportedFilesFormat; self.filesTranslation = self.settings.filesTranslation; self.frontendTimeout = self.settings.frontendTimeout; - }else { + + if (langsRequest.response) { + handleLangsResponse(self, langsRequest); + } else { + langsRequest.onload = function() { + handleLangsResponse(self, this); + } + } + } else { self.error = "Cannot load /frontend/settings"; self.loading = false; } }; - requestSettings.onerror = function() { + settingsRequest.onerror = function() { self.error = "Error while calling /frontend/settings"; self.loading = false; }; - requestSettings.send(); - - var requestLanguages = new XMLHttpRequest(); - requestLanguages.open('GET', BaseUrl + '/languages', true); - - requestLanguages.onload = function() { - if (this.status >= 200 && this.status < 400) { - // Success! - self.langs = JSON.parse(this.response); - self.langs.push({ name: 'Auto Detect (Experimental)', code: 'auto' }) - if (self.langs.length === 0){ - self.loading = false; - self.error = "No languages available. Did you install the models correctly?" - return; - } - - const sourceLanguage = self.langs.find(l => l.code === self.getQueryParam('source')) - const isSourceAuto = !sourceLanguage && self.getQueryParam('source') === "auto" - const targetLanguage = self.langs.find(l => l.code === self.getQueryParam('target')) - - if (sourceLanguage || isSourceAuto) { - self.sourceLang = isSourceAuto ? "auto" : sourceLanguage.code - } - - if (targetLanguage) { - self.targetLang = targetLanguage.code - } - - const defaultText = self.getQueryParam('q') - - if(defaultText) { - self.inputText = decodeURI(defaultText) - } - - self.loading = false; - } else { - self.error = "Cannot load /languages"; - self.loading = false; - } - }; - - requestLanguages.onerror = function() { + langsRequest.onerror = function() { self.error = "Error while calling /languages"; self.loading = false; }; - requestLanguages.send(); + settingsRequest.send(); + langsRequest.send(); }, updated: function(){ M.FormSelect.init(this.$refs.sourceLangDropdown); M.FormSelect.init(this.$refs.targetLangDropdown); - + if (this.$refs.inputTextarea){ if (this.inputText === ""){ this.$refs.inputTextarea.style.height = this.inputTextareaHeight + "px"; this.$refs.translatedTextarea.style.height = this.inputTextareaHeight + "px"; - }else{ + } else{ this.$refs.inputTextarea.style.height = this.$refs.translatedTextarea.style.height = "1px"; this.$refs.inputTextarea.style.height = Math.max(this.inputTextareaHeight, this.$refs.inputTextarea.scrollHeight + 32) + "px"; this.$refs.translatedTextarea.style.height = Math.max(this.inputTextareaHeight, this.$refs.translatedTextarea.scrollHeight + 32) + "px"; @@ -136,28 +107,12 @@ document.addEventListener('DOMContentLoaded', function(){ // Update "selected" attribute (to overcome a vue.js limitation) // but properly display checkmarks on supported browsers. // Also change the