Demander confirmation avant de marquer comme traitée

bda/static/bda/css/bda.css

@@ -122,4 +122,4 @@ td {
 
     color:#FFF;
     background-color:rgb(222, 130, 107);
-}
+}

petitscours/static/petitscours/css/confirmation.css

@@ -0,0 +1,77 @@
+/** Honteusement copié-collé de bda.css **/
+/** JQuery-Confirm box **/
+
+.jconfirm .jconfirm-bg {
+    background-color: rgb(0,0,0,0.6) !important;
+}
+
+.jconfirm .jconfirm-box {
+    padding:0;
+    border-radius:0 !important;
+    font-family:Roboto;
+}
+
+.jconfirm .jconfirm-box .content-pane {
+    border-bottom:1px solid #ddd;
+    margin: 0px !important;
+}
+
+.jconfirm .jconfirm-box .content {
+    padding: 5px;
+}
+
+.jconfirm .jconfirm-box .content-pane {
+    border-bottom:1px solid #ddd;
+    margin: 0px !important;
+}
+
+.jconfirm .jconfirm-box .content {
+    padding: 10px;
+}
+
+.jconfirm .jconfirm-box .content a,
+.jconfirm .jconfirm-box .content a:hover {
+    color: #D81138;
+    font-weight: bold;
+}
+
+.jconfirm .jconfirm-box .buttons {
+    margin-top:-6px; /* j'arrive pas à voir pk y'a un espace au dessus sinon... */
+    padding:0;
+    height:40px;
+}
+
+.jconfirm .jconfirm-box .buttons button {
+    min-width:40px;
+    height:100%;
+    margin:0;
+    margin:0 !important;
+    border-radius: 0 !important;
+}
+
+.jconfirm .jconfirm-box .buttons button:first-child:focus,
+.jconfirm .jconfirm-box .buttons button:first-child:hover {
+    color:#FFF !important;
+    background:forestgreen !important;
+}
+
+.jconfirm .jconfirm-box .buttons button:nth-child(2):focus,
+.jconfirm .jconfirm-box .buttons button:nth-child(2):hover {
+    color:#FFF !important;
+    background:#D93A32 !important;
+}
+
+.jconfirm .jconfirm-box div.title-c .title {
+    display: block;
+
+    padding:0 15px;
+    height:40px;
+    line-height:40px;
+
+    font-family:Dosis;
+    font-size:20px;
+    font-weight:bold;
+
+    color:#FFF;
+    background-color:rgb(222, 130, 107);
+}

petitscours/templates/petitscours/traitement_demande.html

@@ -1,4 +1,11 @@
 {% extends "petitscours/base_title.html" %}
+{% load static %}
+
+{% block extra_head %}
+<script type="text/javascript" src="{% static 'kfet/vendor/jquery/jquery-confirm.min.js' %}"></script>
+<link type="text/css" rel="stylesheet" href="{% static 'vendor/jquery/jquery-confirm.css' %}" />
+<link type="text/css" rel="stylesheet" href="{% static 'petitscours/css/confirmation.css' %}" />
+{% endblock %}
 
 {% block realcontent %}
     <h2>
@@ -27,7 +34,7 @@
     {% endif %}
 
 
-    <form method="post">
+    <form method="post" id="traitement-form">
         {% csrf_token %}
         {% if redo %}<input type="hidden" name="redo" value="1" />{% endif %}
         {% if proposals %}
@@ -52,12 +59,32 @@
             {% endwith %}
             <input type="hidden" name="attribdata" value="{{ attribdata }}" />
             <input class="btn btn-primary pull-right" type="submit" value="Valider le {% if redo %}re{% endif %}traitement de la demande" />
-            </form>
         {% else %}
             <h3>Impossible de trouver des propositions pour cette demande</h3>
             <div class="error" style="font-size: 1.6em; margin-top: 10px;">Traitement manuel obligatoire !</div>
             <input type="hidden" name="manual" value="1" />
-            <input class="btn btn-primary pull-right" type="submit" value="Marquer comme traitée" />
+            <input class="btn btn-primary pull-right" type="button" onclick="confirmation()" value="Marquer comme traitée" />
+            <script type="text/javascript">
+                function confirmation() {
+                    $.confirm({
+                        title: 'Marquer comme traitée',
+                        columnClass: 'col-md-6 col-md-offset-3',
+                        content: "Voulez-vous vraiment marquer la demande comme traitée ? \
+                                  Aucun traitement automatique n'aura lieu.",
+                        backgroundDismiss: true,
+                        opacity: 1,
+                        animation:'top',
+                        closeAnimation:'bottom',
+                        keyboardEnabled: true,
+                        confirmButton: '<span class="glyphicon glyphicon-ok"></span>',
+                        cancelButton: '<span class="glyphicon glyphicon-remove"></span>',
+                        confirm: function() {
+                            charte_ok = true ;
+                            $("#traitement-form").submit();
+                        },
+                    });
+                }
+            </script>
         {% endif %}
     </form>
 

petitscours/templates/petitscours/traitement_demande_autre_niveau.html

@@ -1,6 +1,12 @@
 {% extends "petitscours/base_title.html" %}
 {% load static %}
 
+{% block extra_head %}
+<script type="text/javascript" src="{% static 'kfet/vendor/jquery/jquery-confirm.min.js' %}"></script>
+<link type="text/css" rel="stylesheet" href="{% static 'vendor/jquery/jquery-confirm.css' %}" />
+<link type="text/css" rel="stylesheet" href="{% static 'petitscours/css/confirmation.css' %}" />
+{% endblock %}
+
 {% block realcontent %}
     <h2>
         Traitement de la demande de petits cours {{ demande.id }}
@@ -22,7 +28,7 @@
         </div>
     {% endif %}
 
-    <form method="post">
+    <form method="post" id="traitement-form">
     {% csrf_token %}
     {% if redo %}<input type="hidden" name="redo" value="1" />{% endif %}
     {% if proposals %}
@@ -60,7 +66,28 @@
         <h3>Impossible de trouver des propositions pour cette demande</h3>
         <div class="error" style="font-size: 1.6em; margin-top: 10px;">Traitement manuel obligatoire !</div>
         <input type="hidden" name="manual" value="1" />
-        <input class="btn btn-primary pull-right" type="submit" value="Marquer comme traitée" />
+        <input class="btn btn-primary pull-right" type="button" onclick="confirmation()" value="Marquer comme traitée" />
+        <script type="text/javascript">
+            function confirmation() {
+                $.confirm({
+                    title: 'Marquer comme traitée',
+                    columnClass: 'col-md-6 col-md-offset-3',
+                    content: "Voulez-vous vraiment marquer la demande comme traitée ? \
+                              Aucun traitement automatique n'aura lieu.",
+                    backgroundDismiss: true,
+                    opacity: 1,
+                    animation:'top',
+                    closeAnimation:'bottom',
+                    keyboardEnabled: true,
+                    confirmButton: '<span class="glyphicon glyphicon-ok"></span>',
+                    cancelButton: '<span class="glyphicon glyphicon-remove"></span>',
+                    confirm: function() {
+                        charte_ok = true ;
+                        $("#traitement-form").submit();
+                    },
+                });
+            }
+        </script>
     {% endif %}
     </form>