From 8ab1894d05b632eacc96d3e5341fde780c98c477 Mon Sep 17 00:00:00 2001
From: Hamid Reza Mohammadi <mohammadi.hr@gmail.com>
Date: Fri, 15 Apr 2022 17:33:54 +0430
Subject: [PATCH] docs: #306 supporting related sections in the client

---
 GanjooRazor/Pages/_GanjoorPagePartial.cshtml | 12 +++++-----
 GanjooRazor/Pages/_SimiPage.cshtml.cs        | 17 ++++++++-------
 GanjooRazor/Pages/_SimiPartialView.cshtml    | 22 +++++++++----------
 GanjooRazor/Pages/_SimiPartialView.cshtml.cs |  4 +++-
 GanjooRazor/wwwroot/js/bk.js                 | 23 ++++++++++----------
 5 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/GanjooRazor/Pages/_GanjoorPagePartial.cshtml b/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
index 0b5c255c..be2fe340 100644
--- a/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
+++ b/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
@@ -438,26 +438,26 @@
                                                         {
                                                             @if (s.Top6RelatedSections[i].PoetMorePoemsLikeThisCount > 20)
                                                             {
-                                                                <a role="button" class="pagebutton" id="@($"load-more-button-{s.Top6RelatedSections[i].PoetId}")" href="@Html.Raw($"/simi/?v={Uri.EscapeDataString(Model.GanjoorPage.Poem.GanjoorMetre.Rhythm)}&amp;g={Uri.EscapeDataString(Model.GanjoorPage.Poem.RhymeLetters)}&amp;a={s.Top6RelatedSections[i].PoetId}")" target="_blank">مشاهدهٔ بیش از @s.Top6RelatedSections[i].PoetMorePoemsLikeThisCount.ToPersianNumbers() مورد هم آهنگ دیگر از @s.Top6RelatedSections[i].PoetName<i class="info-buttons autorenew"></i></a>
+                                                                <a role="button" class="pagebutton" id="@($"load-more-button-{s.Top6RelatedSections[i].PoetId}-{s.Index}")" href="@Html.Raw($"/simi/?v={Uri.EscapeDataString(Model.GanjoorPage.Poem.GanjoorMetre.Rhythm)}&amp;g={Uri.EscapeDataString(Model.GanjoorPage.Poem.RhymeLetters)}&amp;a={s.Top6RelatedSections[i].PoetId}")" target="_blank">مشاهدهٔ بیش از @s.Top6RelatedSections[i].PoetMorePoemsLikeThisCount.ToPersianNumbers() مورد هم آهنگ دیگر از @s.Top6RelatedSections[i].PoetName<i class="info-buttons autorenew"></i></a>
                                                             }
                                                             else
                                                             {
-                                                                <a role="button" class="pagebutton" id="@($"load-more-button-{s.Top6RelatedSections[i].PoetId}")" onclick="loadMoreRelatedFromPoet(@s.Top6RelatedSections[i].PoetId, '@Model.GanjoorPage.Poem.GanjoorMetre.Rhythm', '@Model.GanjoorPage.Poem.RhymeLetters', '@Model.GanjoorPage.Poem.FullUrl', '@s.Top6RelatedSections[i].FullUrl')">مشاهدهٔ @s.Top6RelatedSections[i].PoetMorePoemsLikeThisCount.ToPersianNumbers() مورد هم آهنگ دیگر از @s.Top6RelatedSections[i].PoetName<i class="info-buttons autorenew"></i></a>
+                                                                <a role="button" class="pagebutton" id="@($"load-more-button-{s.Top6RelatedSections[i].PoetId}-{s.Index}")" onclick="loadMoreRelatedFromPoet(@s.Top6RelatedSections[i].PoetId, '@Model.GanjoorPage.Poem.GanjoorMetre.Rhythm', '@Model.GanjoorPage.Poem.RhymeLetters', '@Model.GanjoorPage.Poem.FullUrl', '@s.Top6RelatedSections[i].FullUrl', @s.Index)">مشاهدهٔ @s.Top6RelatedSections[i].PoetMorePoemsLikeThisCount.ToPersianNumbers() مورد هم آهنگ دیگر از @s.Top6RelatedSections[i].PoetName<i class="info-buttons autorenew"></i></a>
                                                             }
                                                         }
                                                     </div>
 
                                                     @if (s.Top6RelatedSections[i].PoetMorePoemsLikeThisCount > 0)
                                                     {
-                                                        <div id=@($"more-related-placeholder-{s.Top6RelatedSections[i].PoetId}")></div>
+                                                        <div id=@($"more-related-placeholder-{s.Top6RelatedSections[i].PoetId}-{s.Index}")></div>
                                                     }
                                                 }
 
                                                 @if (s.Top6RelatedSections.Length == 6)
                                                 {
-                                                    <div id="more-related-placeholder"></div>
-                                                    <div id="load-more-related">
-                                                        <a role="button" class="pagebutton" id="load-more-button" onclick="loadMoreRelatedPoems(@Model.GanjoorPage.Poem.Id, 5, '@Model.GanjoorPage.Poem.GanjoorMetre.Rhythm', '@Model.GanjoorPage.Poem.RhymeLetters', '@Model.GanjoorPage.Poem.FullUrl')">بیشتر<i class="info-buttons autorenew"></i></a>
+                                                    <div id="more-related-placeholder-@s.Index"></div>
+                                                    <div id="load-more-related-@s.Index">
+                                                        <a role="button" class="pagebutton" id="load-more-button-@s.Index" onclick="loadMoreRelatedPoems(@Model.GanjoorPage.Poem.Id, 5, '@Model.GanjoorPage.Poem.GanjoorMetre.Rhythm', '@Model.GanjoorPage.Poem.RhymeLetters', '@Model.GanjoorPage.Poem.FullUrl', @s.Index)">بیشتر<i class="info-buttons autorenew"></i></a>
                                                     </div>
                                                 }
                                             }
