diff 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
line wrap: on
line diff
--- a/index.html	Sun Dec 12 22:32:25 2021 -0800
+++ b/index.html	Sun Jan 09 00:21:41 2022 -0800
@@ -1,93 +1,24 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>reposync</title>
     <style>
       body {
         background: #1f1f1f;
         color: white;
-        font-family: monospace;
-      }
-      th {
-        text-align: left;
-        white-space: nowrap;
-      }
-      td.github {
-        white-space: nowrap;
-        opacity: 0.5;
-      }
-      td.github.on {
-        opacity: 1;
-      }
-      span.check {
-        font-size: 200%;
       }
     </style>
+    <script type="module" src="https://bigasterisk.com/lib/bigast/v1/loginBar.js"></script>
+    <script type="module" src="/view/index.ts"></script>
   </head>
   <body>
-    <h1>repo statuses</h1>
-
-    <script type="module" src="/loginBar.js">
-    </script>
-
-    <script type="module">
-      import Litedom from "https://bigasterisk.com/lib/litedom/0.12.1/litedom.es.js";
-      const repos = [{ dir: "dir1", summary: "ok" }];
-      Litedom({
-        tagName: "reposync-top",
-        template: `<div id="top">
-                      <table>
-                       <tr :for="repo in this.repos">
-                        <th>{repo.path}</th>
-                        <td> {repo.status.error || ''}
-                          <span :if="repo.status.changed==0 && repo.status.unknown==0">
-                            clean
-                          </span>
-                          <span :else>
-                            changed {repo.status.changed}, unknown {repo.status.unknown}
-                          </span>
-                        </td>
-                        <td :class="github: true; on: repo.github">
-                          <span class="check" :if="repo.github">☑</span>
-                          <span class="check" :else>☐</span> github
-                          <span :if="repo.github">
-                          <table style="display: inline-block">
-                            <tr><td>github latest</td><td>{repo.githubLatest.t}</td></tr>
-                            <tr><td>home latest</td><td>{repo.hgLatest.t}</td></tr>
-                            </table>
-                          </span>
-                        </td>
-                        </tr>
-                      </table>
-                   </div>`,
-        data: { repos: [] },
-        created() {
-          const statuses = new EventSource("status/events");
-          statuses.addEventListener("message", (ev) => {
-            const update = JSON.parse(ev.data);
-            update.update.repoDir = update.key;
-
-            var found = false;
-            this.data.repos.forEach((r) => {
-              if (r.repoDir == update.key) {
-                found = true;
-                Object.assign(r, update.update);
-              }
-            });
-            if (!found) {
-              this.data.repos.push(update.update);
-              this.data.repos.sort((a, b) => (a.repoDir > b.repoDir ? 1 : -1));
-            }
-          });
-        },
-      });
-    </script>
-
-    <reposync-top></reposync-top>
+    <reposync-page></reposync-page>
     <bigast-loginbar></bigast-loginbar>
     <pre>
+      notes: 
+
       repo1 clean                     synced to github   github up to date  [sync now]
             dirty [msg____] [commit]
 
@@ -110,5 +41,33 @@
       Here, keys are repo paths.
     
     </pre>
+
   </body>
 </html>
+<!--
+  before streamed-graph version:
+  template: `<div id="top">
+       <table>
+        <tr :for="repo in this.repos">
+         <th>{repo.path}</th>
+         <td> {repo.status.error || ''}
+           <span :if="repo.status.changed==0 && repo.status.unknown==0">
+             clean
+           </span>
+           <span :else>
+             changed {repo.status.changed}, unknown {repo.status.unknown}
+           </span>
+         </td>
+         <td :class="github: true; on: repo.github">
+           <span class="check" :if="repo.github">☑</span>
+           <span class="check" :else>☐</span> github
+           <span :if="repo.github">
+           <table style="display: inline-block">
+             <tr><td>github latest</td><td>{repo.githubLatest.t}</td></tr>
+             <tr><td>home latest</td><td>{repo.hgLatest.t}</td></tr>
+             </table>
+           </span>
+         </td>
+         </tr>
+       </table>
+-->