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 -->