diff options
| author | Andrew <saintruler@gmail.com> | 2019-07-02 19:43:15 +0400 |
|---|---|---|
| committer | Andrew <saintruler@gmail.com> | 2019-07-02 19:43:15 +0400 |
| commit | 048932c01b2c3031c6f8f3738ab9066c532c317b (patch) | |
| tree | de750e1d703500484c1c708875becfd1ff03f3eb /day9/task5/index.html | |
| parent | 155aba6c88cc651d2639ff2f11b0bbdb956cd4b8 (diff) | |
WIP: Фронтенд, работа с базами данных
Diffstat (limited to 'day9/task5/index.html')
| -rw-r--r-- | day9/task5/index.html | 164 |
1 files changed, 156 insertions, 8 deletions
diff --git a/day9/task5/index.html b/day9/task5/index.html index 1785124..7d65bd9 100644 --- a/day9/task5/index.html +++ b/day9/task5/index.html @@ -1,9 +1,157 @@ -<html> - <head> - <title>Python is awesome!</title> - </head> - <body> - <h1>Afternerd</h1> - <p>Congratulations! The HTTP Server is working!</p> - </body> +<html lang="ru"> + +<head> + <meta charset="utf-8"> + <title>"table_task1" table view</title> + <style type="text/css"> + table { + border-spacing: 0; + padding: 0; + border: 1px solid black; + } + + thead > tr > th { + padding: 10px; + font-size: 20px; + background-color: #6f6f6f; + } + + td { + padding: 5px; + font-size: 17px; + } + + #table_operations { + margin: 30px; + font-size: 20px; + } + + .odd { + background-color: #dedede; + } + + .even { + background-color: #c5c5c5; + } + + .keyword { + color: blue; + } + + </style> +</head> + +<body onload="loadDefaultOperation()"> + <table> + %%heading%% + + %%body%% + </table> + + <div id="table_operations"> + <select onchange="typeChanged()" id="operation"> + <option>UPDATE</option> + <option>DELETE FROM</option> + <option>INSERT INTO</option> + </select> `table_task1`<br> + + <form method="post" action="/update" id="operation_form"> + <div id="query"></div> + <button type="submit">Выполнить запрос</button> + </form> + </div> + + <script> + let queryHTMLElements = { + 'UPDATE': ` + <input hidden name="operation" value="UPDATE"> + + <span class="keyword">SET</span><br> + + <div id="update_set"></div> + <button type="button" onclick="addUpdateSet()">Добавить условие</button><br> + + <span class="keyword">WHERE</span><br> + + <div id="conditions"></div> + <button type="button" onclick="addCondition()">Добавить условие</button> + `, + + 'DELETE FROM': ` + <input hidden name="operation" value="DELETE FROM"> + + <span class="keyword">WHERE</span><br> + + <div id="conditions"></div> + <button type="button" onclick="addCondition()">Добавить условие</button> + `, + + 'INSERT INTO': ` + <input hidden name="operation" value="INSERT INTO"> + + <span class="keyword">VALUES</span><br> + ` + }; + + const DEFAULT_OPERATION = 'UPDATE'; + + let expressionsCount = 0; + let conditionsCount = 0; + + function loadDefaultOperation() { + let query = document.getElementById('query'); + query.innerHTML = queryHTMLElements[DEFAULT_OPERATION]; + } + + function addUpdateSet() { + let element = document.createElement('div'); + + const keyName = `expression${expressionsCount}_key`; + const valueName = `expression${expressionsCount}_value`; + element.innerHTML = `<input type="text" name="${keyName}"> = <input type="text" name="${valueName}">`; + + document.getElementById('update_set').appendChild(element); + + expressionsCount++; + } + + function addCondition() { + let element = document.createElement('div'); + + const keyName = `condition${conditionsCount}_key`; + const valueName = `condition${conditionsCount}_value`; + element.innerHTML = `<input type="text" name="${keyName}"> = <input type="text" name="${valueName}">`; + + document.getElementById('conditions').appendChild(element); + + conditionsCount++; + } + + function typeChanged() { + let query = document.getElementById('query'); + let text = document.getElementById('operation').value; + query.innerHTML = queryHTMLElements[text]; + + let operationForm = document.getElementById('operation_form'); + switch (text) { + case 'UPDATE': + operationForm.method = 'POST'; + operationForm.action = '/update'; + break; + case 'DELETE FROM': + operationForm.method = 'POST'; + operationForm.action = '/delete'; + break; + case 'INSERT INTO': + operationForm.method = 'POST'; + operationForm.action = 'add'; + break; + } + + expressionsCount = 0; + conditionsCount = 0; + } + </script> +</body> + </html>
\ No newline at end of file |