diff --git a/GanjooRazor/Pages/_SimiPage.cshtml.cs b/GanjooRazor/Pages/_SimiPage.cshtml.cs
index ff20b8cd..54c28d9c 100644
--- a/GanjooRazor/Pages/_SimiPage.cshtml.cs
+++ b/GanjooRazor/Pages/_SimiPage.cshtml.cs
@@ -130,13 +130,13 @@ namespace GanjooRazor.Pages
             GanjoorPage.HtmlText = htmlText;
         }
 
-        public async Task<ActionResult> OnGetSimilarPoemsPartialAsync(int poemId, int skip, string prosodyMetre, string rhymeLetters, string poemFullUrl)
+        public async Task<ActionResult> OnGetSimilarPoemsPartialAsync(int poemId, int skip, string prosodyMetre, string rhymeLetters, string poemFullUrl, int sectionIndex)
         {
-            string url = $"{APIRoot.Url}/api/ganjoor/poem/{poemId}/related?id={poemId}&skip={skip}&itemsCount=21";
+            string url = $"{APIRoot.Url}/api/ganjoor/section//{poemId}/{sectionIndex}/related?skip={skip}&itemsCount=21";
             var response = await _httpClient.GetAsync(url);
             if (!response.IsSuccessStatusCode)
                 return BadRequest(JsonConvert.DeserializeObject<string>(await response.Content.ReadAsStringAsync()));
-            var relatedPoems = JArray.Parse(await response.Content.ReadAsStringAsync()).ToObject<List<GanjoorCachedRelatedPoem>>();
+            var relatedSections = JArray.Parse(await response.Content.ReadAsStringAsync()).ToObject<List<GanjoorCachedRelatedSection>>();
 
             return new PartialViewResult()
             {
@@ -145,12 +145,13 @@ namespace GanjooRazor.Pages
                 {
                     Model = new _SimiPartialViewModel()
                     {
-                        RelatedPoems = relatedPoems.ToArray(),
+                        RelatedSections = relatedSections.ToArray(),
                         Rhythm = prosodyMetre,
                         RhymeLetters = rhymeLetters,
                         Skip = skip,
                         PoemId = poemId,
-                        PoemFullUrl = poemFullUrl
+                        PoemFullUrl = poemFullUrl,
+                        SectionIndex = sectionIndex
                     }
                 }
             };
@@ -166,9 +167,9 @@ namespace GanjooRazor.Pages
             List<int> poetMorePoemsLikeThisCount = new List<int>();
             var poems = JArray.Parse(await response.Content.ReadAsStringAsync()).ToObject<List<GanjoorPoemCompleteViewModel>>();
             if (poems.Any(p => p.FullUrl == skipPoemFullUrl1))
-                poems.Remove(poems.Single(p => p.FullUrl == skipPoemFullUrl1)); //TODO: fix errors here
+                poems.RemoveAll(p => p.FullUrl == skipPoemFullUrl1); //TODO: fix errors here
             if (poems.Any(p => p.FullUrl == skipPoemFullUrl2))
-                poems.Remove(poems.Single(p => p.FullUrl == skipPoemFullUrl2));
+                poems.RemoveAll(p => p.FullUrl == skipPoemFullUrl2);
 
             foreach (var poem in poems)
             {
@@ -182,7 +183,7 @@ namespace GanjooRazor.Pages
                 {
                     Model = new _SimiPartialFromPoetViewModel()
                     {
-                        Poems = poems
+                        Poems = poems,
                     }
                 }
             };
diff --git a/GanjooRazor/Pages/_SimiPartialView.cshtml b/GanjooRazor/Pages/_SimiPartialView.cshtml
index 75d0a37d..26a23953 100644
--- a/GanjooRazor/Pages/_SimiPartialView.cshtml
+++ b/GanjooRazor/Pages/_SimiPartialView.cshtml
@@ -4,39 +4,39 @@
     Layout = null;
 }
 
