From f5699b04b178f6d15866ce6317f498ab650e5f06 Mon Sep 17 00:00:00 2001
From: Hendrik Huyskens <hendrik.huyskens@rl-institut.de>
Date: Tue, 14 Nov 2023 11:29:42 +0100
Subject: [PATCH] Show empowerplan scenario panel only at step 3

---
 digiplan/static/js/menu.js             | 38 +++++++++++++-------------
 digiplan/templates/components/map.html |  6 ++--
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/digiplan/static/js/menu.js b/digiplan/static/js/menu.js
index f52960aa..a6bf628d 100644
--- a/digiplan/static/js/menu.js
+++ b/digiplan/static/js/menu.js
@@ -2,8 +2,6 @@ import {resultsTabs, futureDropdown} from "./elements.js";
 
 const menuNextBtn = document.getElementById("menu_next_btn");
 const menuPreviousBtn = document.getElementById("menu_previous_btn");
-const mapTab = document.getElementById("map-view-tab");
-const chartTab = document.getElementById("chart-view-tab");
 const regionChart = document.getElementById("region_chart_2045");
 
 menuNextBtn.addEventListener("click", function () {
@@ -15,23 +13,16 @@ menuPreviousBtn.addEventListener("click", function() {
     PubSub.publish(eventTopics.MENU_CHANGED);
 });
 
-mapTab.addEventListener("click", function () {
-    PubSub.publish(eventTopics.MAP_VIEW_SELECTED);
-});
-
-chartTab.addEventListener("click", function () {
-    PubSub.publish(eventTopics.CHART_VIEW_SELECTED);
-});
-
 PubSub.subscribe(eventTopics.MENU_STATUS_QUO_SELECTED, setMapChartViewVisibility);
-PubSub.subscribe(eventTopics.MENU_STATUS_QUO_SELECTED, showMapView);
 PubSub.subscribe(eventTopics.MENU_STATUS_QUO_SELECTED, hidePotentialLayers);
+PubSub.subscribe(eventTopics.MENU_STATUS_QUO_SELECTED, hideEmpowerplanScenarios);
 PubSub.subscribe(eventTopics.MENU_SETTINGS_SELECTED, setMapChartViewVisibility);
-PubSub.subscribe(eventTopics.MENU_SETTINGS_SELECTED, showMapView);
 PubSub.subscribe(eventTopics.MENU_SETTINGS_SELECTED, deactivateChoropleth);
 PubSub.subscribe(eventTopics.MENU_SETTINGS_SELECTED, terminateSimulation);
+PubSub.subscribe(eventTopics.MENU_SETTINGS_SELECTED, hideEmpowerplanScenarios);
 PubSub.subscribe(eventTopics.MENU_RESULTS_SELECTED, setMapChartViewVisibility);
 PubSub.subscribe(eventTopics.MENU_RESULTS_SELECTED, hidePotentialLayers);
+PubSub.subscribe(eventTopics.MENU_RESULTS_SELECTED, showEmpowerplanScenarios);
 PubSub.subscribe(eventTopics.MAP_VIEW_SELECTED, setResultsView);
 PubSub.subscribe(eventTopics.CHART_VIEW_SELECTED, setResultsView);
 
@@ -79,13 +70,6 @@ function getCurrentMenuTab() {
     return document.querySelector("#js-panel-container > .panel__content > .tab-content > .active");
 }
 
-
-function showMapView(msg) {
-    bootstrap.Tab.getInstance(mapTab).show();
-    PubSub.publish(eventTopics.MAP_VIEW_SELECTED);
-    return logMessage(msg);
-}
-
 function setMapChartViewVisibility(msg) {
     const view_toggle = document.getElementsByClassName("view-toggle")[0];
     view_toggle.hidden = msg !== eventTopics.MENU_RESULTS_SELECTED;
@@ -119,3 +103,19 @@ function terminateSimulation(msg) {
     }
     return logMessage(msg);
 }
+
+function showEmpowerplanScenarios(msg) {
+    const map_wrap = document.getElementsByClassName("map-wrap")[0];
+    document.getElementsByClassName("map-wrap")[0].style.alignItems = "center";
+    document.getElementsByClassName("map-wrap")[0].style.padding = "3rem";
+    map_wrap.getElementsByTagName("img")[0].hidden = false;
+    return logMessage(msg);
+}
+
+function hideEmpowerplanScenarios(msg) {
+    const map_wrap = document.getElementsByClassName("map-wrap")[0];
+    document.getElementsByClassName("map-wrap")[0].style.alignItems = null;
+    document.getElementsByClassName("map-wrap")[0].style.padding = "0rem";
+    map_wrap.getElementsByTagName("img")[0].hidden = true;
+    return logMessage(msg);
+}
diff --git a/digiplan/templates/components/map.html b/digiplan/templates/components/map.html
index af154984..bc249430 100644
--- a/digiplan/templates/components/map.html
+++ b/digiplan/templates/components/map.html
@@ -2,7 +2,7 @@
 
 {%  include "components/onboarding.html" %}
 
-<section class="map-wrap" style="display: flex; justify-content: start; align-items: center; padding-top: 3rem;">
-  <img width="862" height="487" src="{% static 'images/sketches/scenarios-main.png' %}" alt="">
+<section class="map-wrap">
+  <img hidden width="862" height="487" src="{% static 'images/sketches/scenarios-main.png' %}" alt="">
+  {% include 'components/toggle_view.html' %}
 </section>
-