Skip to content

Commit 4ffb4ec

Browse files
author
aafomin
committed
add search-loading in weather
1 parent 786a58f commit 4ffb4ec

File tree

4 files changed

+115
-71
lines changed

4 files changed

+115
-71
lines changed

‎src/components/Weather/card-weather.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
small
5252
color="white"
5353
class="card__footer_more"
54-
@click="GetWeatherForecast(city)"
54+
@click="GetWeatherForecast"
5555
>5 дней</v-btn>
5656
</v-layout>
5757
</v-layout>
@@ -129,7 +129,7 @@ export default {
129129
this.snackbar = true;
130130
}
131131
},
132-
GetWeatherForecast(city) {
132+
GetWeatherForecast() {
133133
if (!this.showMore) {
134134
this.GET_WEATHER_FORECAST.then(result => {
135135
this.cityForecastItems = result;

‎src/components/Weather/weather.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<v-layout column class="weather">
33
<loading v-show="isLoading"></loading>
4+
<loading-search v-show="searchLoading"></loading-search>
45
<div v-click-outside>
56
<v-layout v-show="!isLoading" class="weather__search">
67
<v-layout column>
@@ -22,16 +23,18 @@
2223
</template>
2324
<script>
2425
import loading from "../../views/loading.vue";
26+
import loadingSearch from "../../views/search-loading.vue";
2527
import card from "./card-weather.vue";
2628
import searchList from "./search-list.vue";
27-
import { mapState, mapActions, mapGetters } from "vuex";
29+
import { mapState, mapActions } from "vuex";
2830
2931
export default {
3032
name: "whether",
3133
components: {
3234
loading,
3335
card,
34-
searchList
36+
searchList,
37+
loadingSearch
3538
},
3639
data: () => ({
3740
searchText: "",
@@ -44,8 +47,7 @@ export default {
4447
"SEARCH_CITY",
4548
"GET_WEATHER_CITY"
4649
]),
47-
...mapState("weatherStore", ["cities", "items", "isLoading"])
48-
// ...mapGetters("weatherStore", ["citiesGetter"])
50+
...mapState("weatherStore", ["cities", "items", "isLoading", "searchLoading"])
4951
},
5052
created() {
5153
this.INIT_STATE;

‎src/store/weatherStore.js‎

Lines changed: 31 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export default {
88
cities: [],
99
items: [],
1010
isLoading: true,
11+
searchLoading: false,
1112
time: null
1213
},
1314
mutations: {
@@ -17,6 +18,7 @@ export default {
1718
},
1819
SET_ITEM_CITY(state, payload) {
1920
state.items = payload;
21+
state.searchLoading = false;
2022
},
2123
UNSET_CITY(state) {
2224
state.cities = [];
@@ -68,11 +70,10 @@ export default {
6870
dispatch('GET_WEATHER_CITY', response.data)
6971
}
7072
})
71-
.catch(error => console.error(error))
73+
// eslint-disable-next-line
74+
.catch(error => console.error(error.message))
7275
});
7376
} else {
74-
/* eslint-disable */
75-
console.error("геолокация НЕдоступна");
7677
alert("Геолокация Не доступна")
7778
}
7879
} else {
@@ -112,35 +113,41 @@ export default {
112113
time: time,
113114
pressure: `${res.Pressure.Metric.Value} мм рт. ст.`
114115
};
116+
commit('SET_CITY', city)
115117
})
116-
.catch(error => console.error(error))
117-
commit('SET_CITY', city)
118+
// eslint-disable-next-line
119+
.catch(error => console.error(error.message))
118120
},
119-
SEARCH_CITY({ commit }, payload) {
121+
SEARCH_CITY({ commit, state }, payload) {
122+
state.searchLoading = true;
120123
let url = `https://dataservice.accuweather.com/locations/v1/cities/autocomplete?apikey=${
121124
key.weather
122125
}&q=${payload.searchText}&language=ru-ru`;
123126
let items = []
124127
let cities = {};
125-
axios.get(url).then(response => {
126-
if (response.data.length > 0) {
127-
response.data.forEach(el => {
128+
axios.get(url)
129+
.then(response => {
130+
if (response.data.length > 0) {
131+
response.data.forEach(el => {
132+
cities = {
133+
country: el.Country.LocalizedName,
134+
city: el.LocalizedName,
135+
Key: el.Key
136+
};
137+
items.push(cities);
138+
});
139+
} else {
128140
cities = {
129-
country: el.Country.LocalizedName,
130-
city: el.LocalizedName,
131-
Key: el.Key
141+
city: "Ничего не найдено",
132142
};
133-
items.push(cities);
134-
});
135-
} else {
136-
cities = {
137-
city: "Ничего не найдено",
138-
};
139-
items.push(cities)
140-
}
141-
});
142-
commit('SET_ITEM_CITY', items)
143+
items.push(cities)
144+
}
145+
commit('SET_ITEM_CITY', items)
146+
})
147+
// eslint-disable-next-line
148+
.catch(error => console.error(error.message))
143149
},
150+
// eslint-disable-next-line
144151
GET_WEATHER_FORECAST({ commit }, payload) {
145152
moment.locale('ru');
146153
let arr = [];
@@ -163,49 +170,8 @@ export default {
163170
arr.push(obj)
164171
})
165172
})
166-
.catch(error => console.error(error))
167-
// let arr = [
168-
// {
169-
// date: "24 июня",
170-
// dayIcon: 6, // Day.Icon
171-
// dayIconText: "Преимущественно облачно", // Day.IconPhrase
172-
// tempDay: "8° C",// Temperature.Maximum.Value.toFixed(),
173-
// nightIcon: 35, // Night.Icon
174-
// tempNight: "0° C" // Temperature.Minimum.Value.toFixed(),
175-
// },
176-
// {
177-
// date: "24 июня",
178-
// dayIcon: 6, // Day.Icon
179-
// dayIconText: "Преимущественно облачно", // Day.IconPhrase
180-
// tempDay: "8° C",// Temperature.Maximum.Value.toFixed(),
181-
// nightIcon: 35, // Night.Icon
182-
// tempNight: "0° C" // Temperature.Minimum.Value.toFixed(),
183-
// },
184-
// {
185-
// date: "24 июня",
186-
// dayIcon: 6, // Day.Icon
187-
// dayIconText: "Преимущественно облачно", // Day.IconPhrase
188-
// tempDay: "8° C",// Temperature.Maximum.Value.toFixed(),
189-
// nightIcon: 35, // Night.Icon
190-
// tempNight: "0° C" // Temperature.Minimum.Value.toFixed(),
191-
// },
192-
// {
193-
// date: "24 июня",
194-
// dayIcon: 6, // Day.Icon
195-
// dayIconText: "Преимущественно облачно", // Day.IconPhrase
196-
// tempDay: "8° C",// Temperature.Maximum.Value.toFixed(),
197-
// nightIcon: 35, // Night.Icon
198-
// tempNight: "0° C" // Temperature.Minimum.Value.toFixed(),
199-
// },
200-
// {
201-
// date: "25 июня",
202-
// dayIcon: 6, // Day.Icon
203-
// dayIconText: "Преимущественно облачно", // Day.IconPhrase
204-
// tempDay: "8° C",// Temperature.Maximum.Value.toFixed(),
205-
// nightIcon: 35, // Night.Icon
206-
// tempNight: "0° C" // Temperature.Minimum.Value.toFixed(),
207-
// }
208-
// ]
173+
// eslint-disable-next-line
174+
.catch(error => console.error(error.message))
209175
return arr
210176
}
211177
},

