Add notifications (and deleting of answers)

css/main.css

@@ -740,12 +740,16 @@ select option:disabled {
     padding-top:  0.8rem;
 }
 
-#localFileloader {
+#options-panel {
     padding: 20px;
 }
 
+#localFileloader {
+    padding-bottom: 20px;
+}
+
 #packet-list {
-    padding: 20px;
+    padding-top: 20px;
 }
 
 .packet-button {

index.html

@@ -68,6 +68,10 @@
                         </fieldset>
                     </form>
                 </div>
+                <div id="database-buttons">
+                    <input type='button' id='btn-delete-databases' value='Delete all saved answers'>
+                    <input type='button' id='btn-delete-current' value='Reset current packet answers'>
+                </div>
                 <div id="packet-list">
                     <p>Available Packets:</p>
                 </div>
@@ -111,6 +115,7 @@
     </div>
 
     <script src="lib/jquery-3.4.1.min.js" type="text/javascript"></script>
+    <script src="lib/notify.min.js" type="text/javascript"></script>
     <script src="lib/hammer.js"></script>
     <script src="lib/cornerstone.js"></script>
     <script src="lib/dicomParser.min.js"></script>

js/main.js

@@ -145,8 +145,8 @@ cornerstoneTools.init();
 // Set up database
 const db = new Dexie("answers_database");
 db.version(1).stores({
-  answers: "[cid+eid+qid+qidn], [cid+eid], ans",
+  answers: "[cid+eid+qid+qidn], [cid+eid], qid, ans",
-  flags: "[cid+eid+qid+qidn], [cid+eid]",
+  flags: "[cid+eid+qid+qidn], [cid+eid], qid",
   user_answers: "qid, ans",
 });
 
@@ -1636,6 +1636,43 @@ $("#start-exam-button").click(function (evt) {
   $.modal.close();
 });
 
+$("#btn-delete-databases").click(function (evt) {
+  var r = confirm("This will delete ALL saved answers!");
+  if (r == true) {
+    db.delete()
+      .then(() => {
+        $.notify("Database successfully deleted", "success");
+        $.notify("The page will now reload", "warn");
+        setTimeout(() => {location.reload();}, 2000);
+        console.log("Database successfully deleted");
+      })
+      .catch((err) => {
+        $.notify("Error deleting databases", "error");
+        console.error("Could not delete database");
+      })
+      .finally(() => {
+        // Do what should be done next...
+      });
+  } else {
+  }
+});
+
+$("#btn-delete-current").click(function (evt) {
+db.answers
+    .where("qid").anyOf(window.question_order)
+    .delete()
+    .then(function (deleteCount) {
+        $.notify("Packet successfully reset", "success");
+        $.notify("The page will now reload", "warn");
+        setTimeout(() => {location.reload();}, 2000);
+        console.log( "Deleted " + deleteCount + " objects");
+    }).catch((err) => {
+        $.notify("Error reseting packet", "error");
+        console.error("Could not answers");
+      });
+
+});
+
 $(document).ajaxStart(function () {
   $("#loading").show();
 });