745 lines
44 KiB
HTML
745 lines
44 KiB
HTML
<!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> |