feat: enhance keys page with grouped key display and inline editing functionality
This commit is contained in:
+405
-287
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OnlyScavs – Key Ratings</title>
|
||||
<title>OnlyScavs – Keys</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
:root {
|
||||
@@ -34,7 +34,7 @@
|
||||
z-index: 0;
|
||||
}
|
||||
.page {
|
||||
max-width: 980px;
|
||||
max-width: 1020px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
position: relative;
|
||||
@@ -51,214 +51,155 @@
|
||||
height: 52px;
|
||||
background: rgba(14,14,14,0.92);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.nav-brand {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em;
|
||||
text-transform: uppercase; color: var(--accent); text-decoration: none; flex-shrink: 0;
|
||||
}
|
||||
.nav-links { display: flex; gap: 2px; flex-wrap: wrap; }
|
||||
.nav-links a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
color: #666; text-decoration: none; font-size: 0.8rem;
|
||||
padding: 5px 10px; border-radius: 5px; transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
|
||||
.nav-links a.active { color: var(--accent); background: rgba(156,207,255,0.08); }
|
||||
h1 {
|
||||
font-size: 1.4rem;
|
||||
margin: 0 0 16px;
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* ── filters ───────────────────────────────────────────── */
|
||||
.filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.filters label { color: var(--muted); font-size: 0.85rem; }
|
||||
select, input[type="text"] {
|
||||
background: #222;
|
||||
color: var(--text);
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 6px;
|
||||
padding: 7px 10px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
select:focus, input:focus { outline: 1px solid var(--accent); }
|
||||
button {
|
||||
background: #2a2a2a;
|
||||
color: var(--text);
|
||||
border: 1px solid #444;
|
||||
cursor: pointer;
|
||||
padding: 7px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
button:hover { background: #333; }
|
||||
|
||||
/* ── save-all bar ──────────────────────────────────────── */
|
||||
.save-all {
|
||||
margin: 4px 0 18px;
|
||||
}
|
||||
.save-all button {
|
||||
background: #1d3a52;
|
||||
border-color: #2d5a7a;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.save-all button:hover { background: #254a66; }
|
||||
|
||||
/* ── key card ──────────────────────────────────────────── */
|
||||
.key {
|
||||
display: grid;
|
||||
grid-template-columns: 56px 1fr auto;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
padding: 14px 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.key:hover { background: #161616; }
|
||||
|
||||
.key-thumb {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 6px;
|
||||
background: #1a1a1a;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* left column: name + tags */
|
||||
.key-info { min-width: 0; }
|
||||
.key-title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.key-title strong { font-size: 0.95rem; line-height: 1.3; }
|
||||
.key-title a { color: var(--accent); font-size: 0.8rem; }
|
||||
.map-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.map-tag {
|
||||
background: #1e2e1e;
|
||||
border: 1px solid #2a3f2a;
|
||||
color: #8fbc8f;
|
||||
border-radius: 999px;
|
||||
padding: 1px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* right column: controls */
|
||||
.key-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.priority-select {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* priority colour coding */
|
||||
option[value="4"], select.p4 { color: #ff6b6b; }
|
||||
option[value="3"], select.p3 { color: var(--accent2); }
|
||||
option[value="2"], select.p2 { color: #9ccfff; }
|
||||
option[value="1"], select.p1 { color: var(--muted); }
|
||||
option[value="0"], select.p0 { color: #555; }
|
||||
|
||||
.quest-flag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 5px 9px;
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.quest-flag input { margin: 0; cursor: pointer; }
|
||||
|
||||
.note-input {
|
||||
flex: 1 1 160px;
|
||||
min-width: 120px;
|
||||
max-width: 260px;
|
||||
font-size: 0.85rem;
|
||||
padding: 6px 9px;
|
||||
}
|
||||
|
||||
.map-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
.map-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.map-checkbox input { margin: 0; cursor: pointer; }
|
||||
|
||||
.save-btn {
|
||||
font-size: 0.82rem;
|
||||
padding: 6px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h1 { font-size: 1.4rem; margin: 0 0 14px; color: var(--accent); letter-spacing: 0.02em; }
|
||||
a { color: var(--accent); }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.key {
|
||||
grid-template-columns: 48px 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
.key-controls {
|
||||
grid-column: 1 / -1;
|
||||
min-width: unset;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
/* ── toolbar ───────────────────────────────────────────── */
|
||||
.toolbar {
|
||||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.key { grid-template-columns: 1fr; }
|
||||
.key-thumb { width: 48px; height: 48px; }
|
||||
select, input, button { min-height: 38px; font-size: 0.95rem; }
|
||||
.toolbar input[type="text"] {
|
||||
flex: 1 1 200px; max-width: 340px;
|
||||
background: #1e1e1e; color: var(--text); border: 1px solid #3a3a3a;
|
||||
border-radius: 6px; padding: 7px 11px; font-size: 0.9rem;
|
||||
}
|
||||
.toolbar input[type="text"]:focus { outline: 1px solid var(--accent); }
|
||||
|
||||
/* ── map sections ──────────────────────────────────────── */
|
||||
.map-section { margin-bottom: 28px; }
|
||||
.map-section.empty-section { display: none; }
|
||||
.map-section-header {
|
||||
font-size: 0.9rem; font-weight: 700; color: var(--accent2);
|
||||
letter-spacing: 0.06em; text-transform: uppercase;
|
||||
padding: 6px 0 5px; border-bottom: 1px solid #2a3a1e; margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ── table ─────────────────────────────────────────────── */
|
||||
.key-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
|
||||
.key-table th {
|
||||
text-align: left; color: var(--muted); font-weight: 600;
|
||||
font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
|
||||
padding: 7px 10px 5px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.key-table td { padding: 8px 10px; border-bottom: 1px solid #1e1e1e; vertical-align: middle; }
|
||||
.key-table tr:hover td { background: #161616; }
|
||||
.key-table tr.hidden-row { display: none; }
|
||||
|
||||
.key-thumb {
|
||||
width: 36px; height: 36px; border-radius: 4px;
|
||||
object-fit: contain; background: #1a1a1a; display: block;
|
||||
}
|
||||
|
||||
/* ── priority badge / picker ───────────────────────────── */
|
||||
.priority-badge {
|
||||
display: inline-block; border-radius: 4px; padding: 2px 7px;
|
||||
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
|
||||
white-space: nowrap; cursor: pointer; user-select: none;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
.priority-badge:hover { opacity: 0.75; }
|
||||
.pb-4 { background: rgba(255,107,107,0.15); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.3); }
|
||||
.pb-3 { background: rgba(255,213,128,0.12); color: var(--accent2); border: 1px solid rgba(255,213,128,0.25); }
|
||||
.pb-2 { background: rgba(156,207,255,0.1); color: var(--accent); border: 1px solid rgba(156,207,255,0.2); }
|
||||
.pb-1 { background: rgba(153,153,153,0.1); color: var(--muted); border: 1px solid rgba(153,153,153,0.2); }
|
||||
.pb-0 { background: rgba(80,80,80,0.1); color: #555; border: 1px solid #333; }
|
||||
.pb-none { background: transparent; color: #555; border: 1px solid #2a2a2a; font-style: italic; }
|
||||
|
||||
/* inline priority dropdown */
|
||||
.priority-select {
|
||||
background: #222; color: var(--text); border: 1px solid var(--accent);
|
||||
border-radius: 4px; padding: 2px 4px; font-size: 0.78rem; font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
option[value="4"] { color: #ff6b6b; }
|
||||
option[value="3"] { color: var(--accent2); }
|
||||
option[value="2"] { color: #9ccfff; }
|
||||
option[value="1"] { color: var(--muted); }
|
||||
option[value="0"] { color: #555; }
|
||||
|
||||
/* ── quest toggle ──────────────────────────────────────── */
|
||||
.quest-cell { text-align: center; }
|
||||
.quest-dot {
|
||||
display: inline-block; width: 10px; height: 10px;
|
||||
border-radius: 50%; background: var(--accent2);
|
||||
cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.quest-dot:hover { opacity: 0.6; }
|
||||
.quest-empty {
|
||||
display: inline-block; width: 10px; height: 10px;
|
||||
border-radius: 50%; border: 1px solid #333;
|
||||
cursor: pointer; transition: border-color 0.15s;
|
||||
}
|
||||
.quest-empty:hover { border-color: var(--accent2); }
|
||||
|
||||
/* ── map tags + popover ────────────────────────────────── */
|
||||
.map-cell { position: relative; }
|
||||
.map-tags { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
|
||||
.map-tag {
|
||||
background: #1e2e1e; border: 1px solid #2a3f2a; color: #8fbc8f;
|
||||
border-radius: 999px; padding: 1px 8px; font-size: 0.73rem;
|
||||
}
|
||||
.map-add-btn {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 18px; height: 18px; border-radius: 50%;
|
||||
background: transparent; border: 1px dashed #444; color: #555;
|
||||
font-size: 0.8rem; line-height: 1; cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.map-add-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
|
||||
.map-popover {
|
||||
display: none;
|
||||
position: absolute; top: 100%; left: 0; z-index: 200;
|
||||
background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 8px;
|
||||
padding: 10px 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.6);
|
||||
min-width: 200px;
|
||||
}
|
||||
.map-popover.open { display: block; }
|
||||
.map-popover label {
|
||||
display: flex; align-items: center; gap: 7px;
|
||||
padding: 4px 0; font-size: 0.83rem; cursor: pointer;
|
||||
}
|
||||
.map-popover label:hover { color: var(--accent); }
|
||||
.map-popover input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: var(--accent); }
|
||||
|
||||
/* ── note inline edit ──────────────────────────────────── */
|
||||
.note-cell { max-width: 200px; }
|
||||
.note-text {
|
||||
color: var(--muted); font-style: italic; font-size: 0.83rem;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
cursor: text; padding: 2px 4px; border-radius: 4px;
|
||||
border: 1px solid transparent; display: block;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.note-text:hover { border-color: #3a3a3a; }
|
||||
.note-text.empty { color: #444; font-style: italic; }
|
||||
.note-input {
|
||||
width: 100%; background: #222; color: var(--text);
|
||||
border: 1px solid var(--accent); border-radius: 4px;
|
||||
padding: 3px 6px; font-size: 0.83rem; display: none;
|
||||
}
|
||||
|
||||
/* save flash */
|
||||
@keyframes flash { 0%,100% { opacity:1; } 50% { opacity: 0.4; } }
|
||||
.saving { animation: flash 0.5s ease; }
|
||||
|
||||
.no-results {
|
||||
color: var(--muted); font-style: italic; padding: 10px; font-size: 0.88rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -276,107 +217,284 @@
|
||||
<a href="/barters">Barters</a>
|
||||
</div>
|
||||
</nav>
|
||||
<h1>Key Ratings</h1>
|
||||
|
||||
<form method="get" class="filters">
|
||||
<label for="map_id">Map</label>
|
||||
<select id="map_id" name="map_id">
|
||||
<option value="">All maps</option>
|
||||
{% for map in maps %}
|
||||
<option value="{{ map.id }}" {% if map_filter == map.id %}selected{% endif %}>
|
||||
{{ map.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<h1>Keys</h1>
|
||||
|
||||
<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 %}>Unrated</option>
|
||||
<option value="quest" {% if show == "quest" %}selected{% endif %}>Quest keys</option>
|
||||
</select>
|
||||
<div class="toolbar">
|
||||
<input type="text" id="key-search" placeholder="Search keys…" autocomplete="off" oninput="applySearch()">
|
||||
</div>
|
||||
|
||||
<label for="sort">Sort</label>
|
||||
<select id="sort" name="sort">
|
||||
<option value="priority_desc" {% if sort == "priority_desc" %}selected{% endif %}>Priority ↓</option>
|
||||
<option value="priority_asc" {% if sort == "priority_asc" %}selected{% endif %}>Priority ↑</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>
|
||||
{# Embed map list for JS #}
|
||||
<script>
|
||||
const MAPS = {{ maps | map(attribute='name') | list | tojson }};
|
||||
const MAP_IDS = {{ maps | map(attribute='id') | list | tojson }};
|
||||
</script>
|
||||
|
||||
<button type="submit">Apply</button>
|
||||
</form>
|
||||
{% macro priority_badge(key) %}
|
||||
{% if key.priority == 4 %}<span class="priority-badge pb-4" title="Click to change">SUPER</span>
|
||||
{% elif key.priority == 3 %}<span class="priority-badge pb-3" title="Click to change">HIGH</span>
|
||||
{% elif key.priority == 2 %}<span class="priority-badge pb-2" title="Click to change">MED</span>
|
||||
{% elif key.priority == 1 %}<span class="priority-badge pb-1" title="Click to change">LOW</span>
|
||||
{% elif key.priority == 0 %}<span class="priority-badge pb-0" title="Click to change">IGNORE</span>
|
||||
{% else %}<span class="priority-badge pb-none" title="Click to set priority">—</span>{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
<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 %}
|
||||
{% set selected_maps = key_maps.get(key.id, []) %}
|
||||
<div class="key" id="key-{{ key.id }}">
|
||||
|
||||
<img class="key-thumb" src="{{ key.grid_image_url }}" loading="lazy" alt="">
|
||||
|
||||
<div class="key-info">
|
||||
<div class="key-title">
|
||||
<strong>{{ key.name }}</strong>
|
||||
{% if key.wiki_url %}<a href="{{ key.wiki_url }}" target="_blank">wiki ↗</a>{% endif %}
|
||||
</div>
|
||||
{% if selected_maps %}
|
||||
<div class="map-tags">
|
||||
{% for map in maps %}
|
||||
{% if map.id in selected_maps %}
|
||||
<span class="map-tag">{{ map.name }}</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% macro key_row(key, show_maps=true) %}
|
||||
{% set selected_maps = key_maps.get(key.id, []) %}
|
||||
<tr data-key-id="{{ key.id }}"
|
||||
data-priority="{{ key.priority if key.priority is not none else '' }}"
|
||||
data-quest="{{ '1' if key.used_in_quest else '0' }}"
|
||||
data-reason="{{ key.reason or '' }}"
|
||||
data-map-ids="{{ selected_maps | join(',') }}">
|
||||
<td><img class="key-thumb" src="{{ key.grid_image_url }}" loading="lazy" alt=""></td>
|
||||
<td>
|
||||
<strong>{{ key.name }}</strong>
|
||||
{% if key.wiki_url %}<br><a href="{{ key.wiki_url }}" target="_blank" style="font-size:0.78rem">wiki ↗</a>{% endif %}
|
||||
</td>
|
||||
<td class="priority-cell">{{ priority_badge(key) }}</td>
|
||||
<td class="quest-cell">
|
||||
{% if key.used_in_quest %}
|
||||
<span class="quest-dot" title="Quest key — click to toggle"></span>
|
||||
{% else %}
|
||||
<span class="quest-empty" title="Not a quest key — click to toggle"></span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="map-cell">
|
||||
<div class="map-tags">
|
||||
{% if show_maps %}
|
||||
{% for m in maps %}{% if m.id in selected_maps %}<span class="map-tag">{{ m.name }}</span>{% endif %}{% endfor %}
|
||||
{% endif %}
|
||||
<span class="map-add-btn" title="Edit maps">+</span>
|
||||
</div>
|
||||
|
||||
<div class="key-controls">
|
||||
<input type="hidden" name="key_ids" value="{{ key.id }}">
|
||||
|
||||
<select name="priority_{{ key.id }}" class="priority-select">
|
||||
<option value="" {% if key.priority is none %}selected{% endif %}>— unrated</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 }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<label class="quest-flag" title="Used in a quest?">
|
||||
<input type="checkbox" name="used_in_quest_{{ key.id }}" {% if key.used_in_quest %}checked{% endif %}>
|
||||
<span>Quest</span>
|
||||
<div class="map-popover">
|
||||
{% for m in maps %}
|
||||
<label>
|
||||
<input type="checkbox" value="{{ m.id }}" {% if m.id in selected_maps %}checked{% endif %}>
|
||||
{{ m.name }}
|
||||
</label>
|
||||
|
||||
<input class="note-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_{{ key.id }}" value="{{ map.id }}"
|
||||
{% if map.id in selected_maps %}checked{% endif %}>
|
||||
<span>{{ map.name }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<button class="save-btn" type="submit" name="save_one" value="{{ key.id }}">Save</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</td>
|
||||
<td class="note-cell">
|
||||
<span class="note-text {% if not key.reason %}empty{% endif %}" title="Click to edit">{{ key.reason or 'add note…' }}</span>
|
||||
<input class="note-input" type="text" value="{{ key.reason or '' }}" placeholder="note…">
|
||||
</td>
|
||||
</tr>
|
||||
{% endmacro %}
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for map, map_keys in keys_by_map %}
|
||||
<div class="map-section{% if not map_keys %} empty-section{% endif %}" id="section-{{ map.id }}">
|
||||
<div class="map-section-header">{{ map.name }}</div>
|
||||
<table class="key-table">
|
||||
<thead><tr>
|
||||
<th style="width:40px"></th>
|
||||
<th>Key</th>
|
||||
<th>Priority</th>
|
||||
<th>Quest</th>
|
||||
<th>Maps</th>
|
||||
<th>Note</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{% for key in map_keys %}{{ key_row(key) }}{% endfor %}
|
||||
{% if not map_keys %}<tr><td colspan="6" class="no-results">No keys assigned to this map.</td></tr>{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="save-all">
|
||||
<button type="submit" name="save_all" value="1">Save all changes</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="map-section{% if not unassigned_keys %} empty-section{% endif %}" id="section-unassigned">
|
||||
<div class="map-section-header" style="color: var(--muted)">Unassigned</div>
|
||||
<table class="key-table">
|
||||
<thead><tr>
|
||||
<th style="width:40px"></th>
|
||||
<th>Key</th>
|
||||
<th>Priority</th>
|
||||
<th>Quest</th>
|
||||
<th>Maps</th>
|
||||
<th>Note</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{% for key in unassigned_keys %}{{ key_row(key, show_maps=false) }}{% endfor %}
|
||||
{% if not unassigned_keys %}<tr><td colspan="6" class="no-results">All keys assigned to maps.</td></tr>{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ── save helper ─────────────────────────────────────────────
|
||||
function saveKey(row) {
|
||||
const id = row.dataset.keyId;
|
||||
const priority = row.dataset.priority === '' ? null : parseInt(row.dataset.priority);
|
||||
const payload = {
|
||||
key_id: id,
|
||||
priority: priority,
|
||||
used_in_quest: row.dataset.quest === '1',
|
||||
reason: row.dataset.reason,
|
||||
map_ids: row.dataset.mapIds ? row.dataset.mapIds.split(',').filter(Boolean).map(Number) : [],
|
||||
};
|
||||
row.classList.add('saving');
|
||||
fetch('/rate_json', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(payload),
|
||||
}).then(() => row.classList.remove('saving'));
|
||||
}
|
||||
|
||||
// ── priority: click badge → inline select → save on change ─
|
||||
const PRIORITY_LABELS = ['IGNORE','LOW','MED','HIGH','SUPER'];
|
||||
const PRIORITY_CLASSES = ['pb-0','pb-1','pb-2','pb-3','pb-4'];
|
||||
|
||||
function renderBadge(cell, val) {
|
||||
const label = val === '' ? '—' : PRIORITY_LABELS[parseInt(val)];
|
||||
const cls = val === '' ? 'pb-none' : PRIORITY_CLASSES[parseInt(val)];
|
||||
cell.innerHTML = `<span class="priority-badge ${cls}" title="Click to change">${label}</span>`;
|
||||
cell.querySelector('.priority-badge').addEventListener('click', () => openPrioritySelect(cell));
|
||||
}
|
||||
|
||||
function openPrioritySelect(cell) {
|
||||
const row = cell.closest('tr');
|
||||
const current = row.dataset.priority;
|
||||
const sel = document.createElement('select');
|
||||
sel.className = 'priority-select';
|
||||
sel.innerHTML = `<option value="">— unrated</option>` +
|
||||
PRIORITY_LABELS.map((l, i) => `<option value="${i}">${l}</option>`).join('');
|
||||
sel.value = current;
|
||||
cell.innerHTML = '';
|
||||
cell.appendChild(sel);
|
||||
sel.focus();
|
||||
sel.addEventListener('change', () => {
|
||||
row.dataset.priority = sel.value;
|
||||
renderBadge(cell, sel.value);
|
||||
saveKey(row);
|
||||
});
|
||||
sel.addEventListener('blur', () => {
|
||||
if (cell.contains(sel)) renderBadge(cell, row.dataset.priority);
|
||||
});
|
||||
}
|
||||
|
||||
// ── quest: click dot to toggle ──────────────────────────────
|
||||
function renderQuest(cell, val) {
|
||||
if (val === '1') {
|
||||
cell.innerHTML = `<span class="quest-dot" title="Quest key — click to toggle"></span>`;
|
||||
} else {
|
||||
cell.innerHTML = `<span class="quest-empty" title="Not a quest key — click to toggle"></span>`;
|
||||
}
|
||||
cell.firstChild.addEventListener('click', () => {
|
||||
const row = cell.closest('tr');
|
||||
row.dataset.quest = row.dataset.quest === '1' ? '0' : '1';
|
||||
renderQuest(cell, row.dataset.quest);
|
||||
saveKey(row);
|
||||
});
|
||||
}
|
||||
|
||||
// ── maps: + button opens popover, checkboxes save on change ─
|
||||
function bindMapPopover(row) {
|
||||
const addBtn = row.querySelector('.map-add-btn');
|
||||
const popover = row.querySelector('.map-popover');
|
||||
const tagsDiv = row.querySelector('.map-tags');
|
||||
|
||||
addBtn.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
popover.classList.toggle('open');
|
||||
});
|
||||
|
||||
popover.querySelectorAll('input[type="checkbox"]').forEach(cb => {
|
||||
cb.addEventListener('change', () => {
|
||||
// rebuild map-ids from checked boxes
|
||||
const checked = [...popover.querySelectorAll('input:checked')].map(c => c.value);
|
||||
row.dataset.mapIds = checked.join(',');
|
||||
// rebuild tag display
|
||||
const names = [...popover.querySelectorAll('input:checked')]
|
||||
.map(c => c.closest('label').textContent.trim());
|
||||
tagsDiv.innerHTML = names.map(n => `<span class="map-tag">${n}</span>`).join('') +
|
||||
`<span class="map-add-btn" title="Edit maps">+</span>`;
|
||||
// re-bind the new add btn
|
||||
tagsDiv.querySelector('.map-add-btn').addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
popover.classList.toggle('open');
|
||||
});
|
||||
saveKey(row);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ── note: click text → input, blur → save ──────────────────
|
||||
function bindNote(row) {
|
||||
const span = row.querySelector('.note-text');
|
||||
const input = row.querySelector('.note-input');
|
||||
|
||||
span.addEventListener('click', () => {
|
||||
span.style.display = 'none';
|
||||
input.style.display = 'block';
|
||||
input.focus();
|
||||
input.select();
|
||||
});
|
||||
|
||||
function commitNote() {
|
||||
const val = input.value.trim();
|
||||
row.dataset.reason = val;
|
||||
span.textContent = val || 'add note…';
|
||||
span.classList.toggle('empty', !val);
|
||||
input.style.display = 'none';
|
||||
span.style.display = 'block';
|
||||
saveKey(row);
|
||||
}
|
||||
|
||||
input.addEventListener('blur', commitNote);
|
||||
input.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); commitNote(); }
|
||||
if (e.key === 'Escape') { input.value = row.dataset.reason; commitNote(); }
|
||||
});
|
||||
}
|
||||
|
||||
// ── fuzzy search ────────────────────────────────────────────
|
||||
function fuzzyMatch(query, target) {
|
||||
if (!query) return true;
|
||||
let qi = 0;
|
||||
for (let i = 0; i < target.length && qi < query.length; i++) {
|
||||
if (target[i] === query[qi]) qi++;
|
||||
}
|
||||
return qi === query.length;
|
||||
}
|
||||
|
||||
function applySearch() {
|
||||
const q = document.getElementById('key-search').value.toLowerCase().trim();
|
||||
document.querySelectorAll('.map-section:not(.empty-section)').forEach(section => {
|
||||
let visible = 0;
|
||||
section.querySelectorAll('tr[data-key-id]').forEach(row => {
|
||||
const name = row.querySelector('strong').textContent.toLowerCase();
|
||||
const match = fuzzyMatch(q, name);
|
||||
row.classList.toggle('hidden-row', !match);
|
||||
if (match) visible++;
|
||||
});
|
||||
section.style.display = visible === 0 ? 'none' : '';
|
||||
});
|
||||
}
|
||||
|
||||
// ── close popovers when clicking outside ───────────────────
|
||||
document.addEventListener('click', () => {
|
||||
document.querySelectorAll('.map-popover.open').forEach(p => p.classList.remove('open'));
|
||||
});
|
||||
|
||||
// ── init all rows ───────────────────────────────────────────
|
||||
document.querySelectorAll('tr[data-key-id]').forEach(row => {
|
||||
const priorityCell = row.querySelector('.priority-cell');
|
||||
const questCell = row.querySelector('.quest-cell');
|
||||
|
||||
priorityCell.querySelector('.priority-badge')
|
||||
.addEventListener('click', () => openPrioritySelect(priorityCell));
|
||||
|
||||
questCell.firstElementChild.addEventListener('click', () => {
|
||||
row.dataset.quest = row.dataset.quest === '1' ? '0' : '1';
|
||||
renderQuest(questCell, row.dataset.quest);
|
||||
saveKey(row);
|
||||
});
|
||||
|
||||
bindMapPopover(row);
|
||||
bindNote(row);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user