<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Appizy">
<title>
Appizy App
</title>
<style>
.appizy * {
box-sizing: border-box;
}
.appizy {
font-family: "Arial", sans-serif;
font-size: 14px;
width: 100%;
}
.application-align-center {
margin: auto;
}
.application-align-right {
margin-left: auto;
margin-right: 0;
}
.application-layout-fixed .tabs {
overflow-x: auto;
}
.application-layout-fit-parent {
width: 100%;
}
.application-layout-fit-parent table {
table-layout: auto;
width: 100%;
}
.draw-frame {
padding: 0;
position: relative;
}
.draw-frame-layout-fixed {
margin: 0;
position: absolute;
}
.draw-frame-layout-fluid,
.draw-frame-layout-fit-parent {
margin: 10px 0;
width: 100%;
}
.chart {
background: white;
border: 1px solid #ebebeb;
}
table {
table-layout: fixed;
border: none;
border-collapse: collapse;
}
tbody {
border: none;
}
tr {
min-height: 10px;
}
td {
padding: 2px;
line-height: normal;
}
td > div {
padding: 6px 0;
}
input {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #C2C2C2;
border-radius: 3px;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
padding: 5px;
text-align: inherit;
vertical-align: text-bottom;
width: 100%;
}
select {
font-family: inherit;
font-size: inherit;
text-align: inherit;
width: 100%;
}
p {
margin: 0;
}
.in {
text-align: right;
}
.in--text {
text-align: left;
}
.out {
text-align: right;
}
.out--text {
text-align: left;
}
.hidden-cell {
display: none;
}
.hidden-row {
display: none;
}
textarea {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
resize: none;
width: 100%;
}
.btn {
background-color: white;
border: 1px solid #ebebeb;
border-radius: 3px;
color: black;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
font-family: inherit;
}
.action-bar {
border-top: 1px solid #d4d4d1;
margin-top: 10px;
padding-top: 10px;
}
.tab-content {
padding: 0 10px;
position: relative;
}
.Heading {
color: #000000;
font-size: 24pt;
font-style: normal;
font-weight: bold;
}
.Heading_20_1 {
color: #000000;
font-size: 18pt;
font-style: normal;
font-weight: normal;
}
.Heading_20_2 {
color: #000000;
font-size: 12pt;
font-style: normal;
font-weight: normal;
}
.Note {
background-color: #ffffcc;
border: 0.74pt solid #808080;
color: #333333;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
.Footnote {
color: #808080;
font-size: 10pt;
font-style: italic;
font-weight: normal;
}
.Hyperlink {
color: #0000ee;
font-size: 10pt;
font-style: normal;
text-decoration: underline;
font-weight: normal;
}
.Good {
background-color: #ccffcc;
color: #006600;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
.Neutral {
background-color: #ffffcc;
color: #996600;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
.Bad {
background-color: #ffcccc;
color: #cc0000;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
.Warning {
color: #cc0000;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
.Error {
background-color: #cc0000;
color: #ffffff;
font-size: 10pt;
font-style: normal;
font-weight: bold;
}
.Accent {
color: #000000;
font-size: 10pt;
font-style: normal;
font-weight: bold;
}
.Accent_20_1 {
color: #ffffff;
font-size: 10pt;
font-style: normal;
font-weight: normal;
background-color: #000000;
}
.Accent_20_2 {
color: #ffffff;
font-size: 10pt;
font-style: normal;
font-weight: normal;
background-color: #808080;
}
.Accent_20_3 {
color: #000000;
font-size: 10pt;
font-style: normal;
font-weight: bold;
background-color: #dddddd;
}
.co1 {
width: 165px;
}
.co2 {
width: 145px;
}
.co3 {
width: 85px;
}
.co4 {
width: 101px;
}
.co5 {
width: 135px;
}
.ro1 {
height: 17px;
}
.ta2 {
display: none;
}
.ce2 {
background-color: #dee6ef;
}
.ce3 {
background-color: #dee6ef;
text-align: center;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
.ce6 {
background-color: #ffff00;
border: none;
text-align: start;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
.ce7 {
text-align: center;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
.ce8 {
background-color: #ffff00;
text-align: start;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
.T1 {
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
</style>
</head>
<body>
<div class="appizy">
<div class="application-layout-fluid application-align-center">
<form class="application">
<div class="tabs">
<div id="sheet1" class="tab-content active">
<table>
<colgroup>
<col span="1" class="co1">
<col span="1" class="co2">
</colgroup>
<tbody>
<tr class="s0r0 ro1">
<td class="s0r0c0 text ce1">
<p>
Name
</p>
</td>
<td class="s0r0c1 in in--text ce2">
<input id="s0r0c1" name="name">
</td>
</tr>
<tr class="s0r1 ro1">
<td class="s0r1c0 text ce1">
<p>
Company
</p>
</td>
<td class="s0r1c1 in in--text ce2">
<input id="s0r1c1" name="company">
</td>
</tr>
<tr class="s0r2 ro1">
<td></td>
</tr>
<tr class="s0r3 ro1">
<td class="s0r3c0 text ce1">
<p>
T-shirt size
</p>
</td>
<td class="s0r3c1 in in--text ce3">
<select id="s0r3c1" name="size">
<option value="">
</option>
<option selected value="S">
S
</option>
<option value="M">
M
</option>
<option value="L">
L
</option>
</select>
</td>
</tr>
<tr class="s0r4 ro1">
<td class="s0r4c0 text ce1">
<p>
Color
</p>
</td>
<td class="s0r4c1 in in--text ce3">
<select id="s0r4c1" name="color">
<option value="">
</option>
<option selected value="Green">
Green
</option>
<option value="Blue">
Blue
</option>
<option value="Yellow">
Yellow
</option>
</select>
</td>
</tr>
<tr class="s0r5 ro1">
<td class="s0r5c0 text ce1">
<p>
Quantity
</p>
</td>
<td class="s0r5c1 in ce2">
<input id="s0r5c1" name="quantity">
</td>
</tr>
<tr class="s0r6 ro1">
<td></td>
</tr>
<tr class="s0r7 ro1">
<td class="s0r7c0 text ce1">
<p>
Unit price
</p>
</td>
<td class="s0r7c1 out ce4">
<div id="s0r7c1"></div><input type="hidden" name="unit_price" value="">
</td>
</tr>
<tr class="s0r8 ro1">
<td class="s0r8c0 text ce1">
<p>
Quanity discount
</p>
</td>
<td class="s0r8c1 out ce5">
<div id="s0r8c1"></div><input type="hidden" name="discount" value="">
</td>
</tr>
<tr class="s0r9 ro1">
<td class="s0r9c0 text ce1">
<p>
Total
</p>
</td>
<td class="s0r9c1 out ce4">
<div id="s0r9c1"></div><input type="hidden" name="total" value="">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
<div class="action-bar">
<button class="btn" onclick="APY.onSendButtonClicked()">Send</button>
</div>
</div>
</div><!-- Vendor libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js">
</script>
</script>
<script src="https://cdn.jsdelivr.net/gh/formulajs/
[email protected]/dist/formula.min.js">
</script>
<script type="application/javascript">
(function (window) {
window.numeral.locale('');
})(this);
</script>
<script type="application/javascript">
(function ($) {
var APY = {};
APY.cells = {};
APY.cells.s0r0c0 = {
value: 'Name',
type: 'text',
format: ''
};
APY.cells.s0r0c1 = {
value: '',
type: 'text',
format: ''
};
APY.cells.s0r1c0 = {
value: 'Company',
type: 'text',
format: ''
};
APY.cells.s0r1c1 = {
value: '',
type: 'text',
format: ''
};
APY.cells.s0r3c0 = {
value: 'T\u002Dshirt\u0020size',
type: 'text',
format: ''
};
APY.cells.s0r3c1 = {
value: 'S',
type: 'text',
format: ''
};
APY.cells.s0r4c0 = {
value: 'Color',
type: 'text',
format: ''
};
APY.cells.s0r4c1 = {
value: 'Green',
type: 'text',
format: ''
};
APY.cells.s0r5c0 = {
value: 'Quantity',
type: 'text',
format: ''
};
APY.cells.s0r5c1 = {value: 20,type: 'number',
format: ''
}; APY.cells.s0r7c0 = {
value: 'Unit\u0020price',
type: 'text',
format: ''
};
APY.cells.s0r7c1 = {value: 10,type: 'number',
format: '$0,0.00'
}; APY.cells.s0r8c0 = {
value: 'Quanity\u0020discount',
type: 'text',
format: ''
};
APY.cells.s0r8c1 = {value: 0.1,type: 'number',
format: '0.00%'
}; APY.cells.s0r9c0 = {
value: 'Total',
type: 'text',
format: ''
};
APY.cells.s0r9c1 = {value: 180,type: 'number',
format: '$0,0.00'
}; APY.cells.s1r0c0 = {
value: 'Fake\u0020input\u0020field,\u0020to\u0020make\u0020them\u0020editable',
type: 'text',
format: ''
};
APY.cells.s1r1c0 = {
value: 'Name',
type: 'text',
format: ''
};
APY.cells.s1r1c1 = {value: 0,type: 'number',
format: ''
}; APY.cells.s1r2c0 = {
value: 'Company',
type: 'text',
format: ''
};
APY.cells.s1r2c1 = {value: 0,type: 'number',
format: ''
}; APY.cells.s1r3c0 = {
value: 'Color',
type: 'text',
format: ''
};
APY.cells.s1r3c1 = {
value: 'Green',
type: 'text',
format: ''
};
APY.cells.s1r5c0 = {
value: 'Cell\u0020validation\u0020content',
type: 'text',
format: ''
};
APY.cells.s1r6c0 = {
value: 'Available\u0020colors',
type: 'text',
format: ''
};
APY.cells.s1r7c0 = {
value: 'Green',
type: 'text',
format: ''
};
APY.cells.s1r8c0 = {
value: 'Blue',
type: 'text',
format: ''
};
APY.cells.s1r9c0 = {
value: 'Yellow',
type: 'text',
format: ''
};
APY.cells.s1r11c0 = {
value: 'Intermediates\u0020calculations',
type: 'text',
format: ''
};
APY.cells.s1r12c0 = {
value: 'Discount',
type: 'text',
format: ''
};
APY.cells.s1r12c1 = {value: 0.1,type: 'number',
format: ''
}; APY.cells.s1r14c0 = {
value: 'VLOOKUP\u0020Size\u0020\u003E\u0020Unit\u0020Price',
type: 'text',
format: ''
};
APY.cells.s1r15c0 = {
value: 'Tshirt\u0020size',
type: 'text',
format: ''
};
APY.cells.s1r15c1 = {
value: 'Unit\u0020price',
type: 'text',
format: ''
};
APY.cells.s1r16c0 = {
value: 'S',
type: 'text',
format: ''
};
APY.cells.s1r16c1 = {value: 10,type: 'number',
format: ''
}; APY.cells.s1r17c0 = {
value: 'M',
type: 'text',
format: ''
};
APY.cells.s1r17c1 = {value: 11,type: 'number',
format: ''
}; APY.cells.s1r18c0 = {
value: 'L',
type: 'text',
format: ''
};
APY.cells.s1r18c1 = {value: 12,type: 'number',
format: ''
};
APY.formulas = {
s0r7c1: function() { APY.set('s0r7c1',formulajs.VLOOKUP(APY.RANGE([0,3,1]),APY.RANGE([1,16,0],[1,18,1]),2)) },
s0r8c1: function() { APY.set('s0r8c1',APY.RANGE([1,12,1])) },
s0r9c1: function() { APY.set('s0r9c1',formulajs.ROUND(APY.RANGE([0,7,1])*APY.RANGE([0,5,1])*(1-APY.RANGE([0,8,1])),2)) },
s1r1c1: function() { APY.set('s1r1c1',APY.RANGE([0,0,1])) },
s1r2c1: function() { APY.set('s1r2c1',APY.RANGE([0,1,1])) },
s1r3c1: function() { APY.set('s1r3c1',APY.RANGE([0,4,1])) },
s1r12c1: function() { APY.set('s1r12c1',formulajs.IF(APY.RANGE([0,5,1])>10,0.1,0)) },
};
APY.calculate = function () {
// Step 1
APY.formulas.s0r7c1();
APY.formulas.s1r1c1();
APY.formulas.s1r2c1();
APY.formulas.s1r3c1();
APY.formulas.s1r12c1();
// Step 2
APY.formulas.s0r8c1();
// Step 3
APY.formulas.s0r9c1();
};
APY.getValue = function (value, type, format) {
type = type ? type : 'text';
var returnedValue;
if (type === 'boolean') {
returnedValue = (value === 'true');
} else if (type === 'number') {
returnedValue = numeral(value).value();
} else if (type === 'date') {
var m = format ? moment(value, format) : moment(value);
if (!!value && m.isValid()) {
returnedValue = m.toDate();
} else {
returnedValue = null;
}
} else {
returnedValue = value;
}
return returnedValue;
};
APY.set = function (cellId, value) {
var cell = APY.cells[cellId];
if (!cell) {
return;
}
cell.value = value;
var $cell = $('#' + cellId);
if ($cell.length === 0) {
return;
}
var displayedValue = APY.formatValue(value, cell.type, cell.format);
if ($cell.is('div')) {
$cell.html(displayedValue);
$cell.siblings('input').val(displayedValue);
} else {
$cell.val(displayedValue);
}
};
APY.formatValue = function (value, type, format) {
if (value instanceof Error) {
return value;
}
var formattedValue = value;
if (type === 'number') {
if (value === null) {
return '';
}
format = format ? format : '0.[000000000]';
value = Math.abs(value) <= 1e-7 ? 0 : value;
formattedValue = numeral(value).format(format);
}
if (type === 'date') {
if (!value) {
return value;
}
formattedValue = moment(value).format(format);
}
return formattedValue;
};
APY.getInputs = function () {
var inputs = {};
var $applicationInput = $('.application input[type!=hidden], .application select, .application textarea');
$applicationInput.each(function () {
var cellId = $(this).attr('id');
var cell = APY.cells[cellId];
if (cell) {
var value = cell.value;
if (value instanceof Date) {
value = APY.dateToString(value);
}
inputs[cellId] = {
value: value,
type: cell.type
};
}
});
return inputs;
};
APY.setInputs = function (data) {
Object.keys(data).forEach(function (key) {
if (data.hasOwnProperty(key)) {
var value = APY.getValue(data[key].value, data[key].type);
APY.set(key, value);
}
});
};
APY.dateToString = function (date) {
return date.getFullYear() + '-' +
((date.getMonth() + 1) < 10 ? '0' : '') +
(date.getMonth() + 1) + '-' +
(date.getDate() < 10 ? '0' : '') +
date.getDate() +
'T' +
(date.getHours() < 10 ? '0' : '') +
date.getHours() +
':' +
(date.getMinutes() < 10 ? '0' : '') +
date.getMinutes() +
':' +
(date.getSeconds() < 10 ? '0' : '') +
date.getSeconds();
};
APY.RANGE = function () {
var value = null;
if (arguments.length === 1) {
var cellId = 's' + arguments[0][0] + 'r' + arguments[0][1] + 'c' + arguments[0][2];
if (APY.cells && APY.cells.hasOwnProperty(cellId)) {
value = APY.cells[cellId].value;
}
return value;
} else if (arguments.length === 2) {
var values = [];
var head = arguments[0];
var tail = arguments[1];
for (var i = 0; i <= (tail[1] - head[1]); i++) {
var row = [];
for (var j = 0; j <= tail[2] - head[2]; j++) {
value = null;
cellId = 's' + head[0] + 'r' + (head[1] + i) + 'c' + (head[2] + j);
if (APY.cells && APY.cells.hasOwnProperty(cellId)) {
value = APY.cells[cellId].value;
}
row.push(value);
}
values.push(row);
}
return values;
}
};
APY.onSaveButtonClicked = function () {
var blob = new Blob([JSON.stringify(APY.getInputs())], {type: 'application/json'});
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = document.title + ' ' + (new Date()).toISOString().slice(0, 10) + '.json';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
};
APY.onDataFileSelected = function () {
var file = document.getElementById('data-file');
var blob = file.files[0];
if (blob) {
var reader = new FileReader();
reader.onload = function (evt) {
APY.setInputs(JSON.parse(evt.target.result));
APY.calculate();
};
reader.onerror = function (evt) {
console.error("An error occurred reading the file", evt);
};
reader.readAsText(blob, "UTF-8");
}
};
APY.onCalculateButtonClicked = function () {
APY.calculate();
};
APY.onSendButtonClicked = function () {
$('form.application').submit();
};
// Expose Appizy App API called APY :)
window.APY = APY;
window.onload = function () {
var $applicationInput = $('.application input[type!=hidden], .application select, .application textarea');
// Update values in input fields on change
$applicationInput.on('change', function () {
var cell = APY.cells[$(this).attr('id')];
cell.value = APY.getValue($(this).val(), cell.type, cell.format);
$(this).val(APY.formatValue(cell.value, cell.type, cell.format));
APY.calculate();
});
// Display formatted values in input fields on application start
$applicationInput.each(function () {
var cell = APY.cells[$(this).attr('id')];
// Recompute Office value in Javascript value
cell.value = APY.getValue(cell.value, cell.type);
$(this).val(APY.formatValue(cell.value, cell.type, cell.format));
});
APY.calculate();
};
$('form.application').on('submit', function (event) {
if (event.keyCode === '13') {
event.preventDefault();
APY.calculate();
}
});
})(jQuery);
</script>
</body>
</html>