fix: try to displays air pollution with async 1

Roman-wdesign · Dec 17, 2024 · de7ace5 · de7ace5
1 parent a096e57
commit de7ace5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 60 deletions.
diff --git a/src/features/WeatherHourly/main-component/ui/HourlyComponent.vue b/src/features/WeatherHourly/main-component/ui/HourlyComponent.vue
@@ -190,11 +190,8 @@ const getTemperatureColor = (tempCelsius: number): string => {
         </div>
       </div>
       <div v-if="paginatedData && paginatedData.length > 0">
-        <div
-          class="flex justify-between items-center max-w-screen-sm mx-auto px-4 mt-6"
-          v-for="(forecast, index) in paginatedData"
-          :key="index"
-        >
+        <div class="flex justify-between items-center max-w-screen-sm mx-auto px-4 mt-6"
+          v-for="(forecast, index) in paginatedData" :key="index">
           <!-- date format -->
           <div class="date-format flex flex-col dark:text-gray-400">
             <div class="flex flex-row">
@@ -256,14 +253,9 @@ const getTemperatureColor = (tempCelsius: number): string => {
               <!-- wind direction -->
               <p class="text-xs sm:text-sm hidden sm:block md:text-base">
                 &nbsp;{{ forecast.wind.speed.toFixed(1) }}&nbsp;
-                <span v-if="forecast.wind.gust != null"
-                  >({{ forecast.wind.gust.toFixed(1) }}) m/s</span
-                >
+                <span v-if="forecast.wind.gust != null">({{ forecast.wind.gust.toFixed(1) }}) m/s</span>
                 <span v-if="forecast.wind?.deg != null">
-                  <component
-                    :is="getWindDirection(forecast.wind.deg).icon"
-                    class="inline-block w-5 h-5 align-middle"
-                  />
+                  <component :is="getWindDirection(forecast.wind.deg).icon" class="inline-block w-5 h-5 align-middle" />
                   {{ getWindDirection(forecast.wind.deg).name }}
                 </span>
               </p>
@@ -285,16 +277,11 @@ const getTemperatureColor = (tempCelsius: number): string => {
           </div>
         </div>
       </div>
-      <PaginationComponent
-        class="flex justify-center mt-6 dark:text-gray-400"
-        :currentPage="currentPage"
-        :totalPages="totalPages"
-        :nextPage="nextPage"
-        :prevPage="prevPage"
-      />
+      <PaginationComponent class="flex justify-center mt-6 dark:text-gray-400" :currentPage="currentPage"
+        :totalPages="totalPages" :nextPage="nextPage" :prevPage="prevPage" />
     </div>
     <div v-else>
-      <p>No forecast data available.</p>
+      <p class="dark:text-gray-50">Loading...</p>
     </div>
   </div>
 </template>
diff --git a/src/features/WeatherNow/main-component/ui/WeatherNow.vue b/src/features/WeatherNow/main-component/ui/WeatherNow.vue
@@ -76,23 +76,12 @@ onMounted(async () => {
 
     <!-- Input Field and Autocomplete Dropdown -->
     <div class="flex justify-center p-4">
-      <TheInput
-        class="max-w-xs"
-        @keydown.enter="handleKeyDown"
-        label="city name"
-        v-model="theQuery"
-        :disabled="isSaveDisabled"
-      />
-      <ul
-        v-if="suggestions.length"
-        class="absolute max-w-xs bg-white shadow-lg rounded-md mt-12 border border-gray-300"
-      >
-        <li
-          v-for="(city, index) in suggestions"
-          :key="index"
-          @mousedown="selectCity()"
-          class="cursor-pointer p-2 hover:bg-gray-200"
-        >
+      <TheInput v-if="!isSaveDisabled" class="max-w-xs" @keydown.enter="handleKeyDown" label="city name"
+        v-model="theQuery" :disabled="isSaveDisabled" />
+      <ul v-if="suggestions.length"
+        class="absolute max-w-xs bg-white shadow-lg rounded-md mt-12 border border-gray-300">
+        <li v-for="(city, index) in suggestions" :key="index" @mousedown="selectCity()"
+          class="cursor-pointer p-2 hover:bg-gray-200">
           {{ city }}
         </li>
       </ul>
@@ -110,11 +99,7 @@ onMounted(async () => {
         <div class="flex justify-center my-2"></div>
       </div>
       <div>
-        <TheItemWeather
-          v-if="theWeather[theQuery]"
-          :weather="theWeather[theQuery]"
-          :imgUrl="imgUrl"
-        />
+        <TheItemWeather v-if="theWeather[theQuery]" :weather="theWeather[theQuery]" :imgUrl="imgUrl" />
       </div>
     </div>
 
@@ -124,30 +109,17 @@ onMounted(async () => {
         <h3 class="text-xl font-semibold dark:text-gray-400">Saved Cities</h3>
       </div>
       <ul class="flex flex-wrap justify-center gap-4">
-        <li
-          v-for="(city, index) in savedCities"
-          :key="city"
-          :data-index="index"
-          class="relative min-w-40"
-          draggable="true"
-          @dragstart="handleDragStart"
-          @dragover="handleDragOver"
-          @drop="handleDrop"
-        >
+        <li v-for="(city, index) in savedCities" :key="city" :data-index="index" class="relative min-w-40"
+          draggable="true" @dragstart="handleDragStart" @dragover="handleDragOver" @drop="handleDrop">
           <IconClose
             class="absolute top-0 right-0 w-8 h-8 rounded-full fill-blue-600 hover:fill-blue-500 cursor-pointer"
-            @click="removeCityFromStorage(city)"
-          >
+            @click="removeCityFromStorage(city)">
           </IconClose>
           <div>
             <BarsFour class="absolute top-2 left-2 hover: cursor-pointer" />
           </div>
-          <TheItemWeather
-            v-if="theWeather[city]"
-            :weather="theWeather[city]"
-            :imgUrl="imgUrl"
-            class="w-full h-80 pt-10 border-2 rounded-md border-blue-500"
-          >
+          <TheItemWeather v-if="theWeather[city]" :weather="theWeather[city]" :imgUrl="imgUrl"
+            class="w-full h-80 pt-10 border-2 rounded-md border-blue-500">
           </TheItemWeather>
         </li>
       </ul>