Показать сообщение отдельно
  #5 (permalink)  
Старый 26.08.2014, 00:43
Аспирант
Отправить личное сообщение для Master_Sergius Посмотреть профиль Найти все сообщения от Master_Sergius
 
Регистрация: 29.07.2014
Сообщений: 42

Ну ок, только не обращайте внимание тогда на ${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} &nbsp;<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 = "";
};
Ответить с цитированием