Skip to content

Instantly share code, notes, and snippets.

@mmaltsev

mmaltsev/finplan.html

Last active March 31, 2018 20:45
Show Gist options
  • Save mmaltsev/477baacdc2fe691dc1b7c71e48c152bc to your computer and use it in GitHub Desktop.
Save mmaltsev/477baacdc2fe691dc1b7c71e48c152bc to your computer and use it in GitHub Desktop.
Download ZIP
Fin Plan for Nitish
Raw
finplan.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="http://goo.gl/PkEcge" type="image/x-icon">
<title>Fin Plan</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
body {
background-color: #f8f8f8;
margin: 0;
}
.block {
padding: 10px;
border: 1px solid lightgray;
background-color: white;
margin: 10px;
}
.inputs {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.input-wrapper {
display: flex;
flex-direction: column;
margin: 10px 0;
}
.input-title {
margin-bottom: 5px;
font-weight: 800;
}
.input-select {
outline: none;
padding: 2px 5px;
}
.input-text {
outline: none;
max-width: 100px;
padding: 2px 5px;
}
.save-button {
height: 30px;
align-self: flex-end;
background-color: #4267b2;
border: none;
color: white;
padding: 7px 16px;
font-size: 14px;
cursor: pointer;
outline: none;
margin: 10px 0;
}
#chart {
border-bottom: 1px solid lightgray;
display: flex;
}
.table-wrapper {
overflow: auto;
overflow-y: hidden;
}
table { width: 100%; }
tr:hover { background-color: #f5f5f5; }
th, td {
border-bottom: 1px solid #ddd;
padding: 15px;
text-align: left;
}
</style>
</head>
<body>
<div class="block inputs">
<div class="input-wrapper">
<span class="input-title">Howcome:</span>
<select id="itemHowcome" class="input-select">
<option value="income">Income</option>
<option value="outcome">Outcome</option>
</select>
</div>
<div class="input-wrapper">
<span class="input-title">Name:</span>
<input id="itemName" class="input-text" type="text" />
</div>
<div class="input-wrapper">
<span class="input-title">Price:</span>
<input id="itemPrice" class="input-text" type="text" />
</div>
<div class="input-wrapper">
<span class="input-title">Frequency:</span>
<div>
<input id="datetype" type="radio" value="frequency" name="datetype" checked>
<select id="itemFrequency" class="input-select">
<option value="daily">daily</option>
<option value="weekly">weekly</option>
<option value="monthly">monthly</option>
<option value="yearly">yearly</option>
</select>
</div>
</div>
<div class="input-wrapper">
<span class="input-title">Date:</span>
<div>
<input type="radio" value="date" name="datetype">
<input id="itemDate" class="input-text" type="text" placeholder="31.01.2018" />
</div>
</div>
<div class="input-wrapper">
<span class="input-title">Type of the good:</span>
<select id="itemType" class="input-select">
<option value="e">Essential</option>
<option value="el">Essential Luxury</option>
<option value="le">Luxury Essential</option>
<option value="l">Luxury</option>
<option value="i">Irreversible</option>
</select>
</div>
<button class="save-button" onclick="postInputs()">Save</button>
</div>
<div class="block">
<div id="chart"></div>
<div class="table-wrapper">
<table id="chartTable"></table>
</div>
</div>
<div class="block table-wrapper">
<table id="itemsTable"></table>
</div>
<script>
getData('/get')
function getData(url) {
axios.get(url)
.then(function(response) {
console.log('response: ', response);
drawTables(response["data"]["tables"]);
drawChart(response["data"]["chart"]);
})
.catch(function(error) {
console.log('error: ', error);
console.warn('Attention: dummy data is drawn!')
dummy = {
"tables": {
"chartTable": [
['Type of savings','All','Exceeded'],
['Savings this month:',3,4],
['Savings up to this month:',3,4],
['Savings this year:',3,4]
],
"itemsTable": [
['Visualize','Name','Price','Frequency','Type'],
['<input type="checkbox" id="check0" checked onchange="updateChart()" />',1,2,3,4],
['<input type="checkbox" id="check1" checked onchange="updateChart()" />',1,2,3,4],
['<input type="checkbox" id="check2" checked onchange="updateChart()" />',1,2,3,4],
['<input type="checkbox" id="check3" checked onchange="updateChart()" />',1,2,3,4],
['<input type="checkbox" id="check4" checked onchange="updateChart()" />',1,2,3,4],
['<input type="checkbox" id="check5" checked onchange="updateChart()" />',1,2,3,4],
['<input type="checkbox" id="check6" checked onchange="updateChart()" />',1,2,3,4]
]
},
"chart": [
{
"name": "line1",
"data": [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
"name": "line2",
"data": [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
"name": "line3",
"data": [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
"name": "line4",
"data": [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}
]
};
drawTables(dummy["tables"]);
drawChart(dummy["chart"]);
});
}
function postData(url, params) {
axios.post(url, params)
.then(function(response) {
console.log('response: ', response);
drawTables(response["data"]["tables"]);
drawChart(response["data"]["chart"]);
})
.catch(function(error) {
console.log('error: ', error);
});
}
function postInputs() {
let frequency = ''
let date = ''
if (document.getElementById('datetype').checked === true) {
frequency = document.getElementById('itemFrequency').value
date = ''
} else {
frequency = ''
date = document.getElementById('itemDate').value
let pattern = /(\d{2})\.(\d{2})\.(\d{4})/
date = +new Date(date.replace(pattern,'$3-$2-$1'))
}
let params = {
"howcome": document.getElementById('itemHowcome').value,
"name": document.getElementById('itemName').value,
"price": document.getElementById('itemPrice').value,
"frequency": frequency,
"date": date,
"type": document.getElementById('itemType').value
}
postData('/post', params)
}
function updateChart() {
let params = {}
let checklist = document.getElementById('itemsTable').children[0].children
for (let i = 1; i < checklist.length; i++) {
let checkId = checklist[i].children[0].children[0].id
let checkType = checklist[i].children[0].children[0].checked
params[checkId] = checkType
}
postData('/check_change', params)
}
function drawTables(tables) {
for (let tableName in tables) {
if (tables.hasOwnProperty(tableName)) {
tableData = tables[tableName]
let tableHTML = '<tbody>'
for (let row of tableData) {
if (tableHTML === '<tbody>')
tableHTML += '<tr style="font-weight: 800;">'
else
tableHTML += '<tr>'
for (let val of row) {
tableHTML += '<td>' + val + '</td>'
}
tableHTML += '</tr>'
}
tableHTML += '</tbody>'
document.getElementById(tableName).innerHTML = tableHTML
}
}
}
function drawChart(chartData) {
Highcharts.chart('chart', {
chart: {
reflow: true
},
title: {
text:''
},
plotOptions: {
series: {
label: {
connectorAllowed: false
}
}
},
exporting: false,
credits: false,
yAxis: {
title: {
text: ''
}
},
series: chartData
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment