diff --git a/.jshintrc b/.jshintrc index 58a1441a..bc77135b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -1,5 +1,5 @@ { - "esversion": 8, + "esversion": 9, "globals": { "$": false, "PubSub": false, diff --git a/CHANGELOG.md b/CHANGELOG.md index 93b20b4e..0caec890 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project tries to adhere to [Semantic Versioning](https://semver.org/spe - coupling of duplicated map panel controls - dependabot - key results for wind, pv ground and pv roof settings panels +- scenario settings ### Changed - Adapt municipality label font size according to zoom level diff --git a/digiplan/map/config.py b/digiplan/map/config.py index b3adb9c9..28cc2c20 100644 --- a/digiplan/map/config.py +++ b/digiplan/map/config.py @@ -21,6 +21,7 @@ ENERGY_SETTINGS_PANEL_FILE = settings.APPS_DIR.path("static/config/energy_settings_panel.json") HEAT_SETTINGS_PANEL_FILE = settings.APPS_DIR.path("static/config/heat_settings_panel.json") TRAFFIC_SETTINGS_PANEL_FILE = settings.APPS_DIR.path("static/config/traffic_settings_panel.json") +SCENARIO_SETTINGS_FILE = settings.APPS_DIR.path("static/config/scenarios.json") ADDITIONAL_ENERGY_SETTINGS_FILE = settings.DATA_DIR.path("digipipe/settings/energy_settings_panel.json") ADDITIONAL_HEAT_SETTINGS_FILE = settings.DATA_DIR.path("digipipe/settings/heat_settings_panel.json") ADDITIONAL_TRAFFIC_SETTINGS_FILE = settings.DATA_DIR.path("digipipe/settings/traffic_settings_panel.json") @@ -34,6 +35,7 @@ ENERGY_SETTINGS_PANEL = utils.get_translated_json_from_file(ENERGY_SETTINGS_PANEL_FILE) HEAT_SETTINGS_PANEL = utils.get_translated_json_from_file(HEAT_SETTINGS_PANEL_FILE) TRAFFIC_SETTINGS_PANEL = utils.get_translated_json_from_file(TRAFFIC_SETTINGS_PANEL_FILE) +SCENARIO_SETTINGS = utils.get_translated_json_from_file(SCENARIO_SETTINGS_FILE) ADDITIONAL_ENERGY_SETTINGS = utils.get_translated_json_from_file(ADDITIONAL_ENERGY_SETTINGS_FILE) ADDITIONAL_HEAT_SETTINGS = utils.get_translated_json_from_file(ADDITIONAL_HEAT_SETTINGS_FILE) ADDITIONAL_TRAFFIC_SETTINGS = utils.get_translated_json_from_file(ADDITIONAL_TRAFFIC_SETTINGS_FILE) diff --git a/digiplan/map/views.py b/digiplan/map/views.py index 53528e6c..e393e621 100644 --- a/digiplan/map/views.py +++ b/digiplan/map/views.py @@ -76,6 +76,7 @@ def get_context_data(self, **kwargs) -> dict: ] context["settings_parameters"] = config.ENERGY_SETTINGS_PANEL + context["scenario_settings"] = config.SCENARIO_SETTINGS # Categorize sources categorized_sources = { diff --git a/digiplan/static/config/scenarios.json b/digiplan/static/config/scenarios.json new file mode 100644 index 00000000..a6e29731 --- /dev/null +++ b/digiplan/static/config/scenarios.json @@ -0,0 +1,85 @@ +{ + "1": { + "windTab": "windFutureTab", + "id_s_w_1": 720, + "id_s_w_7": 2.1, + "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, + "id_w_d_wp_1": 70, + "id_w_d_wp_3": 70, + "id_w_d_wp_4": 70, + "id_w_d_wp_5": 55, + "id_w_z_wp_1": 80, + "id_w_v_1": 90, + "id_w_v_3": 90, + "id_w_v_4": 90, + "id_w_v_5": 90, + "id_w_d_s_1": 75, + "id_w_z_s_1": 70 + }, + "2": { + "windTab": "windPresentTab", + "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, + "id_w_d_wp_1": 75, + "id_w_d_wp_3": 65, + "id_w_d_wp_4": 90, + "id_w_d_wp_5": 55, + "id_w_z_wp_1": 20, + "id_w_v_1": 120, + "id_w_v_3": 130, + "id_w_v_4": 110, + "id_w_v_5": 150, + "id_w_d_s_1": 30, + "id_w_z_s_1": 45 + }, + "3": { + "windTab": "windPastTab", + "id_s_w_1": 500, + "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, + "id_w_d_wp_1": 82, + "id_w_d_wp_3": 90, + "id_w_d_wp_4": 70, + "id_w_d_wp_5": 80, + "id_w_z_wp_1": 50, + "id_w_v_1": 70, + "id_w_v_3": 70, + "id_w_v_4": 75, + "id_w_v_5": 65, + "id_w_d_s_1": 180, + "id_w_z_s_1": 110 + } +} 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/scenarios.js b/digiplan/static/js/scenarios.js index a299965e..fa3a5fea 100644 --- a/digiplan/static/js/scenarios.js +++ b/digiplan/static/js/scenarios.js @@ -1,4 +1,9 @@ import { getCurrentMenuTab } from "./menu.js"; +import { detailSliders, panelSliders } from "./sliders.js"; + +const scenarioSettings = JSON.parse( + document.getElementById("scenario_settings").textContent, +); let currentScenario = null; //const scenarioPanels = ["panelCard1", "panelCard2", "panelCard3", "panelCard4"]; @@ -36,8 +41,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( @@ -82,7 +88,7 @@ function selectScenarioCard(scenarioCardNumber) { `; - for (let i = 1; i <= 4; i++) { + for (let i = 1; i <= 3; i++) { const card = document.getElementById("panelCard" + i); const selectedScenario = document.getElementById("selectedScenario" + i); const arrowIcon = card.querySelector(".arrow-icon"); @@ -103,3 +109,45 @@ function selectScenarioCard(scenarioCardNumber) { } } } + +/** + * Adapt detail and main sliders depending on scenario selection + * @param {string} msg Publisher message + * @param {string} scenario Name of scenario + */ +function adaptSlidersScenario(msg, scenario) { + if (scenarioSettings[scenario].hasOwnProperty("windTab")) { + // Manually activate/initialize a tab for chosen scenario + const scenarioTab = scenarioSettings[scenario].windTab; + const triggerEl = document.getElementById(scenarioTab); + if (triggerEl) { + const tabTrigger = new bootstrap.Tab(triggerEl); + tabTrigger.show(); + } + } + // 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 }); + } + PubSub.publish(eventTopics.POWER_PANEL_SLIDER_CHANGE); + return logMessage(msg); +} diff --git a/digiplan/static/js/sliders.js b/digiplan/static/js/sliders.js index 640af9a9..a147285e 100644 --- a/digiplan/static/js/sliders.js +++ b/digiplan/static/js/sliders.js @@ -3,13 +3,18 @@ const SETTINGS_PARAMETERS = JSON.parse( document.getElementById("settings_parameters").textContent, ); const panelContainer = document.getElementById("js-panel-container"); -const panelSliders = document.querySelectorAll(".js-slider.js-slider-panel"); +export const panelSliders = document.querySelectorAll( + ".js-slider.js-slider-panel", +); const powerPanelSliders = document.querySelectorAll( ".js-slider.js-slider-panel.js-power-mix", ); const sliderMoreLabels = document.querySelectorAll( ".c-slider__label--more > .button", ); +export 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", @@ -36,6 +41,9 @@ const potentialWindLayers = [ const pvMapControl = document.getElementsByClassName("map__layers-pv")[0]; +const sidepanelCloseButtons = + document.getElementsByClassName("sidepanel__close"); + // Setup $(".js-slider.js-slider-panel.js-power-mix").ionRangeSlider({ @@ -79,8 +87,15 @@ panelContainer.addEventListener("scroll", (e) => { ); }); +Array.from(sidepanelCloseButtons).forEach((closeBtn) => { + closeBtn.addEventListener("click", (event) => { + closeSidepanel(event.target); + }); +}); + // Subscriptions PubSub.subscribe(eventTopics.STATES_INITIALIZED, updateSliderMarks); +//PubSub.subscribe(eventTopics.STATES_INITIALIZED, adaptSlidersScenario); subscribeToEvents( [eventTopics.STATES_INITIALIZED, eventTopics.POWER_PANEL_SLIDER_CHANGE], createPercentagesOfPowerSources, @@ -107,7 +122,6 @@ PubSub.subscribe(eventTopics.PV_ROOF_CONTROL_ACTIVATED, showPVRoofLayers); PubSub.subscribe(eventTopics.WIND_CONTROL_ACTIVATED, showWindLayers); // Subscriber Functions - /** * Adapt detail sliders depending on related main sliders * @param {string} msg Publisher message @@ -390,7 +404,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 376a0619..d8364d66 100644 --- a/digiplan/templates/map.html +++ b/digiplan/templates/map.html @@ -152,6 +152,7 @@ {{ onboarding_pv_ground|json_script:"onboarding_pv_ground" }} {{ onboarding_pv_roof|json_script:"onboarding_pv_roof" }} {{ settings_parameters|json_script:"settings_parameters" }} + {{ scenario_settings|json_script:"scenario_settings" }} {% compress js %} {% include 'django_mapengine/map_js.html' %} @@ -162,10 +163,10 @@ {% endif %} - {% endcompress %} +