diff options
Diffstat (limited to 'day9/task5/static')
| -rw-r--r-- | day9/task5/static/css/ContentBoxStyle.css | 26 | ||||
| -rw-r--r-- | day9/task5/static/css/FormStyle.css | 61 | ||||
| -rw-r--r-- | day9/task5/static/css/NewEntryStyle.css | 38 | ||||
| -rw-r--r-- | day9/task5/static/css/TableStyle.css | 22 | ||||
| -rw-r--r-- | day9/task5/static/images/upload_icon.png | bin | 57506 -> 0 bytes | |||
| -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 |
11 files changed, 0 insertions, 536 deletions
diff --git a/day9/task5/static/css/ContentBoxStyle.css b/day9/task5/static/css/ContentBoxStyle.css deleted file mode 100644 index abe9ee1..0000000 --- a/day9/task5/static/css/ContentBoxStyle.css +++ /dev/null @@ -1,26 +0,0 @@ -.contentBox { - padding: 20px; - width: 500px; - height: 695px; - 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; -}
\ No newline at end of file diff --git a/day9/task5/static/css/FormStyle.css b/day9/task5/static/css/FormStyle.css deleted file mode 100644 index 63e51dd..0000000 --- a/day9/task5/static/css/FormStyle.css +++ /dev/null @@ -1,61 +0,0 @@ -.formRow { - width: 100%; - display: flex; - flex-direction: column; -} - -.formRow-label { - font-size: 20px; - 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; - font-size: 1.4em; - - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.formRow-input > input[readonly="readonly"] { - background-color: #bebebe; - color: #4b4b4b; -} - -.formInput[type="date"], .formInput[type="time"] { - padding: 5px; - font-size: 1.6em; -} - -.formRow-input > select:hover, .formRow-input > input:not([readonly="readonly"]):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); -} - -.formButtons > button:hover { - background-color: #dadada; -} - -.formButtons > button:focus { - background-color: #d5d5d5; -}
\ No newline at end of file diff --git a/day9/task5/static/css/NewEntryStyle.css b/day9/task5/static/css/NewEntryStyle.css deleted file mode 100644 index be2a4f0..0000000 --- a/day9/task5/static/css/NewEntryStyle.css +++ /dev/null @@ -1,38 +0,0 @@ -.fixedButton { - overflow: hidden; - white-space: nowrap; - - position: fixed; - - padding: 5px; - border-radius: 50px; - width: 100px; - height: 100px; - border: none; - background-color: #2871e2; - color: white; - font-size: 45px; - - transition-property: width; - transition-duration: 0.6s; -} - -.fixedButton:hover { - width: 300px; - font-size: 30px; - background-color: #286bd6; -} - -.fixedButton:focus { - background-color: #2861c3; -} - -.newEntryBtn { - bottom: 50px; - left: 50px; -} - -.uploadFileBtn { - bottom: 175px; - left: 50px; -} diff --git a/day9/task5/static/css/TableStyle.css b/day9/task5/static/css/TableStyle.css deleted file mode 100644 index 0631fbe..0000000 --- a/day9/task5/static/css/TableStyle.css +++ /dev/null @@ -1,22 +0,0 @@ -table { - border-spacing: 0; - padding: 0; - border: 1px solid black; -} - -thead > tr > th { - padding: 6px; - font-size: 24px; - background-color: #d5d5d5; - border: 1px black solid; -} - -td { - padding: 8px; - font-size: 21px; - border: 1px black solid; -} - -.editableField:hover { - background-color: rgba(0, 0, 0, 0.1); -} diff --git a/day9/task5/static/images/upload_icon.png b/day9/task5/static/images/upload_icon.png Binary files differdeleted file mode 100644 index 7d27fb5..0000000 --- a/day9/task5/static/images/upload_icon.png +++ /dev/null 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; -} |