7 files changed, 273 insertions, 274 deletions
diff --git a/day9/task5/index.html b/day9/task5/index.html
index 84236b2..f059911 100644
--- a/day9/task5/index.html
+++ b/day9/task5/index.html
@@ -36,8 +36,12 @@
         +
     </button>
 
-
     <script src="/static/js/main.js"></script>
+    <script src="/static/js/constants.js"></script>
+    <script src="/static/js/editForm.js"></script>
+    <script src="/static/js/utils.js"></script>
+    <script src="/static/js/overlayButtonsCallbacks.js"></script>
+    <script src="/static/js/tableCallbacks.js"></script>
     <script src="/static/js/config.js"></script>
 </body>
 
diff --git a/day9/task5/static/js/constants.js b/day9/task5/static/js/constants.js
new file mode 100644
index 0000000..7078fb4
--- /dev/null
+++ b/day9/task5/static/js/constants.js
@@ -0,0 +1,135 @@
+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': `<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">`
+};
+
+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" disabled></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>`;
+
+const uploadFileHtml = '<img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;">';
diff --git a/day9/task5/static/js/editForm.js b/day9/task5/static/js/editForm.js
new file mode 100644
index 0000000..f3f2bd8
--- /dev/null
+++ b/day9/task5/static/js/editForm.js
@@ -0,0 +1,56 @@
+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
index 2ac3958..2a45341 100644
--- a/day9/task5/static/js/main.js
+++ b/day9/task5/static/js/main.js
@@ -1,145 +1,3 @@
-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': `<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">`
-};
-
-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" disabled></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>`;
-
-const uploadFileHtml = '<img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;">';
-
-function elementFromHTML(html) {
-    let elem = document.createElement('div');
-    elem.innerHTML = html;
-    return elem.firstChild;
-}
-
 function onPageLoad() {
     request.post(`${HOST}/get`, renderTable, {'type': 'full'});
 
@@ -147,41 +5,6 @@ function onPageLoad() {
     btn.innerHTML = uploadFileHtml;
 }
 
-function onFieldClick(fieldId) {
-    let fieldElement = document.getElementById(fieldId);
-
-    if (fieldElement.firstChild.nodeName !== 'INPUT' && fieldElement.firstChild.nodeName !== 'SELECT') {
-        let [columnName, serviceId] = fieldId.split('-');
-        fieldElement.innerHTML = defaultColumnInputs[columnName];
-        if (columnName === 'creation_request_sent_date') {
-            let dateElement = fieldElement.firstChild;
-            let timeElement = fieldElement.childNodes[1];
-
-            dateElement.onkeyup = timeElement.onkeyup = (event) => {
-                if (event.code === 'Enter') {
-                    if (dateElement.value !== '' && timeElement.value !== '')
-                        fieldEditSubmit(fieldId, `${dateElement.value} ${timeElement.value}`);
-                }
-            };
-        }
-        else {
-            let inputElement = fieldElement.firstChild;
-            inputElement.onkeyup = (event) => {
-                if (event.code === 'Enter')
-                    fieldEditSubmit(fieldId, inputElement.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 renderTable(text) {
     let data = JSON.parse(text);
 
@@ -201,8 +24,8 @@ function renderTable(text) {
     headerRow.appendChild(document.createElement('th'));
 
     let tableContent = document.createElement('tbody');
-    data['content'].forEach((row, rowIndex) => {
-        row.push(`<button value="${row[0]}" onclick="setupEditFields('${row[0]}')">&#9998</button>`);
+    data['content'].forEach((row) => {
+        row.push(`<button value="${row[0]}" onclick="setupEditFormFields('${row[0]}')">&#9998</button>`);
         row.push(`<button value="${row[0]}" onclick="removeField('${row[0]}')">&#10006</button>`);
 
         let contentRow = document.createElement('tr');
@@ -229,7 +52,7 @@ function renderTable(text) {
     table.appendChild(tableContent);
 }
 
-function setupEditFields(service_id) {
+function setupEditFormFields(service_id) {
     showEditForm();
     request.post(`${HOST}/get`, (text) => {
         let row = JSON.parse(text);
@@ -245,96 +68,3 @@ function setupEditFields(service_id) {
         'type': 'single_id', 'service_id': service_id
     });
 }
-
-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
-        }
-    }
-}
-
-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;
-}
-
-showEditForm = () => {
-    let contentBox = showForm();
-    contentBox.firstChild.appendChild(elementFromHTML(formEditButtons));
-    contentBox.firstChild.action = '/api/update';
-};
-
-showCreateForm = () => {
-    let contentBox = showForm();
-    contentBox.firstChild.appendChild(elementFromHTML(formCreateButtons));
-    contentBox.firstChild.action = '/api/add';
-    document.getElementById('formServiceId').disabled = false;
-};
-
-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 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/overlayButtonsCallbacks.js b/day9/task5/static/js/overlayButtonsCallbacks.js
new file mode 100644
index 0000000..dd38b7d
--- /dev/null
+++ b/day9/task5/static/js/overlayButtonsCallbacks.js
@@ -0,0 +1,24 @@
+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
new file mode 100644
index 0000000..252e429
--- /dev/null
+++ b/day9/task5/static/js/tableCallbacks.js
@@ -0,0 +1,45 @@
+function onFieldClick(fieldId) {
+    let fieldElement = document.getElementById(fieldId);
+
+    if (fieldElement.firstChild.nodeName !== 'INPUT' && fieldElement.firstChild.nodeName !== 'SELECT') {
+        let [columnName, serviceId] = fieldId.split('-');
+        fieldElement.innerHTML = defaultColumnInputs[columnName];
+        if (columnName === 'creation_request_sent_date') {
+            let dateElement = fieldElement.firstChild;
+            let timeElement = fieldElement.childNodes[1];
+
+            dateElement.onkeyup = timeElement.onkeyup = (event) => {
+                if (event.code === 'Enter') {
+                    if (dateElement.value !== '' && timeElement.value !== '')
+                        fieldEditSubmit(fieldId, `${dateElement.value} ${timeElement.value}`);
+                }
+            };
+        }
+        else {
+            let inputElement = fieldElement.firstChild;
+            inputElement.onkeyup = (event) => {
+                if (event.code === 'Enter')
+                    fieldEditSubmit(fieldId, inputElement.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 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
new file mode 100644
index 0000000..5d60723
--- /dev/null
+++ b/day9/task5/static/js/utils.js
@@ -0,0 +1,5 @@
+function elementFromHTML(html) {
+    let elem = document.createElement('div');
+    elem.innerHTML = html;
+    return elem.firstChild;
+}