1 files changed, 73 insertions, 2 deletions

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) {