catarrh/otaman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: edit/delete buttons for custom files

Browse Source 
- each row now shows Edit and Delete buttons (same styling as the
  profiler list buttons) instead of the red X glyph
- Edit reloads the entry into the top form: the Add button becomes
  Save (data-l10n updated too) and a Cancel button appears; submit
  updates the entry in place, recomputing fid/parentFid and excluding
  the edited row from the duplicate-path check
- Delete removes without confirmation; deleting the row being edited
  cancels the edit and an earlier deletion shifts the edit index
- pysimCustomAdd renamed to pysimCustomSubmit; tests for the whole
  flow; SW cache v114 -> v115.
This commit is contained in:
Антон Трошин
2026-09-12 20:14:24 +03:00
parent 82fb2c8800
commit 4598a70db2
8 changed files with 225 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -1
View File
@@ -538,7 +538,8 @@ Files not in pysim's model can be added manually:
1. Switch to the **Custom files** tab in the Profiler list
2. Enter the file path (e.g., `3F00/6F46`) and an alias (e.g., `EF.SPN`)
3. Click **Add** — the file appears in the tree in italics (unverified)
4. Click the file to verify existence — on success, it behaves like a model file
4. Use **Edit** on a row to reload it into the form (the button becomes **Save** and a **Cancel** button appears) or **Delete** to remove it
5. Click the file to verify existence — on success, it behaves like a model file
Custom files persist in `localStorage` across sessions. Export/import as JSON for sharing.
README_RUS.md
+2 -1
View File
@@ -512,7 +512,8 @@ Delivery PoR (SPI2 `01`) проще — карта возвращает PoR на
1. Перейдите на вкладку **Custom files** в списке профайлера
2. Введите путь (например, `3F00/6F46`) и псевдоним (например, `EF.SPN`)
3. Нажмите **Add** — файл появится в дереве курсивом (непроверенный)
4. Кликните для проверки существования — при успехе работает как обычный файл
4. Кнопка **Edit** загружает запись в форму (кнопка становится **Save**, появляется **Cancel**), **Delete** удаляет запись без подтверждения
5. Кликните для проверки существования — при успехе работает как обычный файл
Пользовательские файлы сохраняются в `localStorage`. Экспорт/импорт в JSON для обмена.
frontend/help-ru.html
+1 -1
View File
@@ -405,7 +405,7 @@
<h4 id="custom-files" class="font-medium mb-1">Пользовательские файлы</h4>
<p class="text-sm mb-3">Добавление файлов, не покрытых моделью pySim: введите полный путь (например, <code class="font-mono text-sm">3F00/7F20/6F46</code>) и псевдоним (например, <code class="font-mono text-sm">EF.SPN</code>), затем нажмите <strong>Добавить</strong>; добавленные файлы появляются в дереве &laquo;Файловый менеджер&raquo;. Список сохраняется в <code class="font-mono text-sm">localStorage</code>; обмен — <strong>Экспорт в JSON</strong> / <strong>Экспорт в файл</strong> и <strong>Импорт из файла</strong> / <strong>Вставить и импортировать</strong> / <strong>Импорт JSON из буфера</strong>.</p>
<p class="text-sm mb-3">Добавление файлов, не покрытых моделью pySim: введите полный путь (например, <code class="font-mono text-sm">3F00/7F20/6F46</code>) и псевдоним (например, <code class="font-mono text-sm">EF.SPN</code>), затем нажмите <strong>Добавить</strong>; добавленные файлы появляются в дереве &laquo;Файловый менеджер&raquo;. В каждой строке есть кнопки <strong>&laquo;Редактировать&raquo;</strong> (загружает запись в форму — кнопка становится <strong>&laquo;Сохранить&raquo;</strong>, появляется <strong>&laquo;Отмена&raquo;</strong>) и <strong>&laquo;Удалить&raquo;</strong> (без подтверждения). Список сохраняется в <code class="font-mono text-sm">localStorage</code>; обмен — <strong>Экспорт в JSON</strong> / <strong>Экспорт в файл</strong> и <strong>Импорт из файла</strong> / <strong>Вставить и импортировать</strong> / <strong>Импорт JSON из буфера</strong>.</p>
<section class="mb-10">
<h2 id="proactive-uicc" class="text-xl font-semibold mb-3 border-b border-gray-300 dark:border-slate-700 pb-1">6. Симулятор телефона</h2>
frontend/help.html
+1 -1
View File
@@ -405,7 +405,7 @@
<h4 id="custom-files" class="font-medium mb-1">Custom files</h4>
<p class="text-sm mb-3">Add files that pySim&rsquo;s model does not cover: enter the full path (e.g. <code class="font-mono text-sm">3F00/7F20/6F46</code>) and an alias (e.g. <code class="font-mono text-sm">EF.SPN</code>), then press <strong>Add</strong>; added files appear in the File manager tree. The list persists in <code class="font-mono text-sm">localStorage</code> and can be shared with <strong>Export as JSON</strong> / <strong>Export to file</strong> and restored with <strong>Import from file</strong> / <strong>Paste &amp; import</strong> / <strong>Import JSON from clipboard</strong>.</p>
<p class="text-sm mb-3">Add files that pySim&rsquo;s model does not cover: enter the full path (e.g. <code class="font-mono text-sm">3F00/7F20/6F46</code>) and an alias (e.g. <code class="font-mono text-sm">EF.SPN</code>), then press <strong>Add</strong>; added files appear in the File manager tree. Each row has <strong>Edit</strong> (reloads the entry into the form — the button becomes <strong>Save</strong> and a <strong>Cancel</strong> button appears) and <strong>Delete</strong> (no confirmation) buttons. The list persists in <code class="font-mono text-sm">localStorage</code> and can be shared with <strong>Export as JSON</strong> / <strong>Export to file</strong> and restored with <strong>Import from file</strong> / <strong>Paste &amp; import</strong> / <strong>Import JSON from clipboard</strong>.</p>
<section class="mb-10">
<h2 id="proactive-uicc" class="text-xl font-semibold mb-3 border-b border-gray-300 dark:border-slate-700 pb-1">6. Phone simulator</h2>
frontend/index.html
+46 -9
View File
@@ -767,9 +767,10 @@
<div id="profiler-list-custom" class="hidden">
<div class="mb-2 text-xs font-mono text-gray-600 dark:text-slate-400" data-l10n="Add known file paths and aliases to the file tree.">Add known file paths and aliases to the file tree.</div>
<div class="flex gap-2 items-center mb-2">
<input id="pysim-cf-path" class="font-mono flex-1 border border-gray-300 dark:border-slate-600 text-sm rounded px-3 py-2.5 dark:bg-slate-800" placeholder="3F00/6F46" onkeydown="if(event.key==='Enter')pysimCustomAdd()">
<input id="pysim-cf-name" class="font-mono w-48 border border-gray-300 dark:border-slate-600 text-sm rounded px-3 py-2.5 dark:bg-slate-800" placeholder="EF.SPN" onkeydown="if(event.key==='Enter')pysimCustomAdd()">
<button onclick="pysimCustomAdd()" class="px-3 py-2.5 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 whitespace-nowrap" data-l10n="Add">Add</button>
<input id="pysim-cf-path" class="font-mono flex-1 border border-gray-300 dark:border-slate-600 text-sm rounded px-3 py-2.5 dark:bg-slate-800" placeholder="3F00/6F46" onkeydown="if(event.key==='Enter')pysimCustomSubmit()">
<input id="pysim-cf-name" class="font-mono w-48 border border-gray-300 dark:border-slate-600 text-sm rounded px-3 py-2.5 dark:bg-slate-800" placeholder="EF.SPN" onkeydown="if(event.key==='Enter')pysimCustomSubmit()">
<button id="pysim-cf-add-btn" onclick="pysimCustomSubmit()" class="px-3 py-2.5 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 whitespace-nowrap" data-l10n="Add">Add</button>
<button id="pysim-cf-cancel-btn" onclick="pysimCustomEditCancel()" class="hidden px-3 py-2.5 bg-gray-600 text-white text-sm font-medium rounded hover:bg-gray-700 whitespace-nowrap" data-l10n="Cancel">Cancel</button>
</div>
<div id="pysim-cf-list" class="text-xs font-mono text-gray-600 dark:text-slate-400"></div>
<input type="file" id="pysim-cf-file" accept=".json,application/json" class="hidden" onchange="pysimCustomImportFile(this)">
@@ -7118,7 +7119,9 @@ function pysimCustomSave() {
localStorage.setItem('pysim_custom_files', JSON.stringify(pysimCustomFiles));
}
function pysimCustomAdd() {
let pysimCustomEditIndex = null;
function pysimCustomSubmit() {
const pathEl = document.getElementById('pysim-cf-path');
const nameEl = document.getElementById('pysim-cf-name');
const path = pathEl.value.trim().toUpperCase();
@@ -7132,15 +7135,46 @@ function pysimCustomAdd() {
if (parts.length < 2) { alert('Path must have at least 2 parts, e.g. 3F00/6F46'); return; }
const fid = parts[parts.length - 1];
const parentFid = parts[parts.length - 2];
if (pysimCustomFiles.some(c => c.path.toUpperCase() === path)) { alert('Path already exists'); return; }
pysimCustomFiles.push({ path, name, fid, parentFid });
if (pysimCustomFiles.some((c, i) => i !== pysimCustomEditIndex && c.path.toUpperCase() === path)) { alert('Path already exists'); return; }
if (pysimCustomEditIndex !== null) {
pysimCustomFiles[pysimCustomEditIndex] = { path, name, fid, parentFid };
} else {
pysimCustomFiles.push({ path, name, fid, parentFid });
}
pysimCustomSave();
pysimCustomRender();
pathEl.value = '';
nameEl.value = '';
pysimCustomEditCancel();
}
function pysimCustomEdit(i) {
const c = pysimCustomFiles[i];
if (!c) return;
pysimCustomEditIndex = i;
const pathEl = document.getElementById('pysim-cf-path');
document.getElementById('pysim-cf-name').value = c.name;
pathEl.value = c.path;
const btn = document.getElementById('pysim-cf-add-btn');
btn.textContent = t('Save');
btn.setAttribute('data-l10n', 'Save');
document.getElementById('pysim-cf-cancel-btn').classList.remove('hidden');
pathEl.focus();
}
function pysimCustomEditCancel() {
pysimCustomEditIndex = null;
document.getElementById('pysim-cf-path').value = '';
document.getElementById('pysim-cf-name').value = '';
const btn = document.getElementById('pysim-cf-add-btn');
btn.textContent = t('Add');
btn.setAttribute('data-l10n', 'Add');
document.getElementById('pysim-cf-cancel-btn').classList.add('hidden');
}
function pysimCustomRemove(i) {
if (pysimCustomEditIndex !== null) {
if (i === pysimCustomEditIndex) pysimCustomEditCancel();
else if (i < pysimCustomEditIndex) pysimCustomEditIndex--;
}
pysimCustomFiles.splice(i, 1);
pysimCustomSave();
pysimCustomRender();
@@ -7154,7 +7188,10 @@ function pysimCustomRender() {
const c = pysimCustomFiles[i];
html += '<div class="flex items-center gap-2 py-1 border-b border-gray-200 dark:border-slate-700">';
html += '<span class="text-gray-500">' + esc(c.path) + '</span> <span class="text-blue-600 dark:text-blue-400">→</span> <b>' + esc(c.name) + '</b>';
html += '<span onclick="pysimCustomRemove(' + i + ')" class="ml-auto cursor-pointer text-red-400 hover:text-red-600">✕</span>';
html += '<span class="ml-auto flex gap-2">';
html += '<button onclick="pysimCustomEdit(' + i + ')" class="px-2 py-0.5 text-xs rounded bg-blue-600 text-white hover:bg-blue-700">' + esc(t('Edit')) + '</button>';
html += '<button onclick="pysimCustomRemove(' + i + ')" class="px-2 py-0.5 text-xs rounded bg-red-600 text-white hover:bg-red-700">' + esc(t('Delete')) + '</button>';
html += '</span>';
html += '</div>';
}
el.innerHTML = html;
frontend/sw.js
+1 -1
View File
@@ -1,4 +1,4 @@
const CACHE = 'otaman-v114';
const CACHE = 'otaman-v115';
const URLS = [
'index.html',
'help.html',
frontend/tests/custom_files.test.js
+165
View File
@@ -0,0 +1,165 @@
const { test } = require('node:test');
const assert = require('node:assert');
const fs = require('node:fs');
const path = require('node:path');
const html = fs.readFileSync(path.join(__dirname, '..', 'index.html'), 'utf8');
function extractFunc(src, name) {
const re = new RegExp('function\\s+' + name + '\\s*\\([^)]*\\)\\s*\\{');
const m = re.exec(src);
if (!m) throw new Error('function ' + name + ' not found');
let i = m.index + m[0].length - 1;
let depth = 0;
for (; i < src.length; i++) {
if (src[i] === '{') depth++;
else if (src[i] === '}') {
depth--;
if (depth === 0) break;
}
}
return src.slice(m.index, i + 1);
}
let code = 'var pysimCustomFiles = [];\nvar pysimCustomEditIndex = null;\n';
for (const fn of ['pysimCustomSave', 'pysimCustomSubmit', 'pysimCustomEdit', 'pysimCustomEditCancel', 'pysimCustomRemove', 'pysimCustomRender']) {
code += extractFunc(html, fn) + '\n';
}
code += 'globalThis.esc = s => s;\nglobalThis.t = s => s;\n';
eval(code);
function fakeEl(id) {
const classes = new Set();
return {
id,
value: '',
innerHTML: '',
textContent: '',
attrs: {},
focused: 0,
classList: {
add: (...cs) => cs.forEach(c => classes.add(c)),
remove: (...cs) => cs.forEach(c => classes.delete(c)),
contains: c => classes.has(c),
},
setAttribute(k, v) { this.attrs[k] = v; },
focus() { this.focused++; },
};
}
function setup(entries) {
const els = {
'pysim-cf-path': fakeEl('pysim-cf-path'),
'pysim-cf-name': fakeEl('pysim-cf-name'),
'pysim-cf-list': fakeEl('pysim-cf-list'),
'pysim-cf-add-btn': fakeEl('pysim-cf-add-btn'),
'pysim-cf-cancel-btn': fakeEl('pysim-cf-cancel-btn'),
};
els['pysim-cf-cancel-btn'].classList.add('hidden');
const store = {};
globalThis.localStorage = {
getItem: k => (k in store ? store[k] : null),
setItem: (k, v) => { store[k] = String(v); },
};
globalThis.document = { getElementById: id => els[id] || null };
globalThis.alertCalls = [];
globalThis.alert = m => { globalThis.alertCalls.push(m); };
pysimCustomFiles = (entries || []).map(e => Object.assign({}, e));
pysimCustomEditIndex = null;
return els;
}
const entry = (fid, name, parentFid) => ({ path: (parentFid || '3F00') + '/' + fid, name, fid, parentFid: parentFid || '3F00' });
test('rows render Edit and Delete buttons instead of the X glyph', () => {
const els = setup([entry('6F46', 'EF.SPN')]);
pysimCustomRender();
const out = els['pysim-cf-list'].innerHTML;
assert.match(out, /pysimCustomEdit\(0\)/);
assert.match(out, /pysimCustomRemove\(0\)/);
assert.match(out, />Edit</);
assert.match(out, />Delete</);
assert.ok(!out.includes('✕'), 'old X glyph must be gone');
});
test('edit fills the top form and switches it to Save mode', () => {
const els = setup([entry('6F46', 'EF.SPN')]);
pysimCustomEdit(0);
assert.strictEqual(pysimCustomEditIndex, 0);
assert.strictEqual(els['pysim-cf-path'].value, '3F00/6F46');
assert.strictEqual(els['pysim-cf-name'].value, 'EF.SPN');
assert.strictEqual(els['pysim-cf-add-btn'].textContent, 'Save');
assert.strictEqual(els['pysim-cf-add-btn'].attrs['data-l10n'], 'Save');
assert.ok(!els['pysim-cf-cancel-btn'].classList.contains('hidden'));
assert.strictEqual(els['pysim-cf-path'].focused, 1);
});
test('submit in edit mode updates the entry in place', () => {
const els = setup([entry('6F46', 'EF.SPN')]);
pysimCustomEdit(0);
els['pysim-cf-path'].value = '3F00/7F20/6F46';
els['pysim-cf-name'].value = 'EF.SPNX';
pysimCustomSubmit();
assert.strictEqual(pysimCustomFiles.length, 1);
assert.deepStrictEqual(pysimCustomFiles[0], { path: '3F00/7F20/6F46', name: 'EF.SPNX', fid: '6F46', parentFid: '7F20' });
assert.strictEqual(pysimCustomEditIndex, null);
assert.strictEqual(els['pysim-cf-add-btn'].textContent, 'Add');
assert.ok(els['pysim-cf-cancel-btn'].classList.contains('hidden'));
});
test('saving an edited entry with its own path is not a duplicate', () => {
const els = setup([entry('6F46', 'EF.SPN')]);
pysimCustomEdit(0);
pysimCustomSubmit();
assert.strictEqual(pysimCustomFiles.length, 1);
assert.deepStrictEqual(globalThis.alertCalls, []);
});
test('editing to another entry path is rejected as duplicate', () => {
const els = setup([entry('6F46', 'EF.SPN'), entry('6F44', 'EF.SPN2')]);
pysimCustomEdit(0);
els['pysim-cf-path'].value = '3F00/6F44';
pysimCustomSubmit();
assert.deepStrictEqual(globalThis.alertCalls, ['Path already exists']);
assert.deepStrictEqual(pysimCustomFiles.map(c => c.path), ['3F00/6F46', '3F00/6F44']);
assert.strictEqual(pysimCustomEditIndex, 0);
});
test('cancel restores the Add mode and clears the inputs', () => {
const els = setup([entry('6F46', 'EF.SPN')]);
pysimCustomEdit(0);
pysimCustomEditCancel();
assert.strictEqual(pysimCustomEditIndex, null);
assert.strictEqual(els['pysim-cf-path'].value, '');
assert.strictEqual(els['pysim-cf-name'].value, '');
assert.strictEqual(els['pysim-cf-add-btn'].textContent, 'Add');
assert.strictEqual(els['pysim-cf-add-btn'].attrs['data-l10n'], 'Add');
assert.ok(els['pysim-cf-cancel-btn'].classList.contains('hidden'));
});
test('deleting the entry being edited cancels the edit', () => {
const els = setup([entry('6F46', 'EF.SPN')]);
pysimCustomEdit(0);
pysimCustomRemove(0);
assert.deepStrictEqual(pysimCustomFiles, []);
assert.strictEqual(pysimCustomEditIndex, null);
assert.strictEqual(els['pysim-cf-add-btn'].textContent, 'Add');
});
test('deleting before the edited row shifts the edit index', () => {
setup([entry('6F46', 'EF.SPN'), entry('6F44', 'EF.SPN2'), entry('6F42', 'EF.SPN3')]);
pysimCustomEdit(2);
pysimCustomRemove(0);
assert.strictEqual(pysimCustomEditIndex, 1);
assert.strictEqual(pysimCustomFiles[1].name, 'EF.SPN3');
});
test('submit adds a new entry when not editing', () => {
const els = setup([]);
els['pysim-cf-path'].value = '3f00/6f46';
els['pysim-cf-name'].value = 'EF.SPN';
pysimCustomSubmit();
assert.deepStrictEqual(pysimCustomFiles, [{ path: '3F00/6F46', name: 'EF.SPN', fid: '6F46', parentFid: '3F00' }]);
assert.strictEqual(els['pysim-cf-path'].value, '');
assert.strictEqual(els['pysim-cf-name'].value, '');
});
frontend/tests/html.test.js
+7
View File
@@ -54,3 +54,10 @@ test('file manager has FID / Name sort pills', () => {
assert.match(html, /data-fs-sort="name" onclick="pysimFsSetSort\('name'\)"/);
assert.ok(html.includes('pysim-fs-sort-pill'));
});
test('custom files form has add/save and cancel controls', () => {
assert.match(html, /id="pysim-cf-add-btn"[^>]*data-l10n="Add"/);
assert.match(html, /id="pysim-cf-cancel-btn"[^>]*class="hidden[^"]*"[^>]*data-l10n="Cancel"/);
assert.ok(html.includes("event.key==='Enter')pysimCustomSubmit()"));
assert.ok(!html.includes('pysimCustomAdd'));
});