checkpoint

1 week ago · 2c72cd38b0
1 changed files with 154 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html>
+  <head><title>mergerfs ui</title>
+    <style>
+      .tab {
+          overflow: hidden;
+          border: 1px solid #ccc;
+          background-color: #f1f1f1;
+      }
+      .tab button {
+          background-color: inherit;
+          float: left;
+          border: none;
+          outline: none;
+          cursor: pointer;
+          padding: 14px 16px;
+          transition: 0.3s;
+      }
+      .tab button:hover {
+          background-color: #ddd;
+      }
+      .tab button.active {
+          background-color: #ccc;
+      }
+      .tabcontent {
+          display: none;
+          padding: 6px 12px;
+          border: 1px solid #ccc;
+          border-top: none;
+      }
+      table {
+          border-collapse: collapse;
+          width: 100%;
+      }
+      th, td {
+          border: 1px solid #ddd;
+          padding: 8px;
+          text-align: left;
+      }
+      th {
+          background-color: #f2f2f2;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="tab">
+      <button class="tablinks active" onclick="openTab(event, 'Advanced')">Advanced</button>
+      <button class="tablinks" onclick="openTab(event, 'Mounts')">Mounts</button>
+    </div>
+    <div id="Advanced" class="tabcontent" style="display: block;">
+      <div>
+        <label for="mount-select-advanced">Select Mountpoint:</label>
+        <select id="mount-select-advanced"></select>
+      </div>
+      <div id="kv-list"></div>
+    </div>
+    <div id="Mounts" class="tabcontent">
+      <form>
+        <label for="mount-select">Select Mountpoint:</label>
+        <select id="mount-select"></select>
+      </form>
+    </div>
+    <script>
+      function openTab(evt, tabName) {
+          var i, tabcontent, tablinks;
+          tabcontent = document.getElementsByClassName("tabcontent");
+          for (i = 0; i < tabcontent.length; i++) {
+              tabcontent[i].style.display = "none";
+          }
+          tablinks = document.getElementsByClassName("tablinks");
+          for (i = 0; i < tablinks.length; i++) {
+              tablinks[i].className = tablinks[i].className.replace(" active", "");
+          }
+          document.getElementById(tabName).style.display = "block";
+          if (evt) evt.currentTarget.className += " active";
+      }
+      function loadKV(mount) {
+          let url = '/kvs';
+          if (mount) {
+              url += '?mount=' + encodeURIComponent(mount);
+          }
+          fetch(url)
+              .then(r => r.json())
+              .then(data => {
+                  const div = document.getElementById('kv-list');
+                  div.innerHTML = '';
+                  const table = document.createElement('table');
+                  const headerRow = document.createElement('tr');
+                  const headerKey = document.createElement('th');
+                  headerKey.textContent = 'Key';
+                  const headerValue = document.createElement('th');
+                  headerValue.textContent = 'Value';
+                  headerRow.appendChild(headerKey);
+                  headerRow.appendChild(headerValue);
+                  table.appendChild(headerRow);
+                  for (const [k, v] of Object.entries(data)) {
+                      const row = document.createElement('tr');
+                      const keyCell = document.createElement('td');
+                      keyCell.textContent = k;
+                      const valueCell = document.createElement('td');
+                      const input = document.createElement('input');
+                      input.type = 'text';
+                      input.value = v;
+                      input.style.width = '100%';
+                        input.onkeydown = function(e) {
+                            if (e.key === 'Enter') {
+                                url = '/kvs?mount=' + encodeURIComponent(mount)
+                                fetch(url, {
+                                    method: 'POST',
+                                    headers: {'Content-Type': 'application/json'},
+                                    body: JSON.stringify({[k]: input.value})
+                                });
+                            }
+                        };
+                      valueCell.appendChild(input);
+                      row.appendChild(keyCell);
+                      row.appendChild(valueCell);
+                      table.appendChild(row);
+                  }
+                  div.appendChild(table);
+              });
+      }
+      function loadMounts() {
+          fetch('/mounts')
+              .then(r => r.json())
+              .then(data => {
+                  const select = document.getElementById('mount-select');
+                  const selectAdvanced = document.getElementById('mount-select-advanced');
+                  [select, selectAdvanced].forEach(s => {
+                      s.innerHTML = '';
+                      data.forEach(m => {
+                          const opt = document.createElement('option');
+                          opt.value = m;
+                          opt.text = m;
+                          s.appendChild(opt);
+                      });
+                  });
+                  const onchangeFunc = function() {
+                      const mount = this.value;
+                      loadKV(mount);
+                  };
+                  select.onchange = onchangeFunc;
+                  selectAdvanced.onchange = onchangeFunc;
+                  if (data.length > 0) {
+                      select.value = data[0];
+                      selectAdvanced.value = data[0];
+                      loadKV(data[0]);
+                  }
+              });
+      }
+      window.onload = () => { loadMounts(); };
+    </script>
+  </body>
+</html>