bantflags/BantFlags/Pages/Upload.cshtml

@* (C) Copyright 2019 C-xC-c <boku@plum.moe>
   This file is part of BantFlags.
   BantFlags is licensed under the GNU AGPL Version 3.0 or later.
   see the LICENSE file or <https: //www.gnu.org/licenses/agpl-3.0.en.html /> *@
@page
@using BantFlags.Data
@model BantFlags.UploadModel
@{
ViewData["Title"] = "Upload";
Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>Upload</h1>
<img src="~/montage.png" />
<h2 id="message">@Model.Message</h2>
<h2>Add a Flag</h2>
<form method="post" asp-page-handler="Add" enctype="multipart/form-data">
    <input type="file" name="upload" />
    <input type="checkbox" name="gloss" value="true" /><span>Apply Gloss?</span>
    <br />
    <br />
    <input type="submit" value="Upload Flag" />
</form>

<h2>Manage Existing Flags</h2>
<form method="post">
    <select name="flag">
        @foreach (string s in Model.StagedFlags.Names)
    {
        <option>@s</option>
    }
    </select>
    <input type="text" name="newName" />
    <br />
    <br />
    <button asp-page-handler="Delete" type="submit">Delete Flag</button>
    <button asp-page-handler="Rename" type="submit">Rename Flag</button>
</form>

<h2>Commit Changes</h2>
<form method="post" asp-page-handler="Commit" enctype="multipart/form-data">
    <label>Password:</label>
    <input type="text" name="password" />
    <br />
    <br />
    <input type="submit" value="Commit Changes" />
</form>

@if (Model.StagedFlags.Flags.Any())
{
<h2>Pending Changes</h2>
<form method="post" asp-page-handler="Unstage">
    <input type="text" name="password" />
    <br />
    <br />
    <button type="submit">Remove from staging</button>
    <h3>Deleted Flags</h3>
    @for (int i = 0; i < Model.StagedFlags.Flags.Count(); i++)
    {
        if (Model.StagedFlags.Flags[i].FlagMethod == Method.Delete)
        {
    <div class="flag">

        <label>@(Model.StagedFlags.Flags[i].Name)</label>
        <img src="~/flags/@(Model.StagedFlags.Flags[i].Name).png" />
        <input type="hidden" name="flags[@i].Name" value="@Model.StagedFlags.Flags[i].Name" />
        <input type="hidden" name="flags[@i].FlagMethod" value="@Model.StagedFlags.Flags[i].FlagMethod" />
        <input type="checkbox" name="flags[@i].IsChecked" value="true" />
    </div>
        }

    }

    <h3>Renamed Flags</h3>
    @for (int i = 0; i < Model.StagedFlags.Flags.Count(); i++)
    {
        if (Model.StagedFlags.Flags[i].FlagMethod == Method.Rename)
        {
    <div class="flag">
        <label>@(Model.StagedFlags.Flags[i].Name)</label>
        <img src="~/flags/@(Model.StagedFlags.Flags[i].OldName).png" />
        <input type="hidden" name="flags[@i].Name" value="@Model.StagedFlags.Flags[i].Name" />
        <input type="hidden" name="flags[@i].FlagMethod" value="@Model.StagedFlags.Flags[i].FlagMethod" />
        <input type="checkbox" name="flags[@i].IsChecked" value="true" />
    </div>
        }

    }

    <h3>Added Flags</h3>
    @for (int i = 0; i < Model.StagedFlags.Flags.Count(); i++)
    {
        if (Model.StagedFlags.Flags[i].FlagMethod == Method.Add)
        {
    <div class="flag">
        <label>@(Model.StagedFlags.Flags[i].Name)</label>
        <img src="~/flags/staging/@(Model.StagedFlags.Flags[i].Name).png" />
        <input type="hidden" name="flags[@i].Name" value="@Model.StagedFlags.Flags[i].Name" />
        <input type="hidden" name="flags[@i].FlagMethod" value="@Model.StagedFlags.Flags[i].FlagMethod" />
        <input type="checkbox" name="flags[@i].IsChecked" value="true" />
    </div>
        }

    }
</form>
}

@section Head {
    <link rel="stylesheet" href="~/upload.css" />
}

@section Scripts {
    @* Place flag image inside the <select> because ASP removes "invalid HTML" *@
    <script>
        window.addEventListener('load', function (e) {
            let x = document.getElementsByTagName('select')[0].children
            Array.prototype.slice.call(x).forEach(function (y) {
                var name = y.innerHTML;
                y.innerHTML = "<img src=\"flags/" + name + ".png\">" + name
            });
        }, { once: true });
    </script>
}