Feature/scenario settings

.jshintrc

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

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/elements.js

@@ -74,7 +74,3 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   });
 });
-
-
-
-

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,12 @@
 import { getCurrentMenuTab } from "./menu.js";
+import { detailSliders, panelSliders } from "./sliders.js";
+
+/* jshint ignore:start */
+/*globals scenarioSettings */
+const scenarioSettings = await fetch("/static/config/scenarios.json").then(
+  (response) => response.json(),
+);
+/* jshint ignore:end */
 
 let currentScenario = null;
 //const scenarioPanels = ["panelCard1", "panelCard2", "panelCard3", "panelCard4"];
@@ -36,8 +44,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 +91,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 +112,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",
@@ -81,6 +86,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,
@@ -106,7 +112,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
@@ -389,7 +394,7 @@ function showWindLayers(msg) {
   return logMessage(msg);
 }
 
-function hidePotentialLayers(msg) {
+export function hidePotentialLayers(msg) {
   for (const layer of potentialPVLayers
     .concat(potentialPVRoofLayers)
     .concat(potentialWindLayers)) {

digiplan/static/scss/base/_variables.scss

@@ -101,4 +101,4 @@ $icon-margin-right: 0.25rem;
 
 // ANIMATIONS
 $animation-transition: transform 0.3s ease;
-$animation-transform: translateX(4px);
+$animation-transform: translateX(4px);

digiplan/static/scss/components/_sliders.scss

@@ -8,7 +8,7 @@
     background-size: cover;
     margin-right: 0.5rem;
   }
-  
+
   .irs.irs--flat .irs-bar, .irs.irs--flat .irs-handle > i:first-child, .irs.irs--flat .irs-single {
     background-color: $slider-main-color;
     border-color: $slider-main-color;

digiplan/static/scss/layouts/_challenges.scss

@@ -156,4 +156,4 @@
       color: $cyan-700;
     }
   }
-}
+}

digiplan/static/scss/layouts/_main.scss

@@ -7,7 +7,7 @@
   .main-content {
     @extend .container;
     @extend .py-4;
-  
+
     @include media-breakpoint-down(md) {
       padding: 0 !important;
     }
@@ -23,19 +23,19 @@
     width: 100%;
     height: $footer-height;
     z-index: 9;
-  
+
     &__btns {
       @extend .d-flex;
       @extend .flex-row;
       @extend .px-4;
       @extend .py-2;
       @extend .border-bottom;
-  
+
       button {
         @extend .w-50;
       }
     }
-  
+
     &__links {
       @extend .d-flex;
       @extend .flex-row;
@@ -50,22 +50,21 @@
         @extend .justify-content-center;
         @extend .align-items-center;
       }
-  
+
       li {
         @extend .d-inline-block;
         @extend .fs-7;
-  
+
         button {
           @extend .bg-white;
           @extend .border-0;
           @extend .link-primary;
         }
       }
-  
+
       li:not(:last-of-type) {
         @extend .pe-2;
       }
     }
   }
 }
-

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