diff options
Diffstat (limited to 'day9/task5/static/js')
| -rw-r--r-- | day9/task5/static/js/config.js | 2 | ||||
| -rw-r--r-- | day9/task5/static/js/editForm.js | 142 | ||||
| -rw-r--r-- | day9/task5/static/js/main.js | 70 | ||||
| -rw-r--r-- | day9/task5/static/js/overlayButtonsCallbacks.js | 26 | ||||
| -rw-r--r-- | day9/task5/static/js/tableCallbacks.js | 116 | ||||
| -rw-r--r-- | day9/task5/static/js/utils.js | 33 |
6 files changed, 0 insertions, 389 deletions
diff --git a/day9/task5/static/js/config.js b/day9/task5/static/js/config.js deleted file mode 100644 index 080060e..0000000 --- a/day9/task5/static/js/config.js +++ /dev/null @@ -1,2 +0,0 @@ -// HOST = 'http://localhost:8000'; -HOST = ''; diff --git a/day9/task5/static/js/editForm.js b/day9/task5/static/js/editForm.js deleted file mode 100644 index f371664..0000000 --- a/day9/task5/static/js/editForm.js +++ /dev/null @@ -1,142 +0,0 @@ -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" readonly="readonly"></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 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 deleted file mode 100644 index 2a45341..0000000 --- a/day9/task5/static/js/main.js +++ /dev/null @@ -1,70 +0,0 @@ -function onPageLoad() { - request.post(`${HOST}/get`, renderTable, {'type': 'full'}); - - let btn = document.getElementById('uploadFileBtn'); - btn.innerHTML = uploadFileHtml; -} - -function renderTable(text) { - let data = JSON.parse(text); - - let table = document.getElementById('table'); - - while (table.firstChild) table.removeChild(table.firstChild); - - let tableHeaders = document.createElement('thead'); - let headerRow = document.createElement('tr'); - tableHeaders.appendChild(headerRow); - data['headers'].forEach((field) => { - let header = document.createElement('th'); - header.innerText = field; - headerRow.appendChild(header); - }); - headerRow.appendChild(document.createElement('th')); - headerRow.appendChild(document.createElement('th')); - - let tableContent = document.createElement('tbody'); - 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'); - contentRow.setAttribute('id', `row_${row[0]}`); - - row.forEach((column, colIndex) => { - let columnNode = document.createElement('td'); - - if (colIndex !== 0 && colIndex < data['headers'].length) { - let fieldId = `${data['headers'][colIndex]}-${row[0]}`; - columnNode.classList.add('editableField'); - columnNode.onclick = () => { onFieldClick(fieldId) }; - columnNode.setAttribute('id', fieldId); - } - - columnNode.innerHTML = column; - contentRow.appendChild(columnNode); - }); - - tableContent.appendChild(contentRow); - }); - - table.appendChild(tableHeaders); - table.appendChild(tableContent); -} - -function setupEditFormFields(service_id) { - showEditForm(); - request.post(`${HOST}/get`, (text) => { - let row = JSON.parse(text); - - Object.keys(row).forEach((element) => { - document.getElementsByName(element)[0].value = row[element]; - }); - - let [sent_date, sent_time] = row['creation_request_sent_date'].split(' '); - document.getElementsByName('creation_request_sent_date')[0].value = sent_date; - document.getElementsByName('creation_request_sent_time')[0].value = sent_time; - }, { - 'type': 'single_id', 'service_id': service_id - }); -} diff --git a/day9/task5/static/js/overlayButtonsCallbacks.js b/day9/task5/static/js/overlayButtonsCallbacks.js deleted file mode 100644 index 866a302..0000000 --- a/day9/task5/static/js/overlayButtonsCallbacks.js +++ /dev/null @@ -1,26 +0,0 @@ -const uploadFileHtml = '<img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;">'; - -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 deleted file mode 100644 index d024d16..0000000 --- a/day9/task5/static/js/tableCallbacks.js +++ /dev/null @@ -1,116 +0,0 @@ -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">` -}; - -function onFieldClick(fieldId) { - let fieldElement = document.getElementById(fieldId); - fieldElement.onclick = () => {}; - - if (fieldElement.firstChild.nodeName !== 'INPUT' && fieldElement.firstChild.nodeName !== 'SELECT') { - let [columnName, serviceId] = fieldId.split('-'); - let previousValue = fieldElement.innerText; - - fieldElement.innerHTML = defaultColumnInputs[columnName]; - let submitBtn = elementFromHTML('<button type="button">Submit</button>'); - let cancelBtn = elementFromHTML('<button type="button">✖</button>'); - - fieldElement.appendChild(submitBtn); - fieldElement.appendChild(cancelBtn); - - if (columnName === 'creation_request_sent_date') { - let dateElement = fieldElement.firstChild; - let timeElement = fieldElement.childNodes[1]; - - submitBtn.onclick = () => fieldEditSubmitBtn(fieldId, `${dateElement.value} ${timeElement.value}`); - cancelBtn.onclick = () => fieldEditCancelBtn(fieldId, previousValue); - - dateElement.onkeyup = timeElement.onkeyup = (event) => { - if (event.code === 'Enter') { - if (dateElement.value !== '' && timeElement.value !== '') - fieldEditSubmit(fieldId, `${dateElement.value} ${timeElement.value}`); - } - else if (event.code === 'Escape') - fieldEditCancel(fieldId, previousValue); - }; - } - else { - let inputElement = fieldElement.firstChild; - - submitBtn.onclick = () => fieldEditSubmitBtn(fieldId, inputElement.value); - cancelBtn.onclick = () => fieldEditCancelBtn(fieldId, previousValue); - - inputElement.onkeyup = (event) => { - if (event.code === 'Enter') - fieldEditSubmit(fieldId, inputElement.value); - else if (event.code === 'Escape') - fieldEditCancel(fieldId, previousValue); - }; - } - } -} - -function _fieldEditSubmit(fieldId, value) { - let [columnName, serviceId] = fieldId.split('-'); - request.post(`${HOST}/api/update`, () => {}, { - 'service_id': serviceId, [columnName]: value - }); -} - -function fieldEditSubmit(fieldId, value) { - _fieldEditSubmit(fieldId, value); - - let fieldElement = document.getElementById(fieldId); - fieldElement.innerHTML = value; - fieldElement.onclick = () => onFieldClick(fieldId); -} - -function fieldEditSubmitBtn(fieldId, value) { - _fieldEditSubmit(fieldId, value); - - let fieldElement = document.getElementById(fieldId); - fieldElement.innerHTML = value; - fieldElement.onclick = () => { - fieldElement.onclick = () => onFieldClick(fieldId); - } -} - -function fieldEditCancel(fieldId, value) { - let fieldElement = document.getElementById(fieldId); - fieldElement.innerHTML = value; - fieldElement.onclick = () => onFieldClick(fieldId); -} - -function fieldEditCancelBtn(fieldId, value) { - let fieldElement = document.getElementById(fieldId); - fieldElement.innerHTML = value; - fieldElement.onclick = () => { - fieldElement.onclick = () => onFieldClick(fieldId); - } -} - -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 deleted file mode 100644 index d76c547..0000000 --- a/day9/task5/static/js/utils.js +++ /dev/null @@ -1,33 +0,0 @@ -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("&") - } - }; - -function elementFromHTML(html) { - let elem = document.createElement('div'); - elem.innerHTML = html; - return elem.firstChild; -} |