feat: enhance keys page with grouped key display and inline editing functionality
This commit is contained in:
@@ -123,11 +123,29 @@ def _keys_context():
|
|||||||
|
|
||||||
key_query += f" ORDER BY {order_by} "
|
key_query += f" ORDER BY {order_by} "
|
||||||
keys = conn.execute(key_query, params).fetchall()
|
keys = conn.execute(key_query, params).fetchall()
|
||||||
conn.close()
|
|
||||||
|
|
||||||
key_maps = {k: sorted(v) for k, v in key_maps.items()}
|
key_maps = {k: sorted(v) for k, v in key_maps.items()}
|
||||||
|
|
||||||
|
# Build info view data: all keys (unfiltered), grouped by map then unassigned.
|
||||||
|
all_keys = conn.execute("""
|
||||||
|
SELECT k.id, k.name, k.grid_image_url, k.wiki_url,
|
||||||
|
r.priority, r.reason, COALESCE(r.used_in_quest, 0) AS used_in_quest
|
||||||
|
FROM keys k
|
||||||
|
LEFT JOIN key_ratings r ON k.id = r.key_id
|
||||||
|
ORDER BY k.name ASC
|
||||||
|
""").fetchall()
|
||||||
|
conn.close()
|
||||||
|
|
||||||
|
# keys_by_map: list of (map_row, [key_row, ...]) sorted by map name
|
||||||
|
keys_by_map = []
|
||||||
|
for m in sorted(maps, key=lambda r: r["name"]):
|
||||||
|
bucket = [k for k in all_keys if m["id"] in key_maps.get(k["id"], [])]
|
||||||
|
keys_by_map.append((m, bucket))
|
||||||
|
unassigned_keys = [k for k in all_keys if not key_maps.get(k["id"])]
|
||||||
|
|
||||||
return dict(keys=keys, maps=maps, key_maps=key_maps,
|
return dict(keys=keys, maps=maps, key_maps=key_maps,
|
||||||
map_filter=map_filter, sort=sort, show=show)
|
map_filter=map_filter, sort=sort, show=show,
|
||||||
|
keys_by_map=keys_by_map, unassigned_keys=unassigned_keys)
|
||||||
|
|
||||||
|
|
||||||
@app.route("/keys")
|
@app.route("/keys")
|
||||||
@@ -183,6 +201,23 @@ def rate_key():
|
|||||||
return redirect(f"{base_url}#key-{key_id}")
|
return redirect(f"{base_url}#key-{key_id}")
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/rate_json", methods=["POST"])
|
||||||
|
def rate_json():
|
||||||
|
data = request.get_json(force=True)
|
||||||
|
key_id = data.get("key_id")
|
||||||
|
if not key_id:
|
||||||
|
return jsonify({"ok": False, "error": "missing key_id"}), 400
|
||||||
|
priority = data.get("priority") # None or int
|
||||||
|
reason = data.get("reason", "")
|
||||||
|
used_in_quest = 1 if data.get("used_in_quest") else 0
|
||||||
|
map_ids = [int(m) for m in data.get("map_ids", [])]
|
||||||
|
conn = get_db()
|
||||||
|
_update_key(conn, key_id, priority, reason, used_in_quest, map_ids)
|
||||||
|
conn.commit()
|
||||||
|
conn.close()
|
||||||
|
return jsonify({"ok": True})
|
||||||
|
|
||||||
|
|
||||||
def _update_key(conn, key_id, priority, reason, used_in_quest, map_ids):
|
def _update_key(conn, key_id, priority, reason, used_in_quest, map_ids):
|
||||||
conn.execute("""
|
conn.execute("""
|
||||||
INSERT INTO key_ratings (key_id, priority, reason, used_in_quest)
|
INSERT INTO key_ratings (key_id, priority, reason, used_in_quest)
|
||||||
|
|||||||
+397
-279
@@ -1,7 +1,7 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>OnlyScavs – Key Ratings</title>
|
<title>OnlyScavs – Keys</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
.page {
|
.page {
|
||||||
max-width: 980px;
|
max-width: 1020px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 24px 16px;
|
padding: 24px 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -51,214 +51,155 @@
|
|||||||
height: 52px;
|
height: 52px;
|
||||||
background: rgba(14,14,14,0.92);
|
background: rgba(14,14,14,0.92);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||||
}
|
}
|
||||||
.nav-brand {
|
.nav-brand {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em;
|
||||||
font-weight: 700;
|
text-transform: uppercase; color: var(--accent); text-decoration: none; flex-shrink: 0;
|
||||||
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 { display: flex; gap: 2px; flex-wrap: wrap; }
|
||||||
.nav-links a {
|
.nav-links a {
|
||||||
color: #666;
|
color: #666; text-decoration: none; font-size: 0.8rem;
|
||||||
text-decoration: none;
|
padding: 5px 10px; border-radius: 5px; transition: color 0.15s, background 0.15s;
|
||||||
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: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); }
|
.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); }
|
a { color: var(--accent); }
|
||||||
|
|
||||||
@media (max-width: 720px) {
|
/* ── toolbar ───────────────────────────────────────────── */
|
||||||
.key {
|
.toolbar {
|
||||||
grid-template-columns: 48px 1fr;
|
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
|
||||||
grid-template-rows: auto auto;
|
|
||||||
}
|
}
|
||||||
.key-controls {
|
.toolbar input[type="text"] {
|
||||||
grid-column: 1 / -1;
|
flex: 1 1 200px; max-width: 340px;
|
||||||
min-width: unset;
|
background: #1e1e1e; color: var(--text); border: 1px solid #3a3a3a;
|
||||||
justify-content: flex-start;
|
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;
|
||||||
}
|
}
|
||||||
@media (max-width: 480px) {
|
|
||||||
.key { grid-template-columns: 1fr; }
|
/* ── table ─────────────────────────────────────────────── */
|
||||||
.key-thumb { width: 48px; height: 48px; }
|
.key-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
|
||||||
select, input, button { min-height: 38px; font-size: 0.95rem; }
|
.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -276,107 +217,284 @@
|
|||||||
<a href="/barters">Barters</a>
|
<a href="/barters">Barters</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<h1>Key Ratings</h1>
|
|
||||||
|
|
||||||
<form method="get" class="filters">
|
<h1>Keys</h1>
|
||||||
<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>
|
|
||||||
|
|
||||||
<label for="show">Show</label>
|
<div class="toolbar">
|
||||||
<select id="show" name="show">
|
<input type="text" id="key-search" placeholder="Search keys…" autocomplete="off" oninput="applySearch()">
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
{% for key in keys %}
|
{# Embed map list for JS #}
|
||||||
|
<script>
|
||||||
|
const MAPS = {{ maps | map(attribute='name') | list | tojson }};
|
||||||
|
const MAP_IDS = {{ maps | map(attribute='id') | list | tojson }};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{% 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 %}
|
||||||
|
|
||||||
|
{% macro key_row(key, show_maps=true) %}
|
||||||
{% set selected_maps = key_maps.get(key.id, []) %}
|
{% set selected_maps = key_maps.get(key.id, []) %}
|
||||||
<div class="key" id="key-{{ key.id }}">
|
<tr data-key-id="{{ key.id }}"
|
||||||
|
data-priority="{{ key.priority if key.priority is not none else '' }}"
|
||||||
<img class="key-thumb" src="{{ key.grid_image_url }}" loading="lazy" alt="">
|
data-quest="{{ '1' if key.used_in_quest else '0' }}"
|
||||||
|
data-reason="{{ key.reason or '' }}"
|
||||||
<div class="key-info">
|
data-map-ids="{{ selected_maps | join(',') }}">
|
||||||
<div class="key-title">
|
<td><img class="key-thumb" src="{{ key.grid_image_url }}" loading="lazy" alt=""></td>
|
||||||
|
<td>
|
||||||
<strong>{{ key.name }}</strong>
|
<strong>{{ key.name }}</strong>
|
||||||
{% if key.wiki_url %}<a href="{{ key.wiki_url }}" target="_blank">wiki ↗</a>{% endif %}
|
{% if key.wiki_url %}<br><a href="{{ key.wiki_url }}" target="_blank" style="font-size:0.78rem">wiki ↗</a>{% endif %}
|
||||||
</div>
|
</td>
|
||||||
{% if selected_maps %}
|
<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">
|
<div class="map-tags">
|
||||||
{% for map in maps %}
|
{% if show_maps %}
|
||||||
{% if map.id in selected_maps %}
|
{% for m in maps %}{% if m.id in selected_maps %}<span class="map-tag">{{ m.name }}</span>{% endif %}{% endfor %}
|
||||||
<span class="map-tag">{{ map.name }}</span>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
<span class="map-add-btn" title="Edit maps">+</span>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
<div class="map-popover">
|
||||||
</div>
|
{% for m in maps %}
|
||||||
|
<label>
|
||||||
<div class="key-controls">
|
<input type="checkbox" value="{{ m.id }}" {% if m.id in selected_maps %}checked{% endif %}>
|
||||||
<input type="hidden" name="key_ids" value="{{ key.id }}">
|
{{ m.name }}
|
||||||
|
|
||||||
<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>
|
|
||||||
</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>
|
</label>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</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 %}
|
||||||
|
|
||||||
<button class="save-btn" type="submit" name="save_one" value="{{ key.id }}">Save</button>
|
{% for map, map_keys in keys_by_map %}
|
||||||
</div>
|
<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>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<div class="save-all">
|
<div class="map-section{% if not unassigned_keys %} empty-section{% endif %}" id="section-unassigned">
|
||||||
<button type="submit" name="save_all" value="1">Save all changes</button>
|
<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>
|
||||||
</form>
|
|
||||||
|
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user