add: modal javascript-dialogs for confirming dangerous action.

[gigi.git] / static / static / js / expert.js

diff --git a/static/static/js/expert.js b/static/static/js/expert.js
index 07d1da4976d809d1a6b4474583efd528fdb6a003..731dddde58f991e28868b2ec48e016fe4ab21384 100644 (file)
--- a/static/static/js/expert.js
+++ b/static/static/js/expert.js
@@ -1,4 +1,53 @@
 (function() {
+       var modal = undefined;
+       
+       function showModal(content){
+               var HTML = `<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&#x1F5D9;</span></button>
+        <h4 class="modal-title" id="myModalLabel">&nbsp;</h4>
+      </div>
+      <div class="modal-body">
+        Body
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">&#x1F5D9;</button>
+        <button type="button" class="btn btn-danger btn-confirm">&checkmark;</button>
+      </div>
+    </div>
+  </div>
+</div>`;
+               if(modal === undefined) {
+                       modal = $(HTML);
+                       modal.action = function(){};
+                       modal.appendTo("body");
+                       $(modal.get(0)).find(".modal-footer .btn-confirm").click(function(){
+                               modal.action();
+                               modal.modal("hide");
+                       });
+               }
+               var m = $(modal.get(0));
+               m.find(".modal-body").text($(content).attr("data-confirm"));
+               var reply = $(content).attr("data-reply").split(",");
+               m.find(".modal-footer .btn-cancel").text(reply[0]);
+               m.find(".modal-footer .btn-confirm").text(reply[1]);
+               modal.action=function(){
+                       content.confirmed=true;
+                       $(content).click();
+               };
+               modal.modal("show");
+       }
+       function initConfirm() {
+               $(".btn-confirm").click(function(){
+                       if(this.confirmed === true){
+                               return true;
+                       }
+                       showModal(this);
+                       return false;
+               });
+       }
        function showExpert(isExpert)
        {
          var elements = document.getElementsByClassName("expert");
@@ -43,6 +92,7 @@
                        panel.find(".panel-heading [type=\"radio\"]").change(refresh);
                        return this.id;
                });
+               initConfirm();
        }
        (function(oldLoad) {
                if (oldLoad == undefined) {