From cc976820fc0ea8b4e225b72053e00e63a4f1ee6c Mon Sep 17 00:00:00 2001
From: Julia Shaw <juliashaw@Julias-MacBook-Pro-2.local>
Date: Sat, 13 May 2023 17:20:39 -0400
Subject: [PATCH] added text to export data and reset buttons

---
 public/css/home.css          | 23 +++++++++---------
 public/home.html             | 22 +++++++++--------
 public/js/buttonFunctions.js | 22 +++++++++++++++++
 public/js/home.js            | 47 ------------------------------------
 4 files changed, 46 insertions(+), 68 deletions(-)

diff --git a/public/css/home.css b/public/css/home.css
index 5c37f227..36b22647 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -296,9 +296,9 @@ button {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 14px;
-  border: 1px solid var(--black);
-  border-radius: 2px;
-  background-color: var(--white2);
+  background-color: var(--white);
+  color: var(--black);
+  border: 0px;
 }
 
 button:hover {
@@ -633,20 +633,21 @@ i.fa.fa-toolbox {
 
 .header-icon {
   color: var(--green2);
-  padding-top: 8.5px;
+  padding-left: 5px;
   font-size: large;
   cursor: pointer;
 }
 
-#buttonsTable .tabulator-tableHolder{
-  position: absolute;
-	left: -10000000000000000000000000px;
-}
-
-#buttonsTable .tabulator-headers{
-  display: flex;
+#gradesButtons{
+  height:35px;
+  display:flex;
   justify-content: flex-end;
+  vertical-align:middle;
+  background-color: var(--white);
+}
 
+#gradesButtons button {
+  height:35px;
 }
 
 #classesTable .tabulator-col,
diff --git a/public/home.html b/public/home.html
index 7805ede5..26199f32 100644
--- a/public/home.html
+++ b/public/home.html
@@ -121,15 +121,6 @@ <h4 id="title" onclick="openTab('grades')">Aspine</h4>
     </div>
   </div>
 
-  <!--
-  <div id="loader" class="modal" style="background-color: rgba(0,0,0,0.0); padding-top: 300px; display: inline-block;">
-    <div id="loader_modal_content" class="model-content" style=" width: 500px; height: 150px; margin: auto;">
-      <div id="loader_modal_content" class="model-content" style=" width: 500px; height: 150px; margin: auto;border: 2px solid black;background-color: white;">
-        <h1 style="top: 25%; position: relative;"> Loading! </h1>
-      </div>
-    </div>
-  </div>
-  -->
   <div id="loader">
     <div class="loader"></div>
   </div>
@@ -214,7 +205,18 @@ <h3 id="import_modal_title">Import Data</h3>
   </div>
 
   <div id="grades" class="tabcontent">
-    <div id="buttonsTable"></div>
+
+    <div id="gradesButtons">
+        <button onclick="exportData();">
+          <text>Export Data</text>
+          <i class="fa fa-file-download header-icon tooltip" aria-hidden="true" tooltip="Export Grades"></i>
+        </button>
+        <button onclick="resetTableData();">
+          <text>Reset</text>
+          <i class="fa fa-sync-alt header-icon tooltip" aria-hidden="true" tooltip="Reset"></i>
+        </button>
+    </div>
+
     <div id="classesTable"></div>
     <div id="mostRecentDiv" style="display:none">
       <!-- hide most recent activity; removed from aspen -->
diff --git a/public/js/buttonFunctions.js b/public/js/buttonFunctions.js
index 8eda5b58..bde8d22f 100755
--- a/public/js/buttonFunctions.js
+++ b/public/js/buttonFunctions.js
@@ -507,3 +507,25 @@ let importTableData = async function(obj) {
 
   $(`#tableData_select-items-${currentTableDataIndex}`).click();
 };
+
+let exportData = function(){
+  // Disable checkboxes for inaccessible terms
+  termConverter.forEach(term => {
+      let isAccessibleObj = isAccessible(term);
+
+      if (isAccessibleObj.accessible) {
+          $(`#export_checkbox_terms_${term}`).removeAttr("disabled");
+          $(`#export_checkbox_terms_${term} ~ span`)
+              .removeAttr("aria-label")
+              .removeAttr("tabindex")
+              .removeClass("hastooltip");
+      } else {
+          $(`#export_checkbox_terms_${term}`).attr("disabled", true);
+          $(`#export_checkbox_terms_${term} ~ span`)
+              .attr("aria-label", isAccessibleObj.reason)
+              .attr("tabindex", 0)
+              .addClass("hastooltip");
+      }
+  });
+  exportModal.style.display = "inline-block";
+} 
\ No newline at end of file
diff --git a/public/js/home.js b/public/js/home.js
index 30da2d6f..45409891 100644
--- a/public/js/home.js
+++ b/public/js/home.js
@@ -758,53 +758,6 @@ let scheduleTable = new Tabulator("#scheduleTable", {
     ],
 });
 
-let buttonsTable = new Tabulator("#buttonsTable", {
-    //height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
-    index: "name",
-    selectable: 1,
-    headerHozAlign:"right",
-    layout: "fitColumns", //fit columns to width of table (optional)
-    columns: [ // Define Table Columns
-        {
-            title: "Export Table Data",
-            titleFormatter: () => '<i class="fa fa-file-download header-icon tooltip" aria-hidden="true" tooltip="Export Grades"></i>',
-            headerClick: async () => {
-                // Disable checkboxes for inaccessible terms
-                termConverter.forEach(term => {
-                    let isAccessibleObj = isAccessible(term);
-
-                    if (isAccessibleObj.accessible) {
-                        $(`#export_checkbox_terms_${term}`).removeAttr("disabled");
-                        $(`#export_checkbox_terms_${term} ~ span`)
-                            .removeAttr("aria-label")
-                            .removeAttr("tabindex")
-                            .removeClass("hastooltip");
-                    } else {
-                        $(`#export_checkbox_terms_${term}`).attr("disabled", true);
-                        $(`#export_checkbox_terms_${term} ~ span`)
-                            .attr("aria-label", isAccessibleObj.reason)
-                            .attr("tabindex", 0)
-                            .addClass("hastooltip");
-                    }
-                });
-                exportModal.style.display = "inline-block";
-            },
-            width: 76,
-            headerSort: false,
-            cssClass: "icon-col"
-        },
-        {
-            title: "Reset Table Data",
-            titleFormatter: () => '<i class="fa fa-sync-alt header-icon tooltip" aria-hidden="true" tooltip="Reset"></i>',
-            headerClick: resetTableData,
-            width: 76,
-            headerSort: false,
-            cssClass: "icon-col"
-        },
-    ],
-            }
-);
-
 let classesTable = new Tabulator("#classesTable", {
     //height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
     index: "name",