implemented delete function with javascript, with a nice message box and everything

.vscode/tasks.json

@@ -41,6 +41,13 @@
 				"kind": "build",
 				"isDefault": true
 			}
+		},
+		{
+			"type": "typescript",
+			"label": "ts watch",
+			"tsconfig": ".vscode/tsconfig.json",
+			"problemMatcher": "$tsc-watch",
+			"group": "build"
 		}
 	]
 }

.vscode/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"compileOnSave": true,
+	"compilerOptions": {
+		"target": "ES6",
+		"sourceMap": true,
+		"watch": true
+	},
+	"include": [
+		"../wwwroot/js"
+	]
+}

Controllers/DocumentController.cs

@@ -1,6 +1,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
+using System.IO;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
 using Snootalogue.Models;
@@ -21,7 +22,7 @@ namespace Snootalogue.Controllers {
 		}
 
 		[HttpGet("{id}")]
-		public async Task<ActionResult<Document>> GetDocumentById(int id) {
+		public async Task<ActionResult<Document>> GetDocumentById(string id) {
 			var document = await _context.Document.FindAsync(id);
 
 			if (document == null) {
@@ -30,5 +31,21 @@ namespace Snootalogue.Controllers {
 
 			return document;
 		}
+
+		[HttpDelete("{id}")]
+		public async Task<ActionResult<bool>> DeleteDocument(string id) {
+			var document = await _context.Document.FindAsync(id);
+			if (document == null) {
+				return NotFound();
+			}
+
+			var uploadDirectory = Path.Combine("wwwroot", "Content");
+			var destination = Path.Combine(uploadDirectory, $"{id}.pdf");
+			System.IO.File.Delete(destination);
+
+			_context.Remove(document);
+			await _context.SaveChangesAsync();
+			return true;
+		}
 	}
 }

Migrations/20200920033715_InitialCreate.Designer.cs

@@ -9,7 +9,7 @@ using Snootalogue.Data;
 namespace snootalogue.Migrations
 {
     [DbContext(typeof(SnootalogueContext))]
-    [Migration("20200917125618_InitialCreate")]
+    [Migration("20200920033715_InitialCreate")]
     partial class InitialCreate
     {
         protected override void BuildTargetModel(ModelBuilder modelBuilder)
@@ -20,9 +20,8 @@ namespace snootalogue.Migrations
 
             modelBuilder.Entity("Snootalogue.Models.Document", b =>
                 {
-                    b.Property<int>("ID")
+                    b.Property<string>("ID")
-                        .ValueGeneratedOnAdd()
+                        .HasColumnType("TEXT");
-                        .HasColumnType("INTEGER");
 
                     b.Property<string>("Authors")
                         .HasColumnType("jsonb");

Migrations/20200920033715_InitialCreate.cs

@@ -11,8 +11,7 @@ namespace snootalogue.Migrations
                 name: "Document",
                 columns: table => new
                 {
-                    ID = table.Column<int>(nullable: false)
+                    ID = table.Column<string>(nullable: false),
-                        .Annotation("Sqlite:Autoincrement", true),
                     Filename = table.Column<string>(nullable: true),
                     Hash = table.Column<string>(nullable: true),
                     Size = table.Column<long>(nullable: false),

Migrations/SnootalogueContextModelSnapshot.cs

@@ -18,9 +18,8 @@ namespace snootalogue.Migrations
 
             modelBuilder.Entity("Snootalogue.Models.Document", b =>
                 {
-                    b.Property<int>("ID")
+                    b.Property<string>("ID")
-                        .ValueGeneratedOnAdd()
+                        .HasColumnType("TEXT");
-                        .HasColumnType("INTEGER");
 
                     b.Property<string>("Authors")
                         .HasColumnType("jsonb");

Models/Document.cs

@@ -1,10 +1,12 @@
 using System;
 using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
+using Snootalogue.Data;
+using System.Runtime;
 
 namespace Snootalogue.Models {
 	public class Document {
-		public int ID { get; set; }
+		public string ID { get; set; }
 		public string Filename { get; set; }
 		public string Hash { get; set; }
 		[UIHint("FileSize")]
@@ -20,5 +22,24 @@ namespace Snootalogue.Models {
 		public List<string> Tags { get; set; }
 		public Boolean Read { get; set; }
 		public string Notes { get; set; }
+
+		public static string NewID(SnootalogueContext context) {
+			// - no vowels to avoid (most) (non-welsh) naughty words
+			// - no l1I because it's always confusing
+			// - no 0
+			string idCharacters = "bcdfghjkmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ23456789";
+			var rng = new Random();
+			var collision = true;
+			string id = "";
+			while (collision) {
+				id = "";
+				for (var i = 0; i < 7; i++) {
+					id += idCharacters[rng.Next(idCharacters.Length)];
+				}
+				collision = context.Document.Find(id) != null;
+			}
+
+			return id;
+		}
 	}
 }

Models/SeedData.cs

@@ -18,6 +18,7 @@ namespace Snootalogue.Models {
 
 				context.Document.AddRange(
 					new Document {
+						ID = Document.NewID(context),
 						Title = "The Peebler Chronicles",
 						Filename = "peebler.pdf",
 						Size = Convert.ToInt64(0.5 * 1024 * 1024),
@@ -27,6 +28,7 @@ namespace Snootalogue.Models {
 						Hash = "0d96a4ff68ad6d4b6f1f30f713b18d5184912ba8dd389f86aa7710db079abcb0"
 					},
 					new Document {
+						ID = Document.NewID(context),
 						Title = "Smooched by a Wifeoid",
 						Filename = "smooched_by_a_wifeoid.pdf",
 						Size = 7 * 1024 * 1024,
@@ -37,6 +39,7 @@ namespace Snootalogue.Models {
 						Hash = "0d96a4ff68ad6d4b6f1f30f713b18d5184912ba8dd389f86aa7710db079abcb0"
 					},
 					new Document {
+						ID = Document.NewID(context),
 						Title = "What on Boo Earth? My Girlfriend can Walk on the Ceiling?!",
 						Filename = "ceiling_gf.pdf",
 						Size = Convert.ToInt64(22.5 * 1024 * 1024),

Pages/Documents/Details.cshtml

@@ -1,4 +1,4 @@
-@page "{id:int}"
+@page "{id}"
 @model Snootalogue.Pages.Documents.DetailsModel
 
 @{

Pages/Documents/Details.cshtml.cs

@@ -14,7 +14,7 @@ namespace Snootalogue.Pages.Documents {
 			_context = context;
 		}
 
-		public async Task<IActionResult> OnGetAsync(int? id) {
+		public async Task<IActionResult> OnGetAsync(string id) {
 			if (id == null) {
 				return NotFound();
 			}

Pages/Documents/Edit.cshtml

@@ -1,4 +1,4 @@
-@page "{id:int}"
+@page "{id}"
 @model Snootalogue.Pages.Documents.EditModel
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 

Pages/Documents/Edit.cshtml.cs

@@ -17,7 +17,7 @@ namespace Snootalogue.Pages.Documents {
 			_context = context;
 		}
 
-		public async Task<IActionResult> OnGetAsync(int? id) {
+		public async Task<IActionResult> OnGetAsync(string id) {
 			if (id == null) {
 				return NotFound();
 			}

Pages/Documents/View.cshtml

@@ -1,10 +1,11 @@
-@page "{id:int}"
+@page "{id}"
 @model Snootalogue.Pages.Documents.ViewModel
 
 @{
 	ViewData["Title"] = $"Viewing \"{Model.Document.Title}\"";
 	ViewData["SlimNavbar"] = true;
 	ViewData["NoMainPadding"] = true;
+	string path = $"/Content/{Model.Document.ID}.pdf";
 }
 
-<iframe id="document-viewer" src="/Content/@Model.Document.Filename"></iframe>
+<iframe id="document-viewer" src="@path"></iframe>

Pages/Documents/View.cshtml.cs

@@ -14,7 +14,7 @@ namespace Snootalogue.Pages.Documents {
 			_context = context;
 		}
 
-		public async Task<IActionResult> OnGetAsync(int? id) {
+		public async Task<IActionResult> OnGetAsync(string id) {
 			if (id == null) {
 				return NotFound();
 			}

Pages/Index.cshtml

@@ -28,7 +28,7 @@
 			<div class="vertical-buttons">
 				<a asp-page="./Documents/Details" asp-route-id="@item.ID" class="button simple">Details</a>
 				<a asp-page="./Documents/Edit" asp-route-id="@item.ID" class="button simple">Edit</a>
-				<a href="#" class="button simple">Delete</a>
+				<button class="button simple" onclick="PromptForDeletion('@item.ID', '@item.Filename')">Delete</button>
 			</div>
 		</div>
 

Pages/Shared/_Layout.cshtml

@@ -7,6 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>@ViewData["Title"] | Snootalogue</title>
 	<link rel="stylesheet" href="~/css/style.css">
+	<script src="~/js/script.js"></script>
 </head>
 
 <body>
@@ -26,6 +27,16 @@
 	<footer>
 		Made by <a href="https://lynnesbian.space">Lynnesbian</a>. Licensed under the <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">Affero GNU Public License 3.0</a>. <a href="https://git.bune.city/lynnesbian/Snootalogue">Source code available</a>.
 	</footer>
+
+	<div id="msgbox-holder">
+		<div id="msgbox">
+			<h1 id="msgbox-title">Message title</h1>
+			<div id="msgbox-message">This is the message</div>
+			<div id="msgbox-buttons">
+				@* buttons added by script.js here *@
+			</div>
+		</div>
+	</div>
 </body>
 
 </html>

Pages/Upload.cshtml.cs

@@ -32,10 +32,10 @@ namespace Snootalogue.Pages {
 				return Page();
 			}
 
-			var filename = WebUtility.HtmlEncode(ud.UploadedFile.FileName);
+			var id = Document.NewID(_context);
 			// var uploadDirectory = Path.Combine(filename);
-			var uploadDirectory = "wwwroot/Content";
+			var uploadDirectory = Path.Combine("wwwroot", "Content");
-			var destination = Path.Combine(uploadDirectory, filename);
+			var destination = Path.Combine(uploadDirectory, $"{id}.pdf");
 
 			using (var fs = new FileStream(destination, FileMode.Create)) {
 				await ud.UploadedFile.CopyToAsync(fs);
@@ -43,13 +43,14 @@ namespace Snootalogue.Pages {
 
 			// Document d = _context.Document.
 			Document d = new Document {
+				ID = id,
 				Title = ud.Title,
 				Authors = ud.Authors.Split(",").ToList<string>(),
 				Category = ud.Category,
 				Tags = string.IsNullOrWhiteSpace(ud.Tags) ? null : ud.Tags.Split(",").ToList<string>(),
 				Notes = ud.Notes,
 				Read = ud.Read,
-				Filename = filename
+				Filename = WebUtility.HtmlEncode(ud.UploadedFile.FileName)
 			};
 
 			_context.Document.Add(d);

README.md

@@ -16,6 +16,7 @@ Snootalogue runs on port **5000**, so make sure you don't have anything currentl
 ```bash
 git clone https://git.bune.city/lynnesbian/Snootalogue
 cd Snootalogue
+mkdir wwwroot/Content
 if ! which dotnet-ef; then dotnet tool install --global dotnet-ef; fi
 dotnet ef database update
 dotnet run

ViewModels/EditDocument.cs

@@ -7,7 +7,7 @@ using System.ComponentModel.DataAnnotations;
 namespace Snootalogue.ViewModels {
 	public class EditDocument {
 		[Required]
-		public int ID { get; set; }
+		public string ID { get; set; }
 		[Required]
 		public string Title { get; set; }
 		[Required]

wwwroot/css/style.css

@@ -1,3 +1,6 @@
+html, body, main {
+	height: 100%; /* needed for chromium to display the #document-viewer at 100% height */
+}
 body {
 	font-family: sans-serif;
 	min-height: 100vh;
@@ -31,7 +34,7 @@ a:not(.button):hover {
 	text-decoration: underline dotted;
 }
 
-.button {
+.button, button {
 	font-size: 1em;
 	color: #a66;
 	background: transparent;
@@ -41,19 +44,19 @@ a:not(.button):hover {
 	text-align: center;
 	transition: 0.2s all;
 }
-.button:hover {
+.button:hover, button:hover {
 	background: #a66;
 	color: white;
 }
-.button.block {
+.button.block, button.block {
 	display: inline-block;
 	margin: 5px auto;
 }
-.button.inverted {
+.button.inverted, button.inverted {
 	color: white;
 	border-color: white;
 }
-.button.inverted:hover {
+.button.inverted:hover, button.inverted:hover {
 	background: white;
 	color: #a00;
 }
@@ -62,15 +65,18 @@ a:not(.button):hover {
 	display: flex;
 	flex-direction: column;
 }
-.vertical-buttons .button {
+.vertical-buttons .button,
+.vertical-buttons button {
 	flex: 1;
 	border-bottom: none;
 	border-radius: 0;
 }
-.vertical-buttons .button:first-child {
+.vertical-buttons .button:first-child,
+.vertical-buttons button:first-child {
 	border-radius: 5px 5px 0 0;
 }
-.vertical-buttons .button:last-child {
+.vertical-buttons .button:last-child,
+.vertical-buttons button:last-child {
 	border-bottom: thin #a66 solid;
 	border-radius: 0 0 5px 5px;
 }
@@ -120,6 +126,35 @@ footer {
 	padding: 3px;
 }
 
+#msgbox-holder {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: none;
+	position: fixed;
+	background: #6668;
+	flex-direction: column;
+	justify-content: center;
+}
+#msgbox {
+	background: #833;
+	color: white;
+	padding: 40px 10px;
+	text-align: center;
+	font-size: 1em;
+	margin-bottom: 50px; /* to make it slightly higher than the centre of the page */
+}
+#msgbox h1 {
+	margin-top: 0;
+}
+#msgbox-message {
+	margin: 20px 0;
+}
+#msgbox-buttons > button {
+	margin: 0 5px;
+}
+
 .documents {
 	display: flex;
 	flex-direction: column;
@@ -203,7 +238,7 @@ footer {
 }
 
 @media only screen and (max-width: 800px) {
-	.button {
+	.button, button {
 		padding: 3px 5px;
 	}
 }

wwwroot/js/script.js

@@ -0,0 +1,46 @@
+;
+var standardCancelButton = {
+    message: "Cancel",
+    onClick: function () { }
+};
+function DoHTTPRequest(url, method = "GET") {
+    var request = new XMLHttpRequest();
+    request.onreadystatechange = function () {
+        // console.log(this);
+        if (this.readyState == 4) {
+            if (this.status == 200) {
+                return { success: true, response: this.responseText };
+            }
+            else {
+                return { success: false, response: `HTTP status ${this.status}` };
+            }
+        }
+    };
+    request.open(method, url);
+    request.send();
+    return { success: false, response: "Unknown error" };
+}
+function dgel(id) {
+    return document.getElementById(id);
+}
+function MessageBox(title, message, buttons, data) {
+    dgel("msgbox-title").textContent = title;
+    dgel("msgbox-message").textContent = message;
+    dgel("msgbox-buttons").innerHTML = "";
+    buttons.forEach(button => {
+        var htmlButton = document.createElement("button");
+        htmlButton.className = "inverted";
+        htmlButton.textContent = button.message;
+        htmlButton.addEventListener("click", function () { dgel("msgbox-holder").style.display = "none"; button.onClick(data); });
+        dgel("msgbox-buttons").appendChild(htmlButton);
+    });
+    dgel("msgbox-holder").style.display = "flex";
+}
+function PromptForDeletion(id, filename) {
+    MessageBox("Delete document?", `Are you sure you want to delete ${filename}?`, [{ message: "Delete", onClick: DeleteDocument }, standardCancelButton], id);
+}
+function DeleteDocument(id) {
+    DoHTTPRequest(`/api/Document/${id}`, "DELETE");
+    window.location = window.location;
+}
+//# sourceMappingURL=script.js.map

wwwroot/js/script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"script.js","sourceRoot":"","sources":["script.ts"],"names":[],"mappings":"AAGC,CAAC;AAEF,IAAI,oBAAoB,GAAqB;IAC5C,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,cAAc,CAAC;CACxB,CAAA;AAED,SAAS,aAAa,CAAC,GAAW,EAAE,SAAiB,KAAK;IACzD,IAAI,OAAO,GAAG,IAAI,cAAc,EAAE,CAAC;IACnC,OAAO,CAAC,kBAAkB,GAAG;QAC5B,qBAAqB;QACrB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,EAAE;YACzB,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE;gBACvB,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;aACtD;iBAAM;gBACN,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,IAAI,CAAC,MAAM,EAAE,EAAE,CAAA;aACjE;SACD;IACF,CAAC,CAAA;IACD,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,OAAO,CAAC,IAAI,EAAE,CAAC;IAEf,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;AACtD,CAAC;AAED,SAAS,IAAI,CAAC,EAAU;IACvB,OAAO,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;AACpC,CAAC;AAED,SAAS,UAAU,CAAC,KAAa,EAAE,OAAe,EAAE,OAAgC,EAAE,IAAU;IAC/F,IAAI,CAAC,cAAc,CAAC,CAAC,WAAW,GAAG,KAAK,CAAC;IACzC,IAAI,CAAC,gBAAgB,CAAC,CAAC,WAAW,GAAG,OAAO,CAAC;IAC7C,IAAI,CAAC,gBAAgB,CAAC,CAAC,SAAS,GAAG,EAAE,CAAC;IAEtC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QACxB,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAClD,UAAU,CAAC,SAAS,GAAG,UAAU,CAAC;QAClC,UAAU,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;QACxC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,cAAc,IAAI,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA,CAAC,CAAC,CAAC,CAAC;QACzH,IAAI,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;AAC9C,CAAC;AAED,SAAS,iBAAiB,CAAC,EAAU,EAAE,QAAgB;IACtD,UAAU,CACT,kBAAkB,EAClB,mCAAmC,QAAQ,GAAG,EAC9C,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,oBAAoB,CAAC,EACtE,EAAE,CACF,CAAC;AACH,CAAC;AAED,SAAS,cAAc,CAAC,EAAU;IACjC,aAAa,CAAC,iBAAiB,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC;IAC/C,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AACnC,CAAC"}

wwwroot/js/script.ts

@@ -0,0 +1,61 @@
+interface MessageBoxButton {
+	message: string,
+	onClick: (data: any) => any,
+};
+
+var standardCancelButton: MessageBoxButton = {
+	message: "Cancel",
+	onClick: function () { }
+}
+
+function DoHTTPRequest(url: string, method: string = "GET"): { success: boolean, response: string } {
+	var request = new XMLHttpRequest();
+	request.onreadystatechange = function () {
+		// console.log(this);
+		if (this.readyState == 4) {
+			if (this.status == 200) {
+				return { success: true, response: this.responseText };
+			} else {
+				return { success: false, response: `HTTP status ${this.status}` }
+			}
+		}
+	}
+	request.open(method, url);
+	request.send();
+
+	return { success: false, response: "Unknown error" };
+}
+
+function dgel(id: string): HTMLElement {
+	return document.getElementById(id);
+}
+
+function MessageBox(title: string, message: string, buttons: Array<MessageBoxButton>, data?: any) {
+	dgel("msgbox-title").textContent = title;
+	dgel("msgbox-message").textContent = message;
+	dgel("msgbox-buttons").innerHTML = "";
+
+	buttons.forEach(button => {
+		var htmlButton = document.createElement("button");
+		htmlButton.className = "inverted";
+		htmlButton.textContent = button.message;
+		htmlButton.addEventListener("click", function () { dgel("msgbox-holder").style.display = "none"; button.onClick(data) });
+		dgel("msgbox-buttons").appendChild(htmlButton);
+	});
+
+	dgel("msgbox-holder").style.display = "flex";
+}
+
+function PromptForDeletion(id: string, filename: string) {
+	MessageBox(
+		"Delete document?",
+		`Are you sure you want to delete ${filename}?`,
+		[{ message: "Delete", onClick: DeleteDocument }, standardCancelButton],
+		id
+	);
+}
+
+function DeleteDocument(id: string) {
+	DoHTTPRequest(`/api/Document/${id}`, "DELETE");
+	window.location = window.location;
+}