Add "Create table"
This commit is contained in:
parent
02e72fe8ac
commit
7ba6b9f6ad
|
@ -9,18 +9,34 @@
|
|||
<body>
|
||||
<noscript><p class="left right">Javascript is required because the closest non-JS alternative is doing everything server-side, and I do not want to bother with that</p></noscript>
|
||||
|
||||
<dialog id="create-dialog">
|
||||
<h3>Create table</h3>
|
||||
<form method="dialog">
|
||||
<label>
|
||||
Columns:
|
||||
<input type="number" id="cols" min="1" value="3" />
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
Rows:
|
||||
<input type="number" id="rows" min="0" value="3" />
|
||||
</label>
|
||||
|
||||
<hr>
|
||||
<input type="submit" value="Create" />
|
||||
<button id="cancel-button">Cancel</button>
|
||||
</form>
|
||||
</dialog>
|
||||
<button id="open-create-button">Create table</button>
|
||||
|
||||
<dialog id="load-dialog">
|
||||
<h3>Load table</h3>
|
||||
<span id="error"></span>
|
||||
<textarea autofocus></textarea>
|
||||
|
||||
<hr>
|
||||
<div class="buttons">
|
||||
<button id="load-button">Load table</button>
|
||||
<form method="dialog">
|
||||
<button>Close</button>
|
||||
</form>
|
||||
</div>
|
||||
<button id="load-button">Load table</button>
|
||||
<button id="cancel-button">Close</button>
|
||||
</dialog>
|
||||
<button id="open-load-button">Load table</button>
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import {deserializeTable, serializeTable, calculateColumnLength} from "./tables.mjs";
|
||||
|
||||
let createDialog = document.querySelector("#create-dialog");
|
||||
let loadDialog = document.querySelector("#load-dialog");
|
||||
|
||||
let itemContextMenu = document.querySelector("#item-context-menu");
|
||||
|
@ -123,6 +124,30 @@ function reloadTable() {
|
|||
|
||||
|
||||
|
||||
createDialog.addEventListener("submit", function() {
|
||||
let columns = createDialog.querySelector("#cols").valueAsNumber;
|
||||
let rows = createDialog.querySelector("#rows").valueAsNumber;
|
||||
|
||||
table.columns = [];
|
||||
for (let i = 0; i < columns; i++) {
|
||||
table.columns.push({text: "", leftAligned: false, rightAligned: false});
|
||||
}
|
||||
|
||||
table.rows = [];
|
||||
for (let i = 0; i < rows; i++) {
|
||||
let row = new Array(columns);
|
||||
row.fill("");
|
||||
table.rows.push(row);
|
||||
}
|
||||
|
||||
reloadTable();
|
||||
});
|
||||
|
||||
document.querySelector("#open-create-button").addEventListener("click", function() {
|
||||
createDialog.querySelector("form").reset();
|
||||
createDialog.showModal();
|
||||
}, {passive: true});
|
||||
|
||||
loadDialog.querySelector("#load-button").addEventListener("click", function() {
|
||||
try {
|
||||
table = deserializeTable(loadDialog.querySelector("textarea").value);
|
||||
|
@ -359,4 +384,11 @@ window.addEventListener("click", function(event) {
|
|||
event.target.close();
|
||||
}, {passive: true});
|
||||
|
||||
for (let cancelButton of document.querySelectorAll("dialog #cancel-button")) {
|
||||
cancelButton.addEventListener("click", function(event) {
|
||||
event.preventDefault();
|
||||
event.target.closest("dialog").close();
|
||||
});
|
||||
}
|
||||
|
||||
reloadTable();
|
||||
|
|
|
@ -29,7 +29,7 @@ textarea {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#load-dialog h3 {
|
||||
dialog h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
@ -40,9 +40,6 @@ textarea {
|
|||
width: 80vw;
|
||||
height: 75vh;
|
||||
}
|
||||
#load-dialog .buttons {
|
||||
text-align: right;
|
||||
}
|
||||
#load-dialog form {
|
||||
display: inline;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue