confirm stop recipe

dist/server.js

@@ -276,6 +276,12 @@ function stop_recipe() {
     socket.emit('stop recipe');
 }
 
+function maybe_stop_recipe() {
+    question_modal({required: true, dismissed: false, label: "Stoppiamo?", options: [
+        {action: "stop_recipe();", tag:"Sicuro"},
+        {action: "alert('non interrompiamo')", tag:"No"}]});
+}
+
 function next_phase() {
     socket.emit('next phase');
 }
@@ -375,7 +381,7 @@ On Exit: {{current_phase.onexit}}
                 <!-- <a class="card-footer-item is-primary">Pause</a> -->
                 <a onclick="next_phase()"
                    class="card-footer-item">Next Phase</a>
-                <a onclick="stop_recipe()"
+                <a onclick="maybe_stop_recipe()"
                    class="card-footer-item">Stop</a>
             </footer>
         </div>`;
@@ -407,6 +413,31 @@ function manual_modal(data) {
 }
 
 
+function question_modal(data) {
+    let modal = document.getElementById("question-modal");
+    let template = `<div class="modal {{^dismissed}}{{#required}}is-active{{/required}}{{/dismissed}}">
+            <div class="modal-background"></div>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Manual Intervention Required</p>
+                    <button class="delete" aria-label="close" onclick="dismiss_modal()"></button>
+                </header>
+                <section class="modal-card-body">
+                    {{label}}
+                </section>
+                <footer class="modal-card-foot">
+                    {{#options}}
+                    <button class="button" onclick="{{action}}">
+                          {{tag}}
+                    </button>
+                    {{/options}}
+                </footer>
+            </div>
+        </div>`;
+    modal.innerHTML = Mustache.render(template, data);
+}
+
+
 let items = document.querySelectorAll('#items-list > li')
 
 

templates/base.html

@@ -43,6 +43,7 @@
         {% raw %}
         {% endraw %}
         <div id="manual-modal"></div>
+        <div id="question-modal"></div>
         <div class="columns">
             <div class="column is-one-fifth" id="sidebar">
             </div>