From 517877b74fa88bef45c2dfdf221db482b7065236 Mon Sep 17 00:00:00 2001
From: Laurent Peuch <cortex@worlddomination.be>
Date: Sun, 15 Jul 2018 04:00:15 +0200
Subject: [PATCH] [enh] integrate bulma.css for fun and profit

---
 templates/index.html | 55 +++++++++++++++++++++++---------------------
 templates/job.html   | 51 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+), 26 deletions(-)
 create mode 100644 templates/job.html
diff --git a/templates/index.html b/templates/index.html
index 4196de1..c767ddb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,35 +2,38 @@
 <html>
     <head>
         <title>YunoRunner for CI</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
+        <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-        <script src="https://code.jquery.com/jquery-3.3.1.min.js"
-                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
-                crossorigin="anonymous"></script>
     </head>
     <body>
-        <h1>Tasks</h1>
-        <div id="jobs">
-            <table border="0" cellspacing="5" cellpadding="5">
-                <tr>
-                    <th>App</th>
-                    <th>State</th>
-                    <th>Revision</th>
-                    <th>Ynh Version</th>
-                    <th>Created time</th>
-                    <th>Started time</th>
-                    <th>End time</th>
-                </tr>
-                <tr v-for="(job, index) in jobs" :id="job.id">
-                    <td><a v-bind:href="'/job/' + job.id">{{job.name}}</a></td>
-                    <td>{{job.state}}</td>
-                    <td>{{job.target_revision}}</td>
-                    <td>{{job.yunohost_version}}</td>
-                    <td>{{job.created_time}}</td>
-                    <td>{{job.started_time}}</td>
-                    <td>{{job.end_time}}</td>
-                </tr>
-            </table>
-        </div>
+        <section class="section">
+            <h1 class="title">Tasks</h1>
+            <div id="jobs">
+                <table class="table is-bordered is-hoverable is-striped is-fullwidth">
+                    <thead>
+                        <th>App</th>
+                        <th>State</th>
+                        <th>Revision</th>
+                        <th>Ynh Version</th>
+                        <th>Created time</th>
+                        <th>Started time</th>
+                        <th>End time</th>
+                    </thead>
+                    <tr v-for="(job, index) in jobs" :id="job.id">
+                        <td><a v-bind:href="'/job/' + job.id">{{job.name}}</a></td>
+                        <td>{{job.state}}</td>
+                        <td>{{job.target_revision}}</td>
+                        <td>{{job.yunohost_version}}</td>
+                        <td>{{job.created_time}}</td>
+                        <td>{{job.started_time}}</td>
+                        <td>{{job.end_time}}</td>
+                    </tr>
+                </table>
+            </div>
+        </section>
     <script>
         (function() {
             var app = new Vue({
diff --git a/templates/job.html b/templates/job.html
new file mode 100644
index 0000000..d9324fc
--- /dev/null
+++ b/templates/job.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+    <head>
+        <title>YunoRunner for CI</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
+        <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"></script>
+    </head>
+    <body>
+        <section class="section" id="job">
+            <h1 class="title">Job '{{job.name}}'</h1>
+
+            <table class="table is-bordered">
+                <tr><th>State</th><td>{{job.state}}</td></tr>
+                <tr><th>Target revision</th><td>{{job.target_revision}}</td></tr>
+                <tr><th>YunoHost version</th><td>{{job.yunohost_version}}</td></tr>
+                <tr><th>Created time</th><td>{{job.created_time}}</td></tr>
+                <tr><th>Started time</th><td>{{job.started_time}}</td></tr>
+                <tr><th>End time</th><td>{{job.end_time}}</td></tr>
+            </table>
+
+            <h2 class="subtitle">Excution log:</h2>
+            <pre>{{job.log}}</pre>
+        </section>
+    <script>
+        (function() {
+            var app = new Vue({
+                el: '#job',
+                data: {
+                    job: {}
+                },
+            })
+
+            ws = new WebSocket('ws://' + document.domain + ':' + location.port + '/job-%s-ws');
+
+            ws.onmessage = function (event) {
+                var message = JSON.parse(event.data);
+                var data = message.data;
+                var action = message.action;
+
+                if (action == "init_job" || action == "update_job") {
+                    app.job = data;
+                }
+            };
+        })()
+    </script>
+    </body>
+</html>

State	{{job.state}}
Target revision	{{job.target_revision}}
YunoHost version	{{job.yunohost_version}}
Created time	{{job.created_time}}
Started time	{{job.started_time}}
End time	{{job.end_time}}