From 7e8cf4c580093d3ee2332c3c1668ed1df2415bbf Mon Sep 17 00:00:00 2001 From: PranshulGG Date: Thu, 22 Aug 2024 15:13:37 +0530 Subject: [PATCH] 1.4.7 updated --- app/src/main/AndroidManifest.xml | 2 +- app/src/main/assets/app/app.js | 324 +++++++++---- app/src/main/assets/app/renderForecastPage.js | 452 ++++++++++++------ app/src/main/assets/components/components.css | 3 +- app/src/main/assets/index.html | 1 + app/src/main/assets/pages/alertPage.html | 219 ++++++--- app/src/main/assets/pages/forecastPage.html | 137 +++--- app/src/main/assets/pages/forecastPageUi.css | 287 ++++++++--- app/src/main/assets/pages/settings.html | 5 - .../example/weathermaster/ForecastPage.java | 10 +- app/src/main/res/values/colors.xml | 2 + app/src/main/res/values/themes.xml | 6 + release/output-metadata.json | 2 +- 13 files changed, 993 insertions(+), 457 deletions(-) diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml index 84806726f..20941f39f 100644 --- a/app/src/main/AndroidManifest.xml +++ b/app/src/main/AndroidManifest.xml @@ -52,7 +52,7 @@ android:name=".ForecastPage" android:screenOrientation="portrait" android:exported="true" - android:theme="@style/ScreensAll" + android:theme="@style/ScreenForecastPage" /> { + window.location.reload(); + }, 1500); + + } +} + +window.addEventListener('storage', handleStorageChange); + + + let anim = null; function ShowError() { @@ -196,14 +215,32 @@ document.addEventListener('DOMContentLoaded', () => { }); - const apiKeyGeo = '7147cfac7299479da122684c73d9b80a'; +let currentApiKeyGeoIndex = 0; async function getCitySuggestions(query) { - const response = await fetch(`https://api.opencagedata.com/geocode/v1/json?q=${query}&key=${apiKeyGeo}&limit=5`); - const data = await response.json(); - displaySuggestions(data.results); - } + const apiKeyGeo = apiKeysGeo[currentApiKeyGeoIndex]; + const url = `https://api.opencagedata.com/geocode/v1/json?q=${query}&key=${apiKeyGeo}&limit=5`; + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + const data = await response.json(); + displaySuggestions(data.results); + } catch (error) { + console.error('Error fetching city suggestions:', error); + + if (currentApiKeyGeoIndex < apiKeysGeo.length - 1) { + currentApiKeyGeoIndex++; + console.log(`Switching to API key index ${currentApiKeyGeoIndex} for city suggestions`); + getCitySuggestions(query); + } else { + console.error('All geo API keys failed. Unable to fetch data.'); + + } + } + } function displaySuggestions(results) { const suggestionsContainer = document.getElementById('city-list'); @@ -491,28 +528,55 @@ function setCurrentLocation(lat, lon){ - const apiKeyCityName = '7147cfac7299479da122684c73d9b80a'; - const urlcityName = `https://api.opencagedata.com/geocode/v1/json?q=${lat}+${lon}&key=${apiKeyCityName}`; +let currentApiKeyCityNameIndex = 0; - fetch(urlcityName) - .then(response => response.json()) - .then(data => { - if (data.results.length > 0) { - const components = data.results[0].components; - const city = components.city || components.town || components.village; - const stateMain = components.state - if(!city){ - document.getElementById('currentLocationName').textContent = `${stateMain}, ${countryNameText}`; - } else if(!stateMain) { - document.getElementById('currentLocationName').textContent = `${city}, ${countryNameText}`; - } else{ - document.getElementById('currentLocationName').textContent = `${city}, ${stateMain}, ${countryNameText}`; - } - } else { - console.log('No results found') - } - }) + + fetchCityName(lat, lon, countryNameText) + + + + function fetchCityName(cityLat, cityLon, countryNameText) { + const apiKeyCityName = apiKeysCityName[currentApiKeyCityNameIndex]; + const urlcityName = `https://api.opencagedata.com/geocode/v1/json?q=${cityLat}+${cityLon}&key=${apiKeyCityName}`; + + fetch(urlcityName) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + if (data.results.length > 0) { + const components = data.results[0].components; + const city = components.city || components.town || components.village; + const stateMain = components.state; + + if(!city){ + document.getElementById('currentLocationName').textContent = `${stateMain}, ${countryNameText}`; + } else if(!stateMain) { + document.getElementById('currentLocationName').textContent = `${city}, ${countryNameText}`; + } else{ + document.getElementById('currentLocationName').textContent = `${city}, ${stateMain}, ${countryNameText}`; + } + } else { + console.log('No results found'); + } + }) + .catch(error => { + console.error('Error fetching city name:', error); + + if (currentApiKeyCityNameIndex < apiKeysCityName.length - 1) { + currentApiKeyCityNameIndex++; + console.log(`Switching to API key index ${currentApiKeyCityNameIndex} for city name`); + fetchCityName(cityLat, cityLon, countryNameText); + } else { + console.error('All city name API keys failed. Unable to fetch data.'); + + } + }); + } }); } @@ -629,35 +693,55 @@ function getWeather(city, latitude, longitude) { const cityLat = data.coord.lat const cityLon = data.coord.lon - const apiKeyCityName = '7147cfac7299479da122684c73d9b80a'; - const urlcityName = `https://api.opencagedata.com/geocode/v1/json?q=${cityLat}+${cityLon}&key=${apiKeyCityName}`; + let currentApiKeyCityNameIndex = 0; - fetch(urlcityName) - .then(response => response.json()) - .then(data => { - if (data.results.length > 0) { - const components = data.results[0].components; - const city = components.city || components.town || components.village; - const stateMain = components.state - if(!city){ - document.getElementById('city-name').innerHTML = `${stateMain}, ${countryNameText}`; - document.getElementById('SelectedLocationText').innerHTML = `${stateMain}, ${countryNameText}`; + fetchCityName(cityLat, cityLon, countryNameText) - } else if(!stateMain) { - document.getElementById('city-name').innerHTML = `${city}, ${countryNameText}`; - document.getElementById('SelectedLocationText').innerHTML = `${city}, ${countryNameText}`; + function fetchCityName(cityLat, cityLon, countryNameText) { + const apiKeyCityName = apiKeysCityName[currentApiKeyCityNameIndex]; + const urlcityName = `https://api.opencagedata.com/geocode/v1/json?q=${cityLat}+${cityLon}&key=${apiKeyCityName}`; - } else{ - document.getElementById('city-name').innerHTML = `${city}, ${stateMain}, ${countryNameText}`; - document.getElementById('SelectedLocationText').innerHTML = `${city}, ${stateMain}, ${countryNameText}`; + fetch(urlcityName) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + if (data.results.length > 0) { + const components = data.results[0].components; + const city = components.city || components.town || components.village; + const stateMain = components.state; - } - } else { - console.log('No results found') + if (!city) { + document.getElementById('city-name').innerHTML = `${stateMain}, ${countryNameText}`; + document.getElementById('SelectedLocationText').innerHTML = `${stateMain}, ${countryNameText}`; + } else if (!stateMain) { + document.getElementById('city-name').innerHTML = `${city}, ${countryNameText}`; + document.getElementById('SelectedLocationText').innerHTML = `${city}, ${countryNameText}`; + } else { + document.getElementById('city-name').innerHTML = `${city}, ${stateMain}, ${countryNameText}`; + document.getElementById('SelectedLocationText').innerHTML = `${city}, ${stateMain}, ${countryNameText}`; + } + } else { + console.log('No results found'); + } + }) + .catch(error => { + console.error('Error fetching city name:', error); - } - }) + if (currentApiKeyCityNameIndex < apiKeysCityName.length - 1) { + currentApiKeyCityNameIndex++; + console.log(`Switching to API key index ${currentApiKeyCityNameIndex} for city name`); + fetchCityName(cityLat, cityLon, countryNameText); + } else { + console.error('All city name API keys failed. Unable to fetch data.'); + + } + }); + } if(SelectedTempUnit === 'fahrenheit'){ document.getElementById('temp').innerHTML = `${tempF}°`; @@ -1058,35 +1142,55 @@ function getWeatherByCoordinates(latitude, longitude) { const cityLat = data.coord.lat const cityLon = data.coord.lon - const apiKeyCityName = '7147cfac7299479da122684c73d9b80a'; - const urlcityName = `https://api.opencagedata.com/geocode/v1/json?q=${cityLat}+${cityLon}&key=${apiKeyCityName}`; + let currentApiKeyCityNameIndex = 0; - fetch(urlcityName) - .then(response => response.json()) - .then(data => { - if (data.results.length > 0) { - const components = data.results[0].components; - const city = components.city || components.town || components.village; - const stateMain = components.state - if(!city){ - document.getElementById('city-name').innerHTML = `${stateMain}, ${countryNameText}`; - document.getElementById('SelectedLocationText').innerHTML = `${stateMain}, ${countryNameText}`; + fetchCityName(cityLat, cityLon, countryNameText) - } else if(!stateMain) { - document.getElementById('city-name').innerHTML = `${city}, ${countryNameText}`; - document.getElementById('SelectedLocationText').innerHTML = `${city}, ${countryNameText}`; + function fetchCityName(cityLat, cityLon, countryNameText) { + const apiKeyCityName = apiKeysCityName[currentApiKeyCityNameIndex]; + const urlcityName = `https://api.opencagedata.com/geocode/v1/json?q=${cityLat}+${cityLon}&key=${apiKeyCityName}`; - } else{ - document.getElementById('city-name').innerHTML = `${city}, ${stateMain}, ${countryNameText}`; - document.getElementById('SelectedLocationText').innerHTML = `${city}, ${stateMain}, ${countryNameText}`; + fetch(urlcityName) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + if (data.results.length > 0) { + const components = data.results[0].components; + const city = components.city || components.town || components.village; + const stateMain = components.state; - } - } else { - console.log('No results found') + if (!city) { + document.getElementById('city-name').innerHTML = `${stateMain}, ${countryNameText}`; + document.getElementById('SelectedLocationText').innerHTML = `${stateMain}, ${countryNameText}`; + } else if (!stateMain) { + document.getElementById('city-name').innerHTML = `${city}, ${countryNameText}`; + document.getElementById('SelectedLocationText').innerHTML = `${city}, ${countryNameText}`; + } else { + document.getElementById('city-name').innerHTML = `${city}, ${stateMain}, ${countryNameText}`; + document.getElementById('SelectedLocationText').innerHTML = `${city}, ${stateMain}, ${countryNameText}`; + } + } else { + console.log('No results found'); + } + }) + .catch(error => { + console.error('Error fetching city name:', error); - } - }) + if (currentApiKeyCityNameIndex < apiKeysCityName.length - 1) { + currentApiKeyCityNameIndex++; + console.log(`Switching to API key index ${currentApiKeyCityNameIndex} for city name`); + fetchCityName(cityLat, cityLon, countryNameText); + } else { + console.error('All city name API keys failed. Unable to fetch data.'); + + } + }); + } @@ -1721,20 +1825,37 @@ function showToast(description, time) { }, 500); }, 3000); } -const apiOne = 'dd1571a8ad3fd44555e8a5d66db01929'; +let currentApiKeyIndex = 0; function getDailyForecast(latitude, longitude) { - const apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&appid=${apiOne}&units=metric`; + const apiKey = apiKeysDaily[currentApiKeyIndex]; + const apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`; fetch(apiUrl) - .then(response => response.json()) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) .then(data => { const dailyForecast = data.daily; displayDailyForecast(dailyForecast); }) - .catch(error => console.error('Error fetching daily forecast:', error)); + .catch(error => { + console.error('Error fetching daily forecast:', error); + if (currentApiKeyIndex < apiKeysDaily.length - 1) { + currentApiKeyIndex++; + console.log(`Switching to API key index ${currentApiKeyIndex}`); + getDailyForecast(latitude, longitude); + } else { + console.error('All API keys failed. Unable to fetch data.'); + } + }); } + + function displayDailyForecast(dailyForecast) { const forecastContainer = document.getElementById('forecast-5day'); forecastContainer.innerHTML = ''; @@ -2242,30 +2363,49 @@ const precipitationtypeText = data.days[0].preciptype ? data.days[0].preciptype[ const latAlerts = lat; const lonAlerts = long; -const apiKeyAlerts = 'dd1571a8ad3fd44555e8a5d66db01929'; +let currentApiKeyAlertsIndex = 0; -fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${latAlerts}&lon=${lonAlerts}&exclude=current,minutely,hourly,daily&appid=${apiKeyAlerts}`) - .then(response => response.json()) - .then(data => { - if(data.alerts){ - console.log(data.alerts) - const alertEvent = data.alerts[0].event; - document.getElementById('excessiveHeatText').innerHTML = alertEvent + 'More on this alert...'; +getWeatherAlerts(latAlerts, lonAlerts) - document.querySelector('.weatherCommentsDiv').classList.add('alertOpened'); - document.querySelector('.excessiveHeat').hidden = false; - } else{ - console.log('No alerts') - document.querySelector('.weatherCommentsDiv').classList.remove('alertOpened'); - document.querySelector('.excessiveHeat').hidden = true; - } - }) +function getWeatherAlerts(latAlerts, lonAlerts) { + const apiKeyAlerts = apiKeysAlerts[currentApiKeyAlertsIndex]; + const apiUrlAlerts = `https://api.openweathermap.org/data/2.5/onecall?lat=${latAlerts}&lon=${lonAlerts}&exclude=current,minutely,hourly,daily&appid=${apiKeyAlerts}`; - .catch(error => console.error('Error:', error)); + fetch(apiUrlAlerts) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + if (data.alerts) { + console.log(data.alerts); + const alertEvent = data.alerts[0].event; + document.getElementById('excessiveHeatText').innerHTML = alertEvent + 'More on this alert...'; + document.querySelector('.weatherCommentsDiv').classList.add('alertOpened'); + document.querySelector('.excessiveHeat').hidden = false; + } else { + console.log('No alerts'); + document.querySelector('.weatherCommentsDiv').classList.remove('alertOpened'); + document.querySelector('.excessiveHeat').hidden = true; + } + }) + .catch(error => { + console.error('Error fetching weather alerts:', error); + if (currentApiKeyAlertsIndex < apiKeysAlerts.length - 1) { + currentApiKeyAlertsIndex++; + console.log(`Switching to API key index ${currentApiKeyAlertsIndex} for alerts`); + getWeatherAlerts(latAlerts, lonAlerts); + } else { + console.error('All alert API keys failed. Unable to fetch data.'); + } + }); +} } diff --git a/app/src/main/assets/app/renderForecastPage.js b/app/src/main/assets/app/renderForecastPage.js index 3b6fd61ff..ae4b8f2b8 100644 --- a/app/src/main/assets/app/renderForecastPage.js +++ b/app/src/main/assets/app/renderForecastPage.js @@ -4,26 +4,77 @@ const SelectedPrecipitationUnit = localStorage.getItem('selectedPrecipitationUni const SelectedPressureUnit = localStorage.getItem('selectedPressureUnit'); +// change ids same + +const ConditionIcons = { + + WindSockIcon: ' ', + + PrecipitationAmountIcon: ' ', + + PrecipitationChancesIcon: ' ', + + PressureIcon: ' ', + + CloudCoverIcon: ' ', + + HumidityIcon: ' ', + + DewPointIcon: ' ', + + SunriseIcon: ' ', + + SunsetIcon: ' ', + + UVindexIcon: ' ', + + MoonRiseIcon: ' ', + + MoonSetIcon: ' ', +} + + + + + +let currentApiKeyIndex = 0; -const apiOne = 'dd1571a8ad3fd44555e8a5d66db01929'; function getDailyForecast(latitude, longitude) { + const apiKey = apiKeysDaily[currentApiKeyIndex]; - const apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&appid=${apiOne}&units=metric`; + const apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`; - fetch(apiUrl) - .then(response => response.json()) - .then(data => { - const dailyForecast = data.daily; - displayDailyForecast(dailyForecast); - }) - .catch(error => console.error('Error fetching daily forecast:', error)); + fetch(apiUrl) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + const dailyForecast = data.daily; + displayDailyForecast(dailyForecast); + }) + .catch(error => { + console.error('Error fetching daily forecast:', error); + if (currentApiKeyIndex < apiKeysDaily.length - 1) { + currentApiKeyIndex++; + console.log(`Switching to API key index ${currentApiKeyIndex}`); + getDailyForecast(latitude, longitude); + } else { + console.error('All API keys failed. Unable to fetch data.'); + } + }); } function displayDailyForecast(dailyForecast) { const forecastContainer = document.getElementById('foreCastList'); + const forecastDateHeader = document.createElement('forecastDateHeader'); + const forecastMainDetails = document.createElement('forecastMainDetails'); + forecastContainer.innerHTML = ''; const today = new Date(); @@ -31,63 +82,71 @@ function displayDailyForecast(dailyForecast) { dailyForecast.forEach((forecast, index) => { + if (index === 0) return; const timestamp = new Date(forecast.dt * 1000); if (timestamp.getDate() === today.getDate()) return; + const dayName = timestamp.toLocaleDateString('en-US', { weekday: 'short' }); const date = timestamp.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); + const description = forecast.weather[0].description; let iconCode = forecast.weather[0].icon; - const rainPercentage = Math.round(forecast.pop * 100)|| '0'; + const rainPercentage = Math.round(forecast.pop * 100) || '0'; const humidity = forecast.humidity const cloudCover = forecast.clouds + const SunriseTime = convertTo12HourFormat(forecast.sunrise); + const SunsetTime = convertTo12HourFormat(forecast.sunset); + const MoonriseTime = convertTo12HourFormat(forecast.moonrise); + const MoonsetTime = convertTo12HourFormat(forecast.moonset); + let WindSpeed; - if(SelectedWindUnit === 'mile'){ + if (SelectedWindUnit === 'mile') { WindSpeed = Math.round(forecast.wind_speed * 2.23694) + ' mph'; - } else{ - WindSpeed = Math.round(forecast.wind_speed) + ' km/h'; + } else { + WindSpeed = Math.round(forecast.wind_speed) + ' km/h'; } let TemperatureMax; - if(SelectedTempUnit === 'fahrenheit'){ - TemperatureMax = Math.round(forecast.temp.max * 9 / 5 + 32); - } else{ + if (SelectedTempUnit === 'fahrenheit') { + TemperatureMax = Math.round(forecast.temp.max * 9 / 5 + 32); + } else { TemperatureMax = Math.round(forecast.temp.max); } let TemperatureMin; - if(SelectedTempUnit === 'fahrenheit'){ + if (SelectedTempUnit === 'fahrenheit') { TemperatureMin = Math.round(forecast.temp.min * 9 / 5 + 32); - } else{ + } else { TemperatureMin = Math.round(forecast.temp.min); } let dewPointTemp; - if(SelectedTempUnit === 'fahrenheit'){ + if (SelectedTempUnit === 'fahrenheit') { dewPointTemp = Math.round(forecast.dew_point * 9 / 5 + 32); - } else{ + } else { dewPointTemp = Math.round(forecast.dew_point); } let rainAmount; - if(SelectedPrecipitationUnit === 'in'){ + if (SelectedPrecipitationUnit === 'in') { rainAmount = forecast.rain ? (forecast.rain * 0.0393701).toFixed(2) + 'in' : '0.00in'; - } else{ - rainAmount = forecast.rain ? forecast.rain + ' mm' : '0.0mm'; + } else { + rainAmount = forecast.rain ? forecast.rain + ' mm' : '0.0mm'; } @@ -105,160 +164,255 @@ function displayDailyForecast(dailyForecast) { pressureMainUnit = 'hPa'; } - const uvIndex = Math.round(forecast.uvi) + const uvIndex = Math.round(forecast.uvi) - let UVindexText; + let UVindexText; - if (uvIndex >= 0 && uvIndex <= 1) { - UVindexText = 'Minimal'; - } else if (uvIndex > 1 && uvIndex <= 2) { - UVindexText = 'Low'; + if (uvIndex >= 0 && uvIndex <= 1) { + UVindexText = 'Minimal'; + } else if (uvIndex > 1 && uvIndex <= 2) { + UVindexText = 'Low'; - } else if (uvIndex > 2 && uvIndex <= 3) { - UVindexText = 'Low'; + } else if (uvIndex > 2 && uvIndex <= 3) { + UVindexText = 'Low'; - } else if (uvIndex > 3 && uvIndex <= 4) { - UVindexText = 'Moderate'; + } else if (uvIndex > 3 && uvIndex <= 4) { + UVindexText = 'Moderate'; - } else if (uvIndex > 4 && uvIndex <= 5) { - UVindexText = 'Moderate'; + } else if (uvIndex > 4 && uvIndex <= 5) { + UVindexText = 'Moderate'; - } else if (uvIndex > 5 && uvIndex <= 6) { - UVindexText = 'Moderate'; + } else if (uvIndex > 5 && uvIndex <= 6) { + UVindexText = 'Moderate'; - } else if (uvIndex > 6 && uvIndex <= 7) { - UVindexText = 'High'; + } else if (uvIndex > 6 && uvIndex <= 7) { + UVindexText = 'High'; - } else if (uvIndex > 7 && uvIndex <= 8) { - UVindexText = 'High'; + } else if (uvIndex > 7 && uvIndex <= 8) { + UVindexText = 'High'; - } else if (uvIndex > 8 && uvIndex <= 9) { - UVindexText = 'Very high'; + } else if (uvIndex > 8 && uvIndex <= 9) { + UVindexText = 'Very high'; - } else if (uvIndex > 9 && uvIndex <= 10) { - UVindexText = 'Very high'; + } else if (uvIndex > 9 && uvIndex <= 10) { + UVindexText = 'Very high'; - } else if (uvIndex > 10 && uvIndex <= 11) { - UVindexText = 'Very high'; + } else if (uvIndex > 10 && uvIndex <= 11) { + UVindexText = 'Very high'; - } else if (uvIndex > 11 && uvIndex <= 12) { - UVindexText = 'Extreme'; + } else if (uvIndex > 11 && uvIndex <= 12) { + UVindexText = 'Extreme'; - } else if (uvIndex > 12 && uvIndex <= 13) { - UVindexText = 'Extreme'; + } else if (uvIndex > 12 && uvIndex <= 13) { + UVindexText = 'Extreme'; - } else if (uvIndex > 13) { - UVindexText = 'Extreme'; - } + } else if (uvIndex > 13) { + UVindexText = 'Extreme'; + } iconCode = iconCode.replace('n', 'd'); - const forecastItem = document.createElement('div'); - forecastItem.classList.add('forecast-list-item'); let colorStyle; - if(iconCode === '01d'){ + if (iconCode === '01d') { colorStyle = '--weather-color: #375aa3;'; - } else if(iconCode === '02d' ){ + } else if (iconCode === '02d') { colorStyle = '--weather-color: #5b606b;'; - } else if(iconCode === '03d' || iconCode === '04d'){ + } else if (iconCode === '03d' || iconCode === '04d') { colorStyle = '--weather-color: #555b69;'; - } else if(iconCode === '09d' || iconCode === '10d'){ + } else if (iconCode === '09d' || iconCode === '10d') { colorStyle = '--weather-color: #33415e;'; - } else if(iconCode === '11d'){ + } else if (iconCode === '11d') { colorStyle = '--weather-color: #383147;' - } else if(iconCode === '13d'){ + } else if (iconCode === '13d') { colorStyle = '--weather-color: #41465f;' - } else if(iconCode === '50d'){ + } else if (iconCode === '50d') { colorStyle = '--weather-color: #352603;' } - // create forecast-details - forecastItem.style = colorStyle + const forecastDateHeaderContent = document.createElement('div'); + forecastDateHeaderContent.classList.add('forecastDateHeaderContent') + forecastDateHeaderContent.dataset.index = index; + + + forecastDateHeaderContent.innerHTML = ` + + ${dayName} + +
+

${TemperatureMax}°/${TemperatureMin}°

+
+ + + + ` + // ------------------------------------------------------ - forecastItem.innerHTML = ` -
-
-

${date}

- ${description}
- -
- -
-
- -
-

${TemperatureMax}° / ${TemperatureMin}°

-
- -
- -
- -
- Precipitation chances - -

${rainPercentage}%

-
- -
- Precipitation amount - -

${rainAmount}

-
- -
- Wind speed - -

${WindSpeed}

-
- -
- Pressure - -

${pressureMain} ${pressureMainUnit}

-
- -
- Cloud cover - -

${cloudCover}%

-
-
- Humidity - -

${humidity}%

-
- -
- Dew point - -

${dewPointTemp}°

-
- -
- UV index - -

${uvIndex} ${UVindexText}

-
- -
- -
- - ` + forecastDateHeader.appendChild(forecastDateHeaderContent); + forecastContainer.appendChild(forecastDateHeader) + forecastContainer.appendChild(forecastMainDetails) - forecastContainer.appendChild(forecastItem); + function handleSelection(event) { + document.querySelectorAll('.forecastDateHeaderContent').forEach(item => { + item.classList.remove('selected'); + }); + + event.currentTarget.classList.add('selected'); + + forecastMainDetails.innerHTML = ''; + + + const forecastTempConditionMainContent = document.createElement('div'); + forecastTempConditionMainContent.classList.add('forecastTempConditionMainContent') + + const selectedIndex = event.currentTarget.dataset.index; + const selectedForecast = dailyForecast[selectedIndex]; + + forecastTempConditionMainContent.innerHTML = ` + +
+

${dayName}, ${date}

+
+

${TemperatureMax}°

/${TemperatureMin}° + +
+ ${description} +
+ + +

Daily conditions

+
+
+ +
+

Wind speed

+ + ${ConditionIcons.WindSockIcon} + + ${WindSpeed} +
+ +
+

Humidity

+ + ${ConditionIcons.HumidityIcon} + + ${humidity}% +
+ +
+

Precipitation chances

+ + ${ConditionIcons.PrecipitationChancesIcon} + + ${rainPercentage}% +
+ +
+

Precipitation amount

+ + ${ConditionIcons.PrecipitationAmountIcon} + + ${rainAmount} +
+ +
+

Cloud cover

+ + ${ConditionIcons.CloudCoverIcon} + + ${cloudCover}% +
+ +
+

Pressure

+ + ${ConditionIcons.PressureIcon} + + ${pressureMain} ${pressureMainUnit} +
+ +
+

Dew point

+ + ${ConditionIcons.DewPointIcon} + + ${dewPointTemp}° +
+ +
+

UV index

+ + ${ConditionIcons.UVindexIcon} + + ${uvIndex} ${UVindexText} +
+ +
+
+ +

Sun & Moon Times

+
+ +
+

Sunrise

+
+ ${ConditionIcons.SunriseIcon} +
+ ${SunriseTime} +
+ +
+

Sunrise

+
+ ${ConditionIcons.SunsetIcon} +
+ ${SunsetTime} +
+ +
+

Moonrise

+
+ ${ConditionIcons.MoonRiseIcon} +
+ ${MoonriseTime} +
+ +
+

Moonset

+
+ ${ConditionIcons.MoonSetIcon} +
+ ${MoonsetTime} +
+ +
+ + ` + + if (!forecastMainDetails.contains(forecastTempConditionMainContent)) { + forecastMainDetails.appendChild(forecastTempConditionMainContent); + } + + } + + + forecastDateHeaderContent.addEventListener('click', handleSelection); + if (index === 1) { + forecastDateHeaderContent.classList.add('selected'); + handleSelection({ currentTarget: forecastDateHeaderContent }); + firstForecastIndex = index; + } }); } @@ -268,6 +422,28 @@ const latDif = localStorage.getItem('currentLat'); const longDif = localStorage.getItem('currentLong'); -setTimeout(()=>{ +setTimeout(() => { getDailyForecast(latDif, longDif) }, 1500); + + +function convertTo12HourFormat(unixTimestamp) { + const date = new Date(unixTimestamp * 1000); + let hours = date.getHours(); + const minutes = date.getMinutes(); + const ampm = hours >= 12 ? 'PM' : 'AM'; + hours = hours % 12; + hours = hours ? hours : 12; + const minutesStr = minutes < 10 ? '0' + minutes : minutes; + return `${hours}:${minutesStr} ${ampm}`; +} + + +setTimeout(()=>{ + document.querySelector('.loader_holder').style.opacity = '0' +}, 2000); + + +setTimeout(()=>{ + document.querySelector('.loader_holder').hidden = true +}, 2200); \ No newline at end of file diff --git a/app/src/main/assets/components/components.css b/app/src/main/assets/components/components.css index 963dfa36b..8f95ba134 100644 --- a/app/src/main/assets/components/components.css +++ b/app/src/main/assets/components/components.css @@ -509,7 +509,8 @@ circle-loader #spinner { .full-activity-header.transparent{ background-color: transparent; - z-index: 1; transition: background-color 0.17s ease-in; + z-index: 1; + transition: background-color 0.17s ease-in; } diff --git a/app/src/main/assets/index.html b/app/src/main/assets/index.html index 83b05a850..04908d880 100644 --- a/app/src/main/assets/index.html +++ b/app/src/main/assets/index.html @@ -699,6 +699,7 @@ document.getElementById('clearCityInput').addEventListener('click', () =>{ + diff --git a/app/src/main/assets/pages/alertPage.html b/app/src/main/assets/pages/alertPage.html index 68bd2df4d..18ed2eb83 100644 --- a/app/src/main/assets/pages/alertPage.html +++ b/app/src/main/assets/pages/alertPage.html @@ -11,9 +11,40 @@ - + + diff --git a/release/output-metadata.json b/release/output-metadata.json index fefba4cf4..ed90f483e 100644 --- a/release/output-metadata.json +++ b/release/output-metadata.json @@ -12,7 +12,7 @@ "filters": [], "attributes": [], "versionCode": 2, - "versionName": "1.4.5 (W)", + "versionName": "1.4.6 (W)", "outputFile": "app-release.apk" } ],