diff options
| -rw-r--r-- | day9/task5/index.html | 335 |
1 files changed, 299 insertions, 36 deletions
diff --git a/day9/task5/index.html b/day9/task5/index.html index 798fb92..1e7c9a5 100644 --- a/day9/task5/index.html +++ b/day9/task5/index.html @@ -3,6 +3,8 @@ <head> <meta charset="UTF-8"> <title>"table_task1" table view</title> + + <!-- table styling--> <style type="text/css"> table { border-spacing: 0; @@ -22,17 +24,71 @@ } </style> + <!-- form styling--> <style type="text/css"> + .formRow { + width: 100%; + display: flex; + flex-direction: column; + } + + .formRow-label { + font-size: 13px; + color: #404040; + } + + .formRow-input > input, .formRow-input > select { + margin: 3px; + width: 100%; + border-radius: 5px; + border: none; + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); + padding: 5px; + + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + } + + .formRow-input > input:disabled { + background-color: #bebebe; + color: #4b4b4b; + } + .formInput[type="date"], .formInput[type="time"] { - padding: 7px; - font-size: 1.3em; + padding: 5px; + font-size: 1.1em; + } + + .formRow-input > select:hover, .formRow-input > input:not([disabled]):hover { + background-color: #fbfbfb; + } + + .formButtons { + display: flex; + flex-direction: row; + margin-top: 5px; + } + + .formButtons > button { + margin: 5px; + width: 50%; + padding: 5px; + border: none; + border-radius: 7px; + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4); } - .formInput { - margin: 3px 0; + .formButtons > button:hover { + background-color: #dadada; + } + + .formButtons > button:focus { + background-color: #d5d5d5; } </style> + <!-- table fields styling--> <style type="text/css"> .odd { background-color: #dedede; } .even { background-color: #c5c5c5; } @@ -41,44 +97,88 @@ background-color: rgba(0, 0, 0, 0.3); } </style> + + <!-- content box styling--> + <style type="text/css"> + .contentBox { + padding: 20px; + width: 500px; + height: 520px; + background-color: #f0f0f0; + border-radius: 10px; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); + } + + .backgroundTint { + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.6); + } + + .shown { + display: inline; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .hidden { + display: none; + } + </style> + + <!-- add new entry styling--> + <style type="text/css"> + .newEntryBtn { + overflow: hidden; + white-space: nowrap; + + position: fixed; + bottom: 50px; + left: 50px; + + padding: 5px; + border-radius: 20px; + width: 40px; + height: 40px; + border: none; + background-color: #2871e2; + color: white; + font-size: 20px; + + transition-property: width, font-size; + transition-duration: 0.6s; + } + + .newEntryBtn:hover { + width: 150px; + font-size: 15px; + background-color: #286bd6; + } + + .newEntryBtn:focus { + width: 200px; + font-size: 15px; + background-color: #2861c3; + } + </style> </head> <body onload="onPageLoad()"> - <div> - <form action="/update"> - <label> service_id <input type="text" name="service_id" class="formInput" disabled></label> <br> - <label> servtype <input type="text" name="servtype" class="formInput"></label> <br> - <label> subtype <input type="text" name="subtype" class="formInput"></label> <br> - <label> user_id <input type="text" name="user_id" class="formInput"></label> <br> - <label> referrer_user_id <input type="text" name="referrer_user_id" class="formInput"></label> <br> - <label> - state - <select name="state"> - <option>N</option> - <option>A</option> - <option>S</option> - <option>D</option> - <option>O</option> - </select> - </label><br> - <label> creation_date <input type="date" name="creation_date" class="formInput"></label> <br> - <label> creation_time <input type="time" name="creation_time" class="formInput"></label> <br> - <label> - creation_request_sent_date - <input type="date" name="creation_request_sent_date" class="formInput"> - <input type="time" name="creation_request_sent_time" class="formInput"> - </label> <br> - <label> - notified_about_expiration - <input type="text" name="notified_about_expiration" class="formInput"> - </label> <br> - - <button type="submit">Submit</button> - </form> + <div id="backgroundTint" class="backgroundTint hidden"> + <div id="contentBox" class="contentBox hidden"></div> </div> <table id="table"></table> + <button type="button" class="newEntryBtn" id="newEntryBtn" + onclick="showCreateForm()" + onmouseenter="addNewRowOnHover()" + onmouseleave="addNewRowOnEndHover()" + > + </button> + </div> + <script> const request = { get: function (url, callback) { @@ -128,6 +228,96 @@ 'notified_about_expiration': `<input type="text">` }; + const baseFormFields = `<form id="tableForm" action="/update"> + <div class="formRow"> + <div class="formRow-label">service_id</div> + <div class="formRow-input"><input type="text" name="service_id" class="formInput" disabled></div> + </div><div class="formRow"> + <div class="formRow-label"> servtype </div> + <div class="formRow-input"> + <input type="text" name="servtype" class="formInput"> + </div> + </div> + + <div class="formRow"> + <div class="formRow-label"> subtype </div> + <div class="formRow-input"> + <input type="text" name="subtype" class="formInput"> + </div> + </div> + + <div class="formRow"> + <div class="formRow-label"> user_id </div> + <div class="formRow-input"> + <input type="text" name="user_id" class="formInput"> + </div> + </div> + + <div class="formRow"> + <div class="formRow-label"> referrer_user_id </div> + <div class="formRow-input"> + <input type="text" name="referrer_user_id" class="formInput"> + </div> + </div> + + <div class="formRow"> + <div class="formRow-label"> state </div> + <div class="formRow-input"> + <select name="state"> + <option>N</option> + <option>A</option> + <option>S</option> + <option>D</option> + <option>O</option> + </select> + </div> + </div> + + <div class="formRow"> + <div class="formRow-label"> creation_date </div> + <div class="formRow-input"> + <input type="date" name="creation_date" class="formInput"> + </div> + </div> + <div class="formRow"> + <div class="formRow-label"> creation_time </div> + <div class="formRow-input"> + <input type="time" name="creation_time" class="formInput"> + </div> + </div> + + <div class="formRow"> + <div class="formRow-label"> creation_request_sent_date </div> + <div class="formRow-input" style="display: flex; flex-direction: row"> + <input type="date" name="creation_request_sent_date" class="formInput" style="width: 50%;"> + <input type="time" name="creation_request_sent_time" class="formInput" style="width: 50%;"> + </div> + </div> + + <div class="formRow"> + <div class="formRow-label"> notified_about_expiration </div> + <div class="formRow-input"> + <input type="text" name="notified_about_expiration" class="formInput"> + </div> + </div> + </form>`; + + const formCreateButtons = `<div class="formButtons"> + <button type="button" onclick="hideForm()">Cancel</button> + <button type="submit">Create</button> + </div>`; + + const formEditButtons = `<div class="formButtons"> + <button type="button" onclick="hideForm()">Cancel</button> + <button type="submit">Update</button> + </div>`; + + function elementFromHTML(html) { + let elem = document.createElement('div'); + elem.innerHTML = html; + return elem.firstChild; + } + function onPageLoad() { request.post('http://localhost:8000/get', renderTable, {'type': 'full'}); } @@ -189,6 +379,8 @@ row.push(`<button value="${row[0]}" onclick="removeField('${row[0]}')">✖</button>`); let contentRow = document.createElement('tr'); + contentRow.setAttribute('id', `row_${row[0]}`); + row.forEach((column, colIndex) => { let color = (colIndex % 2 + rowIndex % 2) % 2 === 0 ? 'odd' : 'even'; let columnNode = document.createElement('td'); @@ -213,6 +405,7 @@ } function setupEditFields(service_id) { + showEditForm(); request.post('http://localhost:8000/get', (text) => { let row = JSON.parse(text); @@ -229,7 +422,77 @@ } function removeField(service_id) { - console.log(service_id); + let tableBody = document.getElementById('table').childNodes[1]; + for (let node of tableBody.childNodes) { + if (node.getAttribute('id') === `row_${service_id}`) { + tableBody.removeChild(node); + break + } + } + } + + function showContentBox() { + let elem = document.getElementById('backgroundTint'); + elem.classList.remove('hidden'); + elem.classList.add('shown'); + + elem = document.getElementById('contentBox'); + elem.classList.remove('hidden'); + elem.classList.add('shown'); + } + + function hideContentBox() { + let elem = document.getElementById('backgroundTint'); + elem.classList.remove('shown'); + elem.classList.add('hidden'); + + elem = document.getElementById('contentBox'); + elem.classList.remove('shown'); + elem.classList.add('hidden'); + } + + function showForm() { + let newEntryBtn = document.getElementById('newEntryBtn'); + newEntryBtn.style.display = 'none'; + + showContentBox(); + let contentBox = document.getElementById('contentBox'); + while (contentBox.firstChild) + contentBox.removeChild(contentBox.firstChild); + + contentBox.appendChild(elementFromHTML(baseFormFields)); + return contentBox; + } + + showEditForm = () => { + let contentBox = showForm(); + contentBox.appendChild(elementFromHTML(formEditButtons)); + }; + + showCreateForm = () => { + let contentBox = showForm(); + contentBox.appendChild(elementFromHTML(formCreateButtons)); + }; + + function hideForm() { + let newEntryBtn = document.getElementById('newEntryBtn'); + newEntryBtn.style.display = 'inline'; + + let contentBox = document.getElementById('contentBox'); + while (contentBox.firstChild) + contentBox.removeChild(contentBox.firstChild); + + hideContentBox(); + } + + function addNewRowOnHover() { + let btn = document.getElementById('newEntryBtn'); + btn.innerText = 'Add new row'; + } + + function addNewRowOnEndHover() { + let btn = document.getElementById('newEntryBtn'); + btn.innerText = '+'; } </script> </body> |