#255 report recitation errors UI

GanjooRazor/Pages/ReportRecitation.cshtml

@@ -0,0 +1,113 @@
+@page
+@model GanjooRazor.Pages.ReportRecitationModel
+@{
+    Layout = null;
+}
+
+<!DOCTYPE html>
+<html lang="fa-IR" dir="rtl">
+<head>
+    <meta charset="utf-8" />
+    <title>گزارش خطا در خوانش</title>
+    <script src="/lib/jquery/dist/jquery.min.js"></script>
+    <link href="/css/p8.css?version=22" rel="stylesheet" type="text/css" />
+    <style>
+        label {
+            width: 100px;
+            display: block;
+        }
+
+        input#submit {
+            text-align: center;
+            background-color: #fff;
+            border: 2px solid #300;
+            color: #300
+        }
+
+            input#submit:hover {
+                background-color: #300;
+                color: #fff;
+                border: 2px solid #433;
+            }
+    </style>
+</head>
+<body>
+    <div id="fa">
+        @if (Model.Report.RecitationId == 0)
+        {
+            <div class="width-100per">
+                <div class="width-100per text-align-center">
+                    <p class="alert-text">
+                        خطا: خوانشی انتخاب نشده است.
+                    </p>
+                </div>
+            </div>
+        }
+        else
+        if (!Model.LoggedIn)
+        {
+            <div class="width-100per">
+                <div class="width-100per text-align-center">
+                    <p class="alert-text">
+                        برای ثبت خطا در خوانش‌ها لازم است ابتدا با نام کاربری خود وارد گنجور شوید.
+                    </p>
+                    <p class="text-align-center">
+                        <a href=@Html.Raw($"/login/?redirect=/ReportRecitation/?a={Model.Report.RecitationId}")>ورود به گنجور</a>
+                    </p>
+                </div>
+            </div>
+        }
+        else
+        {
+            <div class="poem">
+                <h2>ثبت خطا در خوانش</h2>
+                @if (Model.PostSuccess)
+                {
+                    <p>درخواست شما ثبت شد. این درخواست در فرصت مناسب بررسی و در صورت تناسب با معیارهای حذف خوانش، این خوانش حذف خواهد شد.</p>
+                }
+                else
+               if (Model.LastError != "")
+                {
+                    <p>@Model.LastError</p>
+                }
+                else
+                {
+                    <p>
+                        <span style="color:red">لطفاً</span> تنها در صورتی که در خوانش خطایی صورت گرفته یا مشکلات فنی راجع به آن وجود دارد آن را گزارش کنید.
+                    </p>
+                }
+            </div>
+            @if (!Model.PostSuccess && Model.LastError == "")
+            {
+                <p>
+                    @Model.RecitationInfo
+                </p>
+
+                <div class="content">
+                    <form method="post">
+                        <table class="width-100per">
+                            <tr>
+                                <td>
+                                    <span class="inputlabel">این خوانش چه مشکلی دارد؟ (در صورت غلط خوانی اولین مصرع و کلمهٔ غلط خوانده شده را گزارش کنید)</span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <textarea rows="4" cols="50" asp-for="Report.ReasonText"></textarea>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <input type="hidden" asp-for="Report.RecitationId" />
+                                    <input type="submit" name="submit" id="submit" value="ثبت خطا" />
+                                </td>
+                            </tr>
+
+                        </table>
+                    </form>
+                </div>
+            }
+        }
+    </div>
+</body>
+</html>

GanjooRazor/Pages/ReportRecitation.cshtml.cs

@@ -0,0 +1,123 @@
+using GanjooRazor.Utils;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Newtonsoft.Json;
+using RMuseum.Models.GanjoorAudio.ViewModels;
+using System.Net.Http;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace GanjooRazor.Pages
+{
+    [IgnoreAntiforgeryToken(Order = 1001)]
+    public class ReportRecitationModel : PageModel
+    {
+        // <summary>
+        /// HttpClient instance
+        /// </summary>
+        private readonly HttpClient _httpClient;
+
+        /// <summary>
+        /// constructor
+        /// </summary>
+        /// <param name="httpClient"></param>
+        public ReportRecitationModel(HttpClient httpClient)
+        {
+            _httpClient = httpClient;
+        }
+
+
+        /// <summary>
+        /// is logged on
+        /// </summary>
+        public bool LoggedIn { get; set; }
+
+        /// <summary>
+        /// Last Error
+        /// </summary>
+        public string LastError { get; set; }
+
+        /// <summary>
+        /// Post Success
+        /// </summary>
+        public bool PostSuccess { get; set; }
+
+        /// <summary>
+        /// Recitation Info
+        /// </summary>
+        public string RecitationInfo { get; set; }
+
+        /// <summary>
+        /// api model
+        /// </summary>
+        [BindProperty]
+        public RecitationErrorReportViewModel Report { get; set; }
+        public async Task<IActionResult> OnGetAsync()
+        {
+            PostSuccess = false;
+            LastError = "";
+            LoggedIn = !string.IsNullOrEmpty(Request.Cookies["Token"]);
+            RecitationInfo = "";
+
+            Report = new RecitationErrorReportViewModel()
+            {
+                ReasonText = "",
+            };
+
+            if (!string.IsNullOrEmpty(Request.Query["a"]))
+            {
+                Report.RecitationId = int.Parse(Request.Query["a"]);
+                var response = await _httpClient.GetAsync($"{APIRoot.Url}/api/audio/published/{Report.RecitationId}");
+                if (!response.IsSuccessStatusCode)
+                {
+                    LastError = JsonConvert.DeserializeObject<string>(await response.Content.ReadAsStringAsync());
+                }
+                else
+                {
+                    var recitation = JsonConvert.DeserializeObject<PublicRecitationViewModel>(await response.Content.ReadAsStringAsync());
+
+                    RecitationInfo = $"{recitation.AudioTitle} به خوانش {recitation.AudioArtist}";
+
+                }
+            }
+            else
+            {
+                Report.RecitationId = 0;
+            }
+           
+            return Page();
+        }
+
+        public async Task<IActionResult> OnPostAsync()
+        {
+            PostSuccess = false;
+            LastError = "";
+            LoggedIn = !string.IsNullOrEmpty(Request.Cookies["Token"]);
+            RecitationInfo = "";
+
+            using (HttpClient secureClient = new HttpClient())
+            {
+                if (await GanjoorSessionChecker.PrepareClient(secureClient, Request, Response))
+                {
+                    var stringContent = new StringContent(JsonConvert.SerializeObject(Report), Encoding.UTF8, "application/json");
+                    var methodUrl = $"{APIRoot.Url}/api/audio/errors/report";
+                    var response = await secureClient.PostAsync(methodUrl, stringContent);
+                    if (!response.IsSuccessStatusCode)
+                    {
+                        LastError = JsonConvert.DeserializeObject<string>(await response.Content.ReadAsStringAsync());
+                    }
+                    else
+                    {
+                        PostSuccess = true;
+                    }
+                }
+                else
+                {
+                    LastError = "لطفا از گنجور خارج و مجددا به آن وارد شوید.";
+                }
+            }
+
+            return Page();
+        }
+    }
+}

GanjooRazor/Pages/_AudioPlayerPartial.cshtml

@@ -19,6 +19,7 @@
             <div class="audio-partial-action-box">
                 <a role="button" class="w3tooltip cursor-pointer recitation-button" href="@($"/AudioClip/?a={recitaion.Id}")" onclick="wpopen(this.href); return false"><i class="recitation-icons recitation-download"></i><span class="w3tooltiptext">دریافت خوانش</span></a>
                 <a role="button" class="w3tooltip cursor-pointer recitation-button" onclick="switchPlayerScrollLock()"><i class="recitation-icons recitation-scrollunlock"></i><span class="w3tooltiptext">قفل متن روی خوانش</span></a>
+                <a role="button" class="w3tooltip cursor-pointer recitation-button" href="@($"/ReportRecitation/?a={recitaion.Id}")" onclick="wpopen(this.href); return false"><i class="recitation-icons recitation-report"></i><span class="w3tooltiptext">گزارش خطا</span></a>
             </div>
             <script>
                 document.getElementById('audio-@(nRecitationIndex + 1)').addEventListener('play', () => {

GanjooRazor/wwwroot/css/p8.css

@@ -1254,6 +1254,10 @@ ol {
     content: 'download';
 }
 
+.recitation-report::after {
+    content: 'flag';
+}
+
 .recitation-scrollunlock::after {
     content: 'no_encryption';
 }