From d0f65cb0667ee917624022e01bf95ab958eee69e Mon Sep 17 00:00:00 2001
From: Arnabdaz <96580571+Arnabdaz@users.noreply.github.com>
Date: Fri, 10 Mar 2023 23:46:54 +0530
Subject: [PATCH] feat(i18n): add i18n support, add support for project
 properties panel and element properties panel

Signed-off-by: Arnabdaz <96580571+Arnabdaz@users.noreply.github.com>
---
 .../ElementProperty/ElementProperty.vue       | 22 +++++++++++------
 .../ProjectProperty/ProjectProperty.vue       | 17 ++++++-------
 src/locales/en.json                           | 24 +++++++++++++++++++
 src/locales/hi.json                           | 24 +++++++++++++++++++
 4 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/src/components/Panels/PropertiesPanel/ModuleProperty/ElementProperty/ElementProperty.vue b/src/components/Panels/PropertiesPanel/ModuleProperty/ElementProperty/ElementProperty.vue
index fec2c571f..d9945104a 100644
--- a/src/components/Panels/PropertiesPanel/ModuleProperty/ElementProperty/ElementProperty.vue
+++ b/src/components/Panels/PropertiesPanel/ModuleProperty/ElementProperty/ElementProperty.vue
@@ -1,7 +1,7 @@
 <template>
     <InputGroups
         v-if="!obj.fixedBitWidth"
-        property-name="BitWidth:"
+        :property-name="$t('simulator.panel_body.element_property.bit_width')"
         :property-value="obj.bitWidth"
         property-value-type="number"
         value-min="1"
@@ -11,7 +11,7 @@
     />
     <InputGroups
         v-if="obj.changeInputSize"
-        property-name="Input Size:"
+        :property-name="$t('simulator.panel_body.element_property.input_size')"
         :property-value="obj.inputSize"
         property-value-type="number"
         value-min="2"
@@ -21,7 +21,7 @@
     />
     <InputGroups
         v-if="!obj.propagationDelayFixed"
-        property-name="Delay:"
+        :property-name="$t('simulator.panel_body.element_property.delay')"
         :property-value="obj.propagationDelay"
         property-value-type="number"
         value-min="0"
@@ -30,7 +30,9 @@
         property-input-id="delayValue"
     />
     <p v-if="!obj.disableLabel">
-        <span>Label:</span>
+        <span>
+            {{ $t('simulator.panel_body.element_property.label') }}
+        </span>
         <input
             class="objectPropertyAttribute"
             type="text"
@@ -44,7 +46,9 @@
         :dropdown-array="labelDirections"
         property-name="newLabelDirection"
         :property-value="obj.labelDirection"
-        property-input-name="Label Direction:"
+        :property-input-name="
+            $t('simulator.panel_body.element_property.label_direction')
+        "
         property-select-id="labelDirectionValue"
     />
     <DropdownSelect
@@ -52,7 +56,9 @@
         :dropdown-array="labelDirections"
         property-name="newDirection"
         :property-value="obj.direction"
-        property-input-name="Direction:"
+        :property-input-name="
+            $t('simulator.panel_body.element_property.direction')
+        "
         property-select-id="directionValue"
     />
     <DropdownSelect
@@ -60,7 +66,9 @@
         :dropdown-array="labelDirections"
         property-name="newDirection"
         :property-value="obj.direction"
-        property-input-name="Orientation:"
+        :property-input-name="
+            $t('simulator.panel_body.element_property.orientation')
+        "
         property-select-id="orientationValue"
     />
 
diff --git a/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue b/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
index 209253c86..0de7dba84 100644
--- a/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
+++ b/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
@@ -1,6 +1,6 @@
 <template>
     <p>
-        <span>Project:</span>
+        <span>{{ $t('simulator.panel_body.project_property.project') }}</span>
         <input
             id="projname"
             class="objectPropertyAttribute"
@@ -12,7 +12,7 @@
     </p>
 
     <p>
-        <span>Circuit:</span>
+        <span>{{ $t('simulator.panel_body.project_property.circuit') }}</span>
         <input
             id="circname"
             :key="circuitId"
@@ -25,7 +25,7 @@
     </p>
 
     <InputGroups
