SysOps: voice-agy-webbuilder-backup — 2026-06-23 10:04 UTC
This commit is contained in:
sysops
+473
-13
@@ -1,5 +1,6 @@
|
||||
{% 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; }
|
||||
@@ -8,6 +9,36 @@
|
||||
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 {
|
||||
@@ -77,9 +108,10 @@
|
||||
<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">
|
||||
<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" />
|
||||
@@ -187,7 +219,7 @@
|
||||
<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()">Alles crawlen</button>
|
||||
<button type="button" class="btn btn-secondary" @click="crawlAll()" :disabled="crawlBusy" x-text="crawlBusy ? 'Crawlen…' : 'Alles crawlen'"></button>
|
||||
</form>
|
||||
</section>
|
||||
<section class="panel">
|
||||
@@ -199,7 +231,7 @@
|
||||
<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 }})">Crawl</button>
|
||||
<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 %}
|
||||
@@ -211,17 +243,262 @@
|
||||
<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>{% endfor %}</ul>
|
||||
<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: window.location.hash === '#monitor' ? 'monitor' : 'research',
|
||||
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,
|
||||
@@ -240,6 +517,78 @@ function browserPage() {
|
||||
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,
|
||||
@@ -257,13 +606,22 @@ function browserPage() {
|
||||
|
||||
setTab(t) {
|
||||
this.tab = t;
|
||||
history.replaceState(null, '', t === 'monitor' ? '/browser#monitor' : '/browser');
|
||||
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', () => {
|
||||
this.tab = window.location.hash === '#monitor' ? 'monitor' : 'research';
|
||||
const h = window.location.hash;
|
||||
this.tab = h === '#monitor' ? 'monitor' : (h === '#analyse' ? 'analyse' : 'research');
|
||||
});
|
||||
this.loadRecent();
|
||||
this.startPoll();
|
||||
@@ -475,7 +833,7 @@ function browserPage() {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ url: u, name: this.newSiteName || this.siteNameFromUrl(u) }),
|
||||
});
|
||||
Cockpit.toast('Site toegevoegd — tab Monitor', 'success');
|
||||
Cockpit.toast('Site toegevoegd — live in Agents → Terminals (Browser)', 'success');
|
||||
this.newSiteUrl = '';
|
||||
this.newSiteName = '';
|
||||
this.setTab('monitor');
|
||||
@@ -534,17 +892,119 @@ function browserPage() {
|
||||
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', 'success');
|
||||
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() {
|
||||
await Cockpit.api('/monitor/trigger-crawl', { method: 'POST', body: '{}' });
|
||||
Cockpit.toast('Crawl gestart', 'success'); setTimeout(() => this.reloadPage(), 2000);
|
||||
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) {
|
||||
await Cockpit.api('/monitor/trigger-crawl', { method: 'POST', body: JSON.stringify({ site_id: id }) });
|
||||
Cockpit.toast('Crawl gestart', 'success'); setTimeout(() => this.reloadPage(), 2000);
|
||||
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' });
|
||||
|
||||
Reference in New Issue
Block a user