Feature/scenario settings

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,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(
@@ -82,7 +84,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");

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,62 @@ 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
+ */
+export function adaptSlidersScenario(msg, scenario) {
+  return fetch('/static/config/scenarios.json')
+  .then(response => response.json())
+  .then(scenarioSettings => {
+      try {
+        if(scenarioSettings[scenario].hasOwnProperty("windTab")) {
+            // Manually activate/initialize a tab for chosen scenario
+            var scenarioTab = scenarioSettings[scenario].windTab;
+            var triggerEl = document.getElementById(scenarioTab);
+            if (triggerEl) {
+              var 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);
+        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
@@ -389,7 +447,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

@@ -161,9 +161,9 @@
     {% 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>
   {% 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))