ProjectLighthouse/ProjectLighthouse.Servers.Website/Pages/SlotPage.cshtml

@page "/slot/{id:int}"
@using System.Web
@using LBPUnion.ProjectLighthouse.Database
@using LBPUnion.ProjectLighthouse.Extensions
@using LBPUnion.ProjectLighthouse.Helpers
@using LBPUnion.ProjectLighthouse.Localization.StringLists
@using LBPUnion.ProjectLighthouse.Servers.Website.Extensions
@using LBPUnion.ProjectLighthouse.Types.Entities.Profile
@using LBPUnion.ProjectLighthouse.Types.Moderation.Cases
@using LBPUnion.ProjectLighthouse.Types.Users
@model LBPUnion.ProjectLighthouse.Servers.Website.Pages.SlotPage
@inject DatabaseContext Database

@{
    Layout = "Layouts/BaseLayout";
    Model.ShowTitleInPage = false;

    Model.Title = HttpUtility.HtmlDecode(Model.Slot?.Name ?? "");
    Model.Description = HttpUtility.HtmlDecode(Model.Slot?.Description ?? "");

    bool isMobile = Request.IsMobile();
    string language = Model.GetLanguage();
    string timeZone = Model.GetTimeZone();
}

@if (Model.Slot!.Hidden)
{
    <div class="ui inverted red segment">
        <h2>This level is currently hidden.</h2>
        <p><b>Only you and moderators may view this level.</b></p>
        
        <b>Reason:</b> <span>"@Model.Slot.HiddenReason"</span>
        
        <p><b>For more information please contact a moderator.</b></p>
    </div>
}

@await Model.Slot.ToHtml(Html, ViewData, Model.User, $"~/slot/{Model.Slot?.SlotId}", language, timeZone, isMobile)
<br>

<div class="@(isMobile ? "" : "ui grid")">
    <div class="eight wide column">
        <div class="ui blue segment">
            <h2>Description</h2>
            <p style="overflow-wrap: anywhere">@HttpUtility.HtmlDecode(string.IsNullOrEmpty(Model.Slot?.Description) ? "This level has no description." : Model.Slot.Description)</p>
        </div>
    </div>
    @if (isMobile)
    {
        <br/>
    }
    <div class="eight wide column">
        <div class="ui red segment">
            <h2>Tags</h2>
            @{
                string[] authorLabels;
                if (Model.Slot?.GameVersion == GameVersion.LittleBigPlanet1)
                {
                    authorLabels = Model.Slot.LevelTags(Database);
                }
                else
                {
                    authorLabels = Model.Slot?.AuthorLabels.Split(",", StringSplitOptions.RemoveEmptyEntries) ?? Array.Empty<string>();
                }
                if (authorLabels.Length == 0)
                {
                    <p>This level has no tags.</p>
                }
                else
                {
                    foreach (string label in authorLabels.Where(label => !string.IsNullOrEmpty(label)))
                    {
                        <div class="ui blue label">@LabelHelper.TranslateTag(label)</div>
                    }
                }
            }
        </div>
    </div>
    @if (isMobile)
    {
        <br/>
    }
</div>
    