-@for (int i = 0; i < Math.Min(20, Model.RelatedPoems.Length); i++)
+@for (int i = 0; i < Math.Min(20, Model.RelatedSections.Length); i++)
 {
     <div class="inlinesimi">
         <div class="poet-pic-wrap">
-            <a href="@Html.Raw(Model.RelatedPoems[i].FullUrl)"><img src="@(GanjooRazor.APIRoot.InternetUrl +  Model.RelatedPoems[i].PoetImageUrl)" alt="@Model.RelatedPoems[i].PoetName" /></a>
+            <a href="@Html.Raw(Model.RelatedSections[i].FullUrl)"><img src="@(GanjooRazor.APIRoot.InternetUrl +  Model.RelatedSections[i].PoetImageUrl)" alt="@Model.RelatedSections[i].PoetName" /></a>
         </div>
         <div class="inlinesimi-poem-title">
-            <a href="@Html.Raw(Model.RelatedPoems[i].FullUrl)">@Model.RelatedPoems[i].FullTitle</a><span></span>
+            <a href="@Html.Raw(Model.RelatedSections[i].FullUrl)">@Model.RelatedSections[i].FullTitle</a><span></span>
         </div>
         <div class="simitext">
-            @Html.Raw(Model.RelatedPoems[i].HtmlExcerpt)
+            @Html.Raw(Model.RelatedSections[i].HtmlExcerpt)
         </div>
 
-        @if (Model.RelatedPoems[i].PoetMorePoemsLikeThisCount > 0)
+        @if (Model.RelatedSections[i].PoetMorePoemsLikeThisCount > 0)
         {
-            @if (Model.RelatedPoems[i].PoetMorePoemsLikeThisCount > 20)
+            @if (Model.RelatedSections[i].PoetMorePoemsLikeThisCount > 20)
             {
-                <a role="button" class="pagebutton" id="@($"load-more-button-{Model.RelatedPoems[i].PoetId}")" href="@Html.Raw($"/simi/?v={Uri.EscapeDataString(Model.Rhythm)}&amp;g={Uri.EscapeDataString(Model.RhymeLetters)}&amp;a={Model.RelatedPoems[i].PoetId}")" target="_blank">مشاهدهٔ بیش از @Model.RelatedPoems[i].PoetMorePoemsLikeThisCount.ToPersianNumbers() مورد هم آهنگ دیگر از @Model.RelatedPoems[i].PoetName<i class="info-buttons autorenew"></i></a>
+                <a role="button" class="pagebutton" id="@($"load-more-button-{Model.RelatedSections[i].PoetId}")" href="@Html.Raw($"/simi/?v={Uri.EscapeDataString(Model.Rhythm)}&amp;g={Uri.EscapeDataString(Model.RhymeLetters)}&amp;a={Model.RelatedSections[i].PoetId}")" target="_blank">مشاهدهٔ بیش از @Model.RelatedSections[i].PoetMorePoemsLikeThisCount.ToPersianNumbers() مورد هم آهنگ دیگر از @Model.RelatedSections[i].PoetName<i class="info-buttons autorenew"></i></a>
             }
             else
             {
-                <a role="button" class="pagebutton" id="@($"load-more-button-{Model.RelatedPoems[i].PoetId}")" onclick="loadMoreRelatedFromPoet(@Model.RelatedPoems[i].PoetId, '@Model.Rhythm', '@Model.RhymeLetters', '@Model.PoemFullUrl', '@Model.RelatedPoems[i].FullUrl')">مشاهدهٔ @Model.RelatedPoems[i].PoetMorePoemsLikeThisCount.ToPersianNumbers() مورد هم آهنگ دیگر از @Model.RelatedPoems[i].PoetName<i class="info-buttons">autorenew</i></a>
+                <a role="button" class="pagebutton" id="@($"load-more-button-{Model.RelatedSections[i].PoetId}")" onclick="loadMoreRelatedFromPoet(@Model.RelatedSections[i].PoetId, '@Model.Rhythm', '@Model.RhymeLetters', '@Model.PoemFullUrl', '@Model.RelatedSections[i].FullUrl')">مشاهدهٔ @Model.RelatedSections[i].PoetMorePoemsLikeThisCount.ToPersianNumbers() مورد هم آهنگ دیگر از @Model.RelatedSections[i].PoetName<i class="info-buttons">autorenew</i></a>
             }
 
         }
     </div>
-    @if (Model.RelatedPoems[i].PoetMorePoemsLikeThisCount > 0)
+    @if (Model.RelatedSections[i].PoetMorePoemsLikeThisCount > 0)
     {
-        <div id=@($"more-related-placeholder-{Model.RelatedPoems[i].PoetId}")></div>
+        <div id=@($"more-related-placeholder-{Model.RelatedSections[i].PoetId}")></div>
     }
 }
 
-@if (Model.RelatedPoems.Length == 21)
+@if (Model.RelatedSections.Length == 21)
 {
     <div id="load-more-related">
         <a role="button" class="pagebutton" id="load-more-button" onclick="loadMoreRelatedPoems(@Model.PoemId, @(Model.Skip + 20), '@Model.Rhythm', '@Model.RhymeLetters', '@Model.PoemFullUrl')">بیشتر<i class="info-buttons">autorenew</i></a>
diff --git a/GanjooRazor/Pages/_SimiPartialView.cshtml.cs b/GanjooRazor/Pages/_SimiPartialView.cshtml.cs
index 64752e50..d0908652 100644
--- a/GanjooRazor/Pages/_SimiPartialView.cshtml.cs
+++ b/GanjooRazor/Pages/_SimiPartialView.cshtml.cs
@@ -5,7 +5,7 @@ namespace GanjooRazor.Pages
 {
     public class _SimiPartialViewModel : PageModel
     {
-        public GanjoorCachedRelatedPoem[] RelatedPoems { get; set; }
+        public GanjoorCachedRelatedSection[] RelatedSections { get; set; }
 
         public string Rhythm { get; set; }
 
@@ -15,5 +15,7 @@ namespace GanjooRazor.Pages
 
         public int PoemId { get; set; }
         public string PoemFullUrl { get; set; }
+
+        public int SectionIndex { get; set; }
     }
 }
diff --git a/GanjooRazor/wwwroot/js/bk.js b/GanjooRazor/wwwroot/js/bk.js
index 9fed714b..b8c99619 100644
--- a/GanjooRazor/wwwroot/js/bk.js
+++ b/GanjooRazor/wwwroot/js/bk.js
@@ -773,36 +773,37 @@ function onSelectedPoetChanged() {
 }
 
 
-function loadMoreRelatedPoems(poemId, skip, rhythm, rhymeLetters, poemFullUrl) {
-    var loadButton = document.getElementById('load-more-button');
+function loadMoreRelatedPoems(poemId, skip, rhythm, rhymeLetters, poemFullUrl, sectionInd) {
+    var loadButton = document.getElementById('load-more-button-' + String(sectionInd));
     if (loadButton != null) {
         loadButton.remove();
     }
-    var divParent = document.getElementById('load-more-related');
-    divParent.innerHTML = divParent.innerHTML + '<img id="load-more-related-loadingimg" src="/image/loading.gif" alt="بارگذاری  "/>';
+    var divParent = document.getElementById('load-more-related-' + String(sectionInd));
+    var imgeId = 'load-more-related-loadingimg-' + String(sectionInd);
+    divParent.innerHTML = divParent.innerHTML + '<img id="' + imgeId + '" src="/image/loading.gif" alt="بارگذاری  "/>';
     
     $.ajax({
         type: "GET",
-        url: '?Handler=SimilarPoemsPartial&poemId=' + String(poemId) + '&skip=' + String(skip) + '&prosodyMetre=' + rhythm + '&rhymeLetters=' + rhymeLetters + '&poemFullUrl=' + poemFullUrl,
+        url: '?Handler=SimilarPoemsPartial&poemId=' + String(poemId) + '&skip=' + String(skip) + '&prosodyMetre=' + rhythm + '&rhymeLetters=' + rhymeLetters + '&poemFullUrl=' + poemFullUrl + '&sectionId=' + String(sectionInd),
         success: function (data) {
 
-            var imgElement = document.getElementById('load-more-related-loadingimg');
+            var imgElement = document.getElementById(imgeId);
             imgElement.remove();
 
-            $(data).appendTo(document.getElementById('more-related-placeholder'));
+            $(data).appendTo(document.getElementById('more-related-placeholder-' + String(sectionInd) ));
         },
     });
 }
 
-function loadMoreRelatedFromPoet(poetId, rhythm, rhymeLetters, skipPoemFullUrl1, skipPoemFullUrl2) {
-    var buttonId = 'load-more-button-' + String(poetId);
+function loadMoreRelatedFromPoet(poetId, rhythm, rhymeLetters, skipPoemFullUrl1, skipPoemFullUrl2, sectionIndex) {
+    var buttonId = 'load-more-button-' + String(poetId) + '-' + String(sectionIndex);
     var loadButton = document.getElementById(buttonId);
     if (loadButton != null) {
         loadButton.remove();
     }
-    var divId = 'more-related-placeholder-' + String(poetId);
+    var divId = 'more-related-placeholder-' + String(poetId) + '-' + String(sectionIndex);
     var divParent = document.getElementById(divId);
-    var imgeId = 'load-more-related-loadingimg' + String(poetId);
+    var imgeId = 'load-more-related-loadingimg-' + String(poetId) + '-' + String(sectionIndex);
     divParent.innerHTML = divParent.innerHTML + '<img id="' + imgeId + '" src="/image/loading.gif" alt="بارگذاری  "/>';
 
     $.ajax({