Make the modal modular

4 files changed, 31 insertions, 38 deletions

diff --git a/app/templates/_partials/modals.html b/app/templates/_partials/modals.html
index 1ffd85f..834d4fe 100644
--- a/app/templates/_partials/modals.html
+++ b/app/templates/_partials/modals.html
@@ -1,4 +1,4 @@
-{% macro modal(id, title, message) %}
+{% macro info(id, title, message) %}
 <!-- Modal -->
 <div class="modal fade" id="{{ id }}Modal" tabindex="-1" role="dialog" aria-labelledby="{{ id }}ModalTitle" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
@@ -10,7 +10,7 @@
         </button>
       </div>
       <div class="modal-body">
-        {{ message }}
+        {{ message | safe }}
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
@@ -19,3 +19,22 @@
   </div>
 </div>
 {% endmacro %}
+
+{% macro confirm(id, title, message) %}
+<div class="modal fade" id="{{ id }}Modal" tabindex="-1" role="dialog" aria-labelledby="{{ id }}ModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="{{ id }}ModalTitle">{{ title }}</h5>
+      </div>
+      <div class="modal-body">
+        {{ message | safe }}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-success success" id="modal-confirm">Confirm</button>
+      </div>
+    </div>
+  </div>
+</div>
+{% endmacro %}
diff --git a/app/templates/admin/manage_datasets.html b/app/templates/admin/manage_datasets.html
index c7df06e..7de6592 100644
--- a/app/templates/admin/manage_datasets.html
+++ b/app/templates/admin/manage_datasets.html
@@ -1,4 +1,6 @@
 {% extends "base.html" %}
+{% import "_partials/modals.html" as modals %}
+
 {% block styles %}
 {{ super() }}
 <link rel="stylesheet" href="{{ bootstrap_find_resource('css/jquery.dataTables.css', cdn='datatables', use_minified=True) }}">
@@ -21,23 +23,8 @@
     </div>
 </div>
 
-<!-- Modal -->
-<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-	<h5 class="modal-title" id="deleteModalLabel">Delete Dataset</h5>
-      </div>
-      <div class="modal-body">
-	You are about to delete the dataset <span id="dataset-name"></span> <b>and</b> all associated tasks and annotations. Are you sure?
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-success success" id="modal-confirm">Confirm</button>
-      </div>
-    </div>
-  </div>
-</div>
+{{ modals.confirm("delete", "Delete Dataset", "You are about to delete the 
+dataset <b>and</b> all associated tasks and annotations. Are you sure?") }}
 
 <br>
 <h1>Task Completion Overview</h1>
diff --git a/app/templates/admin/manage_users.html b/app/templates/admin/manage_users.html
index 0e365d4..6e3b51a 100644
--- a/app/templates/admin/manage_users.html
+++ b/app/templates/admin/manage_users.html
@@ -1,4 +1,6 @@
 {% extends "base.html" %}
+{% import "_partials/modals.html" as modals %}
+
 {% block styles %}
 {{ super() }}
 <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
@@ -21,23 +23,8 @@
     </div>
   </div>
 
-  <!-- Modal -->
-  <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="deleteModalLabel">Delete Dataset</h5>
-        </div>
-        <div class="modal-body">
-          You are about to delete the user <span id="user-name"></span> <b>and</b> all associated tasks and annotations. Are you sure?
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-success success" id="modal-confirm">Confirm</button>
-        </div>
-      </div>
-    </div>
-  </div>
+  {{ modals.confirm("delete", "Delete User", "You are about to delete the user 
+  <b>and</b> all associated tasks and annotations. Are you sure?") }}
 
   <br>
   <h1>User Overview</h1>
diff --git a/app/templates/annotate/index.html b/app/templates/annotate/index.html
index f4172b6..efb617b 100644
--- a/app/templates/annotate/index.html
+++ b/app/templates/annotate/index.html
@@ -31,11 +31,11 @@
 </div>
 <br>
 
-{{ modals.modal("submitNoCP", "No Change Points Selected", "Please use the 
+{{ modals.info("submitNoCP", "No Change Points Selected", "Please use the 
 \"No Change Points\" button when you think there are no change points in the 
 time series.") }}
 
-{{ modals.modal("NoCPYesCP", "Change Points Selected", "There are selected 
+{{ modals.info("NoCPYesCP", "Change Points Selected", "There are selected 
 change points, please click the Reset button before clicking the \"No change 
 points\" button.") }}