WIP: Добавлена загрузка файлов.

2 files changed, 318 insertions, 0 deletions

diff --git a/day9/task5/static/js/config.js b/day9/task5/static/js/config.js
new file mode 100644
index 0000000..815f363
--- /dev/null
+++ b/day9/task5/static/js/config.js
@@ -0,0 +1 @@
+HOST = 'http://localhost:8000';
diff --git a/day9/task5/static/js/main.js b/day9/task5/static/js/main.js
new file mode 100644
index 0000000..63a025e
--- /dev/null
+++ b/day9/task5/static/js/main.js
@@ -0,0 +1,317 @@
+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="/update">
+            <div class="formRow">
+                <div class="formRow-label">service_id</div>
+                <div class="formRow-input"><input type="text" name="service_id" class="formInput" 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>`;
+
+        function elementFromHTML(html) {
+            let elem = document.createElement('div');
+            elem.innerHTML = html;
+            return elem.firstChild;
+        }
+
+        function onPageLoad() {
+            request.post(`${HOST}/get`, renderTable, {'type': 'full'});
+        }
+
+        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);
+
+            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, rowIndex) => {
+                row.push(`<button value="${row[0]}" onclick="setupEditFields('${row[0]}')">&#9998</button>`);
+                row.push(`<button value="${row[0]}" onclick="removeField('${row[0]}')">&#10006</button>`);
+
+                let contentRow = document.createElement('tr');
+                contentRow.setAttribute('id', `row_${row[0]}`);
+
+                row.forEach((column, colIndex) => {
+                    let color = (colIndex % 2 + rowIndex % 2) % 2 === 0 ? 'odd' : 'even';
+                    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.classList.add(color);
+                    columnNode.innerHTML = column;
+                    contentRow.appendChild(columnNode);
+                });
+
+                tableContent.appendChild(contentRow);
+            });
+
+            table.appendChild(tableHeaders);
+            table.appendChild(tableContent);
+        }
+
+        function setupEditFields(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
+            });
+        }
+
+        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.appendChild(elementFromHTML(formEditButtons));
+        };
+
+        showCreateForm = () => {
+            let contentBox = showForm();
+            contentBox.appendChild(elementFromHTML(formCreateButtons));
+        };
+
+        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 = '+';
+        }
\ No newline at end of file