Badges management pages done

MyWebsite/MyWebsite/Areas/Admin/Controllers/BadgesController.cs

@@ -0,0 +1,64 @@
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using MyWebsite.Models;
+using System.IO;
+
+namespace MyWebsite.Areas.Admin.Controllers
+{
+    [Area("Admin")]
+    [Authorize]
+    public class BadgesController : Controller
+    {
+        public BadgesController(DatabaseContext context) =>
+               Startup.Database = context;
+
+        public IActionResult Index() =>
+            View(Startup.Database.Badges);
+
+        [HttpGet]
+        public IActionResult Edit(string id) =>
+            View(Startup.Database.Badges.Find(id));
+
+        [HttpPost]
+        public IActionResult Edit(Badge model)
+        {
+            Startup.Database.Badges.Update(model);
+            Startup.Database.SaveChanges();
+
+            return RedirectToAction("Index");
+        }
+
+        [HttpGet]
+        public IActionResult Delete(string id) =>
+            View(Startup.Database.Badges.Find(id));
+
+        [HttpPost]
+        public IActionResult Delete(Badge model)
+        {
+            Startup.Database.Badges.Remove(model);
+            Startup.Database.SaveChanges();
+
+            return RedirectToAction("Index");
+        }
+
+        [HttpGet]
+        public IActionResult Create() =>
+            View();
+
+        [HttpPost]
+        public IActionResult Create(Badge model)
+        {
+            if (!ModelState.IsValid)
+            {
+                ModelState.AddModelError("Error", "Invalid data");
+                return View(model);
+            }
+
+            Startup.Database.Badges.Add(model);
+            Startup.Database.SaveChanges();
+
+            return RedirectToAction("Index");
+        }
+    }
+}

MyWebsite/MyWebsite/Areas/Admin/Controllers/ContactsController.cs

@@ -49,7 +49,7 @@ namespace MyWebsite.Areas.Admin.Controllers
         {
             if (!ModelState.IsValid)
             {
-                ModelState.AddModelError("Authorization error", "Invalid data");
+                ModelState.AddModelError("Error", "Invalid data");
                 return View(link);
             }
 

MyWebsite/MyWebsite/Areas/Admin/Views/Badges/Create.cshtml

@@ -0,0 +1,71 @@
+@model MyWebsite.Models.Badge
+@using System.IO;
+@{
+    ViewData["Title"] = "Create badge";
+    List<SelectListItem> files = new List<SelectListItem>();
+    foreach (string path in Directory.GetFiles(Directory.GetCurrentDirectory() + "/wwwroot/images/Badges"))
+    {
+        string fileName = System.IO.Path.GetFileNameWithoutExtension(path);
+        files.Add(new SelectListItem(fileName, fileName));
+    }
+}
+
+<header>
+    <p>&#xE760; <a asp-action="Index">Back to the list</a></p>
+    <h1>Create project badge</h1>
+</header>
+
+<article>
+    <form asp-action="Create" oninput="UpdatePreview();">
+        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
+        <div>
+            <label asp-for="Name"></label>
+            <input asp-for="Name" type="text"/>
+            <span asp-validation-for="Name" class="text-danger"></span>
+        </div>
+        <div>
+            <label asp-for="Description"></label>
+            <input asp-for="Description" type="text" />
+            <span asp-validation-for="Description" class="text-danger"></span>
+        </div>
+        <div>
+            <label asp-for="Image"></label>
+            <div class="image-selector">
+                <select asp-for="Image" asp-items="files" onchange="UpdatePreview();"></select>
+                <span>.png</span>
+            </div>
+            <span asp-validation-for="Image" class="text-danger"></span>
+        </div>
+        <div>
+            <label>Preview:</label>
+            <div class="badge" id="preview"></div>
+        </div>
+
+        <input type="submit" value="Create" class="btn" />
+    </form>
+</article>
+
+<link type="text/css" rel="stylesheet" href="~/css/Admin.css" />
+<style type="text/css">
+    .badge {
+        height: 50px;
+        width: 50px;
+        margin: 10px 0px;
+        background-size: contain;
+    }
+
+    .image-selector {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+    }
+</style>
+
+<script type="text/javascript">
+    UpdatePreview();
+    function UpdatePreview() {
+        var preview = document.getElementById("preview");
+        preview.title = document.getElementById("Description").value;
+        preview.style.backgroundImage = "url(/images/Badges/" + document.getElementById("Image").value + ".png)";
+    }
+</script>

MyWebsite/MyWebsite/Areas/Admin/Views/Badges/Delete.cshtml

@@ -0,0 +1,36 @@
+@model MyWebsite.Models.Badge
+
+@{
+    ViewData["Title"] = "Delete badge";
+}
+
+<header>
+    <p>&#xE760; <a asp-action="Index">Back to the list</a></p>
+    <h1>Delete project badge</h1>
+    <h3>Are you sure you want to delete this?</h3>
+</header>
+
+<article>
+    <p class="form-group">
+        <b>@Html.DisplayNameFor(model => model.Name):</b> @Html.DisplayFor(model => model.Name)<br />
+        <b>@Html.DisplayNameFor(model => model.Description):</b> @Html.DisplayFor(model => model.Description)<br />
+        <b>@Html.DisplayNameFor(model => model.Image):</b> @(Html.DisplayFor(model => model.Image)).png<br />
+
+        <b>Preview:</b>
+        <div class="badge" style="background-image: url(/images/Badges/@(Model.Image).png)" title="@(Model.Description)"></div>
+    </p>
+
+    <form asp-action="Delete">
+        <input hidden asp-for="Name" />
+        <input type="submit" value="Delete" class="btn-danger" />
+    </form>
+</article>
+
+<link type="text/css" rel="stylesheet" href="~/css/Admin.css" />
+<style type="text/css">
+    .badge {
+        height: 25px;
+        width: 25px;
+        background-size: contain;
+    }
+</style>

MyWebsite/MyWebsite/Areas/Admin/Views/Badges/Edit.cshtml

@@ -0,0 +1,71 @@
+@using System.IO;
+@model MyWebsite.Models.Badge
+@{
+    ViewData["Title"] = "Edit badge";
+    List<SelectListItem> files = new List<SelectListItem>();
+    foreach (string path in Directory.GetFiles(Directory.GetCurrentDirectory() + "/wwwroot/images/Badges"))
+    {
+        string fileName = System.IO.Path.GetFileNameWithoutExtension(path);
+        files.Add(new SelectListItem(fileName, fileName));
+    }
+}
+
+<header>
+    <p>&#xE760; <a asp-action="Index">Back to the list</a></p>
+    <h1>Edit project badge</h1>
+</header>
+
+<article>
+    <form asp-action="Edit" oninput="UpdatePreview();">
+        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
+        <div>
+            <label asp-for="Name"></label>
+            <input asp-for="Name" type="text" class="readonly" readonly />
+            <span asp-validation-for="Name" class="text-danger"></span>
+        </div>
+        <div>
+            <label asp-for="Description"></label>
+            <input asp-for="Description" type="text" />
+            <span asp-validation-for="Description" class="text-danger"></span>
+        </div>
+        <div>
+            <label asp-for="Image"></label>
+            <div class="image-selector">
+                <select asp-for="Image" asp-items="files" onchange="UpdatePreview();"></select>
+                <span>.png</span>
+            </div>
+            <span asp-validation-for="Image" class="text-danger"></span>
+        </div>
+        <div>
+            <label>Preview:</label>
+            <div class="badge" id="preview"></div>
+        </div>
+
+        <input type="submit" value="Save" class="btn" />
+    </form>
+</article>
+
+<link type="text/css" rel="stylesheet" href="~/css/Admin.css" />
+<style type="text/css">
+    .badge {
+        height: 50px;
+        width: 50px;
+        margin: 10px 0px;
+        background-size: contain;
+    }
+    .image-selector {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+    }
+</style>
+
+<script type="text/javascript">
+    UpdatePreview();
+    function UpdatePreview()
+    {
+        var preview = document.getElementById("preview");
+        preview.title = document.getElementById("Description").value;
+        preview.style.backgroundImage = "url(/images/Badges/" + document.getElementById("Image").value + ".png)";
+    }
+</script>

MyWebsite/MyWebsite/Areas/Admin/Views/Badges/Index.cshtml

@@ -0,0 +1,65 @@
+@model IEnumerable<MyWebsite.Models.Badge>
+
+@{
+    ViewData["Title"] = "Badges list";
+}
+
+<header>
+    <p>&#xE760; <a asp-action="Index" asp-controller="Admin" asp-area="">Back to main menu</a></p>
+    <h1>Project badges list</h1>
+    <p>
+        <a asp-action="Create" class="comment">// + Create New</a>
+    </p>
+</header>
+
+<article>
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Preview</th>
+                <th>
+                    @Html.DisplayNameFor(model => model.Name)
+                </th>
+                <th>
+                    @Html.DisplayNameFor(model => model.Description)
+                </th>
+                <th>
+                    @Html.DisplayNameFor(model => model.Image)
+                </th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var item in Model)
+            {
+                <tr>
+                    <td>
+                        <div class="badge" style="background-image: url(/images/Badges/@(item.Image).png)" title="@(item.Description)"></div>
+                    </td>
+                    <td>
+                        @Html.DisplayFor(modelItem => item.Name)
+                    </td>
+                    <td>
+                        @Html.DisplayFor(modelItem => item.Description)
+                    </td>
+                    <td>
+                        @(Html.DisplayFor(modelItem => item.Image)).png
+                    </td>
+                    <td>
+                        @Html.ActionLink("Edit", "Edit", new { id=item.Name }) |
+                        @Html.ActionLink("Delete", "Delete", new { id=item.Name })
+                    </td>
+                </tr>
+            }
+        </tbody>
+    </table>
+</article>
+
+<link type="text/css" rel="stylesheet" href="~/css/Admin.css" />
+<style type="text/css">
+    .badge {
+        height: 25px;
+        width: 25px;
+        background-size: contain;
+    }
+</style>

MyWebsite/MyWebsite/Models/Badge.cs

@@ -1,4 +1,5 @@
-using System.ComponentModel.DataAnnotations;
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
 using System.ComponentModel.DataAnnotations.Schema;
 
 namespace MyWebsite.Models
@@ -7,12 +8,15 @@ namespace MyWebsite.Models
     {
         [Key]
         [Column(TypeName = "varchar(10)")]
+        [DisplayName("ID")]
         public string Name { get; set; }
         [Column(TypeName = "varchar(100)")]
         [Required]
+        [DisplayName("Caption")]
         public string Description { get; set; }
         [Column(TypeName = "varchar(20)")]
         [Required]
+        [DisplayName("Image name")]
         public string Image { get; set; }
     }
 }