lynnesbian/Snootalogue
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

implemented delete function with javascript, with a nice message box and everything
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Lynne Megido 2020-09-20 15:53:29 +10:00
parent 107fe6078c
commit 9e47e64dbb
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
8 changed files with 180 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.vscode/tasks.json vendored
View file

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

11
.vscode/tsconfig.json vendored Normal file
View file

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

2
Pages/Index.cshtml
View file

@ -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>

11
Pages/Shared/_Layout.cshtml
View file

@ -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>

50
wwwroot/css/style.css
View file

@ -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;
}
}

46
wwwroot/js/script.js Normal file
View file

@ -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

1
wwwroot/js/script.js.map Normal file
View file

@ -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"}

61
wwwroot/js/script.ts Normal file
View file

@ -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;
}