From 323563cedae50dad25c531e90fcda17f9e459feb Mon Sep 17 00:00:00 2001 From: Andrew Date: Mon, 8 Jul 2019 14:54:52 +0400 Subject: =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=20=D0=BA=D0=BE=D0=B4=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F=20=D0=BF=D0=BE=D0=BB=D0=B5=D0=B9.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- day9/task5/index.html | 1 - day9/task5/static/js/constants.js | 135 ------------------------ day9/task5/static/js/editForm.js | 86 +++++++++++++++ day9/task5/static/js/overlayButtonsCallbacks.js | 2 + day9/task5/static/js/tableCallbacks.js | 75 ++++++++++++- day9/task5/static/js/utils.js | 28 +++++ 6 files changed, 189 insertions(+), 138 deletions(-) delete mode 100644 day9/task5/static/js/constants.js diff --git a/day9/task5/index.html b/day9/task5/index.html index f059911..eca610b 100644 --- a/day9/task5/index.html +++ b/day9/task5/index.html @@ -37,7 +37,6 @@ - diff --git a/day9/task5/static/js/constants.js b/day9/task5/static/js/constants.js deleted file mode 100644 index 7078fb4..0000000 --- a/day9/task5/static/js/constants.js +++ /dev/null @@ -1,135 +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("&") - } - }; - -const defaultColumnInputs = { - 'service_id': ``, - 'servtype': ``, - 'subtype': ``, - 'user_id': ``, - 'referrer_user_id': ``, - 'state': ``, - - 'creation_date': ``, - 'creation_time': ``, - 'creation_request_sent_date': ``, - 'notified_about_expiration': `` -}; - -const baseFormFields = `
-
-
service_id
-
-
- -
-
servtype
-
- -
-
- -
-
subtype
-
- -
-
- -
-
user_id
-
- -
-
- -
-
referrer_user_id
-
- -
-
- -
-
state
-
- -
-
- -
-
creation_date
-
- -
-
-
-
creation_time
-
- -
-
- -
-
creation_request_sent_date
-
- - -
-
- -
-
notified_about_expiration
-
- -
-
-
`; - -const formCreateButtons = `
- - -
`; - -const formEditButtons = `
- - -
`; - -const uploadFileHtml = ''; diff --git a/day9/task5/static/js/editForm.js b/day9/task5/static/js/editForm.js index f3f2bd8..8107159 100644 --- a/day9/task5/static/js/editForm.js +++ b/day9/task5/static/js/editForm.js @@ -1,3 +1,89 @@ +const baseFormFields = `
+
+
service_id
+
+
+ +
+
servtype
+
+ +
+
+ +
+
subtype
+
+ +
+
+ +
+
user_id
+
+ +
+
+ +
+
referrer_user_id
+
+ +
+
+ +
+
state
+
+ +
+
+ +
+
creation_date
+
+ +
+
+
+
creation_time
+
+ +
+
+ +
+
creation_request_sent_date
+
+ + +
+
+ +
+
notified_about_expiration
+
+ +
+
+
`; + +const formCreateButtons = `
+ + +
`; + +const formEditButtons = `
+ + +
`; + function showContentBox() { let elem = document.getElementById('backgroundTint'); elem.classList.remove('hidden'); diff --git a/day9/task5/static/js/overlayButtonsCallbacks.js b/day9/task5/static/js/overlayButtonsCallbacks.js index dd38b7d..866a302 100644 --- a/day9/task5/static/js/overlayButtonsCallbacks.js +++ b/day9/task5/static/js/overlayButtonsCallbacks.js @@ -1,3 +1,5 @@ +const uploadFileHtml = ''; + function addNewRowOnHover() { let btn = document.getElementById('newEntryBtn'); btn.innerText = 'Add new row'; diff --git a/day9/task5/static/js/tableCallbacks.js b/day9/task5/static/js/tableCallbacks.js index 252e429..52296fd 100644 --- a/day9/task5/static/js/tableCallbacks.js +++ b/day9/task5/static/js/tableCallbacks.js @@ -1,36 +1,107 @@ +const defaultColumnInputs = { + 'service_id': ``, + 'servtype': ``, + 'subtype': ``, + 'user_id': ``, + 'referrer_user_id': ``, + 'state': ``, + + 'creation_date': ``, + 'creation_time': ``, + 'creation_request_sent_date': ``, + 'notified_about_expiration': `` +}; + 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(''); + let cancelBtn = elementFromHTML(''); + + 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) { +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 fieldEditSubmit(fieldId, value) { + _fieldEditSubmit(fieldId, value); + + let fieldElement = document.getElementById(fieldId); + fieldElement.innerHTML = value; + fieldElement.onclick = () => onFieldClick(fieldId); +} + +function fieldEditSubmitBtn(fieldId, value) { + _fieldEditSubmit(); + + 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) { diff --git a/day9/task5/static/js/utils.js b/day9/task5/static/js/utils.js index 5d60723..d76c547 100644 --- a/day9/task5/static/js/utils.js +++ b/day9/task5/static/js/utils.js @@ -1,3 +1,31 @@ +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; -- cgit v1.2.3