Add interactive data viewer

OK9UWU · Jul 20, 2022 · a917bb2 · a917bb2
1 parent e30db34
commit a917bb2
Show file tree

Hide file tree

Showing 2 changed files with 189 additions and 4 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -3,8 +3,6 @@ name: Build
 on:
   push:
     branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
 
 jobs:
   build:
@@ -15,13 +13,13 @@ jobs:
       uses: actions/checkout@v3
 
     - name: Build satfreq.json
-      run: python3 concatenate.py
+      run: python3 concatenate.py && mkdir data && mv satfreq.json data
 
     - name: Upload satfreq.json
       uses: actions/upload-artifact@v3
       with:
         name: satfreq
-        path: satfreq.json
+        path: data/satfreq.json
 
     - name: Generate json/ directory listing
       run: cd json && (echo '<!DOCTYPE html><html><body><ul>'; for i in *; do echo "<li><a href=\"$i\">$i</a></li>"; done; echo '</ul></body></html>') > index.html

diff --git a/index.html b/index.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>satfreq Viewer</title>
+    <script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet" />
+    <style>
+        * {
+            margin: 0;
+        }
+        html, body, .divider {
+            height: 100%;
+        }
+        body {
+            font-family: 'Open Sans', sans-serif;
+            color: #C9D1D9;
+        }
+        a, a:visited {
+            color: rgb(88, 166, 255);
+        }
+
+        .divider {
+            display: flex;
+        }
+        nav, main {
+            padding: 1em;
+        }
+        nav {
+            background-color: rgb(22, 27, 34);
+            width: 25%;
+            min-width: 200px;
+            max-width: 600px;
+            display: flex;
+            flex-direction: column;
+            box-sizing: border-box;
+        }
+        main {
+            background-color: rgb(13, 17, 23);
+            width: 100%;
+        }
+
+        .search {
+            color: #C9D1D9;
+            line-height: 20px;
+            font-size: 14px;
+            box-sizing: border-box;
+            padding: 5px 12px;
+            background-color: rgb(13, 17, 23);
+            width: 100%;
+            border: 1px solid #30363d;
+            border-radius: 0.5em;
+            margin-bottom: 1em;
+        }
+        nav ul {
+            list-style-type: none;
+            padding-left: 0;
+        }
+        nav li {
+            cursor: pointer;
+            padding: 0.5em 0;
+        }
+
+        .starter {
+            display: flex;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+        }
+        .searchresults {
+            height: 100%;
+        }
+    </style>
+    <script>
+        let satfreq;
+        let fuse;
+
+        function showdata(ref) {
+            satfreq.forEach(sat => {
+                if (sat.name == ref.target.innerText) {
+                    let content = `
+<h1>${sat.name}</h1><br/>
+<p>COSPAR: ${sat.cospar}</p>
+<p>NORAD: ${sat.norad}</p>
+<br/>
+<h2>Other names:</h2><ul>`;
+                    if (sat.altnames.length == 0) {
+                        content += `<li>N/A</li>`;
+                    }
+                    sat.altnames.forEach(altname => {
+                        content += `<li>${altname}</li>`;
+                    });
+                    content += `
+</ul>
+<br/>
+<h2>Downlinks:</h2>
+<table>
+<tr>
+<th>Name</th>
+<th>Frequency</th>
+<th>Bandwidth</th>
+<th>Polarization</th>
+<th>Modulation</th>
+<th>Symbol Rate</th>
+<th>Broadcast</th>
+</tr>`;
+                    sat.downlinks.forEach(downlink => {
+                        content += `
+<tr>
+<td>${downlink.name}</td>
+<td>${downlink.frequency}</td>
+<td>${downlink.bandwidth}</td>
+<td>${downlink.polarization}</td>
+<td>${downlink.modulation}</td>
+<td>${downlink.symrate}</td>
+<td>${downlink.broadcast}</td>
+</tr>`;
+                    });
+                    content += `
+</table>`
+                    document.querySelector("main").innerHTML = content;
+                    return;
+                }
+            });
+        }
+
+        window.onload = function() {
+            let xhr = new XMLHttpRequest();
+            xhr.open('GET', 'data/satfreq.json');
+            xhr.send();
+
+            xhr.onload = function() {
+                if (xhr.status != 200) {
+                    alert(`Error: unable to load satfreq.json, ${xhr.status} (${xhr.statusText})`);
+                    return;
+                }
+
+                try {
+                    satfreq = JSON.parse(xhr.responseText);
+                } catch (e) {
+                    alert(`Error: unable to load satfreq.json, ${e.name}`);
+                    return;
+                }
+
+                const options = {
+                    keys: ['name', 'altnames']
+                };
+                fuse = new Fuse(satfreq, options);
+
+                document.querySelector(".search").oninput = function() {
+                    document.querySelector(".searchresults").innerHTML = "";
+                    const result = fuse.search(document.querySelector(".search").value);
+                    result.forEach(sat => {
+                        document.querySelector(".searchresults").innerHTML += `<li>${sat.item.name}</li>`;
+                    });
+
+                    document.querySelectorAll(".searchresults li").forEach(button => {
+                        button.onclick = showdata;
+                    });
+                }
+            };
+        }
+    </script>
+</head>
+<body>
+    <div class="divider">
+        <nav>
+            <input type="text" class="search" placeholder="Search..." />
+            <ul class="searchresults">
+
+            </ul>
+            <footer>
+                <a href="https://github.com/sgcderek/satfreq">GitHub repository</a><br/>
+                <a href="json/">Raw JSON files</a><br/>
+                <a href="data/satfreq.json">Raw JSON catalogue</a><br/>
+            </footer>
+        </nav>
+        <main>
+            <div class="starter"><h1>Search for a satellite to view details</h1></div>
+        </main>
+    </div>
+</body>
+</html>