From af4c2dc08dfbde44839361dca9007b1f34b2d966 Mon Sep 17 00:00:00 2001
From: Dan <icyn3@gmail.com>
Date: Thu, 30 Jul 2020 02:51:01 -0400
Subject: [PATCH] More work on setting up the webpage. There's now an active
 and download button. The reponse should populate the main section of the page
 in a scrolling overflow box. Although it's a long string instead of a nicely
 parsed json file at this point.

---
 static/style.css     | 24 ++++++++++++++++--------
 templates/index.html | 28 ++++++++++++++++++++++------
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/static/style.css b/static/style.css
index 6c68ed7..8eb4bda 100644
--- a/static/style.css
+++ b/static/style.css
@@ -8,8 +8,8 @@
 }
 .grid-container{
     display: grid;
-    grid-template-columns: auto auto auto auto;
-    grid-template-rows: auto auto auto auto;
+    grid-template-columns: min-content auto auto auto;
+    grid-template-rows: auto auto auto;
     grid-gap: 10px;
    // background-color: #2196F3;
     padding: 10px;
@@ -21,12 +21,12 @@
     fonrt-size: 30px;
 }
 .header{
-    grid-column-start: 2;
-    grid-column-end: 4;
+    grid-column-start: 1;
+    grid-column-end: 5;
 }
 .nav{
     grid-column:1;
-    border-style: dotted;
+    //border-style: dotted;
 }
 ul{
     list-style: none;
@@ -35,8 +35,16 @@ ul{
 }
 .main{
     grid-column-start: 2;
-    grid-column-end: 4;
+    grid-column-end: 5;
     grid-row-start: 2;
-    grid-row-end: 4;
-    background-color: rgba(255,255,0,0.9);
+    grid-row-end: 2;
+    //background-color: rgba(255,255,0,0.9);
+    overflow: scroll;
+    height: 200px;
+}
+.footer{
+    grid-column-start: 1;
+    grid-column-end: 5;
+    grid-row: 3;
+    padding-bottom:2px;
 }
diff --git a/templates/index.html b/templates/index.html
index c63c2e0..8d61f66 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,15 +10,31 @@
       <div class="header">Super Awesome Mange Downloading and Viewing Thing</div>
       <div class="nav" align="left">
         <ul>
-          <li><a href="/active"><button class=button>Active</button></a></li>
-          <li><a href="/download"><button class=button>Download</button></a></li>
-          <li><a href="http://google.com"><button class=button>Test</button></a></li>
-          <li><button class=button>asdfl</button></li>
+          <li><button class=button onclick="activeReturn()">Active</button>
+          <li><button class=button onclick="downloadReturn()">Download</button>
+         <!-- <li><a href="http://google.com"><button class=button>google<>/button></a></li>
+          <li><button class=button onclick="clickTest()">asdfl</button></li>-->
         </ul>
       </div>
-      <div class="main">
-        main
+      <div class="main" id="main">
+
+      </div>
+      <div class="footer">
+        bottom stuffs
       </div>
     </div>
 </body>
 </html>
+
+<script>
+  function activeReturn() {
+      fetch('/active')
+          .then(response => response.json())
+          .then(data => document.getElementById("main").innerHTML = JSON.stringify(data));
+  };
+   function downloadReturn() {
+      fetch('/download')
+          .then(response => response.json())
+          .then(data => document.getElementById("main").innerHTML = JSON.stringify(data));
+   };
+</script>