whisper.cat/weboasis/weather/js/geoloWeather.js

661 lines
16 KiB
JavaScript
Raw Normal View History

2023-10-05 23:28:32 +11:00
$(document).ready(function() {
// get current location function
getLocation();
var iconn;
var dday;
var ddday;
var iconId;
var inumber;
var summary;
var lati;
var longt;
var temper;
var mintemper;
var humidty;
var windspid;
var currTemp;
var summaryDay;
var PlaceName;
var cityName;
var teka;
$(window).on("load", function() {
// when window load icons play function
getIconsPlay();
// loading animation function
setTimeout(function() {
$("#preloader").velocity(
{
opacity: 0.1,
translateY: "-80px"
},
{
duration: 400,
complete: function() {
$("#hola").velocity(
{
translateY: "-100%"
},
{
duration: 1000,
easing: [0.7, 0, 0.3, 1],
complete: function() {}
}
);
}
}
);
}, 1000);
});
});
function getFormattedAddress(address) {
var order = [
["house_number", "street_number"],
["house", "building", "public_building"],
[
"road",
"footway",
"street",
"street_name",
"residential",
"path",
"pedestrian",
"road_reference",
"road_reference_intl"
],
["village", "hamlet", "locality"],
["neighbourhood", "suburb", "city_district"],
["city", "town"],
["county", "local_administrative_area", "county_code"],
["state", "province", "state_code"],
["country", "country_name"]
];
var formatted = {};
order = order.reverse();
var currentCount = 1;
order.forEach(function(component, index) {
index++;
for (var i = 0; i < component.length; i++) {
var alias = component[i];
if (address[alias] !== undefined) {
if (index == 1) formatted[currentCount] = address[alias];
else
formatted[currentCount] =
address[alias] + ", " + formatted[currentCount - 1];
currentCount++;
break;
}
}
});
return formatted;
}
$(".getCurrentCity").on("click", function() {
//get current city click function
$(".daysList").html("");
getIconsPlay(); //get icons play function
getLocation(); //get current location function
});
// google map api
// document.write('<script src="https://maps.google.com/maps/api/js?v=3&key=AIzaSyAMODrdEnbRHQEMT6KsZ44NjevVN656AuE" type="text/javascript"></script>');
$(".getCity").on("click", function() {
$(".daysList").html("");
var keyword = $(".cityVal").val();
$.ajax(
"https://nominatim.openstreetmap.org/search?q=" + keyword + "&format=json"
).done(function(data) {
console.log(data);
var coords = data[0];
$.when(
$.ajax(
"https://nominatim.openstreetmap.org/reverse?format=json&lat=" +
coords.lat +
"&lon=" +
coords.lon +
""
),
$.ajax({
type: "Post",
url:
"https://api.darksky.net/forecast/7872f3201f558ed1217c55b409c43f75/" +
coords.lat +
"," +
coords.lon +
"?units=us&lang=en",
beforeSend: function(x) {
if (x && x.overrideMimeType) {
x.overrideMimeType("application/j-son;charset=UTF-8");
}
},
dataType: "jsonp",
beforeSend: function() {
console.log(coords.lat);
}
})
).done(function(addressCallResult, weatherCallResult) {
var addressData = addressCallResult[0];
var weatherData = weatherCallResult[0];
var address = setAddress(addressData);
lati = coords.lat;
longt = coords.lon;
showWeather(weatherData);
});
});
}); //get input val city weather click function
function showPosition(position) {
//get current city weather show document ready
$.when(
$.ajax(
"https://nominatim.openstreetmap.org/reverse?format=json&lat=" +
position.coords.latitude +
"&lon=" +
position.coords.longitude +
""
),
$.ajax({
type: "Post",
url:
"https://api.darksky.net/forecast/7872f3201f558ed1217c55b409c43f75/" +
position.coords.latitude +
"," +
position.coords.longitude +
"?units=us&lang=en",
beforeSend: function(x) {
if (x && x.overrideMimeType) {
x.overrideMimeType("application/j-son;charset=UTF-8");
}
},
dataType: "jsonp",
beforeSend: function() {
console.log(position.coords.latitude);
},
complete: function() {
console.log(position.coords.longitude);
}
})
).done(function(addressCallResult, weatherCallResult) {
var addressData = addressCallResult[0];
var weatherData = weatherCallResult[0];
console.log("showPosition", addressData);
var address = setAddress(addressData);
$(".cityVal").val(address[4]);
$(".cityVal")
.next("span")
.toggle(Boolean($(".cityVal").val()));
lati = position.coords.latitude;
longt = position.coords.longitude;
showWeather(weatherData);
});
}
function setAddress(addressData) {
var address = getFormattedAddress(addressData.address);
console.log("Formatted:", address);
$(".checkout__final-text").html(address[3]);
PlaceName = address[4];
return address;
}
function showWeather(weatherData) {
iconn = weatherData.currently.icon;
currTemp =
weatherData.currently.temperature
.toString()
.replace(",", ".")
.split(".")[0] +
"&deg;F" +
" / " +
Math.round(
toCelsius(
weatherData.currently.temperature
.toString()
.replace(",", ".")
.split(".")[0]
)
) +
"&deg;C";
summaryDay = weatherData.daily.summary;
getIconsKind();
var d = new Date(parseInt(weatherData.currently.time, 10) * 1000);
htmlCurrentWeather();
for (var i = 0; i < weatherData.daily.data.length; i++) {
iconn = weatherData.daily.data[i].icon;
inumber = i;
summary = weatherData.daily.data[i].summary;
temper =
"High: " +
weatherData.daily.data[i].temperatureMax
.toString()
.replace(",", ".")
.split(".")[0] +
"&deg;F" +
" / " +
Math.round(
toCelsius(
weatherData.daily.data[i].temperatureMax
.toString()
.replace(",", ".")
.split(".")[0]
)
) +
"&deg;C";
mintemper =
"Low: " +
Math.round(weatherData.daily.data[i].temperatureMin) +
"&deg;F" +
" / " +
Math.round(toCelsius(weatherData.daily.data[i].temperatureMin)) +
"&deg;C";
humidty = "Humidty: " + toPercent(weatherData.daily.data[i].humidity);
windspid =
"Wind Speed: " +
weatherData.daily.data[i].windSpeed +
" MPH" +
" / " +
toKPH(weatherData.daily.data[i].windSpeed) +
" KPH";
getIconsKind();
dday = new Date(parseInt(weatherData.daily.data[i].time, 10) * 1000);
ddday = dday.toString().substring(0, 15);
appendDaysList();
}
getIconsPlay();
// getMapPlace();
}
function getIconsPlay() {
$(".skycons-element").each(function() {
var canvasId, skycons, weatherSetting;
skycons = new Skycons({
color: "#FFE066"
});
canvasId = $(this).attr("id");
weatherSetting = $(this).data("skycons");
skycons.add(canvasId, Skycons[weatherSetting]);
return skycons.play();
});
var icons = new Skycons();
icons.set("clear-day", Skycons.CLEAR_DAY);
icons.set("clear-night", Skycons.CLEAR_NIGHT);
icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
icons.set("cloudy", Skycons.CLOUDY);
icons.set("rain", Skycons.RAIN);
icons.set("sleet", Skycons.SLEET);
icons.set("snow", Skycons.SNOW);
icons.set("wind", Skycons.WIND);
icons.set("fog", Skycons.FOG);
icons.play();
} //get icons play function
function getIconsKind() {
if (iconn == "clear-day") {
iconn = "CLEAR_DAY";
} else if (iconn == "clear-night") {
iconn = "CLEAR_NIGHT";
} else if (iconn == "partly-cloudy-day") {
iconn = "PARTLY_CLOUDY_DAY";
} else if (iconn == "partly-cloudy-night") {
iconn = "PARTLY_CLOUDY_NIGHT";
} else if (iconn == "cloudy") {
iconn = "CLOUDY";
} else if (iconn == "rain") {
iconn = "RAIN";
} else if (iconn == "sleet") {
iconn = "SLEET";
} else if (iconn == "snow") {
iconn = "SNOW";
} else if (iconn == "wind") {
iconn = "WIND";
} else if (iconn == "fog") {
iconn = "FOG";
}
} //get icons kind function(skycons icons are playin uppercase)
function appendDaysList() {
$(".daysList")
.append(
'<div class="col-md-3 col-sm-12">\
<div class="card-container manual-flip">\
<div class="card">\
<div class="front paint-area">\
<div class="cover">\
<img src="bgimg/rotating_card_thumb.png"/>\
</div>\
<div class="user">\
<canvas class="skycons-element" height="100%" width="100%" data-skycons="' +
iconn +
'" id="weatherIcon' +
inumber +
'"></canvas>\
</div>\
<div class="content">\
<div class="main">\
<h3 class="name">' +
ddday +
'</h3>\
<p class="profession">' +
summary +
'</p>\
<h4><i class="fa fa-sun-o fa-fw text-muted"></i>' +
temper +
'</h4>\
</div>\
<div class="footer">\
<button type="button" class="btn btn-simple" onclick="rotateCard(this)">\
<i class="fa fa-mail-forward"></i> More Information\
</button>\
</div>\
</div>\
</div> <!-- end front panel -->\
<div class="back paint-area">\
<div class="header">\
<h5 class="motto">' +
ddday +
'</h5>\
</div>\
<div class="content">\
<div class="main">\
<h4 class="text-center">' +
summary +
"</h4>\
<p>" +
mintemper +
"</p>\
<p>" +
humidty +
"</p>\
<p>" +
windspid +
'</p>\
</div>\
</div>\
<div class="footer">\
<button type="button" class="btn btn-simple" rel="tooltip" title="Flip Card" onclick="rotateCard(this)">\
<i class="fa fa-reply"></i> Back\
</button>\
</div>\
</div> <!-- end back panel -->\
</div> <!-- end card -->\
</div> <!-- end card-container -->\
</div>'
)
.addClass("animated pulse");
} //get days append function
function htmlCurrentWeather() {
$(".currentWeather")
.html(
'<div class="col-md-12">\
<div class="card-container manual-flip">\
<div class="card">\
<div class="front paint-area">\
<div class="cover">\
<img src="bgimg/rotating_card_thumb.jpg"/>\
</div>\
<div class="user">\
<canvas class="skycons-element" height="100%" width="100%" data-skycons="' +
iconn +
'" id="weatherIcon999"></canvas>\
</div>\
<div class="content">\
<div class="main">\
<h3>Current Weather</h3>\
<h2><i class="fa fa-map-marker fa-fw text-muted"></i> ' +
PlaceName +
'</h2>\
<h3 class="name">' +
currTemp +
'</h3>\
<p class="profession">' +
summaryDay +
"</p>\
</div>\
</div>\
</div> <!-- end front panel -->\
</div> <!-- end card -->\
</div> <!-- end card-container -->\
</div>"
)
.addClass("animated pulse");
}
$(".cityVal").keyup(function(event) {
if (event.keyCode == 13) {
$(".getCity").click();
}
var t = $(this);
t.next("span").toggle(Boolean(t.val()));
}); //get city keyboard enter button and clear button
$("#searchclear").hide(
$(this)
.prev(".cityVal")
.val()
);
$("#searchclear").on("click", function() {
$(this)
.prev(".cityVal")
.val("")
.focus();
$(this).hide();
}); //clear button function
function getMapPlace() {
var mapOptions = {
center: new google.maps.LatLng(lati, longt),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var showMapPosition = function(position) {
var userLatLng = new google.maps.LatLng(lati, longt);
var marker = new google.maps.Marker({
position: userLatLng,
title: "Your Location",
draggable: true,
map: map
});
var infowindow = new google.maps.InfoWindow({
content:
'<div id="infodiv" style="width: 300px">300px wide infowindow! if the mouse is not here, will close after 3 seconds</div>'
});
google.maps.event.addListener(marker, "dragend", function() {
infowindow.open(map, marker);
map.setCenter(marker.getPosition());
});
google.maps.event.addListener(marker, "mouseover", function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, "mouseout", function() {
t = setTimeout(function() {
infowindow.close();
}, 3000);
});
google.maps.event.addListener(infowindow, "domready", function() {
$("#infodiv")
.on("mouseenter", function() {
clearTimeout(t);
})
.on("mouseleave", function() {
t = setTimeout(function() {
infowindow.close();
}, 1000);
});
});
map.setCenter(marker.getPosition());
};
navigator.geolocation.getCurrentPosition(showMapPosition);
$(window).on("resize", function() {
var currCenter = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(currCenter);
});
} //get map function
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log("Geolocation is not supported by this browser.");
}
} //get location function
(function() {
//open map modal function
[].slice.call(document.querySelectorAll(".checkout")).forEach(function(el) {
var openCtrl = el.querySelector(".checkout__button"),
closeCtrl = el.querySelector(".checkout__cancel");
openCtrl.addEventListener("click", function(ev) {
ev.preventDefault();
classie.add(el, "checkout--active");
});
closeCtrl.addEventListener("click", function() {
classie.remove(el, "checkout--active");
});
});
})();
$().ready(function() {
$('[rel="tooltip"]').tooltip();
});
function rotateCard(btn) {
var $card = $(btn).closest(".card-container");
console.log($card);
if ($card.hasClass("hover")) {
$card.removeClass("hover");
} else {
$card.addClass("hover");
}
}
(function(window) {
"use strict";
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg(className) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ("classList" in document.documentElement) {
hasClass = function(elem, c) {
return elem.classList.contains(c);
};
addClass = function(elem, c) {
elem.classList.add(c);
};
removeClass = function(elem, c) {
elem.classList.remove(c);
};
} else {
hasClass = function(elem, c) {
return classReg(c).test(elem.className);
};
addClass = function(elem, c) {
if (!hasClass(elem, c)) {
elem.className = elem.className + " " + c;
}
};
removeClass = function(elem, c) {
elem.className = elem.className.replace(classReg(c), " ");
};
}
function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if (typeof define === "function" && define.amd) {
// AMD
define(classie);
} else {
// browser global
window.classie = classie;
}
})(window); //classie.js (Easy add remove class e.t.c.)
//background color change function
$(".color-tool li a").on("click", function() {
var colr = $(this).data("color");
$("body").css("background", colr);
});
function toCelsius(f) {
return (5 / 9) * (f - 32);
}
function toPercent(humidty) {
return (humidty * 100).toFixed(0) + "&#37;";
}
function toKPH(wind) {
return (wind * 1.609344).toFixed(2);
}