From e509eb727895130471da314844aaaafb7d5186d1 Mon Sep 17 00:00:00 2001 From: josihoppe <116898820+josihoppe@users.noreply.github.com> Date: Mon, 25 Mar 2024 13:41:47 +0100 Subject: [PATCH 01/11] sliders are adjusted according to scenario input --- digiplan/static/config/scenarios.json | 50 +++++++++++++++++++++++++++ digiplan/static/js/scenarios.js | 4 ++- digiplan/static/js/sliders.js | 49 ++++++++++++++++++++++++++ 3 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 digiplan/static/config/scenarios.json diff --git a/digiplan/static/config/scenarios.json b/digiplan/static/config/scenarios.json new file mode 100644 index 00000000..0b1deb07 --- /dev/null +++ b/digiplan/static/config/scenarios.json @@ -0,0 +1,50 @@ +{ + "1": { + "id_s_w_1": 720, + "id_s_w_6": 0.8, + "id_s_pv_ff_1": 1050, + "id_s_pv_ff_3": 10, + "id_s_pv_ff_4": 20, + "id_s_pv_ff_5": 50, + "id_s_pv_d_1": 300, + "id_s_pv_d_3": 15, + "id_s_pv_d_4": 20, + "id_s_v_1": 175, + "id_s_v_3": 160, + "id_s_v_4": 150, + "id_s_v_5": 175, + "id_s_s_g_1": 16 + }, + "2": { + "id_s_w_1": 180, + "id_s_w_6": 0.2, + "id_s_pv_ff_1": 4330, + "id_s_pv_ff_3": 15, + "id_s_pv_ff_4": 15, + "id_s_pv_ff_5": 15, + "id_s_pv_d_1": 110, + "id_s_pv_d_3": 5, + "id_s_pv_d_4": 5, + "id_s_v_1": 80, + "id_s_v_3": 80, + "id_s_v_4": 80, + "id_s_v_5": 80, + "id_s_s_g_1": 20 + }, + "3": { + "id_s_w_1": 500, + "id_s_w_6": 0.6, + "id_s_pv_ff_1": 6400, + "id_s_pv_ff_3": 15, + "id_s_pv_ff_4": 10, + "id_s_pv_ff_5": 20, + "id_s_pv_d_1": 200, + "id_s_pv_d_3": 10, + "id_s_pv_d_4": 15, + "id_s_v_1": 120, + "id_s_v_3": 125, + "id_s_v_4": 110, + "id_s_v_5": 140, + "id_s_s_g_1": 2 + } +} diff --git a/digiplan/static/js/scenarios.js b/digiplan/static/js/scenarios.js index a299965e..037e603d 100644 --- a/digiplan/static/js/scenarios.js +++ b/digiplan/static/js/scenarios.js @@ -1,4 +1,5 @@ import { getCurrentMenuTab } from "./menu.js"; +import { adaptSlidersScenario } from "./sliders.js"; let currentScenario = null; //const scenarioPanels = ["panelCard1", "panelCard2", "panelCard3", "panelCard4"]; @@ -36,8 +37,9 @@ function selectScenario(msg) { const selectedPanel = document.getElementsByClassName( "panel-card--selected", )[0].id; - // Set current scenario and enable next button + // Set current scenario and enable next button (outputs 1, 2 or 3) currentScenario = parseInt(selectedPanel.slice(-1)); + adaptSlidersScenario(msg, currentScenario); // Style all scenario buttons according to current selection Array.from(document.getElementsByClassName("scenarios")).forEach( diff --git a/digiplan/static/js/sliders.js b/digiplan/static/js/sliders.js index b5466046..e1a8da9d 100644 --- a/digiplan/static/js/sliders.js +++ b/digiplan/static/js/sliders.js @@ -10,6 +10,7 @@ const powerPanelSliders = document.querySelectorAll( const sliderMoreLabels = document.querySelectorAll( ".c-slider__label--more > .button", ); +const detailSliders = document.querySelectorAll(".js-slider.js-slider-detail-panel"); const powerMixInfoBanner = document.getElementById("js-power-mix"); const windTabs = document.querySelectorAll( "#windTab .sidepanel-tabs__nav-link", @@ -81,6 +82,7 @@ panelContainer.addEventListener("scroll", (e) => { // Subscriptions PubSub.subscribe(eventTopics.STATES_INITIALIZED, updateSliderMarks); +//PubSub.subscribe(eventTopics.STATES_INITIALIZED, adaptSlidersScenario); subscribeToEvents( [eventTopics.STATES_INITIALIZED, eventTopics.POWER_PANEL_SLIDER_CHANGE], createPercentagesOfPowerSources, @@ -107,6 +109,53 @@ PubSub.subscribe(eventTopics.WIND_CONTROL_ACTIVATED, showWindLayers); // Subscriber Functions +/** + * Adapt detail and main sliders depending on scenario selection + * @param {string} msg Publisher message + * @param {string} scenario Name of scenario + */ +function adaptSlidersScenario(msg, scenario) { + return fetch('/static/config/scenarios.json') + .then(response => response.json()) + .then(scenarioSettings => { + try { + // Update DetailSliders first + for (const slider of detailSliders) { + // Check if the slider is defined in scenario settings + if (!scenarioSettings[scenario].hasOwnProperty(slider.id)) { + continue; + } + const sliderValue = scenarioSettings[scenario][slider.id]; + $(`#${slider.id}`).data("ionRangeSlider").update({ from: sliderValue }); + const data = { + input: [{ id: slider.id }], + from: sliderValue + }; + PubSub.publish(eventTopics.DETAIL_PANEL_SLIDER_CHANGE, data); + } + // update main panel Sliders afterwards + for (const slider of panelSliders) { + // Check if the slider is defined in scenario settings + if (!scenarioSettings[scenario].hasOwnProperty(slider.id)) { + continue; + } + const sliderValue = scenarioSettings[scenario][slider.id]; + $(`#${slider.id}`).data("ionRangeSlider").update({ from: sliderValue }); + } + console.log('Sliders updated succesfully'); + } catch (error) { + console.error('Error updating sliders:', error); + throw error; + } + }) + .catch(error => { + console.error('Error fetching scenario settings:', error); + throw error; + }); +} + + + /** * Adapt detail sliders depending on related main sliders * @param {string} msg Publisher message From d5c3ad7c425b8a06623ad1a86404d8dccdf17f53 Mon Sep 17 00:00:00 2001 From: josihoppe <116898820+josihoppe@users.noreply.github.com> Date: Mon, 25 Mar 2024 14:01:17 +0100 Subject: [PATCH 02/11] changed sliders.js to module and power-mix slider changes for selected scenario --- digiplan/static/js/menu.js | 1 + digiplan/static/js/sliders.js | 7 +++---- digiplan/templates/map.html | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/digiplan/static/js/menu.js b/digiplan/static/js/menu.js index 1f0fc865..9fce4d22 100644 --- a/digiplan/static/js/menu.js +++ b/digiplan/static/js/menu.js @@ -1,4 +1,5 @@ import { resultsTabs, futureDropdown } from "./elements.js"; +import { hidePotentialLayers } from "./sliders.js"; const menuNextBtn = document.getElementById("menu_next_btn"); const menuPreviousBtn = document.getElementById("menu_previous_btn"); diff --git a/digiplan/static/js/sliders.js b/digiplan/static/js/sliders.js index e1a8da9d..916fd9ce 100644 --- a/digiplan/static/js/sliders.js +++ b/digiplan/static/js/sliders.js @@ -114,7 +114,7 @@ PubSub.subscribe(eventTopics.WIND_CONTROL_ACTIVATED, showWindLayers); * @param {string} msg Publisher message * @param {string} scenario Name of scenario */ -function adaptSlidersScenario(msg, scenario) { +export function adaptSlidersScenario(msg, scenario) { return fetch('/static/config/scenarios.json') .then(response => response.json()) .then(scenarioSettings => { @@ -142,6 +142,7 @@ function adaptSlidersScenario(msg, scenario) { const sliderValue = scenarioSettings[scenario][slider.id]; $(`#${slider.id}`).data("ionRangeSlider").update({ from: sliderValue }); } + PubSub.publish(eventTopics.POWER_PANEL_SLIDER_CHANGE); console.log('Sliders updated succesfully'); } catch (error) { console.error('Error updating sliders:', error); @@ -154,8 +155,6 @@ function adaptSlidersScenario(msg, scenario) { }); } - - /** * Adapt detail sliders depending on related main sliders * @param {string} msg Publisher message @@ -438,7 +437,7 @@ function showWindLayers(msg) { return logMessage(msg); } -function hidePotentialLayers(msg) { +export function hidePotentialLayers(msg) { for (const layer of potentialPVLayers .concat(potentialPVRoofLayers) .concat(potentialWindLayers)) { diff --git a/digiplan/templates/map.html b/digiplan/templates/map.html index 44f4d958..a20076b2 100644 --- a/digiplan/templates/map.html +++ b/digiplan/templates/map.html @@ -161,9 +161,9 @@ {% endif %} - {% endcompress %} +