From 323563cedae50dad25c531e90fcda17f9e459feb Mon Sep 17 00:00:00 2001
From: Andrew <saintruler@gmail.com>
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/static/js/tableCallbacks.js | 75 +++++++++++++++++++++++++++++++++-
 1 file changed, 73 insertions(+), 2 deletions(-)

(limited to 'day9/task5/static/js/tableCallbacks.js')

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': `<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">&#10006</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) {
+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) {
-- 
cgit v1.2.3