Mercurial > code > home > repos > reposync
comparison index.html @ 18:6f38aa08408d
starting over: make a web page that draws a streamed graph from collector, with plans for services to scrape the data that collector will subscribe to
author | drewp@bigasterisk.com |
---|---|
date | Sun, 09 Jan 2022 00:21:41 -0800 |
parents | a0d9679c4f4a |
children |
comparison
equal
deleted
inserted
replaced
17:a4778c56cc03 | 18:6f38aa08408d |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html lang="en"> |
3 <head> | 3 <head> |
4 <meta charset="utf8" /> | 4 <meta charset="UTF-8" /> |
5 <meta name="viewport" content="width=device-width, initial-scale=1" /> | 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 <title>reposync</title> | 6 <title>reposync</title> |
7 <style> | 7 <style> |
8 body { | 8 body { |
9 background: #1f1f1f; | 9 background: #1f1f1f; |
10 color: white; | 10 color: white; |
11 font-family: monospace; | |
12 } | |
13 th { | |
14 text-align: left; | |
15 white-space: nowrap; | |
16 } | |
17 td.github { | |
18 white-space: nowrap; | |
19 opacity: 0.5; | |
20 } | |
21 td.github.on { | |
22 opacity: 1; | |
23 } | |
24 span.check { | |
25 font-size: 200%; | |
26 } | 11 } |
27 </style> | 12 </style> |
13 <script type="module" src="https://bigasterisk.com/lib/bigast/v1/loginBar.js"></script> | |
14 <script type="module" src="/view/index.ts"></script> | |
28 </head> | 15 </head> |
29 <body> | 16 <body> |
30 <h1>repo statuses</h1> | 17 <reposync-page></reposync-page> |
31 | |
32 <script type="module" src="/loginBar.js"> | |
33 </script> | |
34 | |
35 <script type="module"> | |
36 import Litedom from "https://bigasterisk.com/lib/litedom/0.12.1/litedom.es.js"; | |
37 const repos = [{ dir: "dir1", summary: "ok" }]; | |
38 Litedom({ | |
39 tagName: "reposync-top", | |
40 template: `<div id="top"> | |
41 <table> | |
42 <tr :for="repo in this.repos"> | |
43 <th>{repo.path}</th> | |
44 <td> {repo.status.error || ''} | |
45 <span :if="repo.status.changed==0 && repo.status.unknown==0"> | |
46 clean | |
47 </span> | |
48 <span :else> | |
49 changed {repo.status.changed}, unknown {repo.status.unknown} | |
50 </span> | |
51 </td> | |
52 <td :class="github: true; on: repo.github"> | |
53 <span class="check" :if="repo.github">☑</span> | |
54 <span class="check" :else>☐</span> github | |
55 <span :if="repo.github"> | |
56 <table style="display: inline-block"> | |
57 <tr><td>github latest</td><td>{repo.githubLatest.t}</td></tr> | |
58 <tr><td>home latest</td><td>{repo.hgLatest.t}</td></tr> | |
59 </table> | |
60 </span> | |
61 </td> | |
62 </tr> | |
63 </table> | |
64 </div>`, | |
65 data: { repos: [] }, | |
66 created() { | |
67 const statuses = new EventSource("status/events"); | |
68 statuses.addEventListener("message", (ev) => { | |
69 const update = JSON.parse(ev.data); | |
70 update.update.repoDir = update.key; | |
71 | |
72 var found = false; | |
73 this.data.repos.forEach((r) => { | |
74 if (r.repoDir == update.key) { | |
75 found = true; | |
76 Object.assign(r, update.update); | |
77 } | |
78 }); | |
79 if (!found) { | |
80 this.data.repos.push(update.update); | |
81 this.data.repos.sort((a, b) => (a.repoDir > b.repoDir ? 1 : -1)); | |
82 } | |
83 }); | |
84 }, | |
85 }); | |
86 </script> | |
87 | |
88 <reposync-top></reposync-top> | |
89 <bigast-loginbar></bigast-loginbar> | 18 <bigast-loginbar></bigast-loginbar> |
90 <pre> | 19 <pre> |
20 notes: | |
21 | |
91 repo1 clean synced to github github up to date [sync now] | 22 repo1 clean synced to github github up to date [sync now] |
92 dirty [msg____] [commit] | 23 dirty [msg____] [commit] |
93 | 24 |
94 repo1 is a link to my hgserve | 25 repo1 is a link to my hgserve |
95 | 26 |
108 key: string | 39 key: string |
109 update: replace the data for that key | 40 update: replace the data for that key |
110 Here, keys are repo paths. | 41 Here, keys are repo paths. |
111 | 42 |
112 </pre> | 43 </pre> |
44 | |
113 </body> | 45 </body> |
114 </html> | 46 </html> |
47 <!-- | |
48 before streamed-graph version: | |
49 template: `<div id="top"> | |
50 <table> | |
51 <tr :for="repo in this.repos"> | |
52 <th>{repo.path}</th> | |
53 <td> {repo.status.error || ''} | |
54 <span :if="repo.status.changed==0 && repo.status.unknown==0"> | |
55 clean | |
56 </span> | |
57 <span :else> | |
58 changed {repo.status.changed}, unknown {repo.status.unknown} | |
59 </span> | |
60 </td> | |
61 <td :class="github: true; on: repo.github"> | |
62 <span class="check" :if="repo.github">☑</span> | |
63 <span class="check" :else>☐</span> github | |
64 <span :if="repo.github"> | |
65 <table style="display: inline-block"> | |
66 <tr><td>github latest</td><td>{repo.githubLatest.t}</td></tr> | |
67 <tr><td>home latest</td><td>{repo.hgLatest.t}</td></tr> | |
68 </table> | |
69 </span> | |
70 </td> | |
71 </tr> | |
72 </table> | |
73 --> |