sysops
1022 lines
49 KiB
HTML
1022 lines
49 KiB
HTML
{% extends "base.html" %}
|
||
{% block extra_head %}
|
||
<link rel="stylesheet" href="/static/css/parse-intel.css?v=1" />
|
||
<style>.word-chip-cloud{display:flex;flex-wrap:wrap;gap:.35rem;overflow-y:auto;padding:.4rem;background:rgba(0,0,0,.2);border-radius:8px}.word-chip{font-size:.72rem;padding:.15rem .5rem;border-radius:999px;background:rgba(232,168,56,.15);color:#f3e8d0;border:1px solid rgba(232,168,56,.3)}.word-chip.low{opacity:.7;font-size:.65rem}</style>
|
||
<style>
|
||
.browser-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
|
||
.browser-tab {
|
||
padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
|
||
background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.15); color: var(--text-secondary);
|
||
}
|
||
.browser-tab.active { background: rgba(212,175,55,.15); border-color: var(--accent-gold); color: var(--accent-gold); }
|
||
.parse-result-card { border: 1px solid rgba(148,163,184,.14); border-radius: 10px; padding: .75rem .85rem; margin-bottom: .65rem; background: rgba(7,11,18,.6); }
|
||
.parse-result-card header { display:flex; flex-direction:column; gap:.15rem; margin-bottom:.45rem; }
|
||
.parse-excerpt { color:#94a3b8; font-size:.82rem; line-height:1.45; margin:0 0 .45rem; }
|
||
.parse-headings { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.4rem; }
|
||
.parse-chip { font-size:.68rem; padding:.12rem .45rem; border-radius:999px; background:rgba(0,229,255,.08); color:#7dd3fc; border:1px solid rgba(0,229,255,.2); }
|
||
.parse-links { margin:.25rem 0 0; padding-left:1rem; font-size:.78rem; color:#cbd5e1; }
|
||
.parse-links a { color:#86efac; }
|
||
.intel-kpi-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.65rem; margin-bottom:1rem; }
|
||
@media (max-width:900px){ .intel-kpi-grid { grid-template-columns:repeat(2,1fr); } }
|
||
.intel-kpi { padding:.75rem; border-radius:10px; border:1px solid rgba(148,163,184,.14); background:rgba(7,11,18,.65); }
|
||
.intel-kpi .lbl { font-size:.68rem; color:#64748b; text-transform:uppercase; letter-spacing:.04em; }
|
||
.intel-kpi .val { font-size:1.35rem; font-weight:700; color:#f1f5f9; margin-top:.15rem; }
|
||
.intel-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
|
||
.intel-hype-cloud { display:flex; flex-wrap:wrap; gap:.45rem; margin:.5rem 0 1rem; }
|
||
.hype-chip { font-size:.78rem; padding:.25rem .6rem; border-radius:999px; border:1px solid rgba(168,85,247,.35); background:rgba(168,85,247,.12); color:#e9d5ff; cursor:default; }
|
||
.hype-chip.cross { border-color:rgba(255,215,0,.45); background:rgba(255,215,0,.1); color:#fde68a; box-shadow:0 0 12px rgba(255,215,0,.12); }
|
||
.hype-chip .score { opacity:.65; font-size:.65rem; margin-left:.25rem; }
|
||
.intel-page-card { border:1px solid rgba(148,163,184,.16); border-radius:12px; margin-bottom:.85rem; background:rgba(6,10,16,.85); overflow:hidden; }
|
||
.intel-page-head { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-start; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid rgba(148,163,184,.1); cursor:pointer; }
|
||
.intel-page-head:hover { background:rgba(0,229,255,.04); }
|
||
.intel-page-body { padding:0 1rem 1rem; }
|
||
.intel-signals { display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0; }
|
||
.signal-chip { font-size:.68rem; padding:.12rem .45rem; border-radius:999px; background:rgba(34,197,94,.12); color:#86efac; border:1px solid rgba(34,197,94,.25); }
|
||
.signal-chip.hot { background:rgba(245,158,11,.12); color:#fcd34d; border-color:rgba(245,158,11,.35); }
|
||
.intel-read-text { max-height:320px; overflow:auto; white-space:pre-wrap; font-size:.8rem; line-height:1.55; color:#cbd5e1; background:rgba(0,0,0,.35); padding:.85rem; border-radius:8px; border:1px solid rgba(148,163,184,.1); }
|
||
.intel-read-text.expanded { max-height:560px; }
|
||
.intel-section-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; margin:1rem 0 .4rem; font-weight:700; }
|
||
.intel-trend-table { width:100%; font-size:.82rem; }
|
||
.intel-trend-table td, .intel-trend-table th { padding:.35rem .5rem; border-bottom:1px solid rgba(148,163,184,.08); text-align:left; }
|
||
.hype-score { font-size:.75rem; color:#f59e0b; font-weight:700; }
|
||
.browser-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1rem; }
|
||
@media (max-width: 1100px) { .browser-layout { grid-template-columns: 1fr; } }
|
||
.browser-live-row {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;
|
||
}
|
||
@media (max-width: 900px) { .browser-live-row { grid-template-columns: 1fr; } }
|
||
.browser-live-panel { min-height: 380px; }
|
||
.browser-live-frame {
|
||
width: 100%; min-height: 420px; background: #0a0f1a; border-radius: 10px;
|
||
border: 1px solid rgba(148,163,184,.15); object-fit: contain;
|
||
}
|
||
.browser-novnc { width: 100%; height: 360px; border: 0; border-radius: 10px; background: #000; }
|
||
.browser-preview-text {
|
||
max-height: 220px; overflow: auto; font-size: 0.82rem; color: var(--text-muted);
|
||
white-space: pre-wrap; background: rgba(0,0,0,.25); padding: .75rem; border-radius: 8px;
|
||
}
|
||
.browser-links { max-height: 160px; overflow: auto; font-size: 0.78rem; }
|
||
.browser-status { font-size: 0.8rem; color: var(--accent-cyan); margin-top: 0.35rem; }
|
||
.novnc-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.5rem; }
|
||
.preset-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
|
||
.preset-chip { font-size: 0.78rem; padding: 0.25rem 0.55rem; border-radius: 999px; cursor: pointer; border: 1px solid rgba(148,163,184,.2); background: rgba(0,0,0,.2); }
|
||
.preset-chip:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
|
||
.job-bar {
|
||
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
|
||
padding: 0.6rem 0.85rem; margin-bottom: 1rem; border-radius: 10px;
|
||
background: rgba(0,0,0,.25); border: 1px solid rgba(148,163,184,.12);
|
||
}
|
||
.job-bar.active { border-color: rgba(232,168,56,.35); }
|
||
</style>
|
||
{% endblock %}
|
||
{% block content %}
|
||
<div x-data="browserPage()" x-init="init()">
|
||
<header class="page-header">
|
||
<h1>Browser & Monitor</h1>
|
||
<p class="subtitle page-tip">Voer een URL in — Playwright + live VNC desktop openen dezelfde pagina. Gebruik <strong>Volledige extractie</strong> voor gewicht, prijs en alle zichtbare data.</p>
|
||
</header>
|
||
|
||
<div class="job-bar" :class="{ active: jobRunning }">
|
||
<strong style="font-size:0.85rem">Achtergrondtaak</strong>
|
||
<span class="browser-status" style="margin:0" x-text="jobLabel || 'Geen actieve taak — je kunt vrij navigeren'"></span>
|
||
<button type="button" class="btn btn-sm btn-reject" x-show="jobRunning" @click="stopJob()">⏹ Stop</button>
|
||
<label style="font-size:0.78rem;color:var(--text-muted);margin-left:auto">
|
||
<input type="checkbox" x-model="vncSync" @change="startPoll()" /> Screenshot = VNC scherm
|
||
</label>
|
||
<label style="font-size:0.78rem;color:var(--text-muted)">
|
||
<input type="checkbox" x-model="livePoll" @change="startPoll()" /> Live poll
|
||
</label>
|
||
</div>
|
||
|
||
<section class="panel">
|
||
<h2>Snelle sites</h2>
|
||
<p class="page-tip">Klik om URL te laden. TikTok/Instagram vereisen soms inloggen via VNC.</p>
|
||
<div class="preset-grid">
|
||
<span class="preset-chip" @click="loadPreset('https://www.bidfood.nl/webshop/assortiment/mekkafood/_/N-1z10pje/')">Bidfood Mekkafood</span>
|
||
<span class="preset-chip" @click="loadPreset('https://www.sligro.nl/')">Sligro</span>
|
||
<span class="preset-chip" @click="loadPreset('https://www.tiktok.com/')">TikTok</span>
|
||
<span class="preset-chip" @click="loadPreset('https://www.instagram.com/')">Instagram</span>
|
||
<span class="preset-chip" @click="loadPreset('https://www.cheemafood.nl/')">Cheema</span>
|
||
</div>
|
||
<div class="form-grid" style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.5rem">
|
||
<input class="form-input" style="flex:2;min-width:200px" placeholder="Nieuwe site URL" x-model="newSiteUrl" />
|
||
<input class="form-input" style="flex:1;min-width:120px" placeholder="Naam" x-model="newSiteName" />
|
||
<button type="button" class="btn btn-secondary" @click="addSiteQuick()">+ Toevoegen aan monitor</button>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="browser-tabs">
|
||
<button type="button" class="browser-tab" :class="{ active: tab === 'research' }" @click="setTab('research')">Research</button>
|
||
<button type="button" class="browser-tab" :class="{ active: tab === 'monitor' }" @click="setTab('monitor')">Site Monitor <span class="muted">({{ stats.active_sites }})</span></button>
|
||
<button type="button" class="browser-tab" :class="{ active: tab === 'analyse' }" @click="setTab('analyse')">Parse Analyse</button>
|
||
</div>
|
||
|
||
<div class="browser-live-row" style="margin-bottom:1rem" x-show="tab === 'research'">
|
||
<section class="panel browser-live-panel">
|
||
<h2>Screenshot <small class="muted" x-text="vncSync ? 'VNC sync' : 'Playwright'"></small></h2>
|
||
<img class="browser-live-frame" :src="screenshotUrl" alt="Browser screenshot" />
|
||
</section>
|
||
<section class="panel browser-live-panel">
|
||
<h2>Live desktop <small class="muted">noVNC</small>
|
||
<a href="{{ novnc_url }}" target="_blank" style="font-size:0.75rem;margin-left:0.5rem">Open apart ↗</a>
|
||
</h2>
|
||
<iframe class="browser-novnc" src="{{ novnc_url }}" title="Live VNC" data-clear-on-nav></iframe>
|
||
<p class="novnc-hint">Wachtwoord: <code>Foodlinkk2026</code>. Tip: open VNC ook <a href="{{ novnc_url }}" target="_blank">in apart venster</a> — dan geen navigatie-waarschuwing bij wisselen van pagina.</p>
|
||
</section>
|
||
</div>
|
||
|
||
<div x-show="tab === 'research'">
|
||
<section class="panel browser-instruct-box">
|
||
<h2>Interactief — leer Herman wat te klikken</h2>
|
||
<p class="page-tip">Beschrijf in het Nederlands wat de browser moet doen. Voorbeeld: <em>Accepteren cookies, scroll naar beneden, klik op Mekkafood filter</em></p>
|
||
<textarea class="form-input" x-model="instruction" rows="3" placeholder="Accepteren cookies → scroll 2× → klik op 'Snacks'"></textarea>
|
||
<div class="browser-action-bar">
|
||
<button type="button" class="btn btn-primary" @click="instructBrowse()" :disabled="loading">Uitvoeren + screenshot</button>
|
||
<button type="button" class="btn btn-primary" @click="extractFull()" :disabled="loading">🔬 Volledige extractie</button>
|
||
<button type="button" class="btn btn-secondary" @click="vncNavigate()" :disabled="loading">🖥 Open in VNC</button>
|
||
<button type="button" class="btn btn-secondary" @click="exportPhoto()" :disabled="!session">📥 Foto export</button>
|
||
<button type="button" class="btn btn-secondary" @click="runOcr()" :disabled="!session">🔍 OCR tekst</button>
|
||
<button type="button" class="btn btn-secondary" @click="savePhotoToDb()" :disabled="!session">💾 Foto → DB</button>
|
||
<a class="btn btn-secondary" href="{{ gradio_url }}" target="_blank" rel="noopener">🤖 Browser Use AI</a>
|
||
</div>
|
||
<div class="browser-steps-log" x-show="stepsLog.length" x-text="stepsLog.join(' · ')"></div>
|
||
<div x-show="ocrChips.length" style="margin-top:0.5rem">
|
||
<small class="muted">OCR woorden (compact)</small>
|
||
<div class="word-chip-cloud" style="max-height:72px;margin-top:0.35rem">
|
||
<template x-for="(w,i) in ocrChips" :key="i">
|
||
<span class="word-chip low" x-text="w"></span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<form class="form-grid" @submit.prevent="browse()" style="grid-template-columns: 1fr 1fr 80px auto auto auto;">
|
||
<input class="form-input" x-model="url" placeholder="https://..." required />
|
||
<input class="form-input" x-model="task" placeholder="Taak (optioneel)" />
|
||
<input class="form-input" type="number" min="1" max="12" x-model.number="scrollPages" title="Scroll pagina's voor extractie" />
|
||
<button type="submit" class="btn btn-primary" :disabled="loading">
|
||
<span x-show="!loading">Browse + VNC</span><span x-show="loading">Bezig…</span>
|
||
</button>
|
||
<button type="button" class="btn btn-secondary" @click="addMonitor()">+ Monitor</button>
|
||
</form>
|
||
<div class="browser-status" x-text="statusText"></div>
|
||
</section>
|
||
|
||
<div class="browser-layout">
|
||
<div>
|
||
<section class="panel" x-show="extractedItems.length">
|
||
<h2>Geëxtraheerde data <small class="muted" x-text="'(' + extractedItems.length + ' items)'"></small></h2>
|
||
<table class="data-table extract-table">
|
||
<thead><tr><th>Regel / product</th><th>Gewicht</th><th>Prijs</th><th>Bron</th></tr></thead>
|
||
<tbody>
|
||
<template x-for="(it, idx) in extractedItems" :key="idx">
|
||
<tr>
|
||
<td x-text="it.raw"></td>
|
||
<td x-text="it.weight || '—'"></td>
|
||
<td x-text="it.price || '—'"></td>
|
||
<td x-text="it.source || '—'"></td>
|
||
</tr>
|
||
</template>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
<section class="panel" x-show="session">
|
||
<h2 x-text="session ? session.title : 'Resultaat'"></h2>
|
||
<p class="page-tip"><span x-text="session ? session.final_url : ''"></span></p>
|
||
<div class="browser-preview-text" x-text="session ? (session.content_preview || session.content_text || '') : ''"></div>
|
||
<div class="browser-links" x-show="session && session.links && session.links.length">
|
||
<strong>Links op pagina:</strong>
|
||
<template x-for="lnk in (session.links || []).slice(0,15)" :key="lnk.href">
|
||
<div><a :href="lnk.href" target="_blank" x-text="lnk.text || lnk.href"></a></div>
|
||
</template>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<aside>
|
||
<section class="panel">
|
||
<h2>Recente sessies</h2>
|
||
<template x-for="s in recent" :key="s.id">
|
||
<div class="clickable-row" style="padding:.4rem 0;border-bottom:1px solid rgba(148,163,184,.1)" @click="loadSession(s.id)">
|
||
<strong x-text="s.title || s.url"></strong><br/>
|
||
<small x-text="s.created_at ? s.created_at.substring(0,16).replace('T',' ') : ''"></small>
|
||
</div>
|
||
</template>
|
||
<p class="empty-state" x-show="!recent.length">Nog geen sessies.</p>
|
||
</section>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
|
||
<div x-show="tab === 'monitor'" x-cloak>
|
||
<div class="kpi-grid">
|
||
<div class="kpi-card clickable-kpi"><div class="kpi-label">Active sites</div><div class="kpi-value">{{ stats.active_sites }}</div></div>
|
||
<div class="kpi-card amber clickable-kpi"><div class="kpi-label">Changes 24h</div><div class="kpi-value">{{ stats.changes_24h }}</div></div>
|
||
</div>
|
||
<section class="panel">
|
||
<h2>Website toevoegen</h2>
|
||
<form class="form-grid" style="display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center" @submit.prevent="addSite">
|
||
<input class="form-input" style="flex:2;min-width:200px" placeholder="https://..." x-model="monitorForm.url" required />
|
||
<input class="form-input" style="flex:1;min-width:120px" placeholder="Naam" x-model="monitorForm.name" />
|
||
<button class="btn btn-primary" type="submit">Toevoegen</button>
|
||
<button type="button" class="btn btn-secondary" @click="crawlAll()" :disabled="crawlBusy" x-text="crawlBusy ? 'Crawlen…' : 'Alles crawlen'"></button>
|
||
</form>
|
||
</section>
|
||
<section class="panel">
|
||
<h2>Gemonitorde websites</h2>
|
||
<table class="data-table"><thead><tr><th>Naam</th><th>URL</th><th>Laatst gecheckt</th><th>Acties</th></tr></thead>
|
||
<tbody>{% for s in sites %}
|
||
<tr>
|
||
<td>{{ s.name }}</td>
|
||
<td style="max-width:220px;overflow:hidden;text-overflow:ellipsis" title="{{ s.url }}">{{ s.url }}</td>
|
||
<td>{{ s.last_crawled or '—' }}</td>
|
||
<td class="btn-group">
|
||
<button class="btn btn-sm" @click="crawlOne({{ s.id }})" :disabled="crawlBusy">Crawl</button>
|
||
<button class="btn btn-sm btn-secondary" @click="toggleSite({{ s.id }})">{{ 'Pauze' if s.is_active else 'Activeer' }}</button>
|
||
<button class="btn btn-sm btn-reject" @click="removeSite({{ s.id }})">Verwijder</button>
|
||
</td></tr>{% else %}
|
||
<tr><td colspan="4" class="empty-state">Geen sites — voeg een URL toe of klik + Monitor bij Research.</td></tr>
|
||
{% endfor %}</tbody></table>
|
||
</section>
|
||
<div class="grid-2">
|
||
<section class="panel"><h2>Wijzigingen</h2>
|
||
<ul>{% for c in page_changes %}<li><strong>{{ c.name or c.url }}</strong> · {{ c.changed_at }}</li>{% else %}<li class="empty-state">Geen wijzigingen</li>{% endfor %}</ul>
|
||
</section>
|
||
<section class="panel"><h2>Crawl logs</h2>
|
||
<ul>{% for l in crawl_logs %}<li><span class="badge">{{ l.status }}</span> {{ l.message }} <small>{{ l.logged_at }}</small></li>{% else %}<li class="empty-state">Nog geen crawls</li>{% endfor %}</ul>
|
||
</section>
|
||
</div>
|
||
<section class="panel" x-show="parseResults.length" x-cloak>
|
||
<div style="display:flex;justify-content:space-between;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.75rem">
|
||
<div>
|
||
<h2 style="margin:0">Parse-overzicht (kort)</h2>
|
||
<p class="page-tip" style="margin:.25rem 0 0">Voor volledige analyse → tab <button type="button" class="btn btn-sm btn-pulse" @click="setTab('analyse')">Parse Analyse</button></p>
|
||
</div>
|
||
<button type="button" class="btn btn-sm" @click="loadParseResults()">↻ Verversen</button>
|
||
</div>
|
||
<template x-for="p in parseResults" :key="p.id">
|
||
<article class="parse-result-card">
|
||
<header>
|
||
<strong x-text="p.title || p.url"></strong>
|
||
<span class="muted" x-text="'#' + (p.site_id||'—') + ' · ' + (p.word_count||0) + ' woorden · ' + (p.links_count||0) + ' links'"></span>
|
||
</header>
|
||
<p class="parse-excerpt" x-text="p.excerpt || p.meta_description || '—'"></p>
|
||
<div class="parse-headings" x-show="(p.headings||[]).length">
|
||
<template x-for="h in (p.headings||[]).slice(0,5)" :key="h">
|
||
<span class="parse-chip" x-text="h"></span>
|
||
</template>
|
||
</div>
|
||
<ul class="parse-links" x-show="(p.links_sample||[]).length">
|
||
<template x-for="lnk in (p.links_sample||[]).slice(0,6)" :key="lnk.href">
|
||
<li><a :href="lnk.href" target="_blank" rel="noopener" x-text="lnk.label || lnk.href"></a></li>
|
||
</template>
|
||
</ul>
|
||
</article>
|
||
</template>
|
||
</section>
|
||
</div>
|
||
|
||
<div x-show="tab === 'analyse'" x-cloak class="pi-workbench">
|
||
<header class="pi-header">
|
||
<div>
|
||
<h2>Parse Intelligence Workbench</h2>
|
||
<p class="page-tip" style="margin:0.25rem 0 0">Filter · sorteer · klik hype-termen · exporteer — alles wat gecrawld is</p>
|
||
</div>
|
||
<div class="pi-header-actions">
|
||
<button type="button" class="btn btn-sm btn-secondary" @click="loadIntelligence()" :disabled="intelLoading">↻ Ververs</button>
|
||
<button type="button" class="btn btn-sm btn-secondary" @click="exportIntelCsv()" x-show="intelFilteredPages.length">⬇ CSV</button>
|
||
<button type="button" class="btn btn-sm btn-pulse" @click="crawlAndAnalyse()" :disabled="crawlBusy || intelLoading">Crawl + analyse</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="pi-kpi-strip" x-show="intel && intel.summary">
|
||
<div class="pi-kpi-cell">
|
||
<div class="lbl">Gefilterd</div>
|
||
<div class="val" x-text="intelFilteredPages.length + '/' + (intel.pages||[]).length">0</div>
|
||
<div class="sub">pagina's zichtbaar</div>
|
||
</div>
|
||
<div class="pi-kpi-cell">
|
||
<div class="lbl">Woorden</div>
|
||
<div class="val" x-text="intelFilteredWordSum">0</div>
|
||
<div class="sub">in selectie</div>
|
||
</div>
|
||
<div class="pi-kpi-cell">
|
||
<div class="lbl">Hype-termen</div>
|
||
<div class="val" x-text="(intel.hype_terms||[]).length">0</div>
|
||
<div class="sub">klik om te filteren</div>
|
||
</div>
|
||
<div class="pi-kpi-cell">
|
||
<div class="lbl">Gewijzigd 7d</div>
|
||
<div class="val" x-text="intel.summary.changes_7d">0</div>
|
||
<div class="sub">shift-signalen</div>
|
||
</div>
|
||
<div class="pi-kpi-cell">
|
||
<div class="lbl">Gem. hype</div>
|
||
<div class="val" x-text="intelAvgHype">0</div>
|
||
<div class="sub">score selectie</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pi-loading" x-show="intelLoading">Analyse laden…</div>
|
||
|
||
<div class="pi-body" :class="{ 'detail-open': intelSelectedId }" x-show="intel && !intelLoading">
|
||
<aside class="pi-filters">
|
||
<label>Zoek in alle geparste data</label>
|
||
<input type="search" class="pi-search" placeholder="halal, curry, bidfood…" x-model="intelSearchLocal" @input.debounce.250ms="" />
|
||
|
||
<label>Site</label>
|
||
<select class="pi-select" x-model="intelSiteId">
|
||
<option value="">Alle sites</option>
|
||
<template x-for="s in intelSiteOptions" :key="s.id">
|
||
<option :value="s.id" x-text="s.name"></option>
|
||
</template>
|
||
</select>
|
||
|
||
<label>Min. woorden <span x-text="intelMinWords"></span></label>
|
||
<input type="range" class="pi-range" min="0" max="3000" step="50" x-model.number="intelMinWords" />
|
||
|
||
<label>Min. hype-score <span x-text="intelMinHype"></span></label>
|
||
<input type="range" class="pi-range" min="0" max="80" step="5" x-model.number="intelMinHype" />
|
||
|
||
<label class="pi-toggle-row"><input type="checkbox" x-model="intelChangedOnly" /> Alleen recent gewijzigd</label>
|
||
|
||
<label>Sorteren</label>
|
||
<select class="pi-select" x-model="intelSortCol" @change="">
|
||
<option value="hype_score">Hype score</option>
|
||
<option value="word_count">Woorden</option>
|
||
<option value="crawled_at">Datum crawl</option>
|
||
<option value="site_name">Site</option>
|
||
<option value="title">Titel</option>
|
||
<option value="links_count">Links</option>
|
||
</select>
|
||
<select class="pi-select" style="margin-top:0.35rem" x-model="intelSortDir">
|
||
<option value="desc">Aflopend ↓</option>
|
||
<option value="asc">Oplopend ↑</option>
|
||
</select>
|
||
|
||
<div class="pi-filter-chips" x-show="intelActiveTerms.length || intelChangedOnly || intelMinWords > 0">
|
||
<template x-for="t in intelActiveTerms" :key="t">
|
||
<span class="pi-filter-chip">term: <span x-text="t"></span><button type="button" @click="removeIntelTerm(t)">×</button></span>
|
||
</template>
|
||
<span class="pi-filter-chip" x-show="intelChangedOnly">gewijzigd<button type="button" @click="intelChangedOnly=false">×</button></span>
|
||
<button type="button" class="btn btn-sm" style="margin-top:0.35rem;width:100%" @click="clearIntelFilters()">Filters wissen</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="pi-main">
|
||
<div class="pi-trends-bar" x-show="(intel.hype_terms||[]).length">
|
||
<div class="lbl">Hype-termen — klik om te filteren (goud = cross-site)</div>
|
||
<div class="pi-hype-cloud">
|
||
<template x-for="t in (intel.hype_terms||[]).slice(0,35)" :key="t.term">
|
||
<span class="pi-hype-chip" :class="{ cross: t.cross_site, active: isIntelTermActive(t.term) }"
|
||
@click="toggleIntelTerm(t.term)" :title="'Sites: ' + (t.sites||[]).join(', ')">
|
||
<span x-text="t.term"></span><span class="sc" x-text="t.score"></span>
|
||
</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pi-toolbar">
|
||
<span class="count"><strong x-text="intelFilteredPages.length"></strong> resultaten</span>
|
||
<button type="button" class="pi-sort-btn" :class="{ active: intelSortCol === 'hype_score' }" @click="sortIntelBy('hype_score')">Hype</button>
|
||
<button type="button" class="pi-sort-btn" :class="{ active: intelSortCol === 'word_count' }" @click="sortIntelBy('word_count')">Woorden</button>
|
||
<button type="button" class="pi-sort-btn" :class="{ active: intelSortCol === 'crawled_at' }" @click="sortIntelBy('crawled_at')">Datum</button>
|
||
<div class="pi-view-toggle">
|
||
<button type="button" :class="{ active: intelView === 'table' }" @click="intelView='table'">Tabel</button>
|
||
<button type="button" :class="{ active: intelView === 'cards' }" @click="intelView='cards'">Kaarten</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pi-empty" x-show="!intelFilteredPages.length">
|
||
<strong>Geen matches</strong>
|
||
Pas filters aan, wis hype-termen, of crawl eerst onder Site Monitor.
|
||
</div>
|
||
|
||
<div class="pi-table-wrap" x-show="intelView === 'table' && intelFilteredPages.length">
|
||
<table class="pi-table">
|
||
<thead>
|
||
<tr>
|
||
<th @click="sortIntelBy('site_name')">Site <span class="arrow" x-show="intelSortCol==='site_name'" x-text="intelSortDir==='asc'?'↑':'↓'"></span></th>
|
||
<th @click="sortIntelBy('title')">Titel <span class="arrow" x-show="intelSortCol==='title'" x-text="intelSortDir==='asc'?'↑':'↓'"></span></th>
|
||
<th @click="sortIntelBy('word_count')" class="num">Woorden <span class="arrow" x-show="intelSortCol==='word_count'" x-text="intelSortDir==='asc'?'↑':'↓'"></span></th>
|
||
<th @click="sortIntelBy('hype_score')" class="num">Hype <span class="arrow" x-show="intelSortCol==='hype_score'" x-text="intelSortDir==='asc'?'↑':'↓'"></span></th>
|
||
<th @click="sortIntelBy('links_count')" class="num">Links</th>
|
||
<th>Signalen</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<template x-for="p in intelFilteredPages" :key="p.id">
|
||
<tr :class="{ selected: intelSelectedId === p.id }" @click="selectIntelPage(p.id)">
|
||
<td class="site-cell" x-text="p.site_name"></td>
|
||
<td class="title-cell" :title="p.title || p.url" x-text="p.title || p.url"></td>
|
||
<td class="num" x-text="p.word_count"></td>
|
||
<td class="num"><span class="pi-badge hype-high" x-text="p.hype_score"></span></td>
|
||
<td class="num" x-text="p.links_count"></td>
|
||
<td>
|
||
<span class="pi-badge changed" x-show="p.recently_changed">Δ</span>
|
||
<span class="muted" style="font-size:.7rem" x-text="(p.signals||[])[0]||''"></span>
|
||
</td>
|
||
</tr>
|
||
</template>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="pi-cards" x-show="intelView === 'cards' && intelFilteredPages.length">
|
||
<template x-for="p in intelFilteredPages" :key="'c-'+p.id">
|
||
<article class="pi-card" :class="{ selected: intelSelectedId === p.id }" @click="selectIntelPage(p.id)">
|
||
<div class="site-cell" x-text="p.site_name"></div>
|
||
<strong style="font-size:.85rem;display:block;margin:.25rem 0" x-text="p.title||p.url"></strong>
|
||
<div class="muted" style="font-size:.72rem" x-text="(p.word_count||0)+' wo · hype '+ (p.hype_score||0)"></div>
|
||
<p style="font-size:.75rem;color:#94a3b8;margin:.4rem 0 0;line-height:1.4" x-text="(p.excerpt||'').slice(0,120)+'…'"></p>
|
||
</article>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="pi-detail">
|
||
<template x-if="!intelSelectedPage">
|
||
<div class="pi-detail-empty">← Klik een rij om de volledige parse te lezen<br><small>Highlight op actieve zoektermen</small></div>
|
||
</template>
|
||
<template x-if="intelSelectedPage">
|
||
<div style="display:flex;flex-direction:column;height:100%">
|
||
<header class="pi-detail-head">
|
||
<h3 x-text="intelSelectedPage.site_name + ' — ' + (intelSelectedPage.title || 'Pagina')"></h3>
|
||
<div class="pi-detail-meta">
|
||
<span x-text="(intelSelectedPage.word_count||0) + ' woorden'"></span> ·
|
||
<span x-text="'hype ' + (intelSelectedPage.hype_score||0)"></span> ·
|
||
<span x-text="(intelSelectedPage.crawled_at||'').substring(0,16).replace('T',' ')"></span>
|
||
</div>
|
||
<div class="intel-signals" style="margin-top:.5rem">
|
||
<template x-for="sig in (intelSelectedPage.signals||[])" :key="sig">
|
||
<span class="signal-chip" :class="{ hot: sig.indexOf('gewijzigd')>=0 }" x-text="sig"></span>
|
||
</template>
|
||
</div>
|
||
<div style="margin-top:.5rem;display:flex;gap:.4rem;flex-wrap:wrap">
|
||
<a class="btn btn-sm btn-secondary" :href="intelSelectedPage.final_url || intelSelectedPage.url" target="_blank" rel="noopener">Live URL ↗</a>
|
||
<button type="button" class="btn btn-sm" @click="loadFullPage(intelSelectedPage.id)">Volledige tekst</button>
|
||
</div>
|
||
</header>
|
||
<div class="pi-detail-tabs">
|
||
<button type="button" :class="{ active: intelDetailTab === 'text' }" @click="intelDetailTab='text'">Tekst</button>
|
||
<button type="button" :class="{ active: intelDetailTab === 'headings' }" @click="intelDetailTab='headings'">Koppen</button>
|
||
<button type="button" :class="{ active: intelDetailTab === 'links' }" @click="intelDetailTab='links'">Links</button>
|
||
</div>
|
||
<div class="pi-detail-body">
|
||
<div x-show="intelDetailTab === 'text'" class="pi-read-text" x-html="intelDetailHtml"></div>
|
||
<div x-show="intelDetailTab === 'headings'" class="pi-heading-list">
|
||
<template x-for="h in (intelSelectedPage.headings||[])" :key="h">
|
||
<div class="pi-heading-item" x-text="h"></div>
|
||
</template>
|
||
<p class="muted" x-show="!(intelSelectedPage.headings||[]).length">Geen koppen gevonden</p>
|
||
</div>
|
||
<ul x-show="intelDetailTab === 'links'" class="pi-link-list">
|
||
<template x-for="lnk in (intelSelectedPage.links_sample||[])" :key="lnk.href">
|
||
<li><a :href="lnk.href" target="_blank" rel="noopener" x-text="lnk.label || lnk.href"></a></li>
|
||
</template>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</aside>
|
||
</div>
|
||
|
||
<div class="pi-empty" x-show="!intel && !intelLoading">
|
||
<strong>Nog geen data</strong>
|
||
Voeg sites toe onder Site Monitor, crawl, en kom terug — of klik Crawl + analyse.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
{% block scripts %}
|
||
<script src="/static/js/parse-intel.js?v=1"></script>
|
||
<script>
|
||
function browserPage() {
|
||
return {
|
||
tab: (function () {
|
||
const h = window.location.hash;
|
||
if (h === '#monitor') return 'monitor';
|
||
if (h === '#analyse') return 'analyse';
|
||
return 'research';
|
||
})(),
|
||
url: {{ default_url | tojson }},
|
||
instruction: 'Accepteren cookies, scroll naar beneden, toon alle producten',
|
||
scrollPages: 6,
|
||
newSiteUrl: '',
|
||
newSiteName: '',
|
||
extractedItems: [],
|
||
stepsLog: [],
|
||
ocrText: '',
|
||
ocrChips: [],
|
||
loading: false,
|
||
livePoll: true,
|
||
vncSync: true,
|
||
jobRunning: false,
|
||
jobLabel: '',
|
||
jobAbort: null,
|
||
session: null,
|
||
recent: [],
|
||
monitorForm: { url: '', name: '' },
|
||
parseResults: [],
|
||
crawlBusy: false,
|
||
intel: null,
|
||
intelLoading: false,
|
||
intelSearchLocal: '',
|
||
intelSiteId: '',
|
||
intelSortCol: 'hype_score',
|
||
intelSortDir: 'desc',
|
||
intelView: 'table',
|
||
intelMinWords: 0,
|
||
intelMinHype: 0,
|
||
intelChangedOnly: false,
|
||
intelActiveTerms: [],
|
||
intelSelectedId: null,
|
||
intelDetailTab: 'text',
|
||
intelFullPage: null,
|
||
fullPageText: '',
|
||
|
||
get intelFilteredPages() {
|
||
if (!this.intel || !window.ParseIntel) return [];
|
||
const pages = ParseIntel.filterPages(this.intel.pages || [], {
|
||
search: this.intelSearchLocal,
|
||
terms: this.intelActiveTerms,
|
||
siteId: this.intelSiteId,
|
||
minWords: this.intelMinWords,
|
||
minHype: this.intelMinHype,
|
||
changedOnly: this.intelChangedOnly,
|
||
});
|
||
return ParseIntel.sortPages(pages, this.intelSortCol, this.intelSortDir);
|
||
},
|
||
|
||
get intelSelectedPage() {
|
||
const id = this.intelSelectedId;
|
||
if (!id) return null;
|
||
const all = this.intel && this.intel.pages ? this.intel.pages : [];
|
||
let p = all.find(function (x) { return x.id === id; });
|
||
if (p && this.intelFullPage === id && this.fullPageText) {
|
||
p = Object.assign({}, p, { content_read: this.fullPageText });
|
||
}
|
||
return p || null;
|
||
},
|
||
|
||
get intelDetailHtml() {
|
||
const p = this.intelSelectedPage;
|
||
if (!p || !window.ParseIntel) return '';
|
||
const text = (this.intelFullPage === p.id && this.fullPageText) ? this.fullPageText : (p.content_read || p.excerpt || '');
|
||
const terms = (this.intelActiveTerms || []).slice();
|
||
if ((this.intelSearchLocal || '').trim()) terms.push(this.intelSearchLocal.trim());
|
||
return ParseIntel.highlightHtml(text, terms);
|
||
},
|
||
|
||
get intelFilteredWordSum() {
|
||
return (this.intelFilteredPages || []).reduce(function (s, p) { return s + (p.word_count || 0); }, 0);
|
||
},
|
||
|
||
get intelAvgHype() {
|
||
const rows = this.intelFilteredPages || [];
|
||
if (!rows.length) return 0;
|
||
const sum = rows.reduce(function (s, p) { return s + (p.hype_score || 0); }, 0);
|
||
return Math.round(sum / rows.length);
|
||
},
|
||
|
||
get intelSiteOptions() {
|
||
const seen = {};
|
||
const out = [];
|
||
(this.intel && this.intel.pages ? this.intel.pages : []).forEach(function (p) {
|
||
if (!p.site_id || seen[p.site_id]) return;
|
||
seen[p.site_id] = true;
|
||
out.push({ id: String(p.site_id), name: p.site_name || ('Site ' + p.site_id) });
|
||
});
|
||
return out.sort(function (a, b) { return a.name.localeCompare(b.name); });
|
||
},
|
||
screenshotUrl: '/api/admin/browser/live/screenshot.jpg?t=0',
|
||
statusText: 'Klaar — voer een URL in of klik Browse nu.',
|
||
pollTimer: null,
|
||
|
||
normalizeUrl(u) {
|
||
u = (u || '').trim();
|
||
if (!u) return u;
|
||
if (!/^https?:\/\//i.test(u)) u = 'https://' + u;
|
||
return u;
|
||
},
|
||
|
||
siteNameFromUrl(u) {
|
||
try { return new URL(u).hostname.replace(/^www\./, ''); } catch (e) { return u; }
|
||
},
|
||
|
||
setTab(t) {
|
||
this.tab = t;
|
||
const hash = t === 'monitor' ? '#monitor' : (t === 'analyse' ? '#analyse' : '');
|
||
history.replaceState(null, '', hash ? '/browser' + hash : '/browser');
|
||
if (t === 'monitor') this.loadParseResults();
|
||
if (t === 'analyse') this.loadIntelligence();
|
||
},
|
||
|
||
init() {
|
||
if (window.location.hash === '#monitor') this.tab = 'monitor';
|
||
if (window.location.hash === '#analyse') this.tab = 'analyse';
|
||
this.$watch('tab', (t) => {
|
||
if (t === 'monitor') this.loadParseResults();
|
||
if (t === 'analyse') this.loadIntelligence();
|
||
});
|
||
window.addEventListener('hashchange', () => {
|
||
const h = window.location.hash;
|
||
this.tab = h === '#monitor' ? 'monitor' : (h === '#analyse' ? 'analyse' : 'research');
|
||
});
|
||
this.loadRecent();
|
||
this.startPoll();
|
||
},
|
||
|
||
startPoll() {
|
||
if (this.pollTimer) clearInterval(this.pollTimer);
|
||
if (!this.livePoll) return;
|
||
const base = this.vncSync
|
||
? '/api/admin/browser/vnc/screenshot.jpg?t='
|
||
: '/api/admin/browser/live/screenshot.jpg?t=';
|
||
this.pollTimer = setInterval(() => {
|
||
this.screenshotUrl = base + Date.now();
|
||
}, 1500);
|
||
this.screenshotUrl = base + Date.now();
|
||
},
|
||
|
||
startJob(label) {
|
||
if (this.jobAbort) this.jobAbort.abort();
|
||
this.jobAbort = new AbortController();
|
||
this.jobRunning = true;
|
||
this.jobLabel = label;
|
||
return this.jobAbort.signal;
|
||
},
|
||
|
||
endJob(msg) {
|
||
this.jobRunning = false;
|
||
this.jobLabel = msg || '';
|
||
this.jobAbort = null;
|
||
},
|
||
|
||
stopJob() {
|
||
if (this.jobAbort) {
|
||
this.jobAbort.abort();
|
||
Cockpit.toast('Taak geannuleerd — server kan nog kort doorlopen', 'info');
|
||
}
|
||
this.endJob('Gestopt door gebruiker');
|
||
this.loading = false;
|
||
},
|
||
|
||
async runJob(label, fn) {
|
||
const signal = this.startJob(label);
|
||
this.loading = true;
|
||
try {
|
||
return await fn(signal);
|
||
} catch (e) {
|
||
if (e.name === 'AbortError') {
|
||
this.endJob('Gestopt');
|
||
return null;
|
||
}
|
||
throw e;
|
||
} finally {
|
||
this.loading = false;
|
||
if (this.jobRunning) this.endJob('Klaar');
|
||
}
|
||
},
|
||
|
||
reloadPage() {
|
||
if (window.Cockpit && Cockpit.clearIframes) Cockpit.clearIframes();
|
||
setTimeout(() => location.reload(), 80);
|
||
},
|
||
|
||
async loadRecent() {
|
||
try {
|
||
const r = await Cockpit.api('/browser/sessions?limit=8');
|
||
this.recent = r.sessions || [];
|
||
} catch (e) {}
|
||
},
|
||
|
||
async instructBrowse() {
|
||
this.stepsLog = [];
|
||
this.statusText = 'Instructies uitvoeren…';
|
||
try {
|
||
const r = await this.runJob('Instructies uitvoeren…', (signal) =>
|
||
Cockpit.api('/browser/instruct', {
|
||
method: 'POST',
|
||
body: JSON.stringify({ url: this.url, instruction: this.instruction, wait_seconds: 5 }),
|
||
signal,
|
||
})
|
||
);
|
||
if (!r) return;
|
||
this.session = r.session;
|
||
this.stepsLog = (r.session.metadata && r.session.metadata.steps) || [];
|
||
this.statusText = 'Klaar — ' + this.stepsLog.length + ' stappen';
|
||
if (r.session.id) {
|
||
this.screenshotUrl = '/api/admin/browser/sessions/' + r.session.id + '/screenshot.jpg?t=' + Date.now();
|
||
this.vncSync = false;
|
||
}
|
||
await this.loadRecent();
|
||
Cockpit.toast('Instructies uitgevoerd', 'success');
|
||
} catch (e) { this.statusText = e.message; Cockpit.toast(e.message, 'error'); }
|
||
},
|
||
|
||
exportPhoto() {
|
||
if (!this.session || !this.session.id) return;
|
||
const a = document.createElement('a');
|
||
a.href = '/api/admin/browser/sessions/' + this.session.id + '/screenshot.jpg';
|
||
a.download = 'foodlinkk-browser-' + this.session.id + '.jpg';
|
||
a.click();
|
||
},
|
||
|
||
async runOcr() {
|
||
if (!this.session || !this.session.id) return;
|
||
try {
|
||
const r = await Cockpit.api('/browser/sessions/' + this.session.id + '/ocr');
|
||
this.ocrText = r.ocr_text || '';
|
||
const words = (this.ocrText.match(/[\wÀ-ÿ]{3,}/g) || []);
|
||
const seen = new Set();
|
||
this.ocrChips = [];
|
||
words.forEach(w => { const k = w.toLowerCase(); if (!seen.has(k)) { seen.add(k); this.ocrChips.push(w); } });
|
||
if (this.ocrChips.length > 40) this.ocrChips = this.ocrChips.slice(0, 40);
|
||
Cockpit.toast('OCR klaar', 'success');
|
||
} catch (e) { Cockpit.toast(e.message, 'error'); }
|
||
},
|
||
|
||
async browse() {
|
||
this.statusText = 'Browser + VNC starten op achtergrond…';
|
||
try {
|
||
const r = await this.runJob('Browse + VNC…', async (signal) => {
|
||
const vncP = Cockpit.api('/browser/vnc-navigate', {
|
||
method: 'POST',
|
||
body: JSON.stringify({ url: this.url, instruction: this.instruction, wait_seconds: 4 }),
|
||
signal,
|
||
}).catch(() => null);
|
||
const browseP = Cockpit.api('/browser/browse', {
|
||
method: 'POST',
|
||
body: JSON.stringify({ url: this.url, task: this.task, instruction: this.instruction, wait_seconds: 4 }),
|
||
signal,
|
||
});
|
||
const [res] = await Promise.all([browseP, vncP]);
|
||
return res;
|
||
});
|
||
if (!r) return;
|
||
this.session = r.session;
|
||
this.statusText = 'Klaar — sessie #' + r.session.id + ' (je kunt verder navigeren)';
|
||
if (r.session.id) {
|
||
this.vncSync = true;
|
||
this.startPoll();
|
||
}
|
||
await this.loadRecent();
|
||
Cockpit.toast('Browse gestart — VNC + database', 'success');
|
||
} catch (e) {
|
||
this.statusText = 'Fout: ' + e.message;
|
||
Cockpit.toast(e.message, 'error');
|
||
}
|
||
},
|
||
|
||
async vncNavigate() {
|
||
this.statusText = 'VNC opent URL…';
|
||
try {
|
||
const r = await this.runJob('VNC navigate…', (signal) =>
|
||
Cockpit.api('/browser/vnc-navigate', {
|
||
method: 'POST',
|
||
body: JSON.stringify({ url: this.url, instruction: this.instruction, wait_seconds: 5 }),
|
||
signal,
|
||
})
|
||
);
|
||
if (!r) return;
|
||
this.statusText = 'VNC: ' + (r.title || r.final_url || this.url);
|
||
this.vncSync = true;
|
||
this.startPoll();
|
||
Cockpit.toast('URL geopend in live desktop', 'success');
|
||
} catch (e) {
|
||
this.statusText = 'VNC fout: ' + e.message;
|
||
Cockpit.toast(e.message, 'error');
|
||
}
|
||
},
|
||
|
||
async extractFull() {
|
||
this.statusText = 'Extractie op achtergrond…';
|
||
this.extractedItems = [];
|
||
try {
|
||
const r = await this.runJob('Volledige extractie…', (signal) =>
|
||
Cockpit.api('/browser/extract-full', {
|
||
method: 'POST',
|
||
body: JSON.stringify({
|
||
url: this.url, instruction: this.instruction, wait_seconds: 5,
|
||
scroll_pages: this.scrollPages, also_vnc: true,
|
||
}),
|
||
signal,
|
||
})
|
||
);
|
||
if (!r) return;
|
||
this.session = r.session;
|
||
this.extractedItems = r.session.extracted_items || (r.session.metadata && r.session.metadata.extracted_items) || [];
|
||
this.statusText = 'Extractie klaar — ' + this.extractedItems.length + ' items';
|
||
if (r.session.id) {
|
||
this.vncSync = true;
|
||
this.startPoll();
|
||
}
|
||
await this.loadRecent();
|
||
Cockpit.toast(this.extractedItems.length + ' items geëxtraheerd', 'success');
|
||
} catch (e) {
|
||
this.statusText = 'Extractie fout: ' + e.message;
|
||
Cockpit.toast(e.message, 'error');
|
||
}
|
||
},
|
||
|
||
loadPreset(u) {
|
||
this.url = u;
|
||
this.statusText = 'Preset geladen — klik Browse + VNC of Volledige extractie';
|
||
},
|
||
|
||
async addSiteQuick() {
|
||
const u = this.normalizeUrl(this.newSiteUrl || this.url);
|
||
if (!u) return Cockpit.toast('Geen URL', 'error');
|
||
try {
|
||
await Cockpit.api('/monitor/sites', {
|
||
method: 'POST',
|
||
body: JSON.stringify({ url: u, name: this.newSiteName || this.siteNameFromUrl(u) }),
|
||
});
|
||
Cockpit.toast('Site toegevoegd — live in Agents → Terminals (Browser)', 'success');
|
||
this.newSiteUrl = '';
|
||
this.newSiteName = '';
|
||
this.setTab('monitor');
|
||
} catch (e) { Cockpit.toast(e.message, 'error'); }
|
||
},
|
||
|
||
async savePhotoToDb() {
|
||
if (!this.session || !this.session.id) return;
|
||
try {
|
||
const img = await fetch('/api/admin/browser/sessions/' + this.session.id + '/screenshot.jpg');
|
||
const blob = await img.blob();
|
||
const b64 = await new Promise((res, rej) => {
|
||
const r = new FileReader();
|
||
r.onload = () => res(r.result.split(',')[1]);
|
||
r.onerror = rej;
|
||
r.readAsDataURL(blob);
|
||
});
|
||
const r = await Cockpit.api('/photos/analyze', {
|
||
method: 'POST',
|
||
body: JSON.stringify({
|
||
image_b64: b64,
|
||
source: 'browser-session',
|
||
filename: 'session-' + this.session.id + '.jpg',
|
||
session_id: this.session.id,
|
||
}),
|
||
});
|
||
Cockpit.toast('Foto opgeslagen in DB #' + r.photo.id, 'success');
|
||
} catch (e) { Cockpit.toast(e.message, 'error'); }
|
||
},
|
||
|
||
async loadSession(id) {
|
||
try {
|
||
const r = await Cockpit.api('/browser/sessions/' + id);
|
||
this.session = r.session;
|
||
this.url = r.session.url || this.url;
|
||
this.extractedItems = (r.session.metadata && r.session.metadata.extracted_items) || r.session.extracted_items || [];
|
||
this.screenshotUrl = '/api/admin/browser/sessions/' + id + '/screenshot.jpg?t=' + Date.now();
|
||
} catch (e) { Cockpit.toast(e.message, 'error'); }
|
||
},
|
||
|
||
async addMonitor() {
|
||
const u = this.normalizeUrl(this.url);
|
||
if (!u) return Cockpit.toast('Geen URL', 'error');
|
||
try {
|
||
await Cockpit.api('/monitor/sites', {
|
||
method: 'POST',
|
||
body: JSON.stringify({ url: u, name: (this.session && this.session.title) || this.siteNameFromUrl(u) }),
|
||
});
|
||
Cockpit.toast('Toegevoegd aan Site Monitor', 'success');
|
||
} catch (e) { Cockpit.toast(e.message, 'error'); }
|
||
},
|
||
|
||
async addSite() {
|
||
const payload = { ...this.monitorForm, url: this.normalizeUrl(this.monitorForm.url) };
|
||
if (!payload.url) return Cockpit.toast('URL verplicht', 'error');
|
||
if (!payload.name) payload.name = this.siteNameFromUrl(payload.url);
|
||
try {
|
||
await Cockpit.api('/monitor/sites', { method: 'POST', body: JSON.stringify(payload) });
|
||
Cockpit.toast('Site toegevoegd — live in Agents → Terminals (Browser)', 'success');
|
||
this.reloadPage();
|
||
} catch (e) { Cockpit.toast(e.message, 'error'); }
|
||
},
|
||
async loadParseResults() {
|
||
try {
|
||
const r = await Cockpit.api('/monitor/parse-results?limit=12');
|
||
this.parseResults = r.items || [];
|
||
} catch (e) { /* ignore */ }
|
||
},
|
||
async loadIntelligence() {
|
||
this.intelLoading = true;
|
||
try {
|
||
this.intel = await Cockpit.api('/monitor/intelligence?limit=100');
|
||
if (this.intelSelectedId) {
|
||
const still = (this.intel.pages || []).some(function (p) { return p.id === this.intelSelectedId; }.bind(this));
|
||
if (!still) {
|
||
this.intelSelectedId = null;
|
||
this.intelFullPage = null;
|
||
this.fullPageText = '';
|
||
}
|
||
}
|
||
} catch (e) {
|
||
Cockpit.toast(e.message || 'Analyse laden mislukt', 'error');
|
||
} finally {
|
||
this.intelLoading = false;
|
||
}
|
||
},
|
||
sortIntelBy(col) {
|
||
if (this.intelSortCol === col) {
|
||
this.intelSortDir = this.intelSortDir === 'asc' ? 'desc' : 'asc';
|
||
} else {
|
||
this.intelSortCol = col;
|
||
this.intelSortDir = col === 'title' || col === 'site_name' ? 'asc' : 'desc';
|
||
}
|
||
},
|
||
toggleIntelTerm(term) {
|
||
term = String(term || '').toLowerCase();
|
||
if (!term) return;
|
||
const idx = this.intelActiveTerms.indexOf(term);
|
||
if (idx >= 0) this.intelActiveTerms.splice(idx, 1);
|
||
else this.intelActiveTerms.push(term);
|
||
},
|
||
isIntelTermActive(term) {
|
||
return this.intelActiveTerms.indexOf(String(term).toLowerCase()) >= 0;
|
||
},
|
||
removeIntelTerm(term) {
|
||
const idx = this.intelActiveTerms.indexOf(term);
|
||
if (idx >= 0) this.intelActiveTerms.splice(idx, 1);
|
||
},
|
||
clearIntelFilters() {
|
||
this.intelSearchLocal = '';
|
||
this.intelSiteId = '';
|
||
this.intelMinWords = 0;
|
||
this.intelMinHype = 0;
|
||
this.intelChangedOnly = false;
|
||
this.intelActiveTerms = [];
|
||
},
|
||
selectIntelPage(id) {
|
||
this.intelSelectedId = id;
|
||
this.intelDetailTab = 'text';
|
||
this.intelFullPage = null;
|
||
this.fullPageText = '';
|
||
},
|
||
exportIntelCsv() {
|
||
if (!window.ParseIntel || !this.intelFilteredPages.length) return;
|
||
ParseIntel.downloadCsv(this.intelFilteredPages, 'foodlinkk-parse-' + new Date().toISOString().slice(0, 10) + '.csv');
|
||
Cockpit.toast('CSV gedownload', 'success');
|
||
},
|
||
async crawlAndAnalyse() {
|
||
await this.crawlAll();
|
||
const self = this;
|
||
setTimeout(function () { self.loadIntelligence(); }, 2800);
|
||
},
|
||
async loadFullPage(id) {
|
||
try {
|
||
const r = await Cockpit.api('/monitor/parse-results/' + id);
|
||
this.intelFullPage = id;
|
||
this.fullPageText = (r.page && (r.page.content_full || r.page.content_read)) || '';
|
||
Cockpit.toast('Volledige tekst geladen', 'success');
|
||
} catch (e) {
|
||
Cockpit.toast(e.message, 'error');
|
||
}
|
||
},
|
||
formatCrawlToast(result) {
|
||
const rows = result.results || [];
|
||
if (!rows.length) return result.message || 'Geen sites om te crawlen';
|
||
return rows.map(function (r) {
|
||
if (r.status === 'ERROR') return '✗ ' + (r.name || r.url) + ': ' + (r.error || 'fout');
|
||
return (r.changed ? '△ ' : '✓ ') + (r.title || r.name) + ' — ' + (r.word_count || 0) + ' woorden';
|
||
}).join('\n');
|
||
},
|
||
async crawlAll() {
|
||
if (this.crawlBusy) return;
|
||
this.crawlBusy = true;
|
||
try {
|
||
const r = await Cockpit.api('/monitor/trigger-crawl', { method: 'POST', body: '{}' });
|
||
Cockpit.toast(this.formatCrawlToast(r), r.errors ? 'warn' : 'success');
|
||
await this.loadParseResults();
|
||
setTimeout(() => this.reloadPage(), 1500);
|
||
} catch (e) { Cockpit.toast(e.message, 'error'); }
|
||
finally { this.crawlBusy = false; }
|
||
},
|
||
async crawlOne(id) {
|
||
if (this.crawlBusy) return;
|
||
this.crawlBusy = true;
|
||
try {
|
||
const r = await Cockpit.api('/monitor/trigger-crawl', { method: 'POST', body: JSON.stringify({ site_id: id }) });
|
||
Cockpit.toast(this.formatCrawlToast(r), r.errors ? 'warn' : 'success');
|
||
await this.loadParseResults();
|
||
setTimeout(() => this.reloadPage(), 1500);
|
||
} catch (e) { Cockpit.toast(e.message, 'error'); }
|
||
finally { this.crawlBusy = false; }
|
||
},
|
||
async toggleSite(id) {
|
||
await Cockpit.api('/monitor/sites/' + id + '/toggle', { method: 'PATCH' });
|
||
this.reloadPage();
|
||
},
|
||
async removeSite(id) {
|
||
if (!confirm('Website permanent verwijderen uit monitoring?')) return;
|
||
await Cockpit.api('/monitor/sites/' + id + '?hard=true', { method: 'DELETE' });
|
||
Cockpit.toast('Verwijderd', 'success'); this.reloadPage();
|
||
},
|
||
};
|
||
}
|
||
</script>
|
||
{% endblock %}
|