Merge pull request #119 from Aspine/json

Client-side JSON import/export
Aspine · May 3, 2020 · 01c6fde · 01c6fde
2 parents 70fe65b + 387d429
commit 01c6fde
Show file tree

Hide file tree

Showing 12 changed files with 1,169 additions and 456 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ node_modules/
 db/*.rdb
 usage_log.txt
 .DS_Store
+dist-lite/
diff --git a/build-lite.sh b/build-lite.sh
@@ -0,0 +1,67 @@
+#!/bin/bash
+# Build script for a "lite" (purely client-side) version of Aspine
+
+# Note: This script has only been tested with Bash in a GNU environment
+# (on Linux); your mileage may vary on BSD, macOS, Cygwin/MSYS (Windows), etc.
+
+rm -rf dist-lite/
+mkdir -p dist-lite/
+
+cp -r public/* dist-lite/
+
+mappings="$(
+grep -A100 'new Map' serve.js \
+| grep -A3 '^    \[' \
+| grep -Ev '\[|\]' \
+| sed 's/        '\''//' \
+| sed 's/'\'',*//'
+)"
+# Find the line in serve.js containing 'new Map' and get the next 100 lines
+# Limit the search to lines that contain '    [' and the next three lines
+# Remove lines with brackets
+# Remove leading whitespace and single quote character
+# Remove trailing single quote character and comma (if any)
+
+echo $mappings | \
+while read -d ' ' endpoint
+do
+    read -d ' ' path
+
+    mkdir -p "$(dirname dist-lite$endpoint)"
+    # Create the parent directory
+    cp ".$path" "dist-lite$endpoint"
+    # Copy the node module to dist-lite
+done
+# https://stackoverflow.com/a/21256704
+
+cp -r ./node_modules/@fortawesome/fontawesome-free/webfonts/ \
+dist-lite/fonts/fontawesome/webfonts
+# Copy Font Awesome files
+
+rm dist-lite/login.html
+# Remove login page
+
+perl -0777 -pi -e 's[<!--#ifdef lite>\n((.|\n)*?)\n<#endif-->][\1]g' \
+dist-lite/home.html
+
+perl -0777 -pi -e 's[<!--#ifndef lite-->\n((.|\n)*?)\n<!--#endif-->][]g' \
+dist-lite/home.html
+
+perl -0777 -pi -e 's[//#ifdef lite\n/\*\n((.|\n)*?)\n\*/\n//#endif][\1]g' \
+dist-lite/js/*.js
+
+perl -0777 -pi -e 's[//#ifndef lite\n((.|\n)*?)\n//#endif][]g' \
+dist-lite/js/*.js
+
+# Preprocess HTML and JS files to make lite-specific changes as needed
+# https://stackoverflow.com/a/1103177
+# https://stackoverflow.com/a/5869735
+
+sed -i -e '/#include dist-lite\/schedule.json/r dist-lite/schedule.json' \
+dist-lite/js/clock.js
+# Include contents of schedule.json
+# https://unix.stackexchange.com/a/32912
+
+version="$(git describe | sed 's/^v\?\(.*\)/\1/')"
+sed -i 's/\/\/#include $version/"'$version'"/g' dist-lite/js/*
+# Hard-code version number (use sed to trim 'v')
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
   "main": "serve.js",
   "repository": "github:Aspine/aspine",
   "scripts": {
-    "start": "node serve.js"
+    "start": "node serve.js",
+    "build-lite": "bash build-lite.sh"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
@@ -28,6 +29,7 @@
     "compression": "^1.7.4",
     "express": "^4.16.4",
     "express-session": "^1.17.1",
+    "file-saver": "^2.0.2",
     "hamburgers": "^1.1.3",
     "jquery": "^3.5.0",
     "minimist": "^1.2.5",

diff --git a/public/css/home.css b/public/css/home.css
@@ -258,6 +258,14 @@ button {
   font-family: Arial, Helvetica, sans-serif !important;
 }
 
+.inaccessible {
+  color: #666 !important;
+  background-color: #ccc;
+}
+
+.inaccessible:hover {
+  background-color: #ccc !important;
+}
 
 .tab .tablinks-right {
   float: right;
@@ -353,16 +361,7 @@ i.fa.fa-info-circle {
   cursor: default;
 }
 
-i.fa.fa-eye-slash {
-  color: #00551C;
-  padding-left: 38%;
-  padding-top: 11%;
-  font-size: large;
-  cursor: pointer;
-
-}
-
-i.fa.fa-sync-alt {
+.header-icon {
   color: #00551C;
   padding-left: 38%;
   padding-top: 11%;
@@ -422,7 +421,7 @@ canvas#large_clock {
   position: relative;
   background-color: #fefefe;
   margin: auto;
-  padding: 0;
+  padding: 20px;
   border: 1px solid #888;
   width: 80%;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
@@ -446,7 +445,7 @@ canvas#large_clock {
 /* The Close Button */
 
 .close {
-  color: white;
+  color: black;
   float: right;
   font-size: 28px;
   font-weight: bold;
@@ -469,13 +468,7 @@ canvas#large_clock {
   padding: 2px 16px;
 }
 
