diff --git a/open-weather-connector-demo/cms/cms_en.yaml b/open-weather-connector-demo/cms/cms_en.yaml index fb590d0..0a390ce 100644 --- a/open-weather-connector-demo/cms/cms_en.yaml +++ b/open-weather-connector-demo/cms/cms_en.yaml @@ -6,8 +6,10 @@ Dialogs: demo: ui: ForecastWeatherDemo: + CelsiusNotation: °C CityNameLabel: City name CountryCodeLabel: Country code + FahrenheitNotation: °F Header: Find Weather Forecasts in Any City HumidityLabel: Humidity PrecipitationLabel: Precipitation diff --git a/open-weather-connector-demo/src/com/axonivy/connector/openweather/managedbean/ForecastWeatherBean.java b/open-weather-connector-demo/src/com/axonivy/connector/openweather/managedbean/ForecastWeatherBean.java index 25a3760..06b4d8a 100644 --- a/open-weather-connector-demo/src/com/axonivy/connector/openweather/managedbean/ForecastWeatherBean.java +++ b/open-weather-connector-demo/src/com/axonivy/connector/openweather/managedbean/ForecastWeatherBean.java @@ -37,6 +37,8 @@ import com.axonivy.connector.openweather.util.Constants; import com.axonivy.connector.openweather.util.DateTimeFormatterUtilities; +import ch.ivyteam.ivy.jsf.primefaces.theme.IvyFreyaTheme; + @ManagedBean @ViewScoped public class ForecastWeatherBean implements Serializable { @@ -76,8 +78,11 @@ public class ForecastWeatherBean implements Serializable { private int currentChartWindowStartX; private int currentChartWindowEndX; + private IvyFreyaTheme ivyFreyaThemeBean; + @PostConstruct public void init() { + initRelatedBeans(); searchCityName = Constants.DEFAULT_SEARCH_CITY_NAME; units = Constants.DEFAULT_UNITS; typeOfDegree = Constants.DEFAULT_TYPE_OF_DEGREE; @@ -86,6 +91,12 @@ public void init() { search(); } + private void initRelatedBeans() { + FacesContext context = FacesContext.getCurrentInstance(); + ivyFreyaThemeBean = context.getApplication().evaluateExpressionGet(context, "#{ivyFreyaTheme}", + IvyFreyaTheme.class); + } + public LocalDate getSelectedDate() { return selectedDate; } diff --git a/open-weather-connector-demo/src_hd/com/axonivy/connector/openweather/demo/ui/ForecastWeatherDemo/ForecastWeatherDemo.xhtml b/open-weather-connector-demo/src_hd/com/axonivy/connector/openweather/demo/ui/ForecastWeatherDemo/ForecastWeatherDemo.xhtml index 60f7c0e..3bd429a 100644 --- a/open-weather-connector-demo/src_hd/com/axonivy/connector/openweather/demo/ui/ForecastWeatherDemo/ForecastWeatherDemo.xhtml +++ b/open-weather-connector-demo/src_hd/com/axonivy/connector/openweather/demo/ui/ForecastWeatherDemo/ForecastWeatherDemo.xhtml @@ -59,10 +59,10 @@ + styleClass="p-text-center #{ivyFreyaTheme.getMode() == 'dark' ? 'weather-detail-container-dark-mode' : 'weather-detail-container-light-mode'}"> - + #{forecastWeatherBean.cityName} #{forecastWeatherBean.time12HourName} @@ -83,7 +83,7 @@ disabled="#{forecastWeatherBean.typeOfDegree == 'CELSIUS'}"> °C + oncomplete="updateChartWithNewData()" />#{ivy.cms.co('/Dialogs/com/axonivy/connector/openweather/demo/ui/ForecastWeatherDemo/CelsiusNotation')} | °F + oncomplete="updateChartWithNewData()" />#{ivy.cms.co('/Dialogs/com/axonivy/connector/openweather/demo/ui/ForecastWeatherDemo/FahrenheitNotation')}
#{forecastWeatherBean.currentWeatherDetail}
@@ -134,7 +134,8 @@ value="#{forecastWeatherBean.dailyForecastDisplayInfos}" var="dailyForecastDisplayInfo" varStatus="status">
- default content - + default content +
- - \ No newline at end of file diff --git a/open-weather-connector-demo/webContent/layouts/styles/forecastweather.css b/open-weather-connector-demo/webContent/layouts/styles/forecastweather.css index da8a962..97e75a2 100644 --- a/open-weather-connector-demo/webContent/layouts/styles/forecastweather.css +++ b/open-weather-connector-demo/webContent/layouts/styles/forecastweather.css @@ -2,7 +2,7 @@ min-width: 1000px; } -.weather-detail-container { +.weather-detail-container-light-mode { background-image: url("#{resource['images/background/white.jpg']}"); background-size: cover; background-repeat: no-repeat; @@ -11,6 +11,15 @@ background-size: cover; } +.weather-detail-container-dark-mode { + background-image: url("#{resource['images/background/orange.jpg']}"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-clip: content-box; + background-size: cover; +} + .weather-condition-img-container { height: 160px } @@ -98,10 +107,14 @@ color: inherit; } -.weather-date-selected { +.weather-date-selected-light-mode { background-color: #f8f9fa; } +.weather-date-selected-dark-mode { + background-color: #4c505a; +} + .weather-chart { display: flex; flex-direction: column; diff --git a/open-weather-connector-demo/webContent/resources/js/chartjs-config.js b/open-weather-connector-demo/webContent/resources/js/chartjs-config.js index ee0de28..1f15616 100644 --- a/open-weather-connector-demo/webContent/resources/js/chartjs-config.js +++ b/open-weather-connector-demo/webContent/resources/js/chartjs-config.js @@ -25,6 +25,36 @@ const ClickPositionDetector = { } }; +document.getElementById('form:weather-chart-panel:temp-chart').addEventListener('click', function() { + console.log("abc"); + var tempChart = PF('tempChartWidgetVar').chart; + tempChart.options.scales.x.ticks.color = '#EAEBEC'; + tempChart.data.datasets[0].backgroundColor = '#EAEBEC'; + tempChart.data.datasets[0].borderColor = 'red'; + tempChart.options.plugins.datalabels.color = '#EAEBEC'; + tempChart.update(); +}); + +// Define a function to handle DOM changes +function handleDOMChange(mutationsList) { + for (const mutation of mutationsList) { + if (mutation.type === 'childList') { + const element = mutation.target; + const currentColor = window.getComputedStyle(element).color; + console.log("Text content changed, current color:", currentColor); + } + } +} + +// Create a new MutationObserver instance +const observer = new MutationObserver(handleDOMChange); + +// Select the element to observe +const targetElement = document.getElementById("form:city-name-panel"); + +// Start observing the element for changes +observer.observe(targetElement, { childList: true }); + function temperatureChartExtender() { //Register plugin datalabels jQuery.extend(true, this.cfg.config, {plugins: [ChartDataLabels, ClickPositionDetector]}); @@ -136,7 +166,6 @@ function precipitationChartExtender() { function panChartByCurrentValue() { var currentChartWindowStartX = parseInt(document.getElementById('form:currentChartWindowStartX').value); var currentChartWindowEndX = parseInt(document.getElementById('form:currentChartWindowEndX').value); - console.log(typeof(currentChartWindowEndX)); panChart(currentChartWindowStartX, currentChartWindowEndX); } @@ -174,7 +203,7 @@ function updateChartWithNewData() { var tempChart = PF('tempChartWidgetVar').chart; var temperatureData = tempChart.data.datasets[0].data; - + data = temperatureData.map(function(value, index) { if (index < newTemperatureData.length) {