diff options
Diffstat (limited to 'day9/task5/static/js')
| -rw-r--r-- | day9/task5/static/js/constants.js | 135 | ||||
| -rw-r--r-- | day9/task5/static/js/editForm.js | 56 | ||||
| -rw-r--r-- | day9/task5/static/js/main.js | 276 | ||||
| -rw-r--r-- | day9/task5/static/js/overlayButtonsCallbacks.js | 24 | ||||
| -rw-r--r-- | day9/task5/static/js/tableCallbacks.js | 45 | ||||
| -rw-r--r-- | day9/task5/static/js/utils.js | 5 |
6 files changed, 268 insertions, 273 deletions
diff --git a/day9/task5/static/js/constants.js b/day9/task5/static/js/constants.js new file mode 100644 index 0000000..7078fb4 --- /dev/null +++ b/day9/task5/static/js/constants.js @@ -0,0 +1,135 @@ +const request = { + get: function (url, callback) { + let xmlHttp = new XMLHttpRequest(); + xmlHttp.onreadystatechange = function() { + if (xmlHttp.readyState === 4 && xmlHttp.status === 200) + callback(xmlHttp.responseText); + }; + xmlHttp.open("GET", url, true); + xmlHttp.send(); + }, + + post: function (url, callback, data) { + let xmlHttp = new XMLHttpRequest(); + xmlHttp.onreadystatechange = function() { + if (xmlHttp.readyState === 4 && xmlHttp.status === 200) + callback(xmlHttp.responseText); + }; + xmlHttp.open("POST", url, true); + xmlHttp.send(this.formatParams(data)); + }, + + formatParams: function (params) { + return Object.keys(params).map((key) => { + return key+"="+encodeURIComponent(params[key]) + }).join("&") + } + }; + +const defaultColumnInputs = { + 'service_id': `<input type="text">`, + 'servtype': `<input type="text">`, + 'subtype': `<input type="text">`, + 'user_id': `<input type="text">`, + 'referrer_user_id': `<input type="text">`, + 'state': `<select> + <option>N</option> + <option>A</option> + <option>S</option> + <option>D</option> + <option>O</option> + </select>`, + + 'creation_date': `<input type="date">`, + 'creation_time': `<input type="time">`, + 'creation_request_sent_date': `<input type="date"><input type="time">`, + 'notified_about_expiration': `<input type="text">` +}; + +const baseFormFields = `<form id="tableForm" action="/api/update" method="post"> + <div class="formRow"> + <div class="formRow-label">service_id</div> + <div class="formRow-input"><input type="text" name="service_id" class="formInput" id="formServiceId" 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>`; + +const uploadFileHtml = '<img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;">'; diff --git a/day9/task5/static/js/editForm.js b/day9/task5/static/js/editForm.js new file mode 100644 index 0000000..f3f2bd8 --- /dev/null +++ b/day9/task5/static/js/editForm.js @@ -0,0 +1,56 @@ +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; +} + +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 showEditForm() { + let contentBox = showForm(); + contentBox.firstChild.appendChild(elementFromHTML(formEditButtons)); + contentBox.firstChild.action = '/api/update'; +} + +function showCreateForm() { + let contentBox = showForm(); + contentBox.firstChild.appendChild(elementFromHTML(formCreateButtons)); + contentBox.firstChild.action = '/api/add'; + document.getElementById('formServiceId').disabled = false; +} diff --git a/day9/task5/static/js/main.js b/day9/task5/static/js/main.js index 2ac3958..2a45341 100644 --- a/day9/task5/static/js/main.js +++ b/day9/task5/static/js/main.js @@ -1,145 +1,3 @@ -const request = { - get: function (url, callback) { - let xmlHttp = new XMLHttpRequest(); - xmlHttp.onreadystatechange = function() { - if (xmlHttp.readyState === 4 && xmlHttp.status === 200) - callback(xmlHttp.responseText); - }; - xmlHttp.open("GET", url, true); - xmlHttp.send(); - }, - - post: function (url, callback, data) { - let xmlHttp = new XMLHttpRequest(); - xmlHttp.onreadystatechange = function() { - if (xmlHttp.readyState === 4 && xmlHttp.status === 200) - callback(xmlHttp.responseText); - }; - xmlHttp.open("POST", url, true); - xmlHttp.send(this.formatParams(data)); - }, - - formatParams: function (params) { - return Object.keys(params).map((key) => { - return key+"="+encodeURIComponent(params[key]) - }).join("&") - } - }; - -const defaultColumnInputs = { - 'service_id': `<input type="text">`, - 'servtype': `<input type="text">`, - 'subtype': `<input type="text">`, - 'user_id': `<input type="text">`, - 'referrer_user_id': `<input type="text">`, - 'state': `<select> - <option>N</option> - <option>A</option> - <option>S</option> - <option>D</option> - <option>O</option> - </select>`, - - 'creation_date': `<input type="date">`, - 'creation_time': `<input type="time">`, - 'creation_request_sent_date': `<input type="date"><input type="time">`, - 'notified_about_expiration': `<input type="text">` -}; - -const baseFormFields = `<form id="tableForm" action="/api/update" method="post"> - <div class="formRow"> - <div class="formRow-label">service_id</div> - <div class="formRow-input"><input type="text" name="service_id" class="formInput" id="formServiceId" 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>`; - -const uploadFileHtml = '<img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;">'; - -function elementFromHTML(html) { - let elem = document.createElement('div'); - elem.innerHTML = html; - return elem.firstChild; -} - function onPageLoad() { request.post(`${HOST}/get`, renderTable, {'type': 'full'}); @@ -147,41 +5,6 @@ function onPageLoad() { btn.innerHTML = uploadFileHtml; } -function onFieldClick(fieldId) { - let fieldElement = document.getElementById(fieldId); - - if (fieldElement.firstChild.nodeName !== 'INPUT' && fieldElement.firstChild.nodeName !== 'SELECT') { - let [columnName, serviceId] = fieldId.split('-'); - fieldElement.innerHTML = defaultColumnInputs[columnName]; - if (columnName === 'creation_request_sent_date') { - let dateElement = fieldElement.firstChild; - let timeElement = fieldElement.childNodes[1]; - - dateElement.onkeyup = timeElement.onkeyup = (event) => { - if (event.code === 'Enter') { - if (dateElement.value !== '' && timeElement.value !== '') - fieldEditSubmit(fieldId, `${dateElement.value} ${timeElement.value}`); - } - }; - } - else { - let inputElement = fieldElement.firstChild; - inputElement.onkeyup = (event) => { - if (event.code === 'Enter') - fieldEditSubmit(fieldId, inputElement.value); - }; - } - } -} - -function fieldEditSubmit(fieldId, value) { - let [columnName, serviceId] = fieldId.split('-'); - request.post(`${HOST}/api/update`, () => {}, { - 'service_id': serviceId, [columnName]: value - }); - document.getElementById(fieldId).innerHTML = value; -} - function renderTable(text) { let data = JSON.parse(text); @@ -201,8 +24,8 @@ function renderTable(text) { headerRow.appendChild(document.createElement('th')); let tableContent = document.createElement('tbody'); - data['content'].forEach((row, rowIndex) => { - row.push(`<button value="${row[0]}" onclick="setupEditFields('${row[0]}')">✎</button>`); + data['content'].forEach((row) => { + row.push(`<button value="${row[0]}" onclick="setupEditFormFields('${row[0]}')">✎</button>`); row.push(`<button value="${row[0]}" onclick="removeField('${row[0]}')">✖</button>`); let contentRow = document.createElement('tr'); @@ -229,7 +52,7 @@ function renderTable(text) { table.appendChild(tableContent); } -function setupEditFields(service_id) { +function setupEditFormFields(service_id) { showEditForm(); request.post(`${HOST}/get`, (text) => { let row = JSON.parse(text); @@ -245,96 +68,3 @@ function setupEditFields(service_id) { 'type': 'single_id', 'service_id': service_id }); } - -function removeField(service_id) { - request.post(`${HOST}/api/delete`, () => {}, {'service_id': 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.firstChild.appendChild(elementFromHTML(formEditButtons)); - contentBox.firstChild.action = '/api/update'; -}; - -showCreateForm = () => { - let contentBox = showForm(); - contentBox.firstChild.appendChild(elementFromHTML(formCreateButtons)); - contentBox.firstChild.action = '/api/add'; - document.getElementById('formServiceId').disabled = false; -}; - -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 = '+'; -} - -function uploadFileOnHover() { - let btn = document.getElementById('uploadFileBtn'); - btn.innerHTML = 'Upload File'; -} - -function uploadFileOnEndHover() { - let btn = document.getElementById('uploadFileBtn'); - btn.innerHTML = uploadFileHtml; -} - -function triggerUploadFile() { - let fileInput = document.getElementById('csvFileInput'); - fileInput.click() -} diff --git a/day9/task5/static/js/overlayButtonsCallbacks.js b/day9/task5/static/js/overlayButtonsCallbacks.js new file mode 100644 index 0000000..dd38b7d --- /dev/null +++ b/day9/task5/static/js/overlayButtonsCallbacks.js @@ -0,0 +1,24 @@ +function addNewRowOnHover() { + let btn = document.getElementById('newEntryBtn'); + btn.innerText = 'Add new row'; +} + +function addNewRowOnEndHover() { + let btn = document.getElementById('newEntryBtn'); + btn.innerText = '+'; +} + +function uploadFileOnHover() { + let btn = document.getElementById('uploadFileBtn'); + btn.innerHTML = 'Upload File'; +} + +function uploadFileOnEndHover() { + let btn = document.getElementById('uploadFileBtn'); + btn.innerHTML = uploadFileHtml; +} + +function triggerUploadFile() { + let fileInput = document.getElementById('csvFileInput'); + fileInput.click() +} diff --git a/day9/task5/static/js/tableCallbacks.js b/day9/task5/static/js/tableCallbacks.js new file mode 100644 index 0000000..252e429 --- /dev/null +++ b/day9/task5/static/js/tableCallbacks.js @@ -0,0 +1,45 @@ +function onFieldClick(fieldId) { + let fieldElement = document.getElementById(fieldId); + + if (fieldElement.firstChild.nodeName !== 'INPUT' && fieldElement.firstChild.nodeName !== 'SELECT') { + let [columnName, serviceId] = fieldId.split('-'); + fieldElement.innerHTML = defaultColumnInputs[columnName]; + if (columnName === 'creation_request_sent_date') { + let dateElement = fieldElement.firstChild; + let timeElement = fieldElement.childNodes[1]; + + dateElement.onkeyup = timeElement.onkeyup = (event) => { + if (event.code === 'Enter') { + if (dateElement.value !== '' && timeElement.value !== '') + fieldEditSubmit(fieldId, `${dateElement.value} ${timeElement.value}`); + } + }; + } + else { + let inputElement = fieldElement.firstChild; + inputElement.onkeyup = (event) => { + if (event.code === 'Enter') + fieldEditSubmit(fieldId, inputElement.value); + }; + } + } +} + +function fieldEditSubmit(fieldId, value) { + let [columnName, serviceId] = fieldId.split('-'); + request.post(`${HOST}/api/update`, () => {}, { + 'service_id': serviceId, [columnName]: value + }); + document.getElementById(fieldId).innerHTML = value; +} + +function removeField(service_id) { + request.post(`${HOST}/api/delete`, () => {}, {'service_id': 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 + } + } +} diff --git a/day9/task5/static/js/utils.js b/day9/task5/static/js/utils.js new file mode 100644 index 0000000..5d60723 --- /dev/null +++ b/day9/task5/static/js/utils.js @@ -0,0 +1,5 @@ +function elementFromHTML(html) { + let elem = document.createElement('div'); + elem.innerHTML = html; + return elem.firstChild; +} |