Multi-language Support (Italian Language)

gui/admin.html

@@ -56,6 +56,9 @@
             <div id="main-app">
             </div>
 
+            <!-- Language Selector -->
+            <div id="language-selector">
+            </div>
 
             <!-- Footer -->
             <div class="foot-bar">
@@ -77,15 +80,16 @@
         <script src="source/utils/backend_interannotator.js"></script>
         <script src="source/utils/event_buses.js"></script>
         <script src="source/utils/data.js"></script>
+        <script src="source/utils/languages.js"></script>
 
         <!-- COMPONENTS -->
         <script src="source/components/helper_components.js"></script>
         <script src="source/components/modal_components.js"></script>
         <script src="source/components/main_admin_components.js"></script>
         <script src="source/components/annotation_type_components.js"></script>
-        <script src="source/components/annotation_type_components.js"></script>
         <script src="source/components/resolution_app_helper_components.js"></script>
         <script src="source/components/resolution_app_components.js"></script>
+        <script src="source/components/language_components.js"></script>
 
         <!-- MAIN COMPONENT -->
         <script src="source/admin_view.js"></script>

gui/assets/css/main.css

@@ -198,4 +198,19 @@ input:focus {
     background-color: #0e181e;
 }
 
+.language-list-title-container {
+    text-align:center;
+    background: rgba(0,0,0,0.02);
+    border-top: 1px solid #e6e6e6;
+    padding: 10px 24px;
+    vertical-align:bottom;
+}
+
+.droplist_language_selector {
+    font-family:CoreSansNR35Light;
+    font-size:14px;
+    border:0;
+    outline:none;
+}
+
 /* EOF */

gui/index.html

@@ -60,6 +60,10 @@
 
             </div>
 
+            <!-- Language Selector -->
+            <div id="language-selector">
+
+            </div>
 
             <!-- Footer -->
             <div class="foot-bar">
@@ -81,6 +85,7 @@
         <script src="source/utils/backend.js"></script>
         <script src="source/utils/event_buses.js"></script>
         <script src="source/utils/data.js"></script>
+        <script src="source/utils/languages.js"></script>
 
         <!-- COMPONENTS -->
         <script src="source/components/helper_components.js"></script>
@@ -89,6 +94,7 @@
         <script src="source/components/annotation_type_components.js"></script>
         <script src="source/components/annotation_app_components.js"></script>
         <script src="source/components/text_splitter_components.js"></script>
+        <script src="source/components/language_components.js"></script>
 
         <!-- MAIN COMPONENT -->
         <script src="source/lida_view.js"></script>

gui/source/admin_view.js

@@ -18,6 +18,8 @@ var mainApp = new Vue({
             displayingDialogue: '',
             status : 'listview',
             alreadyVisited: [],
+            //reference to the language file
+            guiMessages,
       }
   },
 

gui/source/components/all_dialogues_components.js

@@ -15,7 +15,9 @@ Vue.component("all-dialogues", {
           allDialogueMetadata: [],
           dragging: false,
           showModal: false,
-          userName : ''
+          userName : '',
+          // Reference to the language item
+          guiMessages
       }
   },
   // computed : {
@@ -237,7 +239,7 @@ Vue.component("all-dialogues", {
 
           <div class="all-dialogues-list-title">
               <h2 v-if="!(dragging)" >
-                  {{ allDialogueMetadata.length }} Data Items, {{ alreadyVisited.length }} Visited
+                  {{ allDialogueMetadata.length }} {{ guiMessages.selected.admin.dataItems }}, {{ alreadyVisited.length }} {{ guiMessages.selected.admin.visited }}
               </h2>
 
               <h2 v-else>
@@ -258,8 +260,8 @@ Vue.component("all-dialogues", {
           </div>
 
           <div class="help-button-container">
-              <button class="help-button btn btn-sm" @click="showModal = true">File Format Info</button>
-              <button class="help-button btn btn-sm btn-primary" @click="download_all_dialogues_from_server()">Download All Data</button>
+              <button class="help-button btn btn-sm" @click="showModal = true">{{ guiMessages.selected.lida.button_fileFormatInfo }}</button>
+              <button class="help-button btn btn-sm btn-primary" @click="download_all_dialogues_from_server()">{{ guiMessages.selected.admin.button_downloadAll }}</button>
 
           </div>
       </div>
@@ -279,7 +281,7 @@ Vue.component("all-dialogues", {
             <div class="dialogue-list-single-item-container">
 
               <div class="del-dialogue-button" v-on:click="delete_dialogue($event)">
-                Delete
+                {{ guiMessages.selected.lida.button_delete }}
               </div>
 
 
@@ -290,10 +292,10 @@ Vue.component("all-dialogues", {
 
                   <div v-if="dialogue_already_visited(dat.id)"
                        class="visited-indicator">
-                       Visited
+                       {{ guiMessages.selected.admin.visited }}
                   </div>
 
-                  <div class="dialogue-num-turns" >{{dat.num_turns}} Turns</div>
+                  <div class="dialogue-num-turns" >{{dat.num_turns}} {{ guiMessages.selected.lida.turns }}</div>
               </div>
 
             </div>
@@ -303,7 +305,7 @@ Vue.component("all-dialogues", {
       </ul>
 
       <ul class="btn-set">
-        <li><button class="add-dialogue-button btn btn-sm" v-on:click="create_new_dialogue()">Add a New Dialogue</button></li>
+        <li><button class="add-dialogue-button btn btn-sm" v-on:click="create_new_dialogue()">{{ guiMessages.selected.lida.button_newDialogue }}</button></li>
         <li>
 
               <input type="file"
@@ -315,7 +317,7 @@ Vue.component("all-dialogues", {
               <label for="fileInput"
                      id="fileInputLabel"
                      class="btn btn-sm">
-                     Upload File or Drag and Drop
+                     {{ guiMessages.selected.admin.button_upload}}
               </label>
         </li>
       </ul>

gui/source/components/annotation_app_components.js

@@ -260,6 +260,7 @@ Vue.component('dialogue-menu',{
     data () {
       return {
           editingTitle: false,
+          guiMessages,
       }
     },
 
@@ -297,7 +298,7 @@ Vue.component('dialogue-menu',{
     template:
     `
     <div id="dialogue-menu">
-        <button v-on:click="go_back_to_all_dialogues($event)" class="back-button btn btn-sm">Back to All Dialgoues</button>
+        <button v-on:click="go_back_to_all_dialogues($event)" class="back-button btn btn-sm">{{guiMessages.selected.annotation_app.backToAll}}</button>
 
         <div class="dialogue-name">
 
@@ -316,8 +317,8 @@ Vue.component('dialogue-menu',{
         </div>
 
         <div class="saved-status">
-            <span v-if="changesSaved" class="is-saved">All Changes Saved</span>
-            <span v-else class="is-not-saved">Unsaved Changes</span>
+            <span v-if="changesSaved" class="is-saved">{{guiMessages.selected.annotation_app.allSaved}}</span>
+            <span v-else class="is-not-saved">{{guiMessages.selected.annotation_app.unsaved}}</span>
         </div>
     </div>
     `
@@ -360,7 +361,11 @@ Vue.component('dialogue-turn',{
     // primaryElementClass is the class used to select the correct input field
     // to correctly set the focus when turns are changed with arrow keys or enter
     props : ["turn","currentId","myId", "primaryElementClass"],
-
+    data: function (){
+        return {
+            guiMessages
+        }
+    },
     methods :{
         turn_updated_string : function(event){
             annotationAppEventBus.$emit("turn_updated_string", event )
@@ -404,10 +409,10 @@ Vue.component('dialogue-turn',{
 
         <div class="turn-header">
             <div class="active-turn-id">
-                Turn Id: {{myId}}
+                {{guiMessages.selected.annotation_app.turnId}}: {{myId}}
             </div>
 
-            <button class="turn-deleter" v-on:click="delete_this_turn($event)">Delete</button>
+            <button class="turn-deleter" v-on:click="delete_this_turn($event)">{{guiMessages.selected.lida.button_delete}}</button>
         </div>
 
         <div v-for="stringType in turn" class="user-string-type">
@@ -424,7 +429,7 @@ Vue.component('dialogue-turn',{
 
     <div v-else v-on:click="update_id()" class="dialogue-turn">
         <div class="sticky">
-            Turn Id: {{myId}}
+            {{guiMessages.selected.annotation_app.turnId}}: {{myId}}
         </div>
 
         <div v-for="stringType in turn" class="user-string-type">
@@ -497,7 +502,8 @@ Vue.component('input-box',{
     props : ["message"],
     data: function (){
         return {
-            input : this.message
+            input : this.message,
+            guiMessages
         }
     },
     methods:{
@@ -518,10 +524,10 @@ Vue.component('input-box',{
     `
     <div id="input-box">
         <ul>
-            <li><input id="new-query-entry-box" v-on:keyup.enter="new_turn($event)" v-model="input" class="new-input" placeholder="Enter New Query">
+            <li><input id="new-query-entry-box" v-on:keyup.enter="new_turn($event)" v-model="input" class="new-input" :placeholder="guiMessages.selected.annotation_app.enterQuery">
         </input></li>
-            <li><button v-on:click="new_turn({target:{value:input}})" class="input-button">Enter</button></li>
-            <li><button class="input-button" v-on:click="save()">Save</button></li>
+            <li><button v-on:click="new_turn({target:{value:input}})" class="input-button">{{guiMessages.selected.annotation_app.enter}}</button></li>
+            <li><button class="input-button" v-on:click="save()">{{guiMessages.selected.annotation_app.save}}</button></li>
         </ul>
 
 

gui/source/components/language_components.js

@@ -0,0 +1,51 @@
+/************************************
+* Language Options
+*************************************/
+
+guiMessages.selected = guiMessages.en;
+
+var languageSection = new Vue({
+  el:"#language-selector",
+
+  data:{
+    gui_languages: [
+      { name:"English", code:"en" }, 
+      { name:"Italian", code:"it"}
+    ],
+    currentLanguage: "en",
+    guiMessages,
+  },
+
+  mounted() {
+    this.detectLanguage();
+  },
+
+  methods: {
+
+    detectLanguage() {
+      var browserLanguage = navigator.language.substr(0,2);
+      if (guiMessages[browserLanguage] == undefined)
+        guiMessages.selected = guiMessages.en;
+      else 
+        guiMessages.selected = guiMessages[browserLanguage];
+      this.currentLanguage = browserLanguage;
+    },
+
+    updateGui(event) {
+      console.log('---- CHANGING GUI LANGUAGE ----');
+      guiMessages.selected = guiMessages[this.currentLanguage];
+    }
+  },
+
+  template: 
+
+  `
+  	<div class="language-list-title-container">
+  		<label for="droplist_language_selector">{{ guiMessages.selected.lida.interfaceLanguage }}</label>
+  		<select id="language_selector" class="droplist_language_selector" v-model="currentLanguage" @change="updateGui()">
+  			<option v-for="options in gui_languages" v-bind:value="options.code">{{ options.name }}</option>
+      </select>
+  	</div>
+
+  `
+})

gui/source/components/main_admin_components.js

@@ -2,12 +2,10 @@
 * All Dialgoues View "aka MAIN LIDA VIEW"
 *************************************/
 
-
-
 Vue.component("main-admin", {
 
   props: [
-      "alreadyVisited"
+      "alreadyVisited",
   ],
 
   data () {
@@ -26,7 +24,10 @@ Vue.component("main-admin", {
           showAgreement: false,
 
           // A list of dialogue IDs for which annotator names should be displayed
-          showAnnotatorNamesForIds: []
+          showAnnotatorNamesForIds: [],
+
+          //Reference to the language data
+          guiMessages,
       }
   },
 
@@ -157,10 +158,9 @@ Vue.component("main-admin", {
                 document.body.appendChild(link)
                 link.click();
             });
-    }
+    },
 
   },
-
   template:
   `
   <div class="all-dialogues-container"
@@ -173,16 +173,16 @@ Vue.component("main-admin", {
 
     <div class="dialogue-list-title-container">
         <h2 v-if="!(dragging)" class="all-dialogues-list-title">
-            {{ allDialogueMetadata.length }} Data Items, {{ alreadyVisited.length }} Visited:
+            {{ allDialogueMetadata.length }} {{ guiMessages.selected.admin.dataItems }}, {{ alreadyVisited.length }} {{ guiMessages.selected.admin.visited }}
         </h2>
 
         <h2 v-else class="all-dialogues-list-title">
             Drop Files Anywhere to Upload!
         </h2>
 
         <div class="help-button-container">
-            <button class="help-button btn btn-sm" @click="download_all_dialogues_from_server()">Download All Data</button>
-            <button class="help-button btn btn-sm btn-primary" @click="showAgreement = true">Inter-annotator Agreement</button>
+            <button class="help-button btn btn-sm" @click="download_all_dialogues_from_server()">{{ guiMessages.selected.admin.button_downloadAll }}</button>
+            <button class="help-button btn btn-sm btn-primary" @click="showAgreement = true">{{ guiMessages.selected.admin.button_interAgreement }}</button>
 
         </div>
     </div>
@@ -208,19 +208,19 @@ Vue.component("main-admin", {
                 <div v-if="dialogue_already_visited(dat[0])"
                      class="visited-indicator"
                      v-on:click="clicked_dialogue(dat[0])">
-                     Visited
+                     {{ guiMessages.selected.admin.visited }}
                 </div>
 
                 <div v-if="show_annotators(dat[0])"
                      class="dialogue-num-turns"
                      v-on:click="toggle_show_annotators(dat[0])">
-                    Annotators: {{ dat[1] }}
+                    {{ guiMessages.selected.admin.annotators }}: {{ dat[1] }}
                 </div>
 
                 <div v-else
                      class="dialogue-num-turns"
                      v-on:click="toggle_show_annotators(dat[0])">
-                    Annotators: {{ dat[1].length }}
+                    {{ guiMessages.selected.admin.annotators }}: {{ dat[1].length }}
                 </div>
 
             </div>
@@ -240,7 +240,7 @@ Vue.component("main-admin", {
             <label for="fileInput"
                    id="fileInputLabel"
                    class="btn btn-sm">
-                   Upload File or Drag and Drop
+                   {{ guiMessages.selected.admin.button_upload }}
             </label></li>
     </ul>
     </div>