ProjectLighthouse/ProjectLighthouse.Servers.Website/Pages/UserPage.cshtml

@page "/user/{userId:int}"
@using System.Web
@using LBPUnion.ProjectLighthouse.Extensions
@using LBPUnion.ProjectLighthouse.Localization.StringLists
@using LBPUnion.ProjectLighthouse.Servers.Website.Extensions
@using LBPUnion.ProjectLighthouse.Types.Entities.Level
@using LBPUnion.ProjectLighthouse.Types.Entities.Profile
@using LBPUnion.ProjectLighthouse.Types.Moderation.Cases
@model LBPUnion.ProjectLighthouse.Servers.Website.Pages.UserPage

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

    Model.Title = Model.Translate(ProfileStrings.Title, Model.ProfileUser!.Username);
    Model.Description = Model.ProfileUser!.Biography;

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

@if (Model.ProfileUser.IsBanned)
{
    <div class="ui inverted red segment">
        <h3><i class="ban icon"></i> This user is currently banned.</h3>
        @if (Model.User != null && Model.User.IsModerator)
        {
            <b>Reason:</b>
            <span>"@Model.ProfileUser.BannedReason"</span>
        }
        else
        {
            <p>This user has been banned for violating the Terms of Service. Remember to follow the rules!</p>
        }
    </div>
}

<div class="@(isMobile ? "" : "ui grid")">
    <div class="eight wide column">
        @await Html.PartialAsync("Partials/UserCardPartial", Model.ProfileUser, new ViewDataDictionary(ViewData)
               {
                   {
                       "ShowLink", false
                   },
                   {
                       "IsMobile", Model.Request.IsMobile()
                   },
                   {
                       "Language", Model.GetLanguage()
                   },
                   {
                       "TimeZone", Model.GetTimeZone()
                   },
               })
    </div>
    <div class="eight wide right aligned column">
        <br>
        @if (Model.ProfileUser != Model.User && Model.User != null)
        {
            if (!Model.IsProfileUserBlocked)
            {
                <a class="ui red button" href="/user/@Model.ProfileUser.UserId/block">
                    <i class="user alternate slash icon"></i>
                    <span>Block</span>
                </a>
            }
            else
            {
                <a class="ui black button" href="/user/@Model.ProfileUser.UserId/unblock">
                    <i class="user alternate icon"></i>
                    <span>Unblock</span>
                </a>
            }
            if (!Model.IsProfileUserHearted)
            {
                <a class="ui pink button" href="/user/@Model.ProfileUser.UserId/heart">
                    <i class="heart icon"></i>
                    <span>Heart</span>
                </a>
            }
            else
            {
                <a class="ui pink button" href="/user/@Model.ProfileUser.UserId/unheart">
                    <i class="heart broken icon"></i>
                    <span>Unheart</span>
                </a>
            }
        }
        @if (Model.ProfileUser == Model.User)
        {
            <a class="ui blue button" href="/user/@Model.ProfileUser.UserId/privacy">
                <i class="eye icon"></i>
                <span>Privacy Settings</span>
            </a>
        }
        @if (Model.ProfileUser == Model.User || (Model.User?.IsModerator ?? false))
        {
            <a class="ui blue button" href="/user/@Model.ProfileUser.UserId/settings">
                <i class="cog icon"></i>
                <span>Profile Settings</span>
            </a>
        }
        @if (Model.ProfileUser == Model.User)
        {
            <a href="/logout" class="ui red button">
                <i class="user slash icon"></i>
                @Model.Translate(BaseLayoutStrings.HeaderLogout)
            </a>
        }
    </div>
    @if (isMobile)
    {
        <br/>
    }
    @if (Model.CanViewProfile)
    {
        <div class="eight wide column">
            <div class="ui blue segment">
                <h2>@Model.Translate(ProfileStrings.Biography)</h2>
                @if (string.IsNullOrWhiteSpace(Model.ProfileUser.Biography))
                {
                    <p>@Model.Translate(ProfileStrings.NoBiography, Model.ProfileUser.Username)</p>
                }
                else
                {
                    <p style="overflow-wrap: anywhere;">@HttpUtility.HtmlDecode(Model.ProfileUser.Biography)</p>
                }
            </div>
        </div>
        @if (isMobile)
        {
            <br/>
        }
        <div class="eight wide column">
            <div class="ui red segment">
                <h2>@Model.Translate(GeneralStrings.RecentActivity)</h2>
                <p>@Model.Translate(GeneralStrings.Soon)</p>
            </div>
        </div>
        @if (isMobile)
        {
            <br/>
        }    
    }
</div>

