rayanfer32/nexus-invoice-form.html

## nexus-invoice-form.html

<!DOCTYPE html>
<html>
<head>
	<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
	<title>Create Invoice</title>
	<style>
		body {
			font-family: 'Space Mono', monospace, Arial, sans-serif;
			background-color: #f2f2f2;
			margin: 0;
			padding: 0;
		}
		h1 {
			text-align: center;
			margin: 20px 0;
		}
		form {
			background-color: #fff;
			border-radius: 5px;
			padding: 20px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
			width: 800px;
			margin: 0 auto;
		}
		label {
			display: block;
			margin-bottom: 10px;
		}
		textarea {
			padding: 10px;
			border-radius: 5px;
			border: 1px solid #ccc;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 20px;
			min-height: 150px; /* set a minimum height for the textarea */
		}
		input[type="text"] {
			font-family: 'Space Mono', monospace;
			padding: 10px;
			border-radius: 5px;
			border: 1px solid #ccc;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 20px;
		}
		input[type="submit"] {
			background-color: #4CAF50;
			color: #fff;
			border: none;
			border-radius: 5px;
			padding: 10px 20px;
			cursor: pointer;
			font-size: 16px;
		}
		input[type="submit"]:hover {
			background-color: #3e8e41;
		}
		table {
			border-collapse: collapse;
			margin-bottom: 20px;
			width: 100%;
		}

		th, td {
			border: 1px solid #ddd;
			padding: 8px;
			text-align: left;
			vertical-align: top;
		}

		th {
			background-color: #f2f2f2;
		}

		td input {
			display: block;
			margin: 0;
			padding: 5px;
			width: 85%;
		}

		td button {
			background-color: #f44336;
			border: none;
			color: #fff;
			cursor: pointer;
			padding: 5px 10px;
		}

		td button:hover {
			background-color: #d32f2f;
		}

		#add-item {
			background-color: #4CAF50;
			border: none;
			color: #fff;
			cursor: pointer;
			padding: 10px 20px;
		}

		#add-item:hover {
			background-color: #3e8e41;
		}
	</style>
</head>
<body>
	<h1><img src="https://www.google.com/s2/favicons?sz=64&domain=nexus.io" alt="nexus-logo"></img>Create Nexus Invoice</h1>
	<form id="invoice-form">
		<!-- <label for="items">Items:</label> -->
		<!-- <textarea name="items" id="items" required>[{"description": "Explorer updates and API fixes", "units": "1", "unit_amount": "656"}]</textarea> -->

		<table id="items-table">
			<thead>
				<tr>
					<th>Description</th>
					<th>Units</th>
					<th>Unit Amount</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="text" name="description[]" required></td>
					<td><input type="number" name="units[]" required></td>
					<td><input type="number" name="unit_amount[]" required></td>
					<td><button type="button" class="remove-item">Remove</button></td>
				</tr>
			</tbody>
		</table>
		<button type="button" id="add-item">Add Item</button>

		<label for="account">Account:</label>
		<input type="text" name="account" id="account" value="8Bu4REDE5DBAvwb1b8vMKumNE32BCd3JUrh6FuPqb2BbsJ55wZ5" required>

		<label for="recipient_username">Recipient Username:</label>
		<input type="text" name="recipient_username" id="recipient_username" value="US:Interactions" required>

		<label for="reference">Reference:</label>
		<input type="text" name="reference" id="reference" value="Developer Support" required>

		<label for="description">Description:</label>
		<input type="text" name="description" id="description" value="Team Member" required>

		<label for="sender_detail">Sender Detail:</label>
		<input type="text" name="sender_detail" id="sender_detail" value="Rayan Fernandes" required>

		<input type="submit" value="Create Invoice">
	</form>
