Add sorting and filtering options to key ratings in index view

templates/index.html

@@ -89,7 +89,7 @@
       padding: 8px 12px;
       border-radius: 6px;
     }
-    form {
+    .filters {
       display: flex;
       align-items: center;
       gap: 8px;
@@ -98,8 +98,10 @@
       flex: 1;
       flex-wrap: wrap;
       align-items: flex-start;
+      display: flex;
+      gap: 8px;
     }
-    input[name="reason"] {
+    input[name^="reason_"] {
       min-width: 180px;
     }
     .map-list {
@@ -122,6 +124,12 @@
     .quest-flag input {
       margin: 0;
     }
+    .save-all {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      margin: 4px 0 16px;
+    }
     @media (max-width: 720px) {
       body {
         padding: 12px;
@@ -130,7 +138,8 @@
         align-items: flex-start;
         gap: 12px;
       }
-      form {
+      .filters,
+      .key-form {
         flex-wrap: wrap;
         justify-content: flex-start;
         gap: 8px;
@@ -139,7 +148,7 @@
         min-height: 40px;
         font-size: 1rem;
       }
-      input[name="reason"] {
+      input[name^="reason_"] {
         flex: 1 1 100%;
         min-width: 0;
       }
@@ -171,11 +180,47 @@
         </option>
       {% endfor %}
     </select>
+    <label for="show">Show</label>
+    <select id="show" name="show">
+      <option value="all" {% if show == "all" %}selected{% endif %}>All</option>
+      <option value="rated" {% if show == "rated" %}selected{% endif %}>Rated</option>
+      <option value="unrated" {% if show == "unrated" %}selected{% endif %}>NR (not rated)</option>
+      <option value="quest" {% if show == "quest" %}selected{% endif %}>Used in quest</option>
+    </select>
+    <label for="sort">Sort</label>
+    <select id="sort" name="sort">
+      <option value="priority_desc" {% if sort == "priority_desc" %}selected{% endif %}>
+        Priority high → low
+      </option>
+      <option value="priority_asc" {% if sort == "priority_asc" %}selected{% endif %}>
+        Priority low → high
+      </option>
+      <option value="name_asc" {% if sort == "name_asc" %}selected{% endif %}>
+        Name A → Z
+      </option>
+      <option value="name_desc" {% if sort == "name_desc" %}selected{% endif %}>
+        Name Z → A
+      </option>
+    </select>
     <button type="submit">Apply</button>
   </form>
 
+  <form method="post" action="/rate_all">
+    {% if map_filter %}
+      <input type="hidden" name="map_id" value="{{ map_filter }}">
+    {% endif %}
+    {% if sort %}
+      <input type="hidden" name="sort" value="{{ sort }}">
+    {% endif %}
+    {% if show %}
+      <input type="hidden" name="show" value="{{ show }}">
+    {% endif %}
+    <div class="save-all">
+      <button type="submit" name="save_all" value="1">Save all changes</button>
+    </div>
+
 {% for key in keys %}
-  <div class="key">
+  <div class="key" id="key-{{ key.id }}">
     <img
     src="{{ key.grid_image_url }}"
     loading="lazy"
@@ -197,12 +242,10 @@
       {% endif %}
     </div>
 
-  <form method="post" action="/rate" class="key-form">
-    <input type="hidden" name="key_id" value="{{ key.id }}">
-    {% if map_filter %}
-      <input type="hidden" name="map_id" value="{{ map_filter }}">
-    {% endif %}
-    <select name="priority">
+    <div class="key-form">
+    <input type="hidden" name="key_ids" value="{{ key.id }}">
+    <select name="priority_{{ key.id }}">
+      <option value="" {% if key.priority is none %}selected{% endif %}>NR (not rated)</option>
       {% for i, label in [(0,'IGNORE'),(1,'LOW'),(2,'MED'),(3,'HIGH'),(4,'SUPER')] %}
         <option value="{{ i }}" {% if key.priority == i %}selected{% endif %}>
           {{ label }}
@@ -210,16 +253,16 @@
       {% endfor %}
     </select>
     <label class="quest-flag">
-      <input type="checkbox" name="used_in_quest" {% if key.used_in_quest %}checked{% endif %}>
+      <input type="checkbox" name="used_in_quest_{{ key.id }}" {% if key.used_in_quest %}checked{% endif %}>
       <span>Used in quest?</span>
     </label>
-    <input name="reason" placeholder="note…" value="{{ key.reason or '' }}">
+    <input name="reason_{{ key.id }}" placeholder="note…" value="{{ key.reason or '' }}">
     <div class="map-list">
       {% for map in maps %}
         <label class="map-checkbox">
           <input
             type="checkbox"
-            name="map_ids"
+            name="map_ids_{{ key.id }}"
             value="{{ map.id }}"
             {% if map.id in selected_maps %}checked{% endif %}
           >
@@ -227,11 +270,16 @@
         </label>
       {% endfor %}
     </div>
-    <button type="submit">Save</button>
-  </form>
+    <button type="submit" name="save_one" value="{{ key.id }}">Save</button>
+    </div>
   </div>
 {% endfor %}
 
+    <div class="save-all">
+      <button type="submit" name="save_all" value="1">Save all changes</button>
+    </div>
+  </form>
+
 </div>
 </body>
 </html>