-#stats_modal_close {
-  display: inline-block;
-  color: black;
-}
-
 #stats_modal_content {
-  padding: 20px;
   margin: auto !important;
   top: 40px;
   -webkit-animation-name: statsanimatetop !important;
@@ -570,6 +563,54 @@ canvas#large_clock {
   to {top:140px; opacity:1}
 }
 
+#export_modal_content, #import_modal_content {
+  width: 25em;
+  text-align: left;
+}
+
+#export_modal_content ul {
+  margin-left: 1em;
+}
+
+#export_modal_content label {
+  display: inline-block;
+}
+
+#export_button, #import_button {
+  padding: 14px 16px;
+  cursor: pointer;
+}
+
+.hastooltip {
+  border-bottom: 1px dotted black;
+}
+
+.hastooltip::before {
+  display: block;
+  content: attr(aria-label);
+  width: 15rem;
+  background-color: #000;
+  color: #fff;
+  font-size: 0.8rem;
+  border-radius: 5px;
+  padding: 1em;
+  position: absolute;
+  visibility: hidden;
+}
+
+.select-items .hastooltip::before {
+  margin-top: 2em;
+  right: 0;
+}
+
+.hastooltip:focus::before, .hastooltip:hover::before {
+  visibility: visible;
+}
+
+#import_modal_title {
+  margin-bottom: 1em;
+}
+
 
 p#small_clock_period {
 
@@ -943,7 +984,7 @@ p#add-calendar-error {
 }
 
 .select-items div:hover, .same-as-selected {
-  background-color: #ddd;
+  background-color: #f9f9f9;
 }
 
 
diff --git a/public/home.html b/public/home.html
@@ -32,6 +32,7 @@
   <script src="vendor/plotly.js/plotly.js"></script>
   <script src="vendor/jquery/jquery.min.js"></script>
   <script src="vendor/pdf.js/pdf.min.js"></script>
+  <script src="vendor/file-saver/FileSaver.min.js" async="true"></script>
 </head>
 <body>
   <noscript>
@@ -61,9 +62,11 @@ <h4 id="title">Aspine</h4>
     <button class="tablinks" onclick="openTab(event, 'schedule')">Schedule</button>
     <button class="tablinks" onclick="openTab(event, 'clock')">Clock</button>
     <!--<button class="tablinks" onclick="openTab(event, 'calendar-tab')">Calendar</button>-->
-    <button class="tablinks" onclick="openTab(event, 'reports')">Reports</button>
+    <button class="tablinks" onclick="openTab(event, 'reports')" id="reports_open">Reports</button>
+<!--#ifndef lite-->
     <button class="tablinks tablinks-right" onclick="location.href='/logout'">Logout</button>
-    <div class="GPA custom-select" style="width:270px;">
+<!--#endif-->
+    <div class="GPA gpa_custom-select custom-select" style="width:270px;">
       <select id="gpa_select">
         <option id="init_gpa" value="0">Current Quarter GPA: </option>
         <option id="current_gpa" value="0">Current Quarter GPA: </option>
