feat(gui): inline peer rename
Click on peer name in the table to edit it inline. Enter to save, Escape to cancel, blur also saves. Saved via POST /peers/<id>/rename without page reload. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -30,7 +30,13 @@
|
||||
<tbody>
|
||||
{% for p in peers %}
|
||||
<tr class="{{ 'row-disabled' if not p.enabled else '' }}">
|
||||
<td><span class="peer-name">{{ p.name }}</span></td>
|
||||
<td>
|
||||
{% if p.id %}
|
||||
<span class="peer-name editable" onclick="startRename(this, {{ p.id }}, '{{ csrf_token() }}')" title="Нажмите чтобы переименовать">{{ p.name }}</span>
|
||||
{% else %}
|
||||
<span class="peer-name">{{ p.name }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge {{ p.status }}" title="{{ p.handshake_ago }}">
|
||||
<i class="dot"></i>
|
||||
@@ -90,4 +96,36 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function startRename(el, peerId, csrf) {
|
||||
if (el.querySelector('input')) return;
|
||||
const oldName = el.textContent.trim();
|
||||
const inp = document.createElement('input');
|
||||
inp.className = 'rename-input';
|
||||
inp.value = oldName;
|
||||
el.textContent = '';
|
||||
el.appendChild(inp);
|
||||
inp.focus();
|
||||
inp.select();
|
||||
|
||||
function save() {
|
||||
const name = inp.value.trim();
|
||||
if (!name || name === oldName) { el.textContent = oldName; return; }
|
||||
fetch(`/peers/${peerId}/rename`, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
||||
body: `name=${encodeURIComponent(name)}&csrf_token=${encodeURIComponent(csrf)}`
|
||||
}).then(r => {
|
||||
el.textContent = r.ok ? name : oldName;
|
||||
}).catch(() => { el.textContent = oldName; });
|
||||
}
|
||||
|
||||
inp.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); save(); }
|
||||
if (e.key === 'Escape') { el.textContent = oldName; }
|
||||
});
|
||||
inp.addEventListener('blur', save);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user