add search-list, add compare key in LS

Author: aafomin

src/components/Weather/card-weather.vue

@@ -4,6 +4,12 @@
     class="card"
     :style="{backgroundImage:`url(${require(`@/assets/weather-icons/${dayTime}.jpg`)})`}"
   >
+    <v-snackbar
+      v-model="snackbar"
+      :timeout="timeout"
+      :top="'top'"
+      :color= "'info'"
+    >{{ text }}</v-snackbar>
     <v-layout column class="card__title">
       <div class="card__title_time text-md-center">Обновлено {{city.time}}</div>
       <div class="card__title_location text-md-center">{{city.country}}, {{city.city}}</div>
@@ -53,7 +59,11 @@ export default {
       required: true
     }
   },
-  data: () => ({}),
+  data: () => ({
+    snackbar: false,
+    timeout: 4000,
+    text: ""
+  }),
   computed: {
     dayTime() {
       return this.city.IsDayTime ? "day" : "night";
@@ -84,8 +94,11 @@ export default {
       if (!exist) {
         arr.push(city);
         localStorage.setItem("city", JSON.stringify(arr));
+        this.text = "Сохранено";
+        this.snackbar = true;
       } else {
-        console.log("Содержит");
+        this.text = "Уже Сохранено";
+        this.snackbar = true;
       }
     }
   }

src/components/Weather/search-list.vue

@@ -0,0 +1,45 @@
+<template>
+<v-expand-transition>
+  <v-list class="lighten-3 weather__searchList">
+    <v-list-tile v-for="(item, i) in items" :key="i">
+      <v-list-tile-content class="weather__searchList_item" @click="selectItem(item)">
+        <v-list-tile-title v-text="item.city"></v-list-tile-title>
+        <v-list-tile-sub-title v-text="item.country"></v-list-tile-sub-title>
+        <v-divider inset></v-divider>
+      </v-list-tile-content>
+    </v-list-tile>
+  </v-list>
+  </v-expand-transition>
+</template>
+<script>
+export default {
+  name: "search-list",
+  components: {},
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
+  },
+  data: () => ({}),
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    selectItem(item) {
+      this.$emit('selectItem', item)
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.weather__searchList {
+  cursor: pointer;
+  position: absolute;
+  max-height: 55vh;
+  margin-top: 8vh;
+  overflow: auto;
+  width: 40%;
+  z-index: 1;
+}
+</style>

src/components/Weather/weather.vue

@@ -3,31 +3,17 @@
     <loading v-show="isLoading"></loading>
     <v-flex xs3 offset-sm3 v-click-outside>
       <v-layout v-show="!isLoading" class="weather__search">
-        <!-- <v-layout class="weather__search"> -->
         <v-layout column>
           <v-text-field label="Search" clearable v-model="searchText"></v-text-field>
-          <v-expand-transition>
-            <v-list v-if="selectCityShow" class="lighten-3 weather__searchList">
-              <v-list-tile v-for="(item, i) in items" :key="i">
-                <v-list-tile-content
-                  @click="getWeatherByCity(item)"
-                  class="weather__searchList_item"
-                >
-                  <v-list-tile-title v-text="item.city"></v-list-tile-title>
-                  <v-list-tile-sub-title v-text="item.country"></v-list-tile-sub-title>
-                  <v-divider inset></v-divider>
-                </v-list-tile-content>
-              </v-list-tile>
-            </v-list>
-          </v-expand-transition>
+          <search-list v-if="selectCityShow" :items="items" @selectItem="getWeatherByCity"></search-list>
         </v-layout>
         <v-btn fab dark color="brown darken-4" small @click="searchCity">
           <v-icon dark>search</v-icon>
         </v-btn>
         <v-divider></v-divider>
       </v-layout>
     </v-flex>
-    <v-flex xs8 offset-sm3>
+    <v-flex xs8 offset-sm3 v-show="!isLoading">
       <div v-for="(city, index) in cities" :key="index">
         <card :city="city"></card>
       </div>
@@ -37,13 +23,15 @@
 <script>
 import loading from "../../views/loading.vue";
 import card from "./card-weather.vue";
+import searchList from "./search-list.vue";
 import { mapState, mapActions, mapGetters } from "vuex";
 
 export default {
   name: "whether",
   components: {
     loading,
-    card
+    card,
+    searchList
   },
   data: () => ({
     searchText: "",
@@ -115,20 +103,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .weather {
-  .weather__search {
-    .weather__searchList {
-      cursor: pointer;
-      max-height: 55vh;
-      overflow: auto;
-      z-index: 1;
-      position: relative;
-      &:after {
-        position: absolute;
-      }
-      .weather__searchList_item {
-      }
-    }
-  }
 }
 @media screen and (max-width: 1024px) {
 }

src/store/weatherStore.js

@@ -41,8 +41,16 @@ export default {
             key.weather
             }&q=${latitude},${longitude}&language=ru-ru`;
           axios.get(url).then(response => {
-            //  ToDO compare key in localStorage
-            dispatch('GET_WEATHER_CITY', response.data)
+            // compare key in localStorage
+            let exist = false
+            arr.forEach(el => {
+              if (el.Key === response.data.Key) {
+                exist = true
+              }
+            })
+            if (!exist) {
+              dispatch('GET_WEATHER_CITY', response.data)
+            }
           });
         });
       } else {
@@ -76,7 +84,7 @@ export default {
               res.Wind.Speed.Metric.Unit
               }`,
             weatherText: res.WeatherText,
-            realFeelTemperature: `${(res.RealFeelTemperature.Metric.Value).toFixed()}° ${res.RealFeelTemperature.Metric.Unit}`, //ощущается как
+            realFeelTemperature: `${(res.RealFeelTemperature.Metric.Value).toFixed()}° ${res.RealFeelTemperature.Metric.Unit}`,
             visibility: `${(res.Visibility.Metric.Value)} ${res.Visibility.Metric.Unit}`,
             WeatherIcon: res.WeatherIcon,
             IsDayTime: res.IsDayTime,