From 7ba6b9f6ad029df2fea970c847bf7b3e2a9f0b23 Mon Sep 17 00:00:00 2001 From: blankie Date: Fri, 20 Oct 2023 08:58:01 +1100 Subject: [PATCH] Add "Create table" --- public/index.html | 28 ++++++++++++++++++++++------ public/main.mjs | 32 ++++++++++++++++++++++++++++++++ public/style.css | 5 +---- 3 files changed, 55 insertions(+), 10 deletions(-) diff --git a/public/index.html b/public/index.html index 4479617..aec0c82 100644 --- a/public/index.html +++ b/public/index.html @@ -9,18 +9,34 @@ + +

Create table

+
+ +
+ + +
+ + +
+ + +

Load table

-
- -
- -
-
+ + diff --git a/public/main.mjs b/public/main.mjs index e1fa91e..4719c44 100644 --- a/public/main.mjs +++ b/public/main.mjs @@ -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(); diff --git a/public/style.css b/public/style.css index 36aa4ce..f7cfc88 100644 --- a/public/style.css +++ b/public/style.css @@ -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; }