Improve UX with import/export

Clarify instructions on login page and give reasons for terms being greyed out in export dialog
Aspine · Apr 21, 2020 · 7ec1869 · 7ec1869
1 parent d0b3d94
commit 7ec1869
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/public/css/home.css b/public/css/home.css
@@ -573,6 +573,11 @@ canvas#large_clock {
   cursor: pointer;
 }
 
+.hastooltip {
+  text-decoration: underline dotted;
+  cursor: help;
+}
+
 #import_modal_title {
   margin-bottom: 1em;
 }

diff --git a/public/home.html b/public/home.html
@@ -135,57 +135,57 @@ <h3 id="export_modal_title">Export Data</h3>
         <li>
           <label for="export_checkbox_recent">
             <input type="checkbox" id="export_checkbox_recent" checked>
-            Recent Activity
+            <span>Recent Activity</span>
           </label>
         </li>
         <li>
           <label for="export_checkbox_schedule">
             <input type="checkbox" id="export_checkbox_schedule" checked>
-            Schedule
+            <span>Schedule</span>
           </label>
         </li>
         <li>
           <label for="export_checkbox_terms">
             <input type="checkbox" id="export_checkbox_terms" checked>
-            Grades
+            <span>Grades</span>
           </label>
           <ul>
             <li>
               <label for="export_checkbox_terms_current">
                 <input type="checkbox" id="export_checkbox_terms_current" checked>
-                Current Quarter
+                <span>Current Quarter</span>
               </label>
             </li>
             <li>
               <label for="export_checkbox_terms_q1">
                 <input type="checkbox" id="export_checkbox_terms_q1">
-                Quarter 1
+                <span>Quarter 1</span>
               </label>
             </li>
             <li>
               <label for="export_checkbox_terms_q2">
                 <input type="checkbox" id="export_checkbox_terms_q2">
-                Quarter 2
+                <span>Quarter 2</span>
               </label>
             </li>
             <li>
               <label for="export_checkbox_terms_q3">
                 <input type="checkbox" id="export_checkbox_terms_q3">
-                Quarter 3
+                <span>Quarter 3</span>
               </label>
             </li>
             <li>
               <label for="export_checkbox_terms_q4">
                 <input type="checkbox" id="export_checkbox_terms_q4">
-                Quarter 4
+                <span>Quarter 4</span>
               </label>
             </li>
           </ul>
         </li>
         <li>
           <label for="export_checkbox_cumGPA">
             <input type="checkbox" id="export_checkbox_cumGPA" checked>
-            Cumulative (year-to-date) GPA
+            <span>Cumulative (year-to-date) GPA</span>
           </label>
         </li>
       </ul>

diff --git a/public/js/home.js b/public/js/home.js
@@ -570,25 +570,37 @@ let classesTable = new Tabulator("#classesTable", {
                 termConverter.forEach(term => {
                     // Boolean storing whether or not this term is 'accessible'
                     let accessible = true;
+                    // Reason for term being inaccessible
+                    let reason = "";
                     // If no GPA is available for the term, it is inaccessible
                     // (the term was not included in Aspen's overview)
                     if (!currentTableData.terms[term].GPA.percent) {
                         accessible = false;
+                        reason = "This term is not available on Aspen.";
                     }
                     // If currentTableData is imported, we cannot scrape Aspen
                     // for more data, so any terms not included in the import
                     // are inaccessible
                     if (
                         currentTableData.imported &&
                         !currentTableData.terms[term].classes
-                    ) accessible = false;
+                    ) {
+                        accessible = false;
+                        reason = "This term is not included in the imported data.";
+                    }
 
                     // Disable the checkboxes
                     if (accessible) {
                         $(`#export_checkbox_terms_${term}`).removeAttr("disabled");
+                        $(`#export_checkbox_terms_${term} ~ span`)
+                            .removeAttr("title")
+                            .removeClass("hastooltip");
                     }
                     else {
-                        $(`#export_checkbox_terms_${term}`).attr("disabled", true);
+                        $(`#export_checkbox_terms_${term}`) .attr("disabled", true);
+                        $(`#export_checkbox_terms_${term} ~ span`)
+                            .attr("title", reason)
+                            .addClass("hastooltip");
                     }
                 });
                 exportModal.style.display = "inline-block";

diff --git a/public/login.html b/public/login.html
@@ -55,7 +55,7 @@
             </span>
             <div class="text-center p-t-12">
               <span class="txt1" style="color:#595959">
-                Use Aspen Credentials or leave blank
+                Use Aspen credentials or leave blank to import data
               </span>
             </div>