Merge pull request #61 from empowerplan/feature/scenario_settings

Feature/scenario settings

.jshintrc

@@ -1,5 +1,5 @@
 {
-  "esversion": 8,
+  "esversion": 9,
   "globals": {
     "$": false,
     "PubSub": false,

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

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)

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 = {

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
+    }
+}

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");

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) {
   <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/>
 </svg>`;
 
-  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);
+}

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)) {

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 %}
     <script src="{% static 'js/state.js' %}" type="text/javascript"></script>
     <script src="{% static 'js/charts.js' %}" type="text/javascript"></script>
-    <script src="{% static 'js/sliders.js' %}" type="text/javascript"></script>
     <script src="{% static 'js/layers-box.js' %}"></script>
   {% endcompress %}
     <script src="{% static 'js/results.js' %}" type="module"></script>
+    <script src="{% static 'js/sliders.js' %}" type="module"></script>
     <script type="text/javascript">
       const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
       const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

digiplan/templates/widgets/sidepanel_close_btn.html

@@ -1,6 +1 @@
-<button
-  type="button"
-  class="sidepanel__close"
-  aria-label="Close"
-  onclick="closeSidepanel(this)">
-</button>
+<button type="button" class="sidepanel__close" aria-label="Close"></button>