Undo snackbar

.editorconfig

@@ -10,7 +10,7 @@ trim_trailing_whitespace = true
 indent_style = space
 indent_size = 2
 
-[{serve.js,scrape.js,public/js/home.js,public/js/clock.js}]
+[{serve.js,scrape.js,public/js/{home,clock,snackbar}.js}]
 indent_style = space
 indent_size = 4
 

public/css/home.css

@@ -52,6 +52,7 @@ body {
 
   --black: #000000;
   --transparent-black: rgba(0, 0, 0, 0.6);
+  --transparent-black-lite: rgba(0, 0, 0, 0.2);
 
   --blue: #2196F3;
   --blue1: #9ebcea;
@@ -63,6 +64,7 @@ body {
   --orange: #f6b93b;
 
   --red: #ff0000;
+  --red1: #a70000;
 
   --schedule1: #63c082;
   --schedule2: #72c68e;
@@ -105,6 +107,7 @@ body.dark {
   --orange: #f6b93b;
 
   --red: #ff0000;
+  --red1: #ff8585;
 
   --schedule1: #00290e;
   --schedule2: #003d14;
@@ -1340,3 +1343,75 @@ hr {
 #more-versions a {
   font-size: 120%;
 }
+
+.snackbar {
+  display: flex;
+  height: 44px;
+  width: auto;
+  max-width: calc(100% - 30px);
+  background-color: var(--gray);
+  position: fixed;
+  left: 0;
+  bottom: 10px;
+  margin: 0px 15px;
+  box-shadow: 2px 2px 5px var(--transparent-black);
+
+  transform: translateY(0px);
+  transition: transform 250ms;
+}
+
+.snackbar.hidden {
+  transform: translateY(54px);
+  transition: transform 250ms;
+}
+
+.snackbar button {
+  height: 32px;
+  margin: 6px 6px 6px 3px;
+  position: relative;
+  border: none;
+  background-color: var(--gray);
+  cursor: pointer;
+  white-space: nowrap;
+  order: 2;
+}
+
+.snackbar button::before {
+  content: '';
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color:var(--transparent-black-lite);
+  z-index: 1;
+  opacity: 0;
+
+  transition: opacity 100ms ease-in;
+}
+
+.snackbar button:hover::before {
+  opacity: 1;
+}
+
+.snackbar button:focus {
+  outline: none;
+}
+
+.snackbar span {
+  width: auto;
+  vertical-align: middle;
+  line-height: 44px;
+  padding: 0px 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  order: 1;
+}
+
+.snackbar button span {
+  line-height: 32px;
+  font-weight: normal;
+  font-size: 16px;
+  font-family: 'Poppins-Regular';
+}

public/home.html

@@ -32,6 +32,7 @@
   <script src="js/calculate_grade.js" defer></script>
   <script src="js/home.js" defer></script>
   <script src="js/app.js" defer></script>
+  <script src="js/snackbar.js" defer></script>
   <script src="vendor/pdf.js/pdf.min.js" defer></script>
   <script src="vendor/file-saver/FileSaver.min.js" defer></script>
   <script src="vendor/d3/d3-array.min.js" defer></script>

public/js/buttonFunctions.js

@@ -1,24 +1,46 @@
 let newAssignment = function() {
-
   currentTableData.currentTermData.classes[selected_class_i].edited = true;
 
   if (!isNaN(selected_class_i)) {
-
-    currentTableData.currentTermData.classes[selected_class_i].assignments.unshift({
-      "name": "Assignment",
-      "category": Object.keys(currentTableData.currentTermData.classes[selected_class_i].categories)[currentFilterRow >= 0 ? currentFilterRow : 0],
-      "score": 10,
-      "max_score": 10,
-      "percentage": 100,
-      "color": "green",
-      "synthetic": "true",
-    });
+    currentTableData.currentTermData.classes[selected_class_i].assignments
+      .unshift({
+        "assignment_id": newAssignmentIDCounter.toString(),
+        "name": "Assignment",
+        "category": Object.keys(
+          currentTableData.currentTermData.classes[selected_class_i].categories
+        )[currentFilterRow >= 0 ? currentFilterRow : 0],
+        "score": 10,
+        "max_score": 10,
+        "percentage": 100,
+        "color": "green",
+        "synthetic": "true",
+      });
+    newAssignmentIDCounter++;
 
     updateGradePage();
-
   }
 }
 
+function replaceAssignmentFromID(oldData, newData, classID) {
+  const assignments = currentTableData.currentTermData.classes[classID]
+    .assignments;
+
+  const index = assignments.findIndex(({ assignment_id }) =>
+    assignment_id === oldData.assignment_id
+  );
+  assignments[index] = newData;
+  updateGradePage();
+}
+
+function removeAssignmentFromID(id, classID) {
+  const assignments = currentTableData.currentTermData.classes[classID]
+    .assignments;
+  const newArray = assignments.filter(({ assignment_id }) =>
+    assignment_id !== id
+  );
+  assignments.length = 0;
+  assignments.push(...newArray);
+}
 
 let editAssignment = function(data) {
 
@@ -128,7 +150,10 @@ let updateGradePage = function() {
   classesTable.replaceData(currentTableData.currentTermData.classes);
   categoriesTable.setData(currentTableData.currentTermData.classes[selected_class_i].categoryDisplay);
 
-  assignmentsTable.replaceData(currentTableData.currentTermData.classes[selected_class_i].assignments);
+  assignmentsTable.replaceData(currentTableData.currentTermData
+    .classes[selected_class_i].assignments
+    .filter(({ placeholder }) => !placeholder)
+  );
 
   currentTableData.currentTermData.calcGPA = computeGPA(currentTableData.currentTermData.classes);
   currentTableData.terms[currentTerm].calcGPA = computeGPA(currentTableData.currentTermData.classes);
@@ -281,6 +306,8 @@ let updateGradePage = function() {
     $(".gpa_select-selected").html("Quarter GPA: " + GPA.percent);
     $("#" + currentTerm).html("Quarter GPA: " + GPA.percent);
   }
+
+  setup_tooltips();
 }
 
 let exportTableData = async function(prefs) {

public/js/home.js

@@ -36,6 +36,30 @@ let currentTableData = tableData[currentTableDataIndex];
 let selected_class_i;
 let termsReset = {};
 
+// Counter for creating new assignments
+var newAssignmentIDCounter = 0;
+
+// Registry for undos, contains assignment ID and the snackbar that corresponds to it
+// contains all the undo snackbars
+const undoData = []
+
+window.addEventListener("keydown", e => {
+    var evtobj = window.event || e
+    if (evtobj.keyCode == 90 && evtobj.ctrlKey && undoData.length !== 0) {
+		if (undoData[0].Snackbar !== undefined) {
+			undoData[0].Snackbar.destroy();
+			undoData[0].Snackbar = undefined;
+		}
+        replaceAssignmentFromID(
+            { assignment_id: undoData[0].assignment_id, placeholder: true },
+            undoData[0],
+            undoData[0].selected_class_i
+        );
+		undoData.shift();
+    }
+});
+
+
 let tempCell;
 // When the user clicks anywhere outside of a modal or dropdown, close it
 window.addEventListener("click", function(event) {
@@ -366,7 +390,9 @@ let assignmentsTable = new Tabulator("#assignmentsTable", {
                 isNaN(cell.getRow().getData().score)
                 || currentTableData.currentTermData
                     .classes[selected_class_i]
-                    .assignments[cell.getRow().getPosition()].synthetic
+                    .assignments.filter(value =>
+                        !value["placeholder"]
+                    )[cell.getRow().getPosition()].synthetic
             ) ? "" : '<i class="fa fa-info standard-icon tooltip" aria-hidden="true" tooltip="Statistics"></i>',
             width: 40,
             align: "center",
@@ -581,7 +607,53 @@ let assignmentsTable = new Tabulator("#assignmentsTable", {
             width: 40,
             align: "center",
             cellClick: function(e, cell) {
-                cell.getRow().delete();
+                const data = cell.getRow().getData();
+                replaceAssignmentFromID(data, {assignment_id: data["assignment_id"], placeholder: true}, selected_class_i);
+
+                const undoSnackbar = new Snackbar(
+                    `You deleted ${data["name"]}`, {
+                        color: "var(--red1)",
+                        textColor: "var(--white)",
+                        buttonText: "Undo",
+
+                        // Replace the assignment with a placeholder that just
+                        // contains the assignment ID
+                        buttonClick: () => {
+                            // Get index for splicing and comparing
+                            index = undoData.findIndex(a =>
+                                a.assignment_id === data.assignment_id);
+                            arrData = undoData[index];
+                            // Remove snackbar before putting data back
+                            arrData.Snackbar = undefined;
+                            replaceAssignmentFromID({
+                                assignment_id: arrData.assignment_id,
+                                placeholder: true,
+                            }, arrData, arrData.selected_class_i);
+                            undoData.splice(index, 1);
+                        },
+                        timeout: 7500,
+
+                        // On either a timeout or a bodyclick removes the
+                        // snackbar link
+                        timeoutFunction: () => {
+                            undoData[
+                                undoData.map(arrData => arrData.assignment_id)
+                                .indexOf(data.assignment_id)
+                            ].Snackbar = undefined;
+                        },
+
+                        bodyClick: () => {
+                            undoData[
+                                undoData.map(arrData => arrData.assignment_id)
+                                .indexOf(data.assignment_id)
+                            ].Snackbar = undefined;
+                        },
+                    }
+                ).show();
+
+                data.Snackbar = undoSnackbar;
+                data.selected_class_i = selected_class_i;
+                undoData.unshift(data);
             },
             headerSort: false,
             cssClass: "icon-col allow-overflow"