-        property-name="Clock Time (ms):"
+        :property-name="$t('simulator.panel_body.project_property.clock_time')"
         :property-value="simulationArea.timePeriod"
         property-value-type="number"
         value-min="50"
@@ -35,7 +35,9 @@
     />
 
     <p>
-        <span>Clock Enabled:</span>
+        <span>{{
+            $t('simulator.panel_body.project_property.clock_enabled')
+        }}</span>
         <label class="switch">
             <input
                 type="checkbox"
@@ -46,7 +48,7 @@
     </p>
 
     <p>
-        <span>Lite Mode:</span>
+        <span>{{ $t('simulator.panel_body.project_property.lite_mode') }}</span>
         <label class="switch">
             <input
                 type="checkbox"
@@ -63,14 +65,14 @@
             class="panelButton btn btn-xs custom-btn--primary"
             @click="toggleLayoutMode"
         >
-            Edit Layout
+            {{ $t('simulator.panel_body.project_property.edit_layout') }}
         </button>
         <button
             type="button"
             class="panelButton btn btn-xs custom-btn--tertiary"
             @click="deleteCurrentCircuit"
         >
-            Delete Circuit
+            {{ $t('simulator.panel_body.project_property.delete_circuit') }}
         </button>
     </p>
 </template>
@@ -86,7 +88,6 @@ import { onMounted } from '@vue/runtime-core'
 const circuitId = ref(0)
 const circuitName = ref('Untitled-Cirucit')
 
-
 onMounted(() => {
     // checking if circuit or tab is switched
     setInterval(() => {
diff --git a/src/locales/en.json b/src/locales/en.json
index 46c1d3076..e85c5c088 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -88,6 +88,30 @@
                 "save_code": "Save Code",
                 "module_in_experiment_notice": "This is an experimental module. The code is not saved unless the \"Save Code\" button is clicked."
             },
+            "project_property": {
+                "project": "Project:",
+                "circuit": "Circuit:",
+                "clock_time": "Clock Time (ms):",
+                "clock_enabled": "Clock Enabled:",
+                "lite_mode": "Lite Mode:",
+                "edit_layout": "Edit Layout",
+                "delete_circuit": "Delete Circuit"
+            },
+            "element_property": {
+                "bit_width": "Bit-width:",
+                "input_size": "Input Size:",
+                "delay": "Delay:",
+                "label": "Label:",
+                "label_direction": "Label Direction:",
+                "direction": "Direction:",
+                "orientation": "Orientation:",
+                "label_directions": {
+                    "up": "UP",
+                    "down": "DOWN",
+                    "left": "LEFT",
+                    "right": "RIGHT"
+                }
+            },
             "layout": {
                 "width": "Width",
                 "height": "Height",
diff --git a/src/locales/hi.json b/src/locales/hi.json
index c9715426c..98ff1ce48 100644
--- a/src/locales/hi.json
+++ b/src/locales/hi.json
@@ -88,6 +88,30 @@
                 "save_code": "कोड सेव करें",
                 "module_in_experiment_notice": "यह एक प्रायोगिक मॉड्यूल है। कोड तब तक सेव नहीं होगा जब तक \"कोड सेव करें\" बटन क्लिक नहीं किया जाता।"
             },
+            "project_property": {
+                "project": "परियोजना:",
+                "circuit": "सर्किट:",
+                "clock_time": "घड़ी का समय (मिलीसेकंड):",
+                "clock_enabled": "घड़ी इनेबल किया गया:",
+                "lite_mode": "लाइट मोड:",
+                "edit_layout": "लेआउट संपादित करें",
+                "delete_circuit": "सर्किट हटाएं"
+            },
+            "element_property": {
+                "bit_width": "बिट-चौड़ाई:",
+                "input_size": "इनपुट आकार:",
+                "delay": "विलंब (सेकंड):",
+                "label": "लेबल:",
+                "label_direction": "लेबल दिशा:",
+                "direction": "दिशा:",
+                "orientation": "ओरिएंटेशन:",
+                "label_directions": {
+                    "up": "ऊपर",
+                    "down": "नीचे",
+                    "left": "बाएं",
+                    "right": "दाएं"
+                }
+            },
             "layout": {
                 "width": "चौड़ाई",
                 "height": "ऊंचाई",