modal + link caching

cookbook/templates/index.html

@@ -29,22 +29,74 @@
         </div>
     {% endif %}
 
+    <style>
+        .loader {
+            border: 16px solid #f3f3f3; /* Light grey */
+            border-top: 16px solid #3498db; /* Blue */
+            border-radius: 50%;
+            width: 120px;
+            height: 120px;
+            animation: spin 2s linear infinite;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+
+    <div class="modal" tabindex="-1" role="dialog" id="modal_recipe">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">{% trans 'Recipe' %}</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body" style="text-align: center">
+                    <div class="loader" id="div_loader"></div>
+                    <a href="" id="a_recipe_open" target="_blank" onclick="afterClick()"></a>
+
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans 'Close' %}</button>
+                </div>
+            </div>
+        </div>
+    </div>
 
     <script type="text/javascript">
         function openRecipe(id) {
+            var link = $('#a_recipe_open');
+            link.hide();
+
             url = "{% url 'get_file_link' recipe_id=12345 %}".replace(/12345/, id);
 
+            link.text("{% trans 'Open Recipe' %}");
+            $('#modal_recipe').modal('show');
 
             var xhttp = new XMLHttpRequest();
             xhttp.onreadystatechange = function () {
                 if (this.readyState === 4 && this.status === 200) {
-                    console.log(this.response);
-                    window.open(this.responseText, '_blank');
+                    link.attr("href", this.responseText);
+                    link.show();
+                    $('#div_loader').hide();
+
                 }
             };
             xhttp.open("GET", url, true);
             xhttp.send();
         }
+
+        function afterClick(){
+            $('#modal_recipe').modal('hide');
+            return true;
+        }
     </script>
 
 {% endblock %}

cookbook/templates/new_recipe.html

@@ -1,9 +1,6 @@
 {% extends "base.html" %}
+{% load crispy_forms_tags %}
 
 {% block content %}
-    <form method="POST" class="post-form">{% csrf_token %}
-        {{ form.as_p }}
-        <button type="submit" class="save btn btn-default">Save</button>
-        </form>
-
+    {% crispy form %}
 {% endblock %}