From b44b2be53669b4459a281ad2e7ae19781a4b7f24 Mon Sep 17 00:00:00 2001
From: Max Stevenson <maxstevenson@msn.com>
Date: Sun, 5 Jul 2020 10:22:59 +0100
Subject: [PATCH] Progress on bottom console output display.

---
 index.html            | 26 +++++++++++++++++++-------
 public/scripts/app.js | 22 +++++++++++++++++++++-
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index da92410..9af6440 100644
--- a/index.html
+++ b/index.html
@@ -512,15 +512,9 @@
                       <div class="inner-edge__light">
                         <div class="outer-edge__console">
                           <div class="inner-edge__console">
-                            <div
-                              class="output-display__wrapper output-display__hidden"
-                              id="output-display__glitches"
-                            >
-                            <h2>Glitches</h2>
-                          </div>
                             <div
                               class="output-display__wrapper"
-                              id="output-display__system"
+                              id="output-display__glitches"
                             >
                               <div class="output-display-content__wrapper">
                                 <p class="output-display-content__status">
@@ -571,6 +565,24 @@
                                 </p>
                               </div>
                             </div>
+                            <div
+                              class="output-display__wrapper output-display__hidden"
+                              id="output-display__maps"
+                            >
+                            <h2>Maps</h2>
+                            </div>
+                            <div
+                              class="output-display__wrapper output-display__hidden"
+                              id="output-display__system"
+                            >
+                            <h2>System</h2>
+                            </div>
+                            <div
+                              class="output-display__wrapper output-display__hidden"
+                              id="output-display__emerg"
+                            >
+                            <h2>Emerg.</h2>
+                            </div>
                           </div>
                         </div>
                       </div>
diff --git a/public/scripts/app.js b/public/scripts/app.js
index dc6a0f4..a699f74 100644
--- a/public/scripts/app.js
+++ b/public/scripts/app.js
@@ -251,7 +251,27 @@ const resetCircuitBreakers = () => {
 // Change Bottom Video Screen
 const changeBottomScreenContent = event => {
   let selectedTab = event.currentTarget.lastElementChild.firstElementChild.innerHTML.toLowerCase();
-  console.log(selectedTab);
+
+  const mainDisplayElements = document.getElementsByClassName("main-display");
+  const tabContentElements = document.getElementsByClassName(
+    "ouput-display__wrapper"
+  );
+
+  for (let i = 0; i < tabContentElements.length; i++) {
+    if (tabContentElements[i].id === `video-screen__${selectedTab}`) {
+      tabContentElements[i].style.display = "flex";
+    } else {
+      tabContentElements[i].style.display = "none";
+    }
+  }
+
+  for (let i = 0; i < mainDisplayElements.length; i++) {
+    if (mainDisplayElements[i].id === `${selectedTab}-display__inner`) {
+      mainDisplayElements[i].style.display = "flex";
+    } else {
+      mainDisplayElements[i].style.display = "none";
+    }
+  }
 };
 ////////////////////////