wip status page

status.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1" name="viewport">
     <title>ALHP Status</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
           integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" rel="stylesheet">
 </head>
@@ -35,21 +36,6 @@
     </div>
 
     <h3 class="mt-5">Packages</h3>
-    <div class="accordion" id="accordion-{{$march.Name}}">
-        {{range $repo := $march.Repos}}
-        <div class="accordion-item bg-opacity-25">
-            <h2 class="accordion-header" id="heading-{{$march.Name}}-{{$repo.Name}}">
-                <button aria-controls="collapse-{{$march.Name}}-{{$repo.Name}}" aria-expanded="false"
-                        class="accordion-button"
-                        data-bs-target="#collapse-{{$march.Name}}-{{$repo.Name}}"
-                        data-bs-toggle="collapse"
-                        type="button">{{$repo.Name}}-{{$march.Name}}
-                </button>
-            </h2>
-            <div aria-labelledby="heading-{{$march.Name}}-{{$repo.Name}}"
-                 class="accordion-collapse collapse show"
-                 data-bs-parent="#accordion-{{$march.Name}}" id="collapse-{{$march.Name}}-{{$repo.Name}}">
-                <div class="accordion-body overflow-auto">
     <table class="table table-sorted">
         <thead>
         <tr>
@@ -63,11 +49,11 @@
             <th class="text-center" scope="col" title="Debug-symbols available via debuginfod">DS
             </th>
             <th scope="col">Archlinux Version</th>
-                            <th scope="col">{{$repo.Name}}-{{$march.Name}} Version</th>
+            <th scope="col">ALHP Version</th>
             <th class="text-end" scope="col">Info</th>
         </tr>
         </thead>
-                        <tbody>
+        <tbody id="main-tbody">
         {{range $pkg := $repo.Packages}}
         <tr class="table-{{$pkg.Class}}"
             id="{{$repo.Name}}-{{$march.Name}}-{{$pkg.Pkgbase}}">
@@ -112,12 +98,6 @@
         </tbody>
     </table>
 </div>
-            </div>
-        </div>
-        {{end}}
-    </div>
-    {{end}}
-</div>
 
 <footer class="text-center text-lg-start bg-dark mt-3 fixed-bottom">
     <div class="p-2 text-center">
@@ -134,21 +114,43 @@
     </div>
 </footer>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+        crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 <script>
     let input = document.getElementById('table-sort-input');
     let timeout = null;
 
-    input.addEventListener('input', function (e) {
-        clearTimeout(timeout);
+    function searchPackages() {
+        let new_tbody = document.createElement('tbody');
 
-        timeout = setTimeout(searchFilter, 200);
+        axios.get('https://api.alhp.dev/packages', {
+            params: {
+                pkgbase: (input.value.toLowerCase() ? input.value.toLowerCase() : undefined),
+                page: 1,
+                limit: 50,
+            }
+        })
+            .then(function (response) {
+                console.log(response)
+                let jResp = JSON.parse(response)
+                for (const pkg of jResp.packages) {
+                    let ntr = document.createElement('tr')
+                    ntr.classList.add("")
+                }
+            })
+            .catch(function (error) {
+                console.log(error);
+            })
+            .finally(function () {
+                // always executed
             });
 
-    function searchFilter() {
+
         let input, filter, tr, td, i, txtValue;
         input = document.getElementById('table-sort-input')
-        filter = input.value.toUpperCase()
+        filter = input.value.toLowerCase()
         const tables = document.getElementsByClassName('table-sorted');
         for (let j = 0; j < tables.length; j++) {
             tr = tables[j].getElementsByTagName('tr')
@@ -165,6 +167,12 @@
             }
         }
     }
+
+    input.addEventListener('input', function (e) {
+        clearTimeout(timeout);
+
+        timeout = setTimeout(searchPackages, 200);
+    });
 </script>
 </body>
 </html>