Merge pull request #70 from he3-app/yeming/fix/add-loading

fix: add loading
he3-app · Oct 23, 2023 · 7b756d5 · 7b756d5
2 parents 1cbd72d + 04a0fb9
commit 7b756d5
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 28 deletions.
diff --git a/exchange-rate-calculator/package.json b/exchange-rate-calculator/package.json
@@ -10,7 +10,7 @@
     "name": "Exchange Rate Calculator",
     "id": "exchange-rate-calculator",
     "icon": "block-outlined",
-    "version": "1.2.2",
+    "version": "1.2.3",
     "description": "The Exchange Rate Calculator is a tool used to calculate currency exchange rates. It can convert the amount of one currency into the amounts of multiple other currencies and display them in the tool's output area.\n\nFeatures:\n\n1. Enter the currency amount and type to be converted in the tool.\n\n2. Select the other currency types to convert the currency into.\n\n3. Click the \"Add Currency\" button to add more currency types to convert into.\n\n4. Click the \"Convert\" button, and the tool will calculate and display the conversion amounts for each currency type.\n\nUse cases:\n\n1. Travel: When traveling, people need to convert one currency into another. Using the Exchange Rate Calculator tool, they can easily calculate the exchange rates between different currencies and understand their travel budget.\n\n2. Trade: In international trade, people need to convert currencies into other currencies. Using this tool, they can quickly calculate the exchange rates between different currencies and understand their trading costs.\n\n3. Financial investment: In financial investment, people need to understand the exchange rates between different currencies. Using the Exchange Rate Calculator tool, they can easily calculate the exchange rates between different currencies and understand their investment return rates.",
     "relatedToolId": [],
     "isPublic": true,

diff --git a/exchange-rate-calculator/src/index.vue b/exchange-rate-calculator/src/index.vue
@@ -1,43 +1,74 @@
 <template>
   <h-single-layout :max-width="800">
     <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 24 }">
-      <a-form-item :label="t('amount')" style="width: 80%;">
-        <h-number-input v-model:value="amount" select-all-on-mount :controls="false">
+      <a-form-item :label="t('amount')" style="width: 80%">
+        <h-number-input
+          v-model:value="amount"
+          select-all-on-mount
+          :controls="false"
+        >
           <template #addonAfter>
-            <h-select v-model:value="fromCurrency" show-search optionFilterProp="label" style="width: 200px">
-              <a-select-option v-for="[key, value] in Object.entries(currencies)" :key="key" :value="key"
-                :label="t(value)" show-search>
+            <h-select
+              v-model:value="fromCurrency"
+              show-search
+              optionFilterProp="label"
+              style="width: 200px"
+            >
+              <a-select-option
+                v-for="[key, value] in Object.entries(currencies)"
+                :key="key"
+                :value="key"
+                :label="t(value)"
+                show-search
+              >
                 {{ t(value) }}
               </a-select-option>
             </h-select>
           </template>
         </h-number-input>
       </a-form-item>
 
-      <a-form-item :label="`${t('toCurrency')} ${index + 1}`" style="width: 80%;" v-for="(item, index) in toCurrencies"
-        :key="index">
-        <h-select v-model:value="toCurrencies[index]" show-search optionFilterProp="label">
-          <a-select-option v-for="[key, value] in Object.entries(currencies)" :key="key" :value="key" :label="t(value)"
-            show-search>
+      <a-form-item
+        :label="`${t('toCurrency')} ${index + 1}`"
+        style="width: 80%"
+        v-for="(item, index) in toCurrencies"
+        :key="index"
+      >
+        <h-select
+          v-model:value="toCurrencies[index]"
+          show-search
+          optionFilterProp="label"
+        >
+          <a-select-option
+            v-for="[key, value] in Object.entries(currencies)"
+            :key="key"
+            :value="key"
+            :label="t(value)"
+            show-search
+          >
             {{ t(value) }}
           </a-select-option>
         </h-select>
       </a-form-item>
 
-      <a-form-item style="width: 80%; margin-left: 26.5%;">
+      <a-form-item style="width: 80%; margin-left: 26.5%">
         <a-button @click="addToCurrency">
-          {{ t('AddCurrency') }}
+          {{ t("AddCurrency") }}
         </a-button>
       </a-form-item>
 
-      <a-form-item style="width: 80%; margin-left: 26.5%;">
-        <a-button @click="convertCurrency" type="primary">{{ t('Convert') }}</a-button>
+      <a-form-item style="width: 80%; margin-left: 26.5%">
+        <a-button @click="convertCurrency" type="primary">{{
+          t("Convert")
+        }}</a-button>
       </a-form-item>
     </a-form>
     <h2>
-      {{ t('convertedResult') }}
+      {{ t("convertedResult") }}
     </h2>
-    <h-kv :value="result" mode="list" :disable-mode-switch="true" />
+    <a-spin :spinning="loading" size="large">
+      <h-kv :value="result" mode="list" :disable-mode-switch="true" />
+    </a-spin>
   </h-single-layout>
 </template>
 
@@ -54,45 +85,46 @@ const { t } = useI18n({
 
 const amount = ref(100);
 const fromCurrency = ref("USD");
-const toCurrencies = ref(['AUD']);
+const toCurrencies = ref(["AUD"]);
 const result = ref({});
+const loading = ref(false);
 
 function addToCurrency() {
-  toCurrencies.value.push('EUR')
+  toCurrencies.value.push("EUR");
 }
 
-
 async function convertCurrency() {
   try {
+    loading.value = true
     result.value = {};
     for (const item of toCurrencies.value) {
       if (fromCurrency.value === item) {
         if (amount.value != 0) {
           result.value = {
             ...result.value,
-            [`${t(item)} / ${item}`]: amount.value
+            [`${t(item)} / ${item}`]: amount.value,
           };
         }
-      }
-      else {
+      } else {
         const response = await fetch(
           `https://api.frankfurter.app/latest?amount=${amount.value}&from=${fromCurrency.value}&to=${item}`
         );
         const output = await response.json();
-        const key = `${Object.keys(output['rates'])[0]}`;
-        const keyName = `${t(currencies[Object.keys(output['rates'])[0]])} / ${Object.keys(output['rates'])[0]}`;
+        const key = `${Object.keys(output["rates"])[0]}`;
+        const keyName = `${t(currencies[Object.keys(output["rates"])[0]])} / ${
+          Object.keys(output["rates"])[0]
+        }`;
         result.value = {
           ...result.value,
-          [keyName]: output['rates'][key]
+          [keyName]: output["rates"][key],
         };
       }
     }
-
+    loading.value = false
   } catch (error) {
     console.error("Error fetching exchange rates:", error);
   }
 }
-
 </script>
 
 <style scoped lang="less"></style>