admin/invoice_generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add all files

Browse Source
This commit is contained in:
teddy
2024-04-02 10:37:34 +01:00
parent b9bf00acc2
commit 4c9de2df96
8 changed files with 3482 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@@ -68,3 +68,10 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
v2a

BIN
v1a/Logo_Slogan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

30
v1a/invoice.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<!-- Flashing schedule generator and output -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<title>Invoice</title>
<div id="parent_canvases" style = "text-align:center;">
<canvas id="canvas_1" width="794" height="1124" style="border:none" margin="auto">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<p align="center">To export: Print -> Save as PDF with normal A4 settings, except no margins, 1st page only.</p>
<p align="center">Or, press the button below to save to your C:\Downloads folder with the name in the textbox.</p>
<form align="center">
<label for="filename">Download filename:</label>
<input type="text" id="filename" name="filename" size="40">
</form>
<div style = "text-align:center;">
<img src="download.png" width="150px" height="75px" onclick="javascript:download_pdfs()" alt='Download Invoice!'>
</div>
<script type="text/javascript" src="plotting.js"></script>
</body>
</html>

78
v1a/mystyle.css Normal file
View File

@@ -0,0 +1,78 @@
img.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 400px;
}
.extra-info {
display: none;
line-height: 12px;
font-size: 18px;
position: absolute;
top: 500px;
left: 200px;
}
.extra-info1 {
display: none;
line-height: 12px;
font-size: 18px;
position: absolute;
top: 930px;
left: 200px;
}
.extra-info2 {
display: none;
line-height: 12px;
font-size: 18px;
position: absolute;
top: 1350px;
left: 200px;
}
.extra-info3 {
display: none;
line-height: 12px;
font-size: 18px;
position: absolute;
top: 1800px;
left: 200px;
}
.info:hover .extra-info {
display: block;
}
.info:hover .extra-info1 {
display: block;
}
.info:hover .extra-info2 {
display: block;
}
.info:hover .extra-info3 {
display: block;
}
.info {
font-size: 20px;
padding-left: 5px;
width: 20px;
border-radius: 15px;
}
.info:hover {
background-color: white;
padding: 0 0 0 5px;
width: 315px;
text-align: left !important;
}
chicken {
position:absolute;
left: 100px;
top: 800px;
}

605
v1a/plotting.js Normal file
View File

