From acf2a62e2e28ab3c5fce116d3a6b9f6013730cda Mon Sep 17 00:00:00 2001
From: Hamid Reza Mohammadi <mohammadi.hr@gmail.com>
Date: Sun, 26 Sep 2021 19:48:38 +0330
Subject: [PATCH] #208 preparing UI for bookmarking

---
 GanjooRazor/Pages/Index.cshtml           |  1 +
 GanjooRazor/Pages/_BNumPartial.cshtml    |  7 +++---
 GanjooRazor/Pages/_BNumPartial.cshtml.cs | 29 +++++++++++++++++++++++-
 GanjooRazor/wwwroot/js/bj.js             |  5 ++++
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/GanjooRazor/Pages/Index.cshtml b/GanjooRazor/Pages/Index.cshtml
index a0373144..c8e43f4f 100644
--- a/GanjooRazor/Pages/Index.cshtml
+++ b/GanjooRazor/Pages/Index.cshtml
@@ -19,6 +19,7 @@
     <link href="/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
     <link href="/css/p8.css" rel="stylesheet" type="text/css" />
     <link href="/css/fab.css" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
diff --git a/GanjooRazor/Pages/_BNumPartial.cshtml b/GanjooRazor/Pages/_BNumPartial.cshtml
index 32cb534d..941cf4b0 100644
--- a/GanjooRazor/Pages/_BNumPartial.cshtml
+++ b/GanjooRazor/Pages/_BNumPartial.cshtml
@@ -12,9 +12,10 @@
 
 @if (Model.LoggedIn)
 {
-    <div style="width:100%;clear:both;">
-        <a role="button" id="listen-@Model.CoupletIndex" style="cursor: pointer; width: 100%; color: white; background-color: #300; display: block; text-align: center; border-color: #300;" onclick="editCouplet(@Model.PoemId, @Model.CoupletIndex)">ویرایش از اینجا</a>
-    </div>
+<div style="width: 100%; clear: both; background-color: #300;">
+    <a role="button" id="bookmark-@Model.CoupletIndex" style="cursor: pointer;" onclick="switchBookmark(@Model.PoemId, @Model.CoupletIndex)" title="@Model.BookmarkingText"><i class="material-icons" id="bookmark-icon-@Model.CoupletIndex" style="color:white;">@Model.BookmarkingIcon</i></a>
+    <a role="button" id="listen-@Model.CoupletIndex" style="cursor: pointer;" onclick="editCouplet(@Model.PoemId, @Model.CoupletIndex)" title="ویرایش از اینجا"><i class="material-icons" style="color:white;">edit</i></a>
+</div>
 }
 
 
diff --git a/GanjooRazor/Pages/_BNumPartial.cshtml.cs b/GanjooRazor/Pages/_BNumPartial.cshtml.cs
index 30274686..45103055 100644
--- a/GanjooRazor/Pages/_BNumPartial.cshtml.cs
+++ b/GanjooRazor/Pages/_BNumPartial.cshtml.cs
@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.AspNetCore.Mvc.RazorPages;
 using RMuseum.Models.Ganjoor.ViewModels;
 using System.Collections.Generic;
 
@@ -21,6 +21,33 @@ namespace GanjooRazor.Pages
         /// </summary>
         public int CoupletIndex { get; set; }
 
+        /// <summary>
+        /// is bookmarked
+        /// </summary>
+        public bool IsBookmarked { get; set; }
+
+        /// <summary>
+        /// bookmaring text
+        /// </summary>
+        public string BookmarkingText
+        {
+            get
+            {
+                return IsBookmarked ? "حذف نشانه" : "نشانه‌گذاری";
+            }
+        }
+
+        /// <summary>
+        /// bookmarking icon
+        /// </summary>
+        public string BookmarkingIcon
+        {
+            get
+            {
+                return IsBookmarked ? "star" : "star_border";
+            }
+        }
+
         /// <summary>
         /// comments
         /// </summary>
diff --git a/GanjooRazor/wwwroot/js/bj.js b/GanjooRazor/wwwroot/js/bj.js
index 6d9ffea8..717d4c74 100644
--- a/GanjooRazor/wwwroot/js/bj.js
+++ b/GanjooRazor/wwwroot/js/bj.js
@@ -399,4 +399,9 @@ function editCouplet(poemId, coupletIndex) {
 
     var vIndex = getVerseIndexFromCoupleIndex(coupletIndex);
     location.href = '/User/Editor?id=' + poemId + '#id-' + String(vIndex + 1);
+}
+
+function switchBookmark(poemId, coupletIndex) {
+    var iconElementId = 'bookmark-icon-' + String(coupletIndex);
+    document.getElementById(iconElementId).innerHTML = (document.getElementById(iconElementId).innerHTML == 'star') ? 'star_border' : 'star';
 }
\ No newline at end of file