@if (!Model.CanViewProfile)
{
    <div class="ui red segment">
        <p>
            <i>The user's privacy settings prevent you from viewing this page.</i>
        </p>
    </div>
}
else
{
    <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-levels">
                    @Model.Translate(BaseLayoutStrings.HeaderSlots)
                </a>
                <a class="item lh-sidebar" target="lh-playlists">
                    Playlists
                </a>
                @if (Model.User == Model.ProfileUser)
                {
                    <a class="item lh-sidebar" target="lh-hearted">
                        Hearted Levels
                    </a>
                    <a class="item lh-sidebar" target="lh-queued">
                        Queued Levels
                    </a>
                }
            </div>
        </div>
        @{
            string divLength = isMobile ? "sixteen" : "thirteen";
        }
        <div class="@divLength wide stretched column">
            <div class="lh-content" id="lh-comments">
                @if (Model.ProfileUser.IsBanned)
                {
                    <div class="ui yellow segment" id="comments">
                        <p>
                            <i>Comments are disabled because the user is banned.</i>
                        </p>
                    </div>
                }
                else
                {
                    @await Html.PartialAsync("Partials/CommentsPartial", new ViewDataDictionary(ViewData.WithLang(language).WithTime(timeZone))
                           {
                               {
                                   "PageOwner", Model.ProfileUser.UserId
                               },
                           })
                }
            </div>
            <div class="lh-content" id="lh-photos">
                <div class="ui purple segment" id="photos">
                    @if (Model.Photos != null && 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 user hasn't uploaded any photos</p>
                    }
                </div>
            </div>
            <div class="lh-content" id="lh-levels">
                @if (!Model.CanViewSlots)
                {
                    <div class="ui red segment">
                        <p>
                            <i>The user's privacy settings prevent you from viewing this page.</i>
                        </p>
                    </div>    
                }
                else
                {
                    <div class="ui green segment" id="levels">
                        @if (Model.Slots?.Count == 0)
                        {
                            <p>This user hasn't published any levels</p>
                        }
                        @foreach (SlotEntity slot in Model.Slots ?? new List<SlotEntity>())
                        {
                            <div class="ui segment">
                                @await slot.ToHtml(Html, ViewData, Model.User, $"~/user/{Model.ProfileUser.UserId}#levels", language, timeZone, isMobile, true)
                            </div>
                        }
                    </div>    
                }
            </div>
            <div class="lh-content" id="lh-playlists">
                <div class="ui purple segment">
                    <p>@Model.Translate(GeneralStrings.Soon)</p>
                </div>
            </div>
            @if (Model.User == Model.ProfileUser)
            {
                <div class="lh-content" id="lh-hearted">
                    <div class="ui pink segment" id="hearted">
                        @if (Model.HeartedSlots?.Count == 0)
                        {
                            <p>You haven't hearted any levels</p>
                        }
                        else
                        {
                            <p>You have hearted @(Model.HeartedSlots?.Count) levels</p>
                        }
                        @foreach (SlotEntity slot in Model.HeartedSlots ?? new List<SlotEntity>())
                        {
                            <div class="ui segment">
                                @await slot.ToHtml(Html, ViewData, Model.User, $"~/user/{Model.ProfileUser.UserId}#hearted", language, timeZone, isMobile, true)
                            </div>
                        }
                    </div>
                </div>
                <div class="lh-content" id="lh-queued">
                    <div class="ui yellow segment" id="queued">
                        @if (Model.QueuedSlots?.Count == 0)
                        {
                            <p>You haven't queued any levels</p>
                        }
                        else
                        {
                            <p>There are @(Model.QueuedSlots?.Count) levels in your queue</p>
                        }
                        @foreach (SlotEntity slot in Model.QueuedSlots ?? new List<SlotEntity>())
                        {
                            <div class="ui segment">
                                @await slot.ToHtml(Html, ViewData, Model.User, $"~/user/{Model.ProfileUser.UserId}#queued", language, timeZone, isMobile, true)
                            </div>
                        }
                    </div>
                </div>
            }
        </div>
    </div>
}

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

        @if (!Model.ProfileUser.IsBanned)
        {
            <div>
                <a class="ui red button" href="/moderation/newCase?type=@((int)CaseType.UserBan)&affectedId=@Model.ProfileUser.UserId">
                    <i class="ban icon"></i>
                    <span>Ban User</span>
                </a>
            </div>
            <div class="ui fitted hidden divider"></div>
        }
        
        <div>
            <a class="ui red button" href="/moderation/user/@Model.ProfileUser.UserId/wipePlanets">
                <i class="trash alternate icon"></i>
                <span>Wipe Earth Decorations</span>
            </a>
        </div>
        <div class="ui fitted hidden divider"></div>

        @if (!Model.CommentsDisabledByModerator)
        {
            <div>
                <a class="ui yellow button" href="/moderation/newCase?type=@((int)CaseType.UserDisableComments)&affectedId=@Model.ProfileUser.UserId">
                    <i class="lock icon"></i>
                    <span>Forcibly Disable Comments</span>
                </a>
            </div>
            <div class="ui fitted hidden divider"></div>
        }

        @if (Model.User.IsAdmin)
        {
            @await Html.PartialAsync("Partials/AdminSetGrantedSlotsFormPartial", Model.ProfileUser)
        }
    </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>