Commit 379ed2d4 authored by Sasha Ilieva's avatar Sasha Ilieva
Browse files

Add index.html and index.js

parent 2ac947cb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calendar Invoice Form</title>
</head>
<body>
<main>
<form id="calendar-invoice-form">
<label htmlFor="company-name">
Company name
<input
type="text"
id="company-name"
required
placeholder="e.g. Company AG"
/>
</label>
<label htmlFor="company-email">
Company email
<input
type="text"
id="company-email"
required
placeholder="e.g. invoices@companyag"
/>
</label>
<label htmlFor="invoice-name">
Invoice name
<input
type="text"
id="invoice-name"
required
placeholder="e.g. INV123456"
/>
</label>
<label htmlFor="invoice-date">
Invoice date
<input
type="text"
id="invoice-date"
required
placeholder="e.g. 11/11/2020 or 11 Nov 2020"
/>
</label>
<label htmlFor="invoice-description">
Invoice description
<input
type="text"
id="invoice-description"
required
placeholder="Invoice description up to two lines"
/>
</label>
<label htmlFor="invoice-amount">
Invoice amount
<input
type="text"
id="invoice-amount"
required
placeholder="e.g. $123"
/>
</label>
<label htmlFor="invoice-due">
Invoice due
<input
type="text"
id="invoice-due"
required
placeholder="e.g. 11/11/2020 or 11 Nov 2020"
/>
</label>
<label htmlFor="action">
Action
<input type="text" id="action" required />
</label>
<label htmlFor="company-logo">
Company logo
<input
type="file"
id="company-logo"
required
onchange="addCompanyLogo()"
/>
<p id="file-chosen"></p>
</label>
<button type="submit">Submit</button>
</form>
</main>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
window.onload = () => {
init().catch(e => console.error("Error", e));
};
const companyName = document.getElementById("company-name");
const companyEmail = document.getElementById("company-email");
const companyLogo = document.getElementById("company-logo");
const invoiceName = document.getElementById("invoice-name");
const invoiceDate = document.getElementById("invoice-date");
const invoiceDescription = document.getElementById("invoice-description");
const invoiceAmount = document.getElementById("invoice-amount");
const invoiceDue = document.getElementById("invoice-due");
const action = document.getElementById("action");
const calendarInvoiceForm = document.getElementById("calendar-invoice-form");
const fileChosenText = document.getElementById("file-chosen");
let companyLogoBase64 = "";
let companyLogoContentType = "";
function addCompanyLogo() {
var txt = "";
if ("files" in companyLogo) {
var file = companyLogo.files[0];
companyLogoContentType = file.type;
const fileReader = new FileReader();
fileReader.onload = fileLoadedEvent => {
companyLogoBase64 = fileLoadedEvent.target.result.substring(
fileLoadedEvent.target.result.indexOf(",") + 1
);
};
fileReader.readAsDataURL(companyLogo.files[0]);
if ("name" in file) {
txt += "name: " + file.name + "<br>";
}
} else {
if (companyLogo.value == "") {
txt += "Select a file.";
} else {
txt += "The files property is not supported by your browser!";
txt += "<br>The path of the selected file: " + companyLogo.value; // If the browser does not support the files property, it will return the path of the selected file instead.
}
}
fileChosenText.innerHTML = txt;
}
async function init() {
calendarInvoiceForm.addEventListener("submit", async function (e) {
try {
e.preventDefault();
const user = "example";
const password = "wtjBGvpEbj6NGeGXyERSeIDMY3";
const auth = btoa(`${user}:${password}`);
const headers = new Headers({ Authorization: `Basic ${auth}` });
const body = {
title: "Calendar Invoice",
company_name: companyName.value,
invoice_date: invoiceDate.value,
invoice_name: invoiceName.value,
invoice_description: invoiceDescription.value,
invoice_amount: invoiceAmount.value,
invoice_due: invoiceDue.value,
company_logo: companyLogoBase64,
company_logo_content_type: companyLogoContentType,
action: action.value,
company_email: companyEmail.value
};
const response = await fetch(
"https://azure-dev.vrgnservices.com/email-template-config/api/emailTemplateConfig/set",
{
method: "POST",
headers: headers,
body: JSON.stringify(body)
}
);
const data = response.json();
console.log({ data });
} catch (error) {
console.error(error);
}
});
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment