Fix brief loading: remove stale jsonPreview refs, add Export button, rename Load

- Fixed null reference error when loading JSON files (removed deleted jsonPreview element refs)
- Added Export button to download saved briefs as JSON files
- Renamed "Load & Run" to just "Load" per user feedback

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DJP 2026-04-07 13:34:34 -04:00
parent 010d304c2a
commit 4e16367d2d
2 changed files with 26 additions and 36 deletions

View file

@ -198,26 +198,12 @@ function switchTab(name) {
function loadJSON(input) {
const file = input.files[0];
if (!file) return;
document.getElementById('jsonFileName').textContent = file.name;
const reader = new FileReader();
reader.onload = (e) => {
try {
const brief = JSON.parse(e.target.result);
loadedBrief = brief;
document.getElementById('jsonPreview').style.display = 'block';
document.getElementById('jsonPreviewText').textContent = JSON.stringify(brief, null, 2);
if (brief.clientName) document.getElementById('clientName').value = brief.clientName;
if (brief.category) document.getElementById('category').value = brief.category;
if (brief.hashtags) document.getElementById('hashtags').value = brief.hashtags.join(', ');
if (brief.keywords) document.getElementById('keywords').value = brief.keywords.join(', ');
document.getElementById('p-tiktok').checked = (brief.platforms || []).includes('tiktok');
document.getElementById('p-instagram').checked = (brief.platforms || []).includes('instagram');
document.getElementById('p-youtube').checked = (brief.platforms || []).includes('youtube');
if (brief.influencers) {
if (brief.influencers.tiktok) document.getElementById('inf-tiktok').value = brief.influencers.tiktok.join(', ');
if (brief.influencers.instagram) document.getElementById('inf-instagram').value = brief.influencers.instagram.join(', ');
if (brief.influencers.youtube) document.getElementById('inf-youtube').value = brief.influencers.youtube.join(', ');
}
populateForm(brief);
document.getElementById('jsonFileName').textContent = file.name + ' (loaded)';
} catch (err) { alert('Invalid JSON: ' + err.message); }
};
reader.readAsText(file);
@ -300,7 +286,8 @@ async function loadSavedBriefs() {
<div style="font-size:12px;color:#888;margin-bottom:8px">${esc(d.category || '')}</div>
</div>
<div style="display:flex;gap:6px">
<button class="upload-btn" onclick='loadBriefAndSwitch(${JSON.stringify(JSON.stringify(d))})'>Load &amp; Run</button>
<button class="upload-btn" onclick='loadBriefAndSwitch(${JSON.stringify(JSON.stringify(d))})'>Load</button>
<button class="expand-btn" onclick='exportBrief(${JSON.stringify(JSON.stringify(d))}, "${esc(b.name)}")'>Export</button>
<button class="expand-btn" onclick="deleteServerBrief('${esc(b.name)}')" style="color:#f44336;border-color:#552222">Delete</button>
</div>
</div>
@ -327,6 +314,15 @@ function loadBriefAndSwitch(jsonStr) {
document.querySelector('.tab').classList.add('active');
}
function exportBrief(jsonStr, name) {
const blob = new Blob([JSON.stringify(JSON.parse(jsonStr), null, 2)], { type: 'application/json' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `${name}-brief.json`;
a.click();
URL.revokeObjectURL(a.href);
}
async function deleteServerBrief(name) {
if (!confirm(`Delete saved brief "${name}"?`)) return;
try {

View file

@ -201,26 +201,12 @@ function switchTab(name) {
function loadJSON(input) {
const file = input.files[0];
if (!file) return;
document.getElementById('jsonFileName').textContent = file.name;
const reader = new FileReader();
reader.onload = (e) => {
try {
const brief = JSON.parse(e.target.result);
loadedBrief = brief;
document.getElementById('jsonPreview').style.display = 'block';
document.getElementById('jsonPreviewText').textContent = JSON.stringify(brief, null, 2);
if (brief.clientName) document.getElementById('clientName').value = brief.clientName;
if (brief.category) document.getElementById('category').value = brief.category;
if (brief.hashtags) document.getElementById('hashtags').value = brief.hashtags.join(', ');
if (brief.keywords) document.getElementById('keywords').value = brief.keywords.join(', ');
document.getElementById('p-tiktok').checked = (brief.platforms || []).includes('tiktok');
document.getElementById('p-instagram').checked = (brief.platforms || []).includes('instagram');
document.getElementById('p-youtube').checked = (brief.platforms || []).includes('youtube');
if (brief.influencers) {
if (brief.influencers.tiktok) document.getElementById('inf-tiktok').value = brief.influencers.tiktok.join(', ');
if (brief.influencers.instagram) document.getElementById('inf-instagram').value = brief.influencers.instagram.join(', ');
if (brief.influencers.youtube) document.getElementById('inf-youtube').value = brief.influencers.youtube.join(', ');
}
populateForm(brief);
document.getElementById('jsonFileName').textContent = file.name + ' (loaded)';
} catch (err) { alert('Invalid JSON: ' + err.message); }
};
reader.readAsText(file);
@ -262,8 +248,6 @@ function populateForm(brief) {
if (brief.influencers.instagram) document.getElementById('inf-instagram').value = brief.influencers.instagram.join(', ');
if (brief.influencers.youtube) document.getElementById('inf-youtube').value = brief.influencers.youtube.join(', ');
}
document.getElementById('jsonPreview').style.display = 'block';
document.getElementById('jsonPreviewText').textContent = JSON.stringify(brief, null, 2);
}
// ─── Save/load briefs to server ───
@ -306,7 +290,8 @@ async function loadSavedBriefs() {
<div style="font-size:12px;color:#888;margin-bottom:8px">${esc(d.category || '')}</div>
</div>
<div style="display:flex;gap:6px">
<button class="upload-btn" onclick='loadBriefAndSwitch(${JSON.stringify(JSON.stringify(d))})'>Load &amp; Run</button>
<button class="upload-btn" onclick='loadBriefAndSwitch(${JSON.stringify(JSON.stringify(d))})'>Load</button>
<button class="expand-btn" onclick='exportBrief(${JSON.stringify(JSON.stringify(d))}, "${esc(b.name)}")'>Export</button>
<button class="expand-btn" onclick="deleteServerBrief('${esc(b.name)}')" style="color:#f44336;border-color:#552222">Delete</button>
</div>
</div>
@ -333,6 +318,15 @@ function loadBriefAndSwitch(jsonStr) {
document.querySelector('.tab').classList.add('active'); // first tab = Pipeline
}
function exportBrief(jsonStr, name) {
const blob = new Blob([JSON.stringify(JSON.parse(jsonStr), null, 2)], { type: 'application/json' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `${name}-brief.json`;
a.click();
URL.revokeObjectURL(a.href);
}
async function deleteServerBrief(name) {
if (!confirm(`Delete saved brief "${name}"?`)) return;
try {