From b157e903bab3ef76454c6a79de1885b03ae05fef Mon Sep 17 00:00:00 2001
From: jonasled <git@jonasled.de>
Date: Fri, 5 Mar 2021 19:07:35 +0100
Subject: [PATCH] collapse NTP graphs on page call

---
 scss/_ntp.scss     | 24 ++++++++++++++++++++++++
 ts/jl-ntp-graph.ts |  7 +++++--
 ts/ntpMenu.ts      | 14 ++++++++++++++
 3 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 ts/ntpMenu.ts

diff --git a/scss/_ntp.scss b/scss/_ntp.scss
index 65f2189..abe38b9 100644
--- a/scss/_ntp.scss
+++ b/scss/_ntp.scss
@@ -1,3 +1,27 @@
 .js-plotly-plot {
     margin-bottom: 10px;
+}
+
+.js-plotly-plot .plotly .user-select-none {
+    width: 100% !important;
+    overflow: hidden;
+}
+
+.ntpBanner{
+    margin-top: 10px;
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: $back-color-3;
+}
+
+.ntpContent{
+    padding: 20px;
+    display: none;
+    background-color: $back-color-3;
+    transition: max-height 0.2s ease-out;
+}
+
+.visible {
+    display: block;
 }
\ No newline at end of file
diff --git a/ts/jl-ntp-graph.ts b/ts/jl-ntp-graph.ts
index b513514..cee33a2 100644
--- a/ts/jl-ntp-graph.ts
+++ b/ts/jl-ntp-graph.ts
@@ -18,8 +18,11 @@ graphElements.forEach((elememt) => {
     let ip:string = <string> elememt.getAttribute("data-server-ip");
 
     elememt.innerHTML = `
-    <div id="${graphIndexCounter}-Delay"></div>
-    <div id="${graphIndexCounter}-Score"></div>
+    <span id="${graphIndexCounter}-Banner" data-index="${graphIndexCounter}" class="ntpBanner">${ip}</span>
+    <span id="${graphIndexCounter}-Content" class="ntpContent">
+        <div id="${graphIndexCounter}-Delay"></div>
+        <div id="${graphIndexCounter}-Score"></div>
+    </span>
     `;
     let currentIndex = graphIndexCounter;
     graphIndexCounter++;
diff --git a/ts/ntpMenu.ts b/ts/ntpMenu.ts
new file mode 100644
index 0000000..81707bf
--- /dev/null
+++ b/ts/ntpMenu.ts
@@ -0,0 +1,14 @@
+let ntpNav = document.querySelectorAll(".ntpBanner");
+
+ntpNav.forEach((element) => {
+    (<HTMLElement>element).onclick = function (){
+        let contentID = element.getAttribute("data-index") + "-Content";
+        let contentElement = <HTMLElement> document.getElementById(contentID);
+
+        if(contentElement.classList.contains("visible")){
+            contentElement.classList.remove("visible");
+        } else {
+            contentElement.classList.add("visible");
+        }
+    }
+});
\ No newline at end of file