@@ -0,0 +1,605 @@
// import { PDFDocument } from "pdf-lib";
var n_pages = 0;
var ha4 = 1123;
var wa4 = 794;
var border = 75; // page border / margins
var margin = 50; // drawing margins
var slabel = margin - 20; // spacing for dimension labels - ~ 10 < margin
var hline = 25;
var canvases = [document.getElementById("canvas_1")];
var ctxs = [canvases[0].getContext("2d")];
var myfont = 'arial'; // ToDo
// var url_logo = 'https://github.com/Teddy-1024/Neural_Network/blob/master/Logo.png'; // direct html execution
var url_logo = './Logo.png';
// positioning
var h_my_b = 180;
var h_issue = 325;
var h_bank = 420;
var h_billtosite = 560;
var h_tablehead = 800;
var h_row_max = 1050; // update this !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var max_rows = round_down((h_row_max - h_tablehead) / hline);
// table columns
var w_tc1 = 120;
var w_tc2 = 420;
var w_tc3 = 520;
var w_tc4 = 620;
// file storage
let fnm; // = namefile();
// // console.log(fnm);
// document.getElementById('filename').value = fnm;
process_localstorage();
Storage.prototype.setObj = function(key, obj) {
return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getObj = function(key) {
return JSON.parse(this.getItem(key))
}
function my_LS_get_obj(key) {
return JSON.parse(localStorage.getItem(key));
}
// Template page layout
function plot_page_layout(page_n, form_type) {
// let h0 = (page_n - 1) * ha4;
let i = page_n - 1;
// canvas elements
ctxs[i].beginPath();
ctxs[i].font = '20px ' + myfont;
ctxs[i].fillText(form_type, border, 100);
// ctxs[i].fillText('ESTIMATE', border, 100);
ctxs[i].font = 'bold 12px ' + myfont;
ctxs[i].fillText('BANK NAME:', border, h_bank);
ctxs[i].fillText('ACCOUNT NAME:', border, h_bank + hline);
ctxs[i].fillText('ACCOUNT NUMBER:', border, h_bank + hline * 2);
ctxs[i].fillText('SORT CODE:', border, h_bank + hline * 3);
ctxs[i].font = 'bold 12px ' + myfont;
ctxs[i].fillText('ISSUE DATE:', wa4 / 2 + margin, h_issue);
ctxs[i].fillText('DUE DATE:', wa4 / 2 + margin, h_issue + hline);
ctxs[i].fillText('REFERENCE:', wa4 / 2 + margin, h_issue + hline * 2);
ctxs[i].font = 'bold 12px ' + myfont;
ctxs[i].fillText('BILL TO:', border, h_billtosite);
ctxs[i].fillText('SITE / LOCATION:', wa4 / 2 + margin, h_billtosite);
ctxs[i].stroke();
}
function plot_page_interpersonal(page_n, date_due, my_ref) {
// let h0 = (page_n - 1) * ha4;
let i = page_n - 1;
ctxs[i].font = '14px ' + myfont;
ctxs[i].fillText(localStorage.my_b_name, border, h_my_b );
ctxs[i].font = '12px ' + myfont;
ctxs[i].fillText(localStorage.my_b_address1, border, h_my_b+hline*1);
ctxs[i].fillText(localStorage.my_b_address2, border, h_my_b+hline*2);
ctxs[i].fillText(localStorage.my_b_address3, border, h_my_b+hline*3);
ctxs[i].fillText(localStorage.my_b_address4, border, h_my_b+hline*4);
ctxs[i].fillText(localStorage.my_b_address5, border, h_my_b+hline*5);
ctxs[i].fillText(localStorage.my_b_email, border, h_my_b+hline*6);
ctxs[i].fillText(localStorage.my_b_number, border, h_my_b+hline*7);
// logo
var img = new Image();
img.crossOrigin = "anonymous";
CORS_ALLOW_ALL_ORIGINS = true;
img.style.border = 'none';
img.src = url_logo; // "https://raw.githubusercontent.com/Teddy-1024/Neural_Network/master/Deane_logo.png";
sz_img = 200;
img.onload = function() {
ctxs[i].drawImage(img, wa4 - border * 3 / 2 -sz_img, border, sz_img, sz_img); // , 0, 0, 0, 0, border + 25, border + 2, sz_img, sz_img);
ctxs[i].stroke();
}
ctxs[i].font = '12px ' + myfont;
ctxs[i].fillText(localStorage.bank_name, border + 150, h_bank);
ctxs[i].fillText(localStorage.bank_AC_name, border + 150, h_bank + hline);
ctxs[i].fillText(localStorage.bank_AC_no, border + 150, h_bank + hline * 2);
ctxs[i].fillText(localStorage.bank_SC, border + 150, h_bank + hline * 3);
ctxs[i].font = '12px ' + myfont;
ctxs[i].fillText(localStorage.date, wa4 / 2 + margin + 120, h_issue);
ctxs[i].fillText(date_due, wa4 / 2 + margin + 120, h_issue + hline);
ctxs[i].fillText(my_ref, wa4 / 2 + margin + 120, h_issue + hline * 2);
ctxs[i].font = '12px ' + myfont;
ctxs[i].fillText(localStorage.to_b_name, border, h_billtosite+hline*1);
ctxs[i].fillText(localStorage.to_b_address1, border, h_billtosite+hline*2);
ctxs[i].fillText(localStorage.to_b_address2, border, h_billtosite+hline*3);
ctxs[i].fillText(localStorage.to_b_address3, border, h_billtosite+hline*4);
ctxs[i].fillText(localStorage.to_b_address4, border, h_billtosite+hline*5);
ctxs[i].fillText(localStorage.to_b_address5, border, h_billtosite+hline*6);
ctxs[i].fillText(localStorage.to_b_email, border, h_billtosite+hline*7);
ctxs[i].fillText(localStorage.to_b_phone, border, h_billtosite+hline*8);
ctxs[i].fillText(localStorage.client_contact, wa4/2 + margin, h_billtosite+hline*1);
ctxs[i].fillText(localStorage.client_name, wa4/2 + margin, h_billtosite+hline*2);
ctxs[i].fillText(localStorage.client_address1, wa4/2 + margin, h_billtosite+hline*3);
ctxs[i].fillText(localStorage.client_address2, wa4/2 + margin, h_billtosite+hline*4);
ctxs[i].fillText(localStorage.client_address3, wa4/2 + margin, h_billtosite+hline*5);
ctxs[i].fillText(localStorage.client_address4, wa4/2 + margin, h_billtosite+hline*6);
ctxs[i].stroke();
}
function round_down(quotient) {
let temp = quotient % 1;
return quotient - temp;
}
function round_up(quotient) {
let temp = quotient % 1;
if (temp == 0) {
return quotient;
}
return 1 + quotient - temp;
}
function plot_line_gs(description, quantity, rate, subtotal, h, page_i) {
let i = page_i - 1;
ctxs[i].font = '12px ' + myfont;
ctxs[i].fillText(description, w_tc1, h);
ctxs[i].fillText(quantity, w_tc2, h);
ctxs[i].fillText(rate, w_tc3, h);
ctxs[i].fillText(subtotal, w_tc4, h);
}
function plot_line_pp(description, date, value, h, page_i) {
let i = page_i - 1;
ctxs[i].font = '12px ' + myfont;
ctxs[i].fillText(description, w_tc1, h);
ctxs[i].fillText(date, (w_tc2 + w_tc3) / 2, h);
ctxs[i].fillText(value, w_tc4, h);
}
function plot_table_headings_payplan(h, page_i) {
let i = page_i - 1;
let currency = localStorage.getItem('currency');
ctxs[i].font = 'bold 12px ' + myfont;
ctxs[i].fillText('DESCRIPTION', w_tc1 + 20, h);
ctxs[i].fillText('DATE', (w_tc2 + w_tc3 + 25) / 2, h);
ctxs[i].fillText('VALUE [' + currency + ']', w_tc4 - 16, h);
// latinum conversion rates
// 500 .bars, 10,000 .strips, 1,000,000 .slips
}
function plot_table_headings_invest(ratedisc, h, page_i) {
let i = page_i - 1;
let currency = localStorage.getItem('currency');
ctxs[i].font = 'bold 12px ' + myfont;
ctxs[i].fillText('DESCRIPTION', w_tc1 + 30, h);
if (ratedisc[0] == 'Unit cost') {
ctxs[i].fillText('QUANTITY', w_tc2 - 20, h);
ctxs[i].fillText('UNIT COST [' + currency + ']', w_tc3 - 12, h);
} else {
ctxs[i].fillText(currency + ' / ' + ratedisc[0], w_tc3 - 12, h);
ctxs[i].fillText('# ' + ratedisc[1], w_tc2 - 20, h);
}
ctxs[i].fillText('SUBTOTAL', w_tc4-10, h);
// latinum conversion rates
// 500 .bars, 10,000 .strips, 1,000,000 .slips
}
function plot_subtotal(tot, h, page_i) {
let i = page_i - 1;
ctxs[i].font = '12px ' + myfont;
ctxs[i].fillText('£ ' + tot.toFixed(2), w_tc4 - 10, h);
ctxs[i].font = 'bold 12px ' + myfont;
ctxs[i].fillText('TOTAL:', w_tc4 - border - 10, h);
}
function plot_invest(form_type, do_goods, rows_g, n_goods, do_services, rows_s, n_services, n_subs, ratedisc, date_due, my_ref) {
let txt_base_border = 0.5 * hline;
let min_table_delta = 2 * hline + txt_base_border;
let max_table_height = 1000;
// // ctx.beginPath();
// ctx.font = '20px ' + myfont;
// ctx.fillText(form_type, border, 100);
let n_plotted = 0;
let page_i = 0;
// let h0 = (page_i - 1) * ha4;
let h1 = 0;
// ctx.font = '12px ' + myfont;
let subtotal;
// goods
if (do_goods) {
subtotal = 0;
for (let row_i = 0; row_i < n_goods; row_i++) {
h1 = h_tablehead + (row_i - n_plotted) * hline;
if (row_i % max_rows == 0) {
page_i++;
n_plotted = row_i - 1;
// h0 = (page_i - 1) * ha4;
// plot new page
// ctxs[page_i - 1].font = '20px ' + myfont;
// ctxs[page_i - 1].fillText(form_type, border, 100);
ctxs[page_i - 1].font = '12px ' + myfont;
plot_page_layout(page_i, form_type);
plot_page_interpersonal(page_i, date_due, my_ref);
plot_table_headings_invest(['Unit cost'], h_tablehead, page_i);
}
h1 = h_tablehead + (row_i - n_plotted) * hline;
plot_line_gs(rows_g[row_i][0], rows_g[row_i][1], rows_g[row_i][2], rows_g[row_i][3], h1, page_i);
subtotal += Number( rows_g[row_i][3]);
}
// output subtotal
h1 += hline;
plot_subtotal(subtotal, h1, page_i);
}
// services
if (do_services) {
if (!do_goods) {
page_i++;
h1 = h_tablehead;
ctxs[0].font = '12px ' + myfont;
plot_page_layout(page_i, form_type);
plot_page_interpersonal(page_i, date_due, my_ref);
}
for (let i = 0; i < n_services; i++) {
subtotal = 0;
if (max_table_height - min_table_delta < h1) {
// new page, reset start height
page_i++;
// h0 = (page_i - 1) * ha4;
h1 = h_tablehead;
// plot new page
// ctxs[page_i - 1].font = '20px ' + myfont;
// ctxs[page_i - 1].fillText(form_type, border, 100);
ctxs[page_i - 1].font = '12px ' + myfont;
plot_page_layout(page_i, form_type);
plot_page_interpersonal(page_i, date_due, my_ref);
} else {
h1 += hline * 1.2;
}
// plot table headings
plot_table_headings_invest(ratedisc[i], h1, page_i);
// plot rows
for (let j = 0; j < n_subs[i]; j++) {
h1 += hline;
if (max_table_height - txt_base_border < h1) {
// new page, reset start height
page_i++;
// h0 = (page_i - 1) * ha4;
h1 = h_tablehead;
// plot new page
plot_page_layout(page_i, form_type);
plot_page_interpersonal(page_i, date_due, my_ref);
plot_table_headings_invest(ratedisc[i], h1, page_i);
h1 += hline;
}
// plot row
plot_line_gs(rows_s[i][j][0], rows_s[i][j][1], rows_s[i][j][2], rows_s[i][j][3], h1, page_i);
subtotal += Number(rows_s[i][j][3]);
}
// output subtotal
h1 += hline;
plot_subtotal(subtotal, h1, page_i);
}
}
if (page_i < n_pages) {
let canvas_container = document.getElementById('parent_canvases');
for (let i = page_i + 1; i <= n_pages; i++) {
canvas_container.removeChild(document.getElementById('canvas_' + i));
}
n_pages = page_i;
}
}
function plot_payplan(rows_p, n_pay, my_ref) {
let txt_base_border = 0.5 * hline;
let min_table_delta = 1 * hline + txt_base_border;
let max_table_height = 1000;
// ctx.beginPath();
// ctx.font = '20px ' + myfont;
// ctx.fillText('PAYMENT-PLAN', border, 100);
let n_plotted = 0;
let page_i = 0;
// let h0 = (page_i - 1) * ha4;
let h1;
// ctx.font = '12px ' + myfont;
let subtotal = 0;
// goods
if (n_pay >= 1) {
for (let row_i = 0; row_i < n_pay; row_i++) {
h1 = h_tablehead + (row_i - n_plotted) * hline;
if (row_i % max_rows == 0) {
page_i++;
// h0 = (page_i - 1) * ha4;
n_plotted = row_i - 1;
// plot new page
plot_page_layout(page_i, 'PAYMENT-PLAN');
plot_page_interpersonal(page_i, rows_p[n_pay - 1][1], my_ref);
plot_table_headings_payplan(h_tablehead, page_i);
}
h1 = h_tablehead + (row_i - n_plotted) * hline;
plot_line_pp(rows_p[row_i][0], rows_p[row_i][1], rows_p[row_i][2], h1, page_i);
subtotal += Number(rows_p[row_i][2]);
}
// output subtotal
h1 += hline;
plot_subtotal(subtotal, h1, page_i);
}
// ctx.stroke();
}
// borders
// ctx.strokeStyle = "blue";
// ctx.fillRect(margin, margin, wa4 - 2 * (border - margin - 5), border - margin - 5);
// ctx.fillRect(margin, ha4 - margin, wa4 - 2 * (border - margin - 5), border - margin - 5);
// ctx.stroke();
function create_canvases(quantity) {
if (quantity > 1) {
let div_parent = document.getElementById('parent_canvases');
for (let i = 2; i <= quantity; i++) {
let new_canvas = document.createElement('canvas');
new_canvas.id = 'canvas_' + i.toString();
new_canvas.width = wa4;
new_canvas.height = ha4;
new_canvas.style.border = 'none';
new_canvas.style.margin = 'auto';
new_canvas.innerText = 'Your browser does not support the HTML5 canvas tag.';
div_parent.appendChild(new_canvas);
canvases.push(new_canvas);
ctxs.push(canvases[i - 1].getContext('2d'));
}
}
}
function namefile(form_type, my_ref, date_due = '') {
let svname;
switch (form_type) {
case 'PAYMENT-PLAN':
svname = 'Payment-Plan_' + my_ref + '_' + date_due;
break;
default:
// let endweek = Number(localStorage.week1) + Number(localStorage.nweeks - 1);
// svname = 'Invoice_Contechs_00-J55589_' + localStorage.date.substr(2, 2) + '_wks_';
// svname = svname.concat(localStorage.week1);
// svname = svname.concat('-');
// svname = svname.concat(endweek);
// Chassis Business Process Analyst 00-J55589
// svname = form_type.charAt(0) + form_type.substring(1, form_type.length).toLowerCase() + '_Contechs_00-J55589_' + my_ref;
// RADs Software Engineer 00-J56557
// svname = form_type.charAt(0) + form_type.substring(1, form_type.length).toLowerCase() + '_Contechs_00-J56557_' + my_ref;
svname = "file_reference"
break;
}
document.getElementById('filename').value = svname;
return svname;
}
function imgclick(canvas_i) { // download file!
const {
jsPDF
} = window.jspdf;
const pdf = new jsPDF();
const imgData = canvases[canvas_i].toDataURL("image/png", 1.0);
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save(document.getElementById('filename').value + '_' + (canvas_i + 1).toString());
// mailsend(pdf);
}
function download_pdfs(download_type = 'separate') {
// download type = 'together' (default) or 'separate'
// switch (download_type) {
// case 'separate':
for (let i = 0; i < n_pages; i++) {
imgclick(i);
}
// break;
// default:
// const {
// jsPDF
// } = window.jspdf;
// const doc = new jsPDF();
// const arrayBuffer = doc.output('arraybuffer');
// let pdf_list = [];
// for (let canvas_i = 0; canvas_i < n_pages; canvas_i++) {
// const pdf = new jsPDF();
// const imgData = canvases[canvas_i].toDataURL("image/png", 1.0);
// pdf.addImage(imgData, 'PNG', 0, 0);
// }
// let merged_pdf = mergePdfs(pdf_list);
// merged_pdf.save(document.getElementById('filename').value);
// break;
// }
}
// async function mergePdfs(pdfsToMerges) { // : ArrayBuffer[]
// const mergedPdf = await PDFDocument.create();
// const actions = pdfsToMerges.map(async pdfBuffer => {
// const pdf = await PDFDocument.load(pdfBuffer);
// const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
// copiedPages.forEach((page) => {
// // console.log('page', page.getWidth(), page.getHeight());
// // page.setWidth(210);
// mergedPdf.addPage(page);
// });
// });
// await Promise.all(actions);
// const mergedPdfFile = await mergedPdf.save();
// return mergedPdfFile;
// }
function gen_inv_ID(companycode, week1, weekn, date) {
let year = date.substr(2, 2);// date.getFullYear();
let name = year + "_wks_" + week1 + "-" + weekn;
return name;
}
function gen_date_due(date0) {
let date_0 = new Date(date0);
let y0 = date_0.getFullYear();
let m0 = date_0.getMonth();
// let d0 = date0.getDate();
// let month = Number(date.substr(5, 2));
// let year = Number(date.substr(0, 4));
let date_1 = new Date(y0, m0 + 2, 1);
// if (month >= 11) {
// year = year + 1;
// month = month - 10;
// } else {
// month = month + 2;
// }
let n_working_days = 1;
let n_days_total = 4;
let date_temp = date_1;
for (let i = 1; i < 6; i++) {
date_temp.setDate(date_temp.getDate() + 1);
let billday = date_temp.getDay();
if (!(billday == 0 || billday == 6)) {
n_working_days++;
}
if (n_working_days == n_days_total) {
break;
}
}
let date_2 = date_temp;
return date2str(date_2);
// for (let i = 0; i < 6; i++) {
// billday = i + 1;
// let tempbilldate = new Date(year.toString() + '-' + month.toString().padStart(2, '0') + '-' + billday.toString().padStart(2, '0'));
// let tempbillday = tempbilldate.getDay(); // {Sunday - Saturday = 0 - 6}
// if (!(tempbillday == 0 || tempbillday == 6)) {
// n_working_days++;
// }
// if (n_working_days == n_days_total) {
// break;
// }
// }
// return year.toString() + '-' + month.toString().padStart(2, '0') + '-' + billday.toString().padStart(2, '0');
}
function date2str(date_in) {
return date_in.getFullYear().toString() + '-' + (date_in.getMonth() + 1).toString().padStart(2, '0') + '-' + date_in.getDate().toString().padStart(2, '0');
}
function process_localstorage() {
// find form type and get rows
let form_type = localStorage.getItem('form_type');
console.log('form type = ' + form_type);
switch (form_type) {
case 'PAYMENT-PLAN':
let n_pay = Number(localStorage.getItem('payments_n'));
let paytype = localStorage.getItem('paytype');
let values = [];
let dates = [];
let rows_p = [];
switch (paytype) {
case 'linear':
values.push(localStorage.getItem('pay_value_unit'));
if (n_pay > 1) {
for (let i = 1; i < n_pay; i++) {
values.push(values[0]);
}
}
break;
case 'multiplier':
let value_0 = Number(localStorage.getItem('pay_value_unit'));
let multipliers = my_LS_get_obj('multiplier');
if (n_pay > 1) {
for (let i = 0; i < n_pay; i++) {
values.push((value_0 * multipliers[i]).toString());
}
}
break;
case 'random':
let randoms = my_LS_get_obj('value');
if (n_pay > 1) {
for (let i = 0; i < n_pay; i++) {
values.push(randoms[i]);
}
}
break;
}
let description = localStorage.getItem('description');
// let discretisation = localStorage.getItem('discretisation');
// let payscheme = localStorage.getItem('payscheme');
let dates_in = my_LS_get_obj('dates');
// let disc_quantity = Number(localStorage.getItem('disc_quantity'));
for (let i = 0; i < n_pay; i++) {
dates.push(date2str(new Date(dates_in[i])));
}
for (let i = 0; i < n_pay; i++) {
rows_p.push([description, dates[i], values[i]]);
}
n_pages = round_up(n_pay / max_rows)
// canvas.height = ha4 * n_pages;
fnm = namefile(form_type, localStorage.week1, dates[0]);
create_canvases(n_pages);
plot_payplan(rows_p, n_pay, localStorage.week1);
break;
default: // case 'INVOICE' || 'ESTIMATE':
let inv_ref = gen_inv_ID(localStorage.to_b_code, localStorage.week1, String(Number(localStorage.week1) + Number(localStorage.subservice_quantities.substring(2, localStorage.subservice_quantities.substring(2).indexOf('"') + 2)) - 1), localStorage.date);
let date_due = gen_date_due(localStorage.date);
let rows_g = [];
let nrows_g = 0;
let goods_n = 0;
let rows_s = [];
// let n_services = 0;
let services_n;
let n_subs = [];
// let durnrates = [];
let do_goods = localStorage.getItem('bool_goods') == 'true';
if (do_goods) {
goods_n = Number(localStorage.getItem('goods_n'));
let mygoods_n = my_LS_get_obj('mygoods_n');
let mygoods_q = my_LS_get_obj('mygoods_q');
let mygoods_v = my_LS_get_obj('mygoods_v');
for (let i = 1; i <= goods_n; i++) {
nrows_g++;
rows_g.push([mygoods_n[i - 1], mygoods_q[i - 1], mygoods_v[i - 1], (Number(mygoods_v[i - 1]) * Number(mygoods_q[i - 1])).toFixed(2)]);
}
n_pages = round_up(goods_n / max_rows);
}
let do_services = localStorage.getItem('bool_services') == 'true';
let ratediscs;
// let durndiscs;
if (do_services) {
// n_services = 1;
services_n = Number(localStorage.getItem('services_n'));
ratediscs = my_LS_get_obj('ratediscs');
// durndiscs = my_LS_get_obj('durndiscs');
let rates = my_LS_get_obj('rates');
// let durn_disc_qs = my_LS_get_obj('durn_disc_qs');
let description = my_LS_get_obj('descriptions');
let quantities = my_LS_get_obj('quantities');
let subservice_quantities = my_LS_get_obj('subservice_quantities');
for (let i = 1; i <= services_n; i++) {
// let my_serve = -1;
// for (let j = 0; j < n_subs[i - 1]; j++) {
// if (durnrates[j][0] == durndiscs[i - 1] && durnrates[j][1] == ratediscs[i - 1]) {
// my_serve = j;
// break;
// }
// }
// if (my_serve == -1) {
// my_serve = n_services - 1;
n_subs.push(0);
// durnrates.push([durndiscs[i - 1], ratediscs[i - 1]]);
rows_s.push([]);
// n_services++;
// }
for (let j = 1; j <= Number(subservice_quantities[i - 1]); j++) {
n_subs[i - 1]++;
rows_s[i - 1].push([description[i - 1][j - 1], quantities[i - 1][j - 1], rates[i - 1], (Number(quantities[i - 1][j - 1]) * Number(rates[i - 1])).toFixed(2)]);
}
n_pages += round_up(n_subs[i - 1] / max_rows);
}
}
// canvas.height = ha4 * n_pages;
fnm = namefile(form_type, inv_ref);
create_canvases(n_pages);
plot_invest(form_type, do_goods, rows_g, goods_n, do_services, rows_s, services_n, n_subs, ratediscs, date_due, inv_ref);
break;
}
}

1872
v1a/scripts.js Normal file
View File

File diff suppressed because it is too large Load Diff

145
v1a/stylesheet.css Normal file
View File

@@ -0,0 +1,145 @@
body {
background-color: lightpink;
font-family: "Arial, Helvetica, sans-serif";
}
div {
width: 100%;
display: inline-block;
}
/* Inputs */
input, button {
margin: 5px;
height: 4vh;
width: 20vw;
border-radius: 1vh;
border-color: darkviolet;
padding: 3px 10px 3px;
}
select {
height: 3vh;
width: 100px;
border-radius: 1vh;
border-width: 2px;
border-color: darkviolet;
padding: 3px 10px 3px;
}
datalist {
/* display: flex;
display: block;
position: relative; */
}
option {
border-color: darkviolet;
}
input[type="text"] {
border-radius: 1vh;
}
input[type="number"] {
width: 3vw;
}
input[type="date"] {
width: 8vw;
}
input[type="checkbox"] {
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
outline: none;
content: none;
width: 50px;
}
input[type="checkbox"]:before {
width: 30px;
height: 30px;
content: '✓';
font-size: 20px;
font-style: bold;
text-align: center;
border-radius: 5px;
border: 2px solid darkviolet;
background-color: white;
color: transparent;
display: inline-block;
margin-top: 0px;
margin-bottom: 20px;
}
input[type="checkbox"]:checked:before {
color: black;
}
/* Labels */
label {
margin: 5px;
}
.div_title {
font-size: 24px;
}
.input_title {
font-size: 20px;
}
.input_subtitle {
font-size: 18px;
}
.errmsg {
display: none;
visibility: hidden;
}
/* table */
.div_label_input {
margin: auto;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.input_label {
box-sizing: border-box;
flex: 1;
margin: 1rem;
padding: 1rem;
border-radius: 5px;
width: 100%;
}
.input_label.label_title {
margin: 0;
padding: 0;
font-size: 20px;
}
.tbl_container {
display: flex;
flex-wrap: flex;
justify-content: center;
}
label.input_label {
padding-left: 5% !important;
padding-right: 5% !important;
}
.column {
align-items: center;
flex: 1;
display: flex;
flex-direction: column;
}

745
v1a/userin.html Normal file
View File

@@ -0,0 +1,745 @@
<!DOCTYPE html>
<!-- Flashing schedule generator and output -->
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<form action="invoice.html" onsubmit="javascript:store()" align="center">
<div class="column">
<br>
<label class="div_title"><Strong>Invoice Details</Strong></label>
<label class="div_title">Data input</label>
<br>
<div>
<div>
<button type="button" id="btn_defaults_inv">Defaults - Invoice</button>
<button type="button" id="btn_defaults_est">Defaults - Estimate</button>
<button type="button" id="btn_defaults_pay">Defaults - Payment Plan</button>
</div>
<div>
<button type="button" id="btn_clear_form" onclick="clear_form();">Clear Form</button>
<input type="submit" value="Submit" id="submit">
</div>
</div>
<br>
<label class="input_label label_title">Form type:</label>
<select id="my_form_type_1" onchange="change_form_type(1);" style="width: 150px;">
<option value="0">-</option>
<option value="1">INVOICE</option>
<option value="2">ESTIMATE</option>
<option value="3">PAYMENT-PLAN</option>
</select>
<br>
<label class="input_label label_title">Currency:</label><br>
<!--
<input type="text" id="mycurrency" list="currencies">
<datalist id="currencies">
<option value="£"></option>
<option value="€"></option>
<option value="$"></option>
<option value="other"></option>
</datalist>
<br>
<br>
-->
<select id="mycurrency">
<option value="£">£</option>
<option value="€">€</option>
<option value="$">$</option>
<option value="other">Other</option>
</select>
<br>
<div id="div_currency_else" style="display: none;">
<label class="input_label label_title">Other currency (please specify symbol):</label>
<input type="text" id="currency_else">
</div>
<br>
<label class="div_title">Your business</label>
<br>
<!--
<div style="display: table">
<div style="display: table-row">
<div class="div_label_input">
<label class="input_label label_title">Name:</label>
<input type="text" id="my_b_name" class="my_b_name" placeholder="Precision And Research Technology Systems Limited">
</div>
<div class="div_label_input">
<label class="input_label label_title">Address line 1:</label>
<input type="text" id="my_b_address1" class="my_b_address1" placeholder="Unit 12a">
</div>
</div>
<div style="display: table-row">
<div class="div_label_input">
<label class="input_label label_title">Company number:</label>
<input type="text" id="my_b_number" class="my_b_number" placeholder="13587499">
</div>
<div class="div_label_input">
<label class="input_label label_title">Address line 2:</label>
<input type="text" id="my_b_address2" class="my_b_address2" placeholder="Somers Road">
</div>
</div>
<div style="display: table-row">
<div class="div_label_input">
<label class="input_label label_title">Email address:</label>
<input type="text" id="my_b_email" class="my_b_email" placeholder="edward.middletonsmith@gmail.com">
</div>
<div class="div_label_input">
<label class="input_label label_title">Address line 3:</label>
<input type="text" id="my_b_address3" class="my_b_address3" placeholder="Rugby">
</div>
</div>
<div style="display: table-row">
<div class="div_label_input">
<label class="input_label label_title" style="visibility: hidden"></label>
<input type="text" placeholder="" style="visibility: hidden">
</div>
<div class="div_label_input">
<label class="input_label label_title">Address line 4:</label>
<input type="text" id="my_b_address4" class="my_b_address4" placeholder="Warwickshire">
</div>
</div>
<div style="display: table-row">
<div class="div_label_input">
<label class="input_label label_title" style="visibility: hidden"></label>
<input type="text" placeholder="" style="visibility: hidden">
</div>
<div class="div_label_input">
<label class="input_label label_title">Address line 5:</label>
<input type="text" id="my_b_address5" class="my_b_address5" placeholder="CV22 7DH">
</div>
</div>
</div>
-->
<div id="div_business_me" class="tbl_container">
<table id="tbl_business_me">
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title">Name:</label>
<input type="text" id="my_b_name" class="input_label" placeholder="Precision And Research Technology Systems Limited">
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 1:</label>
<input type="text" id="my_b_address1" class="input_label" placeholder="Unit 12a">
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title">Company number:</label>
<input type="text" id="my_b_number" class="input_label" placeholder="13587499">
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 2:</label>
<input type="text" id="my_b_address2" class="input_label" placeholder="Somers Road">
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title">Email address:</label>
<input type="text" id="my_b_email" class="input_label" placeholder="edward.middletonsmith@gmail.com">
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 3:</label>
<input type="text" id="my_b_address3" class="input_label" placeholder="Rugby">
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title" style="visibility: hidden"></label>
<input type="text" placeholder="" style="visibility: hidden" class="input_label">
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 4:</label>
<input type="text" id="my_b_address4" class="input_label" placeholder="Warwickshire">
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title" style="visibility: hidden"></label>
<input type="text" placeholder="" style="visibility: hidden" class="input_label">
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 5:</label>
<input type="text" id="my_b_address5" class="input_label" placeholder="CV22 7DH">
</div>
</td>
</tr>
</table>
</div>
<br>
<br>
<label class="div_title" style="width: 50%">Your business' bank</label><br>
<div id="div_business_bank" class="tbl_container">
<table id="tbl_business_bank">
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title">Bank name:</label>
<input type="text" id="bank_name" class="input_label" placeholder="Starling">
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Account name:</label>
<input type="text" id="bank_AC_name" class="input_label" placeholder="Precision And Research Technology Systems Limited">
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title">Account number:</label>
<input type="text" id="bank_AC_no" class="input_label" placeholder="12345678">
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Sort code:</label>
<input type="text" id="bank_SC" class="input_label" placeholder="01-23-45">
</div>
</td>
</tr>
</table>
</div>
<br>
<br>
<label class="div_title">Recipient business</label><br>
<div id="div_business_recipient" class="tbl_container">
<table id="tbl_business_recipient">
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title">Name:</label>
<input type="text" id="to_b_name" class="input_label" placeholder=""> <!-- Contechs Technical Resourcing Limited"> -->
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 1:</label>
<input type="text" id="to_b_address1" class="input_label" placeholder=""> <!-- 2 Sable Court"> -->
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title">Code:</label>
<input type="text" id="to_b_code" class="input_label" placeholder=""> <!-- Contechs"> -->
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 2:</label>
<input type="text" id="to_b_address2" class="input_label" placeholder=""> <!-- Southfields Business Park"> -->
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title">Email address:</label>
<input type="text" id="to_b_email" class="input_label" placeholder=""> <!-- account@contechs.co.uk"> -->
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 3:</label>
<input type="text" id="to_b_address3" class="input_label" placeholder=""> <!-- Basildon"> -->
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title">Phone number:</label>
<input type="text" id="to_b_phone" class="input_label" placeholder=""> <!-- 01268 582900"> -->
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 4:</label>
<input type="text" id="to_b_address4" class="input_label" placeholder=""> <!-- Essex"> -->
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title" style="visibility: hidden"></label>
<input type="text" placeholder="" style="visibility: hidden" class="input_label">
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 5:</label>
<input type="text" id="to_b_address5" class="input_label" placeholder=""> <!-- SS15 6SR"> -->
</div>
</td>
</tr>
</table>
</div>
<br>
<label class="div_title">Client details</label><br>
<div id="div_recipient_client" class="tbl_container">
<table id="tbl_recipient_client">
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title">Name:</label>
<input type="text" id="client_name" class="input_label" placeholder=""> <!-- Jaguar Land Rover"> -->
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 1:</label>
<input type="text" id="client_address1" class="input_label" placeholder=""> <!-- Banbury Road"> -->
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title">Contact:</label>
<input type="text" id="client_contact" class="input_label" placeholder=""> <!-- Simon Bant"> -->
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 2:</label>
<input type="text" id="client_address2" class="input_label" placeholder=""> <!-- Gaydon"> -->
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title" style="visibility: hidden"></label>
<input type="text" placeholder="" style="visibility: hidden" class="input_label">
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 3:</label>
<input type="text" id="client_address3" class="input_label" placeholder=""> <!-- Warwickshire"> -->
</div>
</td>
</tr>
<tr>
<td>
<div class="div_label_input">
<label class="input_label label_title" style="visibility: hidden"></label>
<input type="text" placeholder="" style="visibility: hidden" class="input_label">
</div>
</td>
<td>
<div class="div_label_input">
<label class="input_label label_title">Address line 4:</label>
<input type="text" id="client_address4" class="input_label" placeholder=""> <!-- CV35 0RR"> -->
</div>
</td>
</tr>
</table>
</div>
<br>
<br>
<div id="div_INVOICE">
<label class="div_title">Invoice</label><br>
<label class="input_label label_title">Billing date:</label><br>
<input type="date" id="inv_date" class="date" value="2022-12-25"/><br><br>
<label class="input_label label_title">Invoice type:</label><br>
<input type="checkbox" id="inv_type_goods" value="goods" onchange="show_goods_services('inv');"/>
<label class="input_subtitle">Goods</label>
<input type="checkbox" id="inv_type_services" value="services" onchange="show_goods_services('inv');"/>
<label class="input_subtitle">Services</label>
<!--<input type="checkbox" id="inv_type_both" value="both"/>
<label for="inv_type_both">Both</label>
<br>-->
<br><br>
<div id="div_inv_goods">
<label class="div_title">Goods</label><br>
<label class="input_label label_title">Number of different goods:</label><br>
<input type="number" id="inv_goods_n" value="1" step="1" onchange="show_goods('inv');"/><br><br>
<div id="div_inv_goods_table" class="div_good tbl_container">
<table>
<tbody id="tbl_inv_goods">
<tr id="tr_inv_good_1">
<td>
<label class="input_label" id="inv_heading_g1_label" style="white-space: nowrap;">Good 1</label>
</td>
<td>
<div class="div_input_label">
<label class="input_label" id="inv_name_g1_label">Name:</label>
<input type="text" id="inv_name_g1" class="input_label"/>
</div>
</td>
<td>
<div class="div_input_label">
<label class="input_label" id="inv_value_g1_label">Value [£]:</label>
<input type="number" id="inv_value_g1" class="input_label" placeholder="20000" step="0.01"/>
</div>
</td>
<td>
<div class="div_input_label">
<label class="input_label">Quantity of goods:</label>
<input type="number" id="inv_quantity_g1" class="input_label" placeholder="1" step="0.001" min="0.001"/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div id="div_inv_services">
<label class="div_title">Services</label><br>
<label class="input_label label_title" id="inv_services_n_label">Number of different services:</label><br>
<input type="number" id="inv_services_n" value="1" step="1" min="1" onchange="show_services('inv');"/><br><br>
<div id="div_inv_service_1" class="div_service">
<label class="div_title">Service 1</label><br>
<label class="input_label label_title" id="inv_disc_rate_s1_label">Rate discretisation:</label><br>
<select id="inv_disc_rate_s1" onchange="change_rate_discretisation('inv', 1);">
<option value="m">Minute</option>
<option value="h" selected="selected">Hour</option>
<option value="d">Day</option>
<option value="w">Week</option>
</select><br><br>
<label class="input_label label_title" id="inv_ratedisc_quantity_s1_label">Quantity of rate discretisations per minimum unit rate:</label><br>
<input type="number" id="inv_ratedisc_quantity_s1" onchange="change_rate_discretisation('inv', 1);" value="1" step="1" min="1"/>
<br><br>
<label class="input_label label_title" id="inv_rate_s1_label">Rate [£ / hour]:</label><br>
<input type="number" id="inv_rate_s1" placeholder="23.94" step="0.01"/><br><br>
<label class="input_label label_title" id="inv_disc_durn_s1_label">Duration discretisation:</label><br>
<select id="inv_disc_durn_s1" onchange="change_rate_discretisation('inv', 1);">
<option value="d">Day</option>
<option value="w" selected="selected">Week</option>
<option value="M">Month</option>
<option value="y">Year</option>
</select><br><br>
<label class="input_label label_title" id="inv_durndisc_quantity_s1_label">Quantity of duration discretisations per billing period:</label><br>
<input type="number" id="inv_durndisc_quantity_s1" value="1" step="1" min="1" onchange="change_rate_discretisation('inv', 1);"/>
<br><br>
<label class="input_label label_title" id="inv_sub_quantity_s1_label">Quantity of billing periods:</label><br>
<input type="number" id="inv_sub_quantity_s1" value="1" step="1" min="1" onchange="show_discs('inv', 's', 1, Number(this.value));"/>
<br><br>
<label id="inv_incremental_label_s1" class="input_label label_title">Incremental week IDs:</label><br>
<input type="checkbox" id="inv_increment_yes_s1" value="Yes" checked onchange="toggle_incremental_weeks('inv', 'Yes', 1);"/>
<label id="inv_increment_yes_s1_label" class="input_subtitle">Yes</label>
<input type="checkbox" id="inv_increment_no_s1" value="No" onchange="toggle_incremental_weeks('inv', 'No', 1);"/>
<label id="inv_increment_no_s1_label" class="input_subtitle">No</label><br><br>
<div id="div_inv_incremental_s1" class="tbl_container">
<table id="tbl_inv_incremental_s1">
<tr>
<td>
<div class="div_input_label">
<label id="inv_baseID_s1_label" class="input_label">Service description base (prefix):</label>
<input type="text" id="inv_baseID_s1" class="input_label" onchange="change_incremental_phrase('inv', 1);"/>
</div>
</td>
<td>
<div class="div_input_label">
<label id="inv_week1_s1_label" class="input_label">First week ID:</label>
<input type="number" id="inv_week1_s1" class="input_label" placeholder="1" step="0.1" min="1" onchange="change_incremental_phrase('inv', 1);"/>
</div>
</td>
</tr>
</table>
</div>
<br>
<br>
<div id="div_inv_service_1" class="tbl_container">
<table>
<tbody id="tbl_inv_service_1">
<tr id="tr_inv_service_1_1">
<td>
<div class="div_input_label">
<label id="inv_description_s1_1_label" class="input_label">Week 1:</label>
<input type="text" id="inv_description_s1_1" class="input_label"/>
</div>
</td>
<td>
<div class="div_input_label">
<label id="inv_quantity_s1_1_label" class="input_label">Hours worked:</label>
<input type="number" id="inv_quantity_s1_1" step="0.001" class="input_label"/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
<br>
<div id="div_ESTIMATE" display="none">
<label class="div_title">Estimate</label><br>
<label class="input_label label_title">Billing date:</label><br>
<input type="date" id="est_date" class="date" value="2022-12-25"/><br><br>
<label class="input_label label_title">Estimate type:</label><br>
<input type="checkbox" id="est_type_goods" value="goods" onchange="show_goods_services('est');"/>
<label class="input_subtitle">Goods</label>
<input type="checkbox" id="est_type_services" value="services" onchange="show_goods_services('est');"/>
<label class="input_subtitle">Services</label>
<br><br>
<div id="div_est_goods">
<label class="div_title">Goods</label><br>
<label class="input_label label_title">Number of different goods:</label><br>
<input type="number" id="est_goods_n" value="1" step="1" onchange="show_goods('est');"/><br><br>
<div id="div_est_goods_table" class="div_good tbl_container">
<table>
<tbody id="tbl_est_goods">
<tr id="tr_est_good_1">
<td>
<label class="input_label" id="inv_heading_g1_label" style="white-space: nowrap;">Good 1</label>
</td>
<td>
<div class="div_input_label">
<label class="input_label" id="est_name_g1_label">Name:</label>
<input type="text" id="est_name_g1" class="input_label"/>
</div>
</td>
<td>
<div>
<label class="input_label" id="est_value_g1_label">Value [£]:</label>
<input type="number" id="est_value_g1" class="input_label" placeholder="20000" step="0.01"/>
</div>
</td>
<td>
<div>
<label class="input_label">Quantity of goods:</label>
<input type="number" id="est_quantity_g1" class="input_label" placeholder="1" step="0.001" min="0.001"/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div id="div_est_services">
<label class="div_title">Services</label><br>
<label class="input_label label_title" id="est_services_n_label">Number of different services:</label><br>
<input type="number" id="est_services_n" value="1" step="1" onchange="show_services('est');"/><br><br>
<div id="div_est_service_1" class="div_service">
<label class="div_title">Service 1</label><br>
<label class="input_label label_title" id="est_disc_rate_s1_label">Rate discretisation:</label><br>
<select id="est_disc_rate_s1" onchange="change_rate_discretisation('est', 1);">
<option value="m">Minute</option>
<option value="h" selected="selected">Hour</option>
<option value="d">Day</option>
<option value="w">Week</option>
</select><br><br>
<label class="input_label label_title" id="est_ratedisc_quantity_s1_label">Quantity of rate discretisations per minimum unit rate:</label><br>
<input type="number" id="est_ratedisc_quantity_s1" onchange="change_rate_discretisation('est', 1);" value="1" step="1" min="1"/>
<br><br>
<label class="input_label label_title" id="est_rate_s1_label">Rate [£ / hour]:</label><br>
<input type="number" id="est_rate_s1" placeholder="20.33" step="0.01"/><br><br>
<label class="input_label label_title" id="est_disc_durn_s1_label">Duration discretisation:</label><br>
<select id="est_disc_durn_s1" onchange="change_rate_discretisation('est', 1);">
<option value="d">Day</option>
<option value="w" selected="selected">Week</option>
<option value="M">Month</option>
<option value="y">Year</option>
</select><br><br>
<label class="input_label label_title" id="est_durndisc_quantity_s1_label">Quantity of duration discretisations per billing period:</label><br>
<input type="number" id="est_durndisc_quantity_s1" value="1" step="1" min="1" onchange="change_rate_discretisation('est', 1);"/>
<br><br>
<label class="input_label label_title" id="est_sub_quantity_s1_label">Quantity of billing periods:</label><br>
<input type="number" id="est_sub_quantity_s1" value="1" step="1" min="1" onchange="show_discs('est', 's', 1, Number(this.value));"/>
<br><br>
<label id="est_incremental_label_s1" class="input_label label_title">Incremental week IDs:</label><br>
<input type="checkbox" id="est_increment_yes_s1" value="Yes" checked onchange="toggle_incremental_weeks('est', 'Yes', 1);"/>
<label id="est_increment_yes_s1_label" class="input_subtitle">Yes</label>
<input type="checkbox" id="est_increment_no_s1" value="No" onchange="toggle_incremental_weeks('est', 'No', 1);"/>
<label id="est_increment_no_s1_label" class="input_subtitle">No</label><br><br>
<div id="div_est_incremental_s1" class="tbl_container">
<table id="tbl_est_incremental_s1">
<tr>
<td>
<div class="div_input_label">
<label id="est_baseID_s1_label" class="input_label">Service description base (prefix):</label>
<input type="text" id="est_baseID_s1" class="input_label" onchange="change_incremental_phrase('est', 1);"/>
</div>
</td>
<td>
<div class="div_input_label">
<label id="est_week1_s1_label" class="input_label">First week ID:</label>
<input type="number" id="est_week1_s1" class="input_label" placeholder="1" step="0.1" min="1" onchange="change_incremental_phrase('est', 1);"/>
</div>
</td>
</tr>
</table>
</div>
<div id="div_est_service_1" class="tbl_container">
<table>
<tbody id="tbl_est_service_1">
<tr id="tr_est_service_1_1">
<td>
<div class="div_input_label">
<label class="input_label" id="est_description_s1_1_label">Week 1:</label>
<input type="text" id="est_description_s1_1" class="input_label">
</div>
</td>
<td>
<div class="div_input_label">
<label class="input_label" id="est_quantity_s1_1_label">Hours worked:</label>
<input type="number" id="est_quantity_s1_1" class="input_label" step="0.001">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br><br>
<div id="div_PAYMENT-PLAN">
<label class="div_title">Payment Plan</label><br>
<label class="input_label label_title">Number of payments:</label><br>
<input type="number" id="pay_n" value="25" step="1" onchange="show_payschemes();"/><br><br>
<label class="input_label label_title" id="pay_description_label">Description:</label><br>
<input type="text" id="pay_description"/><br><br>
<div id="div_pay_type">
<label class="input_label label_title">Payment values:</label><br>
<input type="checkbox" id="paytype_linear" value="Constant" checked onchange="change_paytype('linear');"/>
<label class="input_subtitle">Constant</label>
<input type="checkbox" id="paytype_multiplier" value="Multiplier" onchange="change_paytype('multiplier');"/>
<label class="input_subtitle">Multiplier</label>
<input type="checkbox" id="paytype_random" value="Random" onchange="change_paytype('random');"/>
<label class="input_subtitle">Random</label>
</div>
<!-- For linear payment values style="position: absolute;" -->
<div id="div_paytype_linear">
<br><br>
<label class="input_label label_title" id="pay_linear_unit_label">Unit payment [£]:</label><br>
<input type="number" id="pay_linear_unit" placeholder="200" step="0.01"/><br><br>
</div>
<!-- For non-linear payment values -->
<div id="div_paytype_multiplier">
<br>
<label class="input_label label_title" id="pay_mult_unit_label">Unit payment [£]:</label><br>
<input type="number" id="pay_mult_unit" placeholder="200" step="0.01"/><br><br>
<label class="input_label label_title" id="paytype_mult_1_label">Payment multiplier 1:</label><br>
<input type="number" id="paytype_mult_1" value="1" min="0" step="0.001"><br><br>
</div>
<!-- For random payment values -->
<div id="div_paytype_random">
<br><br>
<label class="input_label" id="paytype_value_1_label">Payment 1 [£]:</label><br>
<input type="number" id="paytype_value_1" placeholder="10" step="0.01"/><br><br>
</div>
<label class="input_label label_title">First payment date:</label><br>
<input type="date" id="pay_date" placeholder="2022-12-25"/><br><br>
<div id="div_payscheme">
<label class="input_label label_title">Payment scheme:</label><br>
<input type="checkbox" id="payscheme_linear" value="Linear" checked onchange="change_payscheme('linear');"/>
<label class="input_subtitle">Linear</label>
<input type="checkbox" id="payscheme_multiplier" value="multiplier" onchange="change_payscheme('multiplier');"/>
<label class="input_subtitle">Multiplier</label>
<!--
<input type="checkbox" id="payscheme_random" value="random"/>
<label class="input_subtitle">Random</label>-->
<br>
<br>
<label class="input_label label_title">Payment duration discretisation:</label><br>
<select id="pay_discretisation" onchange="update_pay_durndisc();">
<option value="d">Day</option>
<option value="w">Week</option>
<option value="m">Month</option>
<option value="y">Year</option>
</select><br><br>
<!-- For linear payment scheme
<div id="div_payscheme_linear"> -->
<label class="input_label label_title" id="pay_disc_quantity_label">Quantity of duration discretisations in minimum unit duration:</label><br>
<input type="number" id="pay_disc_quantity" placeholder="1" step="1" min="1"/><br><br>
<!-- </div> -->
<!-- For multiplier payment scheme -->
<div id="div_payscheme_multiplier">
<label class="input_label label_title" id="pay_disc_type_label">Payment minimum unit duration multiplier type:</label><br>
<input type="checkbox" id="pay_disc_type_absolute" onchange="change_pay_disctype('absolute');">
<label class="input_subtitle">Absolute</label>
<input type="checkbox" id="pay_disc_type_relative" onchange="change_pay_disctype('relative');" checked>
<label class="input_subtitle">Relative</label>
<br><br>
<div id="div_payscheme_mult_1">
<label class="input_label label_title" id="label_payscheme_mult_1">Payment minimum unit duration multiplier 1:</label><br>
<input type="number" id="payscheme_mult_1" placeholder="1" step="1" min="1"><br><br>
</div>
</div>
</div>
</div>
<br>
<br>
<label class="input_label label_title">Form type:</label>
<br>
<select id="my_form_type_2" onchange="change_form_type(2);" style="width: 150px;">
<option value="0">-</option>
<option value="1">INVOICE</option>
<option value="2">ESTIMATE</option>
<option value="3">PAYMENT-PLAN</option>
</select>
<br>
<br>
<label class="errmsg"></label>
<div>
<div>
<button type="button" id="btn_defaults_inv">Defaults - Invoice</button>
<button type="button" id="btn_defaults_est">Defaults - Estimate</button>
<button type="button" id="btn_defaults_pay">Defaults - Payment Plan</button>
</div>
<div>
<button type="button" id="btn_clear_form" onclick="clear_form();">Clear Form</button>
<input type="submit" value="Submit" id="submit">
</div>
</div>
<br><br>
</div>
</form>
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>