From 9e47e64dbbd83971379b2c3da2f68cb99776edbd Mon Sep 17 00:00:00 2001 From: Lynnesbian Date: Sun, 20 Sep 2020 15:53:29 +1000 Subject: [PATCH] implemented delete function with javascript, with a nice message box and everything --- .vscode/tasks.json | 9 +++++- .vscode/tsconfig.json | 11 +++++++ Pages/Index.cshtml | 2 +- Pages/Shared/_Layout.cshtml | 11 +++++++ wwwroot/css/style.css | 50 ++++++++++++++++++++++++------ wwwroot/js/script.js | 46 ++++++++++++++++++++++++++++ wwwroot/js/script.js.map | 1 + wwwroot/js/script.ts | 61 +++++++++++++++++++++++++++++++++++++ 8 files changed, 180 insertions(+), 11 deletions(-) create mode 100644 .vscode/tsconfig.json create mode 100644 wwwroot/js/script.js create mode 100644 wwwroot/js/script.js.map create mode 100644 wwwroot/js/script.ts diff --git a/.vscode/tasks.json b/.vscode/tasks.json index b0ec85e..88a95c0 100644 --- a/.vscode/tasks.json +++ b/.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" } ] -} +} \ No newline at end of file diff --git a/.vscode/tsconfig.json b/.vscode/tsconfig.json new file mode 100644 index 0000000..665162d --- /dev/null +++ b/.vscode/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compileOnSave": true, + "compilerOptions": { + "target": "ES6", + "sourceMap": true, + "watch": true + }, + "include": [ + "../wwwroot/js" + ] +} \ No newline at end of file diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml index a9117ab..fe4b5c3 100644 --- a/Pages/Index.cshtml +++ b/Pages/Index.cshtml @@ -28,7 +28,7 @@
Details Edit - Delete +
diff --git a/Pages/Shared/_Layout.cshtml b/Pages/Shared/_Layout.cshtml index cf278bb..006cad5 100644 --- a/Pages/Shared/_Layout.cshtml +++ b/Pages/Shared/_Layout.cshtml @@ -7,6 +7,7 @@ @ViewData["Title"] | Snootalogue + @@ -26,6 +27,16 @@ + +
+
+

Message title

+
This is the message
+
+ @* buttons added by script.js here *@ +
+
+
diff --git a/wwwroot/css/style.css b/wwwroot/css/style.css index dd0a4a9..11f1557 100644 --- a/wwwroot/css/style.css +++ b/wwwroot/css/style.css @@ -34,7 +34,7 @@ a:not(.button):hover { text-decoration: underline dotted; } -.button { +.button, button { font-size: 1em; color: #a66; background: transparent; @@ -44,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; } @@ -65,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; } @@ -123,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; @@ -206,7 +238,7 @@ footer { } @media only screen and (max-width: 800px) { - .button { + .button, button { padding: 3px 5px; } } diff --git a/wwwroot/js/script.js b/wwwroot/js/script.js new file mode 100644 index 0000000..a7b36e6 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/wwwroot/js/script.js.map b/wwwroot/js/script.js.map new file mode 100644 index 0000000..1b3849e --- /dev/null +++ b/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"} \ No newline at end of file diff --git a/wwwroot/js/script.ts b/wwwroot/js/script.ts new file mode 100644 index 0000000..f467c73 --- /dev/null +++ b/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, 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; +} \ No newline at end of file