Добавил фильтр

2022-02-19 21:36:42 +03:00
parent 619459fedd
commit 59aa29833c
3 changed files with 42 additions and 22 deletions
--- a/output/template.hbs
+++ b/output/template.hbs
@@ -10,29 +10,39 @@
 <body>
  <h1>Warframe Market Gaps</h1>

+  <label for="minDifference">Filter by difference</label>
+  <input type="range" min="1" max="60" value="1" id="minDifference">
+  <span id="filterValue">1</span>
+
  <table>
-    <tr>
-      <th>Name</th>
-      <th>Parts price</th>
-      <th>Set price</th>
-      <th>Difference</th>
-    </tr>
-  {{#each items}}
-    <tr>
-      <td class="name">
-        <a href="{{this.link}}" target="_blank">
-          {{this.name}}
-        </a>
-      </td>
-      <td>{{this.parts}}</td>
-      <td>{{this.set}}</td>
-      <td>{{this.difference}}</td>
-    </tr>
-  {{/each}}
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Parts price</th>
+        <th>Set price</th>
+        <th>Difference</th>
+      </tr>
+    </thead>
+    <tbody id="items">
+    {{#each items}}
+      <tr data-difference="{{this.difference}}">
+        <td class="name">
+          <a href="{{this.link}}" target="_blank">
+            {{this.name}}
+          </a>
+        </td>
+        <td>{{this.parts}}</td>
+        <td>{{this.set}}</td>
+        <td>{{this.difference}}</td>
+      </tr>
+    {{/each}}
+    </tbody>
  </table>

  <div class="timestamp">
    Generated at {{timestamp}}
  </div>
+
+  <script src="index.js"></script>
 </body>
 </html>
--- a/public/index.js
+++ b/public/index.js
@@ -0,0 +1,14 @@
+const slider = document.getElementById('minDifference')
+
+slider.addEventListener('input', function (event) {
+  const table = document.getElementById('items')
+  Array.from(table.children).forEach(row => {
+    if (row.dataset.difference < Number(event.target.value)) {
+      row.style.display = 'none'
+    } else {
+      row.style.display = 'table-row'
+    }
+  })
+
+  document.getElementById('filterValue').innerText = event.target.value
+})
--- a/public/style.css
+++ b/public/style.css
@@ -16,10 +16,6 @@ tr {
  text-align: left;
 }

-tr:nth-child(even) {
-  background: rgb(240, 242, 243);
-}
-
 td {
  padding: 2px 16px;
 }