‎src/views/search-loading.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div class="loader">Loading...</div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: "search-loading",
8+
components: {},
9+
data() {
10+
return {};
11+
}
12+
};
13+
</script>
14+
15+
<style lang="scss" scoped>
16+
.loader,
17+
.loader:before,
18+
.loader:after {
19+
border-radius: 50%;
20+
width: 2.5em;
21+
height: 2.5em;
22+
-webkit-animation-fill-mode: both;
23+
animation-fill-mode: both;
24+
-webkit-animation: load7 1.8s infinite ease-in-out;
25+
animation: load7 1.8s infinite ease-in-out;
26+
}
27+
.loader {
28+
color: gray;
29+
font-size: 10px;
30+
margin: auto;
31+
position: absolute;
32+
left: 40%;
33+
// right: 0;
34+
text-indent: -9999em;
35+
-webkit-transform: translateZ(0);
36+
-ms-transform: translateZ(0);
37+
transform: translateZ(0);
38+
-webkit-animation-delay: -0.16s;
39+
animation-delay: -0.16s;
40+
z-index: 1;
41+
}
42+
.loader:before,
43+
.loader:after {
44+
content: "";
45+
position: absolute;
46+
top: 0;
47+
}
48+
.loader:before {
49+
left: -3.5em;
50+
-webkit-animation-delay: -0.32s;
51+
animation-delay: -0.32s;
52+
}
53+
.loader:after {
54+
left: 3.5em;
55+
}
56+
@-webkit-keyframes load7 {
57+
0%,
58+
80%,
59+
100% {
60+
box-shadow: 0 2.5em 0 -1.3em;
61+
}
62+
40% {
63+
box-shadow: 0 2.5em 0 0;
64+
}
65+
}
66+
@keyframes load7 {
67+
0%,
68+
80%,
69+
100% {
70+
box-shadow: 0 2.5em 0 -1.3em;
71+
}
72+
40% {
73+
box-shadow: 0 2.5em 0 0;
74+
}
75+
}
76+
</style>

0 commit comments

Comments
 (0)