@@ -75,6 +78,13 @@ <h4 id="title">Aspine</h4>
       </select>
     </div>
     <button class="tablinks tablinks-right" onclick="GPAType();">GPA Type</button>
+    <div class="GPA tableData_custom-select custom-select" style="width:270px;">
+      <select id="tableData_select">
+        <option value="0">Current Year</option>
+        <option value="0">Current Year</option>
+        <option value="import">Import Data...</option>
+      </select>
+    </div>
   </div>
 
   <!--
@@ -93,7 +103,7 @@ <h1 style="top: 25%; position: relative;"> Loading! </h1>
   <div id="stats_modal" class="modal">
     <!-- Modal content -->
     <div id="stats_modal_content" class="modal-content">
-      <span id="stats_modal_close" class="close" onclick="hideModal()">&times;</span>
+      <span class="close" onclick="hideModal('stats')">&times;</span>
       <div id="there_are_no_stats">
         <p id="no_stats_caption">No Statistics information for this assignment.</p>
       </div>
@@ -117,6 +127,86 @@ <h3 id="stats_modal_title">Modal Title..</h3>
       </div>
     </div>        
   </div>
+
+  <div id="export_modal" class="modal" tabindex="0">
+    <!-- Modal content -->
+    <div id="export_modal_content" class="modal-content">
+      <span class="close" onclick="hideModal('export')">&times;</span>
+      <h3 id="export_modal_title">Export Data</h3>
+      <ul>
+        <li>
+          <label for="export_checkbox_recent">
+            <input type="checkbox" id="export_checkbox_recent" checked>
+            <span>Recent Activity</span>
+          </label>
+        </li>
+        <li>
+          <label for="export_checkbox_schedule">
+            <input type="checkbox" id="export_checkbox_schedule" checked>
+            <span>Schedule</span>
+          </label>
+        </li>
+        <li>
+          <label for="export_checkbox_terms">
+            <input type="checkbox" id="export_checkbox_terms" checked>
+            <span>Grades</span>
+          </label>
+          <ul>
+            <li>
+              <label for="export_checkbox_terms_current">
+                <input type="checkbox" id="export_checkbox_terms_current" checked>
+                <span>Current Quarter</span>
+              </label>
+            </li>
+            <li>
+              <label for="export_checkbox_terms_q1">
+                <input type="checkbox" id="export_checkbox_terms_q1">
+                <span>Quarter 1</span>
+              </label>
+            </li>
+            <li>
+              <label for="export_checkbox_terms_q2">
+                <input type="checkbox" id="export_checkbox_terms_q2">
+                <span>Quarter 2</span>
+              </label>
+            </li>
+            <li>
+              <label for="export_checkbox_terms_q3">
+                <input type="checkbox" id="export_checkbox_terms_q3">
+                <span>Quarter 3</span>
+              </label>
+            </li>
+            <li>
+              <label for="export_checkbox_terms_q4">
+                <input type="checkbox" id="export_checkbox_terms_q4">
+                <span>Quarter 4</span>
+              </label>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <label for="export_checkbox_cumGPA">
+            <input type="checkbox" id="export_checkbox_cumGPA" checked>
+            <span>Cumulative (year-to-date) GPA</span>
+          </label>
+        </li>
+      </ul>
+      <p>Status: <span id="export_status"></span></p>
+      <button id="export_button">Export</button>
+    </div>        
+  </div>
+
+  <div id="import_modal" class="modal">
+    <!-- Modal content -->
+    <div id="import_modal_content" class="modal-content">
+      <span class="close" onclick="hideModal('import')">&times;</span>
+      <h3 id="import_modal_title">Import Data</h3>
+      <input type="file" id="import_filepicker">
+      <button id="import_button">Import</button>
+      <p id="import_error"></p>
+    </div>        
+  </div>
+
   <div id="grades" class="tabcontent">
     <div id="classesTable"></div>
     <div id="mostRecentDiv" style="display:none">