vue3-open-weather-widget
Version:
Weather Widget is a Vue 3.0 project that displays the current weather conditions providing coordinates.
627 lines (626 loc) • 16.5 kB
JavaScript
import { defineComponent as R, openBlock as m, createElementBlock as I, createElementVNode as i, toDisplayString as u, ref as w, onBeforeMount as $, computed as S, resolveComponent as O, Fragment as D, withDirectives as G, createVNode as f, Transition as v, withCtx as C, normalizeClass as Z, renderList as z, createBlock as J, createCommentVNode as A, vShow as T, pushScopeId as Y, popScopeId as q } from "vue";
function N(a) {
return a.toString().normalize("NFKD").toLowerCase().trim().replace(/\s+/g, "-").replace(/[^\w\-]+/g, "").replace(/\-\-+/g, "-");
}
const Q = [
{
id: [200, 201, 202, 210, 211, 212, 221, 230, 231, 232],
main: "thunderstorm",
icon: "11d,11n",
wwIcon: "thunderstorm"
},
{
id: [300, 301, 302, 310, 311, 312, 313, 314, 321, 500, 501, 502, 503, 504],
main: "rain",
icon: "10d",
wwIcon: "rain-shower-day"
},
{
id: [300, 301, 302, 310, 311, 312, 313, 314, 321, 500, 501, 502, 503, 504],
main: "rain",
icon: "10n",
wwIcon: "rain-shower-night"
},
{
id: [511],
main: "rain",
icon: "10n,10d",
wwIcon: "hail"
},
{
id: [511, 520, 521, 522, 531],
main: "rain",
icon: "10n,10d",
wwIcon: "rain"
},
{
id: [600, 601, 602, 611, 612, 613, 620, 621, 622],
main: "snow",
icon: "13d,13n",
wwIcon: "snow"
},
{
id: [615, 616],
main: "snow",
icon: "13d,13n",
wwIcon: "hail"
},
{
id: [701, 711, 721, 731, 741, 751, 761, 762, 771, 781],
main: "mist,smoke,haze,dust,fog,sand,dust,ash,squall,tornado",
icon: "50d,50n",
wwIcon: "cloud-fog"
},
{
id: [800],
main: "clear",
icon: "01d",
wwIcon: "clear-sky-day"
},
{
id: [800],
main: "clear",
icon: "01n",
wwIcon: "clear-sky-night"
},
{
id: [801],
main: "clouds",
icon: "02d",
wwIcon: "few-clouds-day"
},
{
id: [801],
main: "clouds",
icon: "02n",
wwIcon: "few-clouds-night"
},
{
id: [802, 803, 804],
main: "clouds",
icon: "03d,03n,04d,04n",
wwIcon: "scattered-clouds"
}
];
function F(a, t, n) {
let o = "";
return Q.forEach((s) => {
s.id.includes(a) && s.main.includes(t.toLowerCase()) && s.icon.includes(n) && (o = s.wwIcon);
}), o;
}
function b(a, t, n) {
let o = "";
try {
o = `https://res.cloudinary.com/arslanportal/image/upload/v1695575351/weather-widget/ww-icon-${N(F(a, t, n))}.svg`;
} catch {
console.error(
`Image '@/assets/weather-widget-icons/ww-icon-${N(
F(a, t, n)
)}.svg' not found!`
);
}
return o;
}
const X = R({
props: {
weatherForecast: {
type: Object,
required: !0
}
},
computed: {
getImage() {
return b(
this.weatherForecast.weatherId,
this.weatherForecast.weatherMain,
this.weatherForecast.weatherIcon
);
},
getDay() {
const a = (/* @__PURE__ */ new Date()).toLocaleDateString("en", { weekday: "long" }), t = new Date(this.weatherForecast.date * 1e3).toLocaleDateString("en", {
weekday: "long"
});
return a === t ? "Today" : t;
}
}
});
const P = (a, t) => {
const n = a.__vccOpts || a;
for (const [o, s] of t)
n[o] = s;
return n;
}, j = ["title"], x = { class: "day-header" }, aa = { class: "weather-icon" }, ea = ["src", "alt"], na = { class: "max-temp" }, ta = { class: "min-temp" };
function ia(a, t, n, o, s, p) {
return m(), I("div", {
class: "mini-widget",
title: a.weatherForecast.weatherDescription
}, [
i("h6", x, u(a.getDay), 1),
i("div", aa, [
i("img", {
src: a.getImage,
alt: a.weatherForecast.weatherMain
}, null, 8, ea)
]),
i("p", na, u(a.weatherForecast.maxTemperature) + "°C", 1),
i("p", ta, u(a.weatherForecast.minTemperature) + "°C", 1)
], 8, j);
}
const ra = /* @__PURE__ */ P(X, [["render", ia], ["__scopeId", "data-v-a026b5c1"]]), oa = {
AF: "Afghanistan",
AL: "Albania",
DZ: "Algeria",
AS: "American Samoa",
AD: "Andorra",
AO: "Angola",
AI: "Anguilla",
AQ: "Antarctica",
AG: "Antigua and Barbuda",
AR: "Argentina",
AM: "Armenia",
AW: "Aruba",
AU: "Australia",
AT: "Austria",
AZ: "Azerbaijan",
BS: "Bahamas (the)",
BH: "Bahrain",
BD: "Bangladesh",
BB: "Barbados",
BY: "Belarus",
BE: "Belgium",
BZ: "Belize",
BJ: "Benin",
BM: "Bermuda",
BT: "Bhutan",
BO: "Bolivia (Plurinational State of)",
BQ: "Bonaire, Sint Eustatius and Saba",
BA: "Bosnia and Herzegovina",
BW: "Botswana",
BV: "Bouvet Island",
BR: "Brazil",
IO: "British Indian Ocean Territory (the)",
BN: "Brunei Darussalam",
BG: "Bulgaria",
BF: "Burkina Faso",
BI: "Burundi",
CV: "Cabo Verde",
KH: "Cambodia",
CM: "Cameroon",
CA: "Canada",
KY: "Cayman Islands (the)",
CF: "Central African Republic (the)",
TD: "Chad",
CL: "Chile",
CN: "China",
CX: "Christmas Island",
CC: "Cocos (Keeling) Islands (the)",
CO: "Colombia",
KM: "Comoros (the)",
CD: "Congo (the Democratic Republic of the)",
CG: "Congo (the)",
CK: "Cook Islands (the)",
CR: "Costa Rica",
HR: "Croatia",
CU: "Cuba",
CW: "Curaçao",
CY: "Cyprus",
CZ: "Czechia",
CI: "Côte d'Ivoire",
DK: "Denmark",
DJ: "Djibouti",
DM: "Dominica",
DO: "Dominican Republic (the)",
EC: "Ecuador",
EG: "Egypt",
SV: "El Salvador",
GQ: "Equatorial Guinea",
ER: "Eritrea",
EE: "Estonia",
SZ: "Eswatini",
ET: "Ethiopia",
FK: "Falkland Islands (the) [Malvinas]",
FO: "Faroe Islands (the)",
FJ: "Fiji",
FI: "Finland",
FR: "France",
GF: "French Guiana",
PF: "French Polynesia",
TF: "French Southern Territories (the)",
GA: "Gabon",
GM: "Gambia (the)",
GE: "Georgia",
DE: "Germany",
GH: "Ghana",
GI: "Gibraltar",
GR: "Greece",
GL: "Greenland",
GD: "Grenada",
GP: "Guadeloupe",
GU: "Guam",
GT: "Guatemala",
GG: "Guernsey",
GN: "Guinea",
GW: "Guinea-Bissau",
GY: "Guyana",
HT: "Haiti",
HM: "Heard Island and McDonald Islands",
VA: "Holy See (the)",
HN: "Honduras",
HK: "Hong Kong",
HU: "Hungary",
IS: "Iceland",
IN: "India",
ID: "Indonesia",
IR: "Iran (Islamic Republic of)",
IQ: "Iraq",
IE: "Ireland",
IM: "Isle of Man",
IL: "Israel",
IT: "Italy",
JM: "Jamaica",
JP: "Japan",
JE: "Jersey",
JO: "Jordan",
KZ: "Kazakhstan",
KE: "Kenya",
KI: "Kiribati",
KP: "Korea (the Democratic People's Republic of)",
KR: "Korea (the Republic of)",
KW: "Kuwait",
KG: "Kyrgyzstan",
LA: "Lao People's Democratic Republic (the)",
LV: "Latvia",
LB: "Lebanon",
LS: "Lesotho",
LR: "Liberia",
LY: "Libya",
LI: "Liechtenstein",
LT: "Lithuania",
LU: "Luxembourg",
MO: "Macao",
MG: "Madagascar",
MW: "Malawi",
MY: "Malaysia",
MV: "Maldives",
ML: "Mali",
MT: "Malta",
MH: "Marshall Islands (the)",
MQ: "Martinique",
MR: "Mauritania",
MU: "Mauritius",
YT: "Mayotte",
MX: "Mexico",
FM: "Micronesia (Federated States of)",
MD: "Moldova (the Republic of)",
MC: "Monaco",
MN: "Mongolia",
ME: "Montenegro",
MS: "Montserrat",
MA: "Morocco",
MZ: "Mozambique",
MM: "Myanmar",
NA: "Namibia",
NR: "Nauru",
NP: "Nepal",
NL: "Netherlands (the)",
NC: "New Caledonia",
NZ: "New Zealand",
NI: "Nicaragua",
NE: "Niger (the)",
NG: "Nigeria",
NU: "Niue",
NF: "Norfolk Island",
MP: "Northern Mariana Islands (the)",
NO: "Norway",
OM: "Oman",
PK: "Pakistan",
PW: "Palau",
PS: "Palestine, State of",
PA: "Panama",
PG: "Papua New Guinea",
PY: "Paraguay",
PE: "Peru",
PH: "Philippines (the)",
PN: "Pitcairn",
PL: "Poland",
PT: "Portugal",
PR: "Puerto Rico",
QA: "Qatar",
MK: "Republic of North Macedonia",
RO: "Romania",
RU: "Russian Federation (the)",
RW: "Rwanda",
RE: "Réunion",
BL: "Saint Barthélemy",
SH: "Saint Helena, Ascension and Tristan da Cunha",
KN: "Saint Kitts and Nevis",
LC: "Saint Lucia",
MF: "Saint Martin (French part)",
PM: "Saint Pierre and Miquelon",
VC: "Saint Vincent and the Grenadines",
WS: "Samoa",
SM: "San Marino",
ST: "Sao Tome and Principe",
SA: "Saudi Arabia",
SN: "Senegal",
RS: "Serbia",
SC: "Seychelles",
SL: "Sierra Leone",
SG: "Singapore",
SX: "Sint Maarten (Dutch part)",
SK: "Slovakia",
SI: "Slovenia",
SB: "Solomon Islands",
SO: "Somalia",
ZA: "South Africa",
GS: "South Georgia and the South Sandwich Islands",
SS: "South Sudan",
ES: "Spain",
LK: "Sri Lanka",
SD: "Sudan (the)",
SR: "Suriname",
SJ: "Svalbard and Jan Mayen",
SE: "Sweden",
CH: "Switzerland",
SY: "Syrian Arab Republic",
TW: "Taiwan",
TJ: "Tajikistan",
TZ: "Tanzania, United Republic of",
TH: "Thailand",
TL: "Timor-Leste",
TG: "Togo",
TK: "Tokelau",
TO: "Tonga",
TT: "Trinidad and Tobago",
TN: "Tunisia",
TR: "Turkey",
TM: "Turkmenistan",
TC: "Turks and Caicos Islands (the)",
TV: "Tuvalu",
UG: "Uganda",
UA: "Ukraine",
AE: "United Arab Emirates (the)",
GB: "United Kingdom of Great Britain and Northern Ireland (the)",
UM: "United States Minor Outlying Islands (the)",
US: "United States of America (the)",
UY: "Uruguay",
UZ: "Uzbekistan",
VU: "Vanuatu",
VE: "Venezuela (Bolivarian Republic of)",
VN: "Viet Nam",
VG: "Virgin Islands (British)",
VI: "Virgin Islands (U.S.)",
WF: "Wallis and Futuna",
EH: "Western Sahara",
YE: "Yemen",
ZM: "Zambia",
ZW: "Zimbabwe",
AX: "Åland Islands"
};
function L(a) {
return a ? (a = a == null ? void 0 : a.toUpperCase(), oa[a]) : "";
}
function sa(a) {
return a ? ["N", "NE", "E", "SE", "S", "SW", "W", "NW"][Math.round(a / 45) % 8] : "";
}
const la = R({
setup(a) {
const n = w({
city: "---",
country: "---",
weatherId: 800,
weatherMain: "Clear",
weatherIcon: "01d",
weatherDescription: "clear",
temperature: 0,
date: 0,
humidity: 0,
uvi: 0,
windSpeed: 0,
windDeg: 0
}), o = w([]), s = w({
city: "",
country: "-"
}), p = w(!1), h = w(!0), r = w({
lat: 0,
lon: 0
}), M = async () => new Promise((l, e) => {
"geolocation" in navigator || e(new Error("Geolocation is not available.")), navigator.geolocation.getCurrentPosition(
(c) => {
l(c);
},
(c) => {
e(c);
}
);
}), B = async () => {
if (r.value.lat === 0 || r.value.lon === 0)
return;
const l = `https://api.openweathermap.org/geo/1.0/reverse?lon=${r.value.lon}&lat=${r.value.lat}&limit=1&appid=${a.openWeatherApiKey}`;
await fetch(l).then((e) => e.json()).then((e) => {
var g, d;
const c = L((g = e[0]) == null ? void 0 : g.country);
n.value.country = c, s.value = {
city: (d = e[0]) == null ? void 0 : d.name,
country: c
};
});
}, y = async () => {
if (r.value.lat === 0 || r.value.lon === 0)
return;
h.value = !0;
const l = `https://api.openweathermap.org/data/2.5/onecall?lon=${r.value.lon}&lat=${r.value.lat}&units=metric&exclude=minutely,hourly&appid=${a.openWeatherApiKey}`;
await fetch(l).then((e) => e.json()).then((e) => {
if (e.current) {
const c = {
weatherId: e.current.weather[0].id,
weatherMain: e.current.weather[0].main,
weatherIcon: e.current.weather[0].icon,
weatherDescription: e.current.weather[0].description,
temperature: e.current.temp,
date: e.current.dt,
humidity: e.current.humidity,
uvi: e.current.uvi,
windSpeed: e.current.wind_speed,
windDeg: e.current.wind_deg
};
n.value = c;
}
if (e.daily) {
const c = e.daily, g = [];
c.map((d) => {
const V = {
weatherMain: d.weather[0].main,
weatherId: d.weather[0].id,
weatherDescription: d.weather[0].description,
weatherIcon: d.weather[0].icon,
date: d.dt,
maxTemperature: Math.round(d.temp.max),
minTemperature: Math.round(d.temp.min)
};
g.push(V);
}), o.value = g.slice(0, 6), h.value = !1;
}
}).catch((e) => {
throw h.value = !1, e;
});
}, W = async () => {
await y();
}, E = () => {
p.value = !p.value;
};
$(() => {
a.lat && a.lon ? (console.log("Fetching weather data from lat and lon"), r.value = {
lat: a.lat,
lon: a.lon
}, B(), y()) : (console.log("Fetching weather data from location"), M().then((l) => {
r.value = {
lat: l.coords.latitude,
lon: l.coords.longitude
}, B(), y();
}).catch((l) => {
console.log(l);
}));
});
const _ = S(
() => b(
n.value.weatherId,
n.value.weatherMain,
n.value.weatherIcon
)
), k = S(() => sa(n.value.windDeg)), K = S(() => L(n.value.country)), U = S(() => Math.round(n.value.temperature)), H = S(() => Math.round(n.value.windSpeed));
return {
location: s,
weatherData: o,
windDir: k,
currentWeather: n,
country: K,
temperature: U,
windSpeed: H,
weatherIcon: _,
updateWeather: W,
makeItRain: E,
rain: p,
isLoading: h
};
},
components: {
MiniForecastWidget: ra
},
props: {
openWeatherApiKey: {
type: String,
required: !0
},
lat: {
type: Number,
required: !1
},
lon: {
type: Number,
required: !1
}
}
});
const ca = (a) => (Y("data-v-7c64cd7a"), a = a(), q(), a), da = { class: "current-weather" }, ua = { class: "weather-icon" }, ha = ["src"], wa = { class: "weather-detail" }, ma = { class: "weather-description" }, pa = {
key: 0,
class: "mini-forecast-widget-wrapper"
}, ga = /* @__PURE__ */ ca(() => /* @__PURE__ */ i("div", { class: "loader" }, null, -1));
function Sa(a, t, n, o, s, p) {
const h = O("MiniForecastWidget");
return m(), I(D, null, [
G(f(v, { name: "fade" }, {
default: C(() => [
a.location.city ? (m(), I("div", {
key: 0,
class: Z(["widget-wrap weather", {
rain: a.currentWeather.weatherMain === "Rain" || a.rain,
snow: a.currentWeather.weatherMain === "Snow",
overlay: a.isLoading
}])
}, [
i("span", {
title: "Toggle Rain Effect",
onClick: t[0] || (t[0] = (...r) => a.makeItRain && a.makeItRain(...r)),
class: "icon-rain-drop"
}),
i("span", {
title: "Refresh Weather",
onClick: t[1] || (t[1] = (...r) => a.updateWeather && a.updateWeather(...r)),
class: "icon-reload"
}),
i("span", {
onClick: t[2] || (t[2] = (...r) => a.updateWeather && a.updateWeather(...r)),
class: "icon-reload"
}),
i("div", da, [
i("div", ua, [
i("img", {
src: a.weatherIcon,
alt: ""
}, null, 8, ha)
]),
i("div", wa, [
i("h2", null, u(a.location.city) + ", " + u(a.location.country), 1),
i("h3", null, u(a.temperature) + "°C", 1),
i("div", ma, [
i("p", null, "Humidity: " + u(a.currentWeather.humidity) + "%", 1),
i("p", null, "UVI: " + u(a.currentWeather.uvi), 1),
i("p", null, "Wind: " + u(a.windDir) + " " + u(a.windSpeed) + "kmh", 1)
])
])
]),
f(v, { name: "slide-fade" }, {
default: C(() => [
a.weatherData.length && a.weatherData.length > 0 ? (m(), I("div", pa, [
(m(!0), I(D, null, z(a.weatherData, (r, M) => (m(), J(h, {
weatherForecast: r,
key: M
}, null, 8, ["weatherForecast"]))), 128))
])) : A("", !0)
]),
_: 1
})
], 2)) : A("", !0)
]),
_: 1
}, 512), [
[T, !a.isLoading]
]),
G(f(v, {
appear: "",
name: "fade"
}, {
default: C(() => [
ga
]),
_: 1
}, 512), [
[T, a.isLoading]
])
], 64);
}
const Ma = /* @__PURE__ */ P(la, [["render", Sa], ["__scopeId", "data-v-7c64cd7a"]]);
export {
Ma as WeatherWidget
};