</body>
<script>
		// get the form element
		const formEl = document.getElementById('invoice-form');
		const itemsTable = document.getElementById('items-table');

		// const itemsEl = document.getElementById('items');

		// itemsEl.value = JSON.stringify(JSON.parse(itemsEl.value), null , 2) // show formatted json

		// add an event listener on the "Add Item" button
		const addItemButton = document.getElementById('add-item');
		addItemButton.addEventListener('click', () => {
			const itemsTable = document.getElementById('items-table');
			const tbody = itemsTable.querySelector('tbody');
			const newRow = document.createElement('tr');
			newRow.innerHTML = `
				<td><input type="text" name="description[]" required></td>
				<td><input type="number" name="units[]" required></td>
				<td><input type="number" name="unit_amount[]" required></td>
				<td><button type="button" class="remove-item">Remove</button></td>
			`;
			tbody.appendChild(newRow);
		});

		// add an event listener on the "Remove" button
		itemsTable.addEventListener('click', (event) => {
			if (event.target.classList.contains('remove-item')) {
				const row = event.target.closest('tr');
				row.remove();
			}
		});

		// function to get the items data from the table
		function getItemsData() {
			const items = [];
			const rows = itemsTable.querySelectorAll('tbody tr');
			rows.forEach((row) => {
				const cells = row.querySelectorAll('td input');
				const item = {
					description: cells[0].value,
					units: parseInt(cells[1].value),
					unit_amount: parseFloat(cells[2].value)
				};
				items.push(item);
			});
			return items;
		}


		// add an event listener on form submit
		formEl.addEventListener('submit', (event) => {
			event.preventDefault(); // prevent the default form submit action
			const formData = new FormData(formEl); // create a new FormData object from the form data

			// extract the values of the form fields from the formData object
			// const items = formData.get('items');
			const items = JSON.stringify(getItemsData())
			console.log(items)

			const account = formData.get('account');
			const recipient_username = formData.get('recipient_username');
			const reference = formData.get('reference');
			const description = formData.get('description');
			const sender_detail = formData.get('sender_detail');

			// generate the command string
			const command = `nexus invoices/create/invoice items='${items}' account='${account}' recipient_username='${recipient_username}' reference='${reference}' description='${description}' sender_detail='${sender_detail}' pin=1234`;

			try{
				JSON.parse(items)
				console.log(command); // log the command to the console
				alert(command); // show a success message to the user
			}
			catch(err){
				alert("Items field has some error!")
			}


		});
	</script>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
	<title>Create Invoice</title>
	<style>
	body {
	font-family: 'Space Mono', monospace, Arial, sans-serif;
	background-color: #f2f2f2;
	margin: 0;
	padding: 0;
	}
	h1 {
	text-align: center;
	margin: 20px 0;
	}
	form {
	background-color: #fff;
	border-radius: 5px;
	padding: 20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	width: 800px;
	margin: 0 auto;
	}
	label {
	display: block;
	margin-bottom: 10px;
	}
	textarea {
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 20px;
	min-height: 150px; /* set a minimum height for the textarea */
	}
	input[type="text"] {
	font-family: 'Space Mono', monospace;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 20px;
	}
	input[type="submit"] {
	background-color: #4CAF50;
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	cursor: pointer;
	font-size: 16px;
	}
	input[type="submit"]:hover {
	background-color: #3e8e41;
	}
	table {
	border-collapse: collapse;
	margin-bottom: 20px;
	width: 100%;
	}

	th, td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
	vertical-align: top;
	}

	th {
	background-color: #f2f2f2;
	}

	td input {
	display: block;
	margin: 0;
	padding: 5px;
	width: 85%;
	}

	td button {
	background-color: #f44336;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 5px 10px;
	}

	td button:hover {
	background-color: #d32f2f;
	}

	#add-item {
	background-color: #4CAF50;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 10px 20px;
	}

	#add-item:hover {
	background-color: #3e8e41;
	}
	</style>
	</head>
	<body>
	<h1><img src="https://www.google.com/s2/favicons?sz=64&domain=nexus.io" alt="nexus-logo"></img>Create Nexus Invoice</h1>
	<form id="invoice-form">
	<!-- <label for="items">Items:</label> -->
	<!-- <textarea name="items" id="items" required>[{"description": "Explorer updates and API fixes", "units": "1", "unit_amount": "656"}]</textarea> -->

	<table id="items-table">
	<thead>
	<tr>
	<th>Description</th>
	<th>Units</th>
	<th>Unit Amount</th>
	<th></th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><input type="text" name="description[]" required></td>
	<td><input type="number" name="units[]" required></td>
	<td><input type="number" name="unit_amount[]" required></td>
	<td><button type="button" class="remove-item">Remove</button></td>
	</tr>
	</tbody>
	</table>
	<button type="button" id="add-item">Add Item</button>

	<label for="account">Account:</label>
	<input type="text" name="account" id="account" value="8Bu4REDE5DBAvwb1b8vMKumNE32BCd3JUrh6FuPqb2BbsJ55wZ5" required>

	<label for="recipient_username">Recipient Username:</label>
	<input type="text" name="recipient_username" id="recipient_username" value="US:Interactions" required>

	<label for="reference">Reference:</label>
	<input type="text" name="reference" id="reference" value="Developer Support" required>

	<label for="description">Description:</label>
	<input type="text" name="description" id="description" value="Team Member" required>

	<label for="sender_detail">Sender Detail:</label>
	<input type="text" name="sender_detail" id="sender_detail" value="Rayan Fernandes" required>

	<input type="submit" value="Create Invoice">
	</form>
	</body>
	<script>
	// get the form element
	const formEl = document.getElementById('invoice-form');
	const itemsTable = document.getElementById('items-table');

	// const itemsEl = document.getElementById('items');

	// itemsEl.value = JSON.stringify(JSON.parse(itemsEl.value), null , 2) // show formatted json

	// add an event listener on the "Add Item" button
	const addItemButton = document.getElementById('add-item');
	addItemButton.addEventListener('click', () => {
	const itemsTable = document.getElementById('items-table');
	const tbody = itemsTable.querySelector('tbody');
	const newRow = document.createElement('tr');
	newRow.innerHTML = `
	<td><input type="text" name="description[]" required></td>
	<td><input type="number" name="units[]" required></td>
	<td><input type="number" name="unit_amount[]" required></td>
	<td><button type="button" class="remove-item">Remove</button></td>
	`;
	tbody.appendChild(newRow);
	});

	// add an event listener on the "Remove" button
	itemsTable.addEventListener('click', (event) => {
	if (event.target.classList.contains('remove-item')) {
	const row = event.target.closest('tr');
	row.remove();
	}
	});

	// function to get the items data from the table
	function getItemsData() {
	const items = [];
	const rows = itemsTable.querySelectorAll('tbody tr');
	rows.forEach((row) => {
	const cells = row.querySelectorAll('td input');
	const item = {
	description: cells[0].value,
	units: parseInt(cells[1].value),
	unit_amount: parseFloat(cells[2].value)
	};
	items.push(item);
	});
	return items;
	}


	// add an event listener on form submit
	formEl.addEventListener('submit', (event) => {
	event.preventDefault(); // prevent the default form submit action
	const formData = new FormData(formEl); // create a new FormData object from the form data

	// extract the values of the form fields from the formData object
	// const items = formData.get('items');
	const items = JSON.stringify(getItemsData())
	console.log(items)

	const account = formData.get('account');
	const recipient_username = formData.get('recipient_username');
	const reference = formData.get('reference');
	const description = formData.get('description');
	const sender_detail = formData.get('sender_detail');

	// generate the command string
	const command = `nexus invoices/create/invoice items='${items}' account='${account}' recipient_username='${recipient_username}' reference='${reference}' description='${description}' sender_detail='${sender_detail}' pin=1234`;

	try{
	JSON.parse(items)
	console.log(command); // log the command to the console
	alert(command); // show a success message to the user
	}
	catch(err){
	alert("Items field has some error!")
	}


	});
	</script>
	</html>