implement action buttons

.gitignore

@@ -1,5 +1,5 @@
 *.html
-!src/*.html
+!src/**/*.html
 # Created by https://www.toptal.com/developers/gitignore/api/git,node
 # Edit at https://www.toptal.com/developers/gitignore?templates=git,node
 

src/index.mjs

@@ -50,7 +50,7 @@ for(let txt of tqdm(txts, { total: txts.length })) {
 		continue;
 	}
 	
-	const result = await throttled(txt, false); // bool is whether we're pretend or not - i.e. not making anthropic/claude api calls
+	const result = await throttled(txt, true); // bool is whether we're pretend or not - i.e. not making anthropic/claude api calls
 	result.i = i;
 	
 	console.log(result);

src/lib/make-html.mjs

@@ -8,8 +8,9 @@ import { NightInk } from 'nightink';
 // HACK: Make sure __dirname is defined when using es6 modules. I forget where I found this - a PR with a source URL would be great!
 const __dirname = import.meta.url.slice(7, import.meta.url.lastIndexOf("/"));
 
-const template = fs.readFileSync(path.join(__dirname, `../template.html`), `utf-8`);
-const css = fs.readFileSync(path.join(__dirname, `../index.css`), `utf-8`);
+const template = fs.readFileSync(path.join(__dirname, `../static/template.html`), `utf-8`);
+const css = fs.readFileSync(path.join(__dirname, `../static/index.css`), `utf-8`);
+const js = fs.readFileSync(path.join(__dirname, `../static/index.js`), `utf-8`);
 
 export default function(objs) {
 	let total = objs.reduce((acc, obj) => acc + obj.paid, 0);
@@ -18,7 +19,8 @@ export default function(objs) {
 	const values = {
 		objs,
 		total,
-		css
+		css,
+		js
 	};
 	
 	console.debug(`VALUES`, values);

src/static/index.css

@@ -33,7 +33,17 @@ tr:hover {
 	background-color: #e8e8e8;
 }
 
+.button {
+	cursor: pointer;
+}
 
 .align-right {
 	text-align: right;
+}
+
+@media print {
+	.noprint {
+		display: none;	
+	}
+	
 }

src/static/index.js

@@ -0,0 +1,93 @@
+function handle_remove_row(event) {
+	const el_tr = event.target.closest("tr");
+	if (el_tr === null) {
+		console.warn(`Click on .button.remove-row, but no tr could be found`);
+		return false;
+	}
+
+	el_tr.remove(); // Woah, we don't hafta node.parentNode.removeChild(node) anymore~!
+}
+
+function handle_add_row(event) {
+	const el_tr = event.target.closest("tr");
+	const el_new = document.createElement("tr");
+	
+	const highest_number = [...document.querySelectorAll(".index")]
+		.map(el => { console.log(el, parseInt(el.textContent)); return parseInt(el.textContent); })
+		.filter(item => !isNaN(item))
+		.reduce((acc, next) => Math.max(acc, next), 0);
+	
+	const limit = [...document.querySelector("tr").childNodes]
+		.filter(el => !(el instanceof Text))
+		.length;
+	for(let i = 0; i <= limit; i++) {
+		const el_next = document.createElement("td");
+		
+		if(i == limit) {
+			el_next.classList.add("actions", "noprint");
+			const el_source = document.querySelector(".actions");
+			for(const el_child of [...el_source.childNodes]) {
+				const el_copy = el_child.cloneNode(true);
+				if(!(el_child instanceof Text)) {
+					switch(el_copy.getAttribute("class").trim()) {
+						case "button remove-row":
+							el_copy.addEventListener("click", handle_remove_row);
+							el_copy.addEventListener("touchend", handle_remove_row);
+							break;
+						case "button add-row":
+							el_copy.addEventListener("click", handle_add_row);
+							el_copy.addEventListener("touchend", handle_add_row);
+					}
+				}
+				el_next.append(el_copy);
+			}
+		}
+		else {
+			let txt = "placeholder";
+			switch (i) {
+				case 0:
+					txt = highest_number + 1;
+					el_next.classList.add("index");
+					break;
+				case 1:
+					txt = (new Date()).toISOString().split(`T`)[0];
+					break;
+				case 4:
+				case 5:
+				case 6:
+					txt = "0.00";
+					break;
+			}
+			
+			el_next.append(document.createTextNode(txt));
+		}
+		el_next.setAttribute("contenteditable", "true");
+		el_new.append(el_next);
+	}
+	
+	el_tr.after(el_new);
+	rewrite_indices();
+}
+
+function rewrite_indices() {
+	const els = [...document.querySelectorAll(".index")];
+	for(const i in els) {
+		els[i].textContent = `${i}`;
+	}
+}
+
+window.addEventListener("load", () => {
+	console.log(`BEGIN`);
+	const els_remove = [...document.querySelectorAll(".button.remove-row")];
+	console.log(els_remove);
+	for (const el of els_remove) {
+		el.addEventListener("click", handle_remove_row);
+		el.addEventListener("touchend", handle_remove_row);
+	}
+	
+	const els_add = [...document.querySelectorAll(".button.add-row")];
+	for(const el of els_add) {
+		el.addEventListener("click", handle_add_row);
+		el.addEventListener("touchend", handle_add_row);
+	}
+});

src/static/template.html

@@ -23,13 +23,17 @@
 			<tbody>
 				{#each objs}
 				<tr>
-					<td contenteditable>{{i}}</td>
+					<td contenteditable class="index">{{i}}</td>
 					<td contenteditable>{{date}}</td>
 					<td contenteditable>{{category}}</td>
 					<td contenteditable>{{item_name}}</td>
 					<td contenteditable>{{net}}</td>
 					<td contenteditable>{{vat}}</td>
 					<td contenteditable>{{paid}}</td>
+					<td class="actions noprint">
+						<span class="button remove-row">❌</span>
+						<span class="button add-row">➕</span>
+					</td>
 				</tr>
 				{#endeach}
 			</tbody>
@@ -44,5 +48,8 @@
 		<style>
 			{css}
 		</style>
+		<script>
+			{js}
+		</script>
 	</body>
 </html>