79 lines
3.4 KiB
Plaintext
79 lines
3.4 KiB
Plaintext
@page
|
|
@model GanjooRazor.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="/FamilyTree/@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"> </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>
|
|
}
|