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

1 files changed, 11 insertions, 474 deletions

diff --git a/day9/task5/index.html b/day9/task5/index.html
index 1e7c9a5..036e6e1 100644
--- a/day9/task5/index.html
+++ b/day9/task5/index.html
@@ -4,165 +4,10 @@
     <meta charset="UTF-8">
     <title>"table_task1" table view</title>
 
-    <!--    table styling-->
-    <style type="text/css">
-        table {
-            border-spacing: 0;
-            padding: 0;
-            border: 1px solid black;
-        }
-
-        thead > tr > th {
-            padding: 6px;
-            font-size: 16px;
-            background-color: #6f6f6f;
-        }
-
-        td {
-            padding: 3px;
-            font-size: 13px;
-        }
-    </style>
-
-    <!--    form styling-->
-    <style type="text/css">
-        .formRow {
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .formRow-label {
-            font-size: 13px;
-            color: #404040;
-        }
-
-        .formRow-input > input, .formRow-input > select {
-            margin: 3px;
-            width: 100%;
-            border-radius: 5px;
-            border: none;
-            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
-            padding: 5px;
-
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-        }
-
-        .formRow-input > input:disabled {
-            background-color: #bebebe;
-            color: #4b4b4b;
-        }
-
-        .formInput[type="date"], .formInput[type="time"] {
-            padding: 5px;
-            font-size: 1.1em;
-        }
-
-        .formRow-input > select:hover, .formRow-input > input:not([disabled]):hover {
-            background-color: #fbfbfb;
-        }
-
-        .formButtons {
-            display: flex;
-            flex-direction: row;
-            margin-top: 5px;
-        }
-
-        .formButtons > button {
-            margin: 5px;
-            width: 50%;
-            padding: 5px;
-            border: none;
-            border-radius: 7px;
-            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
-        }
-
-        .formButtons > button:hover {
-            background-color: #dadada;
-        }
-
-        .formButtons > button:focus {
-            background-color: #d5d5d5;
-        }
-    </style>
-
-    <!--    table fields styling-->
-    <style type="text/css">
-        .odd { background-color: #dedede; }
-        .even { background-color: #c5c5c5; }
-
-        .editableField:hover {
-            background-color: rgba(0, 0, 0, 0.3);
-        }
-    </style>
-
-    <!--    content box styling-->
-    <style type="text/css">
-        .contentBox {
-            padding: 20px;
-            width: 500px;
-            height: 520px;
-            background-color: #f0f0f0;
-            border-radius: 10px;
-            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
-        }
-
-        .backgroundTint {
-            width: 100vw;
-            height: 100vh;
-            background-color: rgba(0, 0, 0, 0.6);
-        }
-
-        .shown {
-            display: inline;
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-
-        .hidden {
-            display: none;
-        }
-    </style>
-
-    <!--    add new entry styling-->
-    <style type="text/css">
-        .newEntryBtn {
-            overflow: hidden;
-            white-space: nowrap;
-
-            position: fixed;
-            bottom: 50px;
-            left: 50px;
-
-            padding: 5px;
-            border-radius: 20px;
-            width: 40px;
-            height: 40px;
-            border: none;
-            background-color: #2871e2;
-            color: white;
-            font-size: 20px;
-
-            transition-property: width, font-size;
-            transition-duration: 0.6s;
-        }
-
-        .newEntryBtn:hover {
-            width: 150px;
-            font-size: 15px;
-            background-color: #286bd6;
-        }
-
-        .newEntryBtn:focus {
-            width: 200px;
-            font-size: 15px;
-            background-color: #2861c3;
-        }
-    </style>
+    <link rel="stylesheet" href="/static/css/ContentBoxStyle.css">
+    <link rel="stylesheet" href="/static/css/FormStyle.css">
+    <link rel="stylesheet" href="/static/css/NewEntryStyle.css">
+    <link rel="stylesheet" href="/static/css/TableStyle.css">
 </head>
 
 <body onload="onPageLoad()">
@@ -177,324 +22,16 @@
         onmouseenter="addNewRowOnHover()"
         onmouseleave="addNewRowOnEndHover()"
     > + </button>
-    </div>
-
-    <script>
-        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('http://localhost:8000/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('http://localhost:8000/update', () => {}, {
-                'service_id': serviceId, [columnName]: value
-            });
-            document.getElementById(fieldId).innerHTML = value;
-        }
-
-        function renderTable(text) {
-            let data = JSON.parse(text);
-
-            let table = document.getElementById('table');
-
-            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('http://localhost:8000/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) {
-            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);
+<!--    > <img src="/static/images/upload_icon.png" alt=""> </div>-->
 
-            hideContentBox();
-        }
+    <form enctype="multipart/form-data" action="/api/upload" method="post">
+        <input type="file" name="filename" accept="text/csv">
+        <button type="submit">Submit</button>
+    </form>
 
-        function addNewRowOnHover() {
-            let btn = document.getElementById('newEntryBtn');
-            btn.innerText = 'Add new row';
-        }
 
-        function addNewRowOnEndHover() {
-            let btn = document.getElementById('newEntryBtn');
-            btn.innerText = '+';
-        }
-    </script>
+    <script src="/static/js/main.js"></script>
+    <script src="/static/js/config.js"></script>
 </body>
 
 </html>
\ No newline at end of file