Add badge in job page

Also features the copy of the Markdown code for the badge into the clipboard

run.py

@@ -919,12 +919,19 @@ async def html_job(request, job_id):
 
     job = job[0]
 
-    app = Repo.select().where(Repo.url == job.url_or_path)
-    app = app[0] if app else None
+    application = Repo.select().where(Repo.url == job.url_or_path)
+    application = application[0] if application else None
+
+    job_url = app.config.BASE_URL + app.url_for("html_job", job_id=job.id)
+    badge_url = app.config.BASE_URL + app.url_for("api_badge_job", job_id=job.id)
+    shield_badge_url = f"https://img.shields.io/endpoint?url={badge_url}"
 
     return {
         "job": job,
-        'app': app,
+        'app': application,
+        'job_url': job_url,
+        'badge_url': badge_url,
+        'shield_badge_url': shield_badge_url,
         'relative_path_to_root': '../',
         'path': request.path
     }

templates/job.html

@@ -22,6 +22,7 @@
             <tr><th>Created time</th><td>{{timestampToDate(job.created_time)}}</td></tr>
             <tr><th>Started time</th><td>{{timestampToDate(job.started_time)}}</td></tr>
             <tr><th>End time</th><td>{{timestampToDate(job.end_time)}}</td></tr>
+            <tr><th>Badge</th><td><img src="<{ shield_badge_url }>" alt="<{job.state}>" title="Click to copy its Markdown code" id="badge"/></td></tr>
         </table>
 
         <h2 class="subtitle">Execution log:</h2>
@@ -95,4 +96,19 @@
         };
     })()
 </script>
+<script>
+    // Thanks to https://tech-wiki.online/fr/clipboard-api.html
+    document.querySelector('#badge').addEventListener('click', async event => {
+        if (!navigator.clipboard) {
+            // Clipboard API not available
+            return
+        }
+        const text = "[![Test Badge](https://img.shields.io/endpoint?url=https://ci.pijean.ovh/ci/api/job/<{ job.id }>/badge)](https://ci.pijean.ovh/ci/job/<{ job.id }>)"
+        try {
+            await navigator.clipboard.writeText(text)
+        } catch (err) {
+            console.error('Failed to copy Markdown code for the job badge', err)
+        }
+    })
+</script>
 <% endblock %>