Create copy button

mira/sources/sympy_ode/templates/index.html

@@ -4,14 +4,21 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Equation image to MIRA model</title>
+
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+
     <!-- LaTeX rendering using KaTeX: see https://katex.org/ -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-Htz9HMhiwV8GuQ28Xr9pEs1B4qJiYu/nYLLwlDklR53QibDfmQzi7rYxXhMH/5/u" crossorigin="anonymous">
     <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-bxmi2jLGCvnsEqMuYLKE/KsVCxV3PqmKeK6Y6+lmNXBry6+luFkEOsmp5vD9I/7+" crossorigin="anonymous"></script>
+
     <!-- The auto-render extension: automatically renders math in text elements -->
     <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"
         onload="renderMathInElement(document.body);"></script>
+
     <!-- Code editor JS -->
     <script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ace.js"></script>
 </head>
@@ -111,6 +118,37 @@ <h5>Output Model</h5>
                             data-bs-target="#ode-petrinet-json">as PetriNet JSON</button>
                     <div class="collapse" id="ode-petrinet-json">
                         <div class="card card-body">
+<!--                        Let the user copy the JSON with a button click -->
+                            <script>
+                                // Set constant to the PetriNet JSON string
+                                const petrinetJson = `{{ petrinet_json|safe }}`;
+                                // Create function that flashes a message that the JSON
+                                // has been copied and then copies the JSON to the clipboard
+                                function flashMessage() {
+                                    const flashMessage = document.getElementById('flashMessage');
+                                    flashMessage.innerText = 'Copied!';
+                                    setTimeout(() => {
+                                        flashMessage.innerText = '';
+                                    }, 3000);
+                                }
+                                // Add an event listener to the button that copies the JSON
+                                document.querySelector('button').addEventListener('click', flashMessage);
+
+                                // Make function to copy the JSON to the clipboard and flash a message
+                                function copyToClipboard() {
+                                    navigator.clipboard.writeText(petrinetJson);
+                                    flashMessage();
+                                }
+                            </script>
+                            <div class="d-flex ms-auto">
+                                <span id="flashMessage"></span>
+                                <button class="btn btn-secondary"
+                                        type="button"
+                                        title="Copy to clipboard"
+                                        onclick="copyToClipboard()">
+                                    <i class="bi bi-clipboard"></i>
+                                </button>
+                            </div>
                             <pre><code>{{ petrinet_json|safe }}</code></pre>
                         </div>
                     </div>