divan/DiwanRazor/Pages/PeopleExplorer.cshtml
Anas Rashid e8f2306422 Rename Ganjoor -> Diwan throughout the code
Projects (GanjooRazor -> DiwanRazor, GanjoorService.sln -> DiwanService.sln), files,
folders, classes, namespaces, settings, API routes (/api/diwan) and DB tables (Diwan*).
External addresses (ganjoor.net, github.com/ganjoor) unchanged. Migrations renamed
consistently (no pending model changes); requires a fresh database.
Upstream RUNNING_LOCALLY/SEMANTIC_SEARCH docs archived unmodified under docs/.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-04 23:49:01 +02:00

79 lines
3.4 KiB
Plaintext

@page
@model DiwanRazor.Pages.PeopleExplorerModel
@{
Layout = null;
}
@if (!string.IsNullOrEmpty(Model.LastError))
{
<p>@Model.LastError</p>
}
else
{
<div class="up-modal-explorer">
<h2>کاوش در شخصیت‌ها</h2>
@if (Model.FamilyTreeRoots != null && Model.FamilyTreeRoots.Count > 0)
{
<h3>تبارنامه‌ها</h3>
<ul>
@foreach (var root in Model.FamilyTreeRoots)
{
<li>
<a href="javascript:void(0)" onclick="PersonWindow.open(@root.Id)">@root.FamilyTreeCaption</a>
<small>(@root.Name)</small>
— <a href="javascript:void(0)" onclick="FamilyTreeWindow.open(@root.Id)"><small>نمایش نمودار</small></a>
</li>
}
</ul>
}
<h3>شبکهٔ روابط همهٔ شخصیت‌ها</h3>
<p class="up-hint"><small>
روی یک گره کلیک کنید تا فقط ارتباط‌های همان شخص برجسته شود (کلیک دوباره برای بازگشت)؛ روی نام یک شخصیت (زیر گره یا در جدول) کلیک کنید تا اطلاعات کامل او باز شود.
برای پیمایش نمودار آن را با ماوس بکشید و با غلتک ماوس بزرگ/کوچک کنید.
</small></p>
<div style="margin-bottom:10px;">
<input type="text" id="pge-search" placeholder="جستجوی نام شخصیت..." style="width:240px;" />
<a role="button" id="pge-reset" class="up-btn up-btn--ghost up-btn--sm">نمایش همه</a>
</div>
<div id="pge-legend" class="pg-legend"></div>
<div id="pge-container" style="position:relative;width:100%;height:55vh;border:1px solid #d8cdb8;border-radius:6px;overflow:hidden;background:#faf7f0;">
<svg id="pge-svg" width="100%" height="100%"></svg>
</div>
<div class="spacer">&nbsp;</div>
<div style="max-height:30vh;overflow:auto;">
<table class="up-table">
<thead>
<tr>
<th>شخص اول</th>
<th>نوع ارتباط</th>
<th>شخص دوم</th>
<th>یادداشت</th>
</tr>
</thead>
<tbody id="pge-table-body"></tbody>
</table>
</div>
<style>
.pg-circle { fill: #fdf6e6; stroke: #8b6b4a; stroke-width: 1.5; }
.pg-circle-tree { fill: #f3e2b8; stroke: #7a4a2a; stroke-width: 2; }
.pg-label { font-size: 11px; fill: #4a3520; font-family: inherit; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pg-legend-item { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.pg-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.pg-person-link { cursor: pointer; }
</style>
@* not an executable script - just a data holder, parsed and rendered explicitly by
PeopleExplorer.open()'s onReady callback in personwindow.js once this fragment has been
injected into the modal body *@
<script type="application/json" id="pge-data">@Html.Raw(Model.GraphDataJson)</script>
</div>
}