<div class="ui grid">
    @{
        string outerDiv = isMobile ?
            "horizontal-scroll" :
            "three wide column";
        string innerDiv = isMobile ?
            "ui top attached tabular menu horizontal-scroll" :
            "ui vertical fluid tabular menu";
    }
    <div class="@outerDiv">
        <div class="@innerDiv">
            <a class="item active lh-sidebar" target="lh-comments">
                Comments
            </a>
            <a class="item lh-sidebar" target="lh-photos">
                @Model.Translate(BaseLayoutStrings.HeaderPhotos)
            </a>
            <a class="item lh-sidebar" target="lh-reviews">
                Reviews
            </a>
            <a class="item lh-sidebar" target="lh-scores">
                Scores
            </a>
        </div>
    </div>

    @{
        string divLength = isMobile ? "sixteen" : "thirteen";
    }
    <div class="@divLength wide stretched column">
        <div class="lh-content" id="lh-comments">
            @await Html.PartialAsync("Partials/CommentsPartial", new ViewDataDictionary(ViewData.WithLang(language).WithTime(timeZone))
                   { { "PageOwner", Model.Slot?.CreatorId }, })
        </div>
        <div class="lh-content" id="lh-photos">
            <div class="ui purple segment" id="photos">
                @if (Model.Photos.Count != 0)
                {
                    <div class="ui center aligned grid">
                        @foreach (PhotoEntity photo in Model.Photos)
                        {
                            string width = isMobile ? "sixteen" : "eight";
                            bool canDelete = Model.User != null && (Model.User.IsModerator || Model.User.UserId == photo.CreatorId);
                            <div class="@width wide column">
                                @await photo.ToHtml(Html, ViewData, language, timeZone, canDelete)
                            </div>
                        }
                    </div>
                    @if (isMobile)
                    {
                        <br/>
                    }
                }
                else
                {
                    <p>This level has no photos yet.</p>
                }

            </div>
        </div>
        <div class="lh-content" id="lh-reviews">
            @await Html.PartialAsync("Partials/ReviewPartial", new ViewDataDictionary(ViewData)
                   {
                       {
                           "isMobile", isMobile
                       },
                       {
                           "CanDelete", Model.User?.IsModerator ?? false
                       },
                   })
        </div>
        <div class="lh-content" id="lh-scores">
            <div class="eight wide column">
                @await Html.PartialAsync("Partials/LeaderboardPartial", 
                           ViewData.WithLang(language).WithTime(timeZone).CanDelete(Model.User?.IsModerator ?? false))
            </div>
        </div>
    </div>
</div>

    @if (isMobile)
    {
        <br/>
    }

@if (Model.User != null && Model.User.IsModerator)
{
    <div class="ui green segment">
        <h2>Moderation Options</h2>

        @if (Model.Slot?.TeamPick ?? false)
        {
            <a href="/moderation/slot/@Model.Slot.SlotId/removeTeamPick">
                <div class="ui pink button">
                    <i class="star icon"></i>
                    <span>Remove Team Pick</span>
                </div>
            </a>
        }
        else
        {
            <a href="/moderation/slot/@Model.Slot?.SlotId/teamPick">
                <div class="ui pink button">
                    <i class="star icon"></i>
                    <span>Team Pick</span>
                </div>
            </a>
        }

        <a href="/moderation/slot/@Model.Slot?.SlotId/delete">
            <div class="ui red button">
                <i class="trash icon"></i>
                <span>Delete</span>
            </div>
        </a>
        
        @if (!Model.Slot!.Hidden)
        {
            <a href="/moderation/newCase?type=@((int)CaseType.LevelHide)&affectedId=@Model.Slot?.SlotId">
                <div class="ui yellow button">
                    <i class="lock icon"></i>
                    <span>Hide</span>
                </div>
            </a>
        }
        
        @if (Model.Slot!.CommentsEnabled)
        {
            <a class="ui yellow button" href="/moderation/newCase?type=@((int)CaseType.LevelDisableComments)&affectedId=@Model.Slot?.SlotId">
                <i class="lock icon"></i>
                <span>Disable Comments</span>
            </a>
        }
    </div>
    @if (isMobile)
    {
        <br/>
    }
}

<script>
const sidebarElements = Array.from(document.querySelectorAll(".lh-sidebar"));
const contentElements = Array.from(document.querySelectorAll(".lh-content"));
let selectedId = window.location.hash;
if (selectedId.startsWith("#"))
    selectedId = selectedId.substring(1);
let selectedElement = document.getElementById(selectedId);
// id = lh-sidebar element
function setVisible(e){
    let eTarget = document.getElementById(e.target);
    if (!e || !eTarget) return;

    // make all active elements not active
    for (let active of document.getElementsByClassName("active")) {
        active.classList.remove("active");
    }
    // hide all content divs
    for (let i = 0; i < contentElements.length; i++){
        contentElements[i].style.display = "none";
    }
    // unhide content
    eTarget.style.display = "";
    
    e.classList.add("active");
}

sidebarElements.forEach(el => {
    if (el.classList.contains("active")){
        setVisible(el);
    }
    el.addEventListener('click', event => {
        if (!event.target.target) return;

        setVisible(event.target)
    })
})
// set the active content window based on url
if (selectedElement != null) {
    while (selectedElement != null && !selectedElement.classList.contains("lh-content")){
        selectedElement = selectedElement.parentElement;
    }
    
    let sidebarEle = document.querySelector("[target=" + selectedElement.id + "]")
    setVisible(sidebarEle);
}
</script>