Ну ок, только не обращайте внимание тогда на ${records_table} и т.п, туда подставляются строки (пайтон на стороне сервера).
<html>
<head>
<title>Family budget. Main page</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<link rel="stylesheet" href="/static/css/styles.css" type="text/css" />
<script type="text/javascript" src="/static/js/scripts.js"></script>
</head>
<body>
<header>
<div id="user_header">
${username} <a href="/family_budget/logout">logout</a>
</div>
</header>
<h4>Recent records</h4>
<!-- Here must be table with records -->
${records_table}
<br>
<input type="button" value="Add record" onclick="show_add_form()" />
<input type="button" value="Select records" onclick="show_select_form()" />
<input type="button" value="Delete records" onclick="show_delete_form()" />
<input type="button" value="Show statistics" onclick="show_statistics()" />
<br />
<br />
<form id="action_form" action="/family_budget/main_page" onsubmit="return validateForm()" method="post">
</form>
<footer>
<div id="user_footer">
Powered by Bottle
</div>
</footer>
</body>
</html>
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
};
var validateForm = function() {
return true;
};
var show_add_form = function () {
var form = document.getElementById("action_form");
var date = document.createElement("input");
date.type = "text";
date.id = "date";
date.name = "date";
date.setAttribute("class","date");
d = new Date();
date.value = d.yyyymmdd();
form.appendChild(date);
var amount = document.createElement("input");
amount.type = "text";
amount.id = "amount";
amount.name = "amount";
amount.setAttribute("class","amount");
amount.placeholder="money";
form.appendChild(amount);
var select = document.createElement("select");
select.id = "type";
select.name = "type";
form.appendChild(select);
var option = document.createElement("option");
option.text = "choose one";
select.appendChild(option);
var option = document.createElement("option");
option.text = "income";
select.appendChild(option);
var option = document.createElement("option");
option.text = "outcome";
select.appendChild(option);
var description = document.createElement("input");
description.type = "text";
description.id = "desc";
description.name = "desc";
description.setAttribute("class","description");
description.placeholder="description of money operation";
form.appendChild(description);
var br = document.createElement("br");
form.appendChild(br);
var submit = document.createElement("input");
submit.type = "submit";
submit.id = "submit";
submit.value = "submit";
form.appendChild(submit);
var cancel = document.createElement("input");
cancel.type = "button";
cancel.id = "cancel";
cancel.value = "cancel";
cancel.onclick = function() { hide_action_form(); };
form.appendChild(cancel);
};
var show_select_form = function() {
var form = document.getElementById("action_form");
var fieldset = document.createElement("fieldset");
fieldset.id = "selects";
var fieldset = document.createElement("fieldset");
var legend = document.createElement("legend");
legend.innerHTML = "Choose one of select queries: ";
fieldset.appendChild(legend);
var create_option = function(labeltext, id) {
var option = document.createElement("input");
option.type = "radio";
option.name = "select_query";
option.id = id
var label = document.createElement("label");
label.setAttribute('for', id);
label.innerHTML = labeltext
fieldset.appendChild(option);
fieldset.appendChild(label);
var linebreak = document.createElement("br");
fieldset.appendChild(linebreak);
};
create_option('SELECT all records', 'opt1');
create_option('SELECT all records with date from to', 'opt2');
create_option('SELECT all records with amount from to', 'opt3');
create_option('SELECT all records with description, which contains', 'opt4');
create_option('SELECT all income records', 'opt5');
create_option('SELECT all outcome records', 'opt6');
form.appendChild(fieldset);
var br = document.createElement("br");
form.appendChild(br);
var submit = document.createElement("input");
submit.type = "submit";
submit.id = "submit";
submit.value = "submit";
form.appendChild(submit);
var cancel = document.createElement("input");
cancel.type = "button";
cancel.id = "cancel";
cancel.value = "cancel";
cancel.onclick = function() { hide_action_form(); };
form.appendChild(cancel);
};
var hide_action_form = function() {
document.getElementById("action_form").innerHTML = "";
};