From a47e9946ba94b2c8b6d0f29f937e47f929d2edae Mon Sep 17 00:00:00 2001 From: Andrew Date: Mon, 8 Jul 2019 00:58:50 +0400 Subject: =?UTF-8?q?WIP:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=D0=B0=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B8=20?= =?UTF-8?q?=D1=84=D0=B0=D0=B9=D0=BB=D0=BE=D0=B2.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- day9/task5/index.html | 27 +- day9/task5/main.py | 43 ++- day9/task5/server.py | 12 +- day9/task5/static/css/ContentBoxStyle.css | 2 +- day9/task5/static/css/FormStyle.css | 5 +- day9/task5/static/css/NewEntryStyle.css | 34 +- day9/task5/static/css/TableStyle.css | 4 +- day9/task5/static/images/upload_icon.png | Bin 57084 -> 57506 bytes day9/task5/static/js/main.js | 579 ++++++++++++++++-------------- day9/task5/utils.py | 2 - 10 files changed, 382 insertions(+), 326 deletions(-) diff --git a/day9/task5/index.html b/day9/task5/index.html index 036e6e1..84236b2 100644 --- a/day9/task5/index.html +++ b/day9/task5/index.html @@ -17,18 +17,25 @@
- - - -
- - + +
+ + + + diff --git a/day9/task5/main.py b/day9/task5/main.py index c49852a..019ff8b 100644 --- a/day9/task5/main.py +++ b/day9/task5/main.py @@ -9,12 +9,21 @@ from sys import stdout @route('/static/(.*?)/(.*?)/?') def return_static(query, *args): - if args[0] in ['css', 'js', 'images']: + if args[0] in ['css', 'js']: try: with open(STATIC_FILES_PATH + f'/{args[0]}/{args[1]}', encoding='utf-8') as f: data = f.read() - return data + return args[0], {'js': 'javascript', 'css': 'css'}[args[0]], data + + except (PermissionError, FileNotFoundError): + return '' + elif args[0] == 'images': + try: + with open(STATIC_FILES_PATH + f'/{args[0]}/{args[1]}', 'rb') as f: + data = f.read() + + return 'image', args[1].split('.')[-1], data except (PermissionError, FileNotFoundError): return '' @@ -24,19 +33,22 @@ def upload_file(query, *args): try: data = query['files'][0]['data'].decode() except (UnicodeDecodeError, KeyError, IndexError): - return '

Error while reading file

' + return 'Return to main page

Error while reading file

' permitted_headers = db_column_names() try: data = list(csv.reader(data.strip().splitlines(), delimiter=';', quotechar='"')) if len(data[0]) != len(permitted_headers) or set(data[0]) != set(permitted_headers): - return '

File format error

' + return 'Return to main page

File format error

' except IndexError: - return '

File format error

' + return 'Return to main page

File format error

' + + cursor = db.cursor() + cursor.execute("START TRANSACTION; DELETE FROM `table_task1`; COMMIT;") + cursor.close() for row in data[1:]: - cursor = db.cursor() values = [] for i in range(len(row)): if row[i] == 'NULL': @@ -49,12 +61,17 @@ def upload_file(query, *args): values.append(value) - cursor.execute( "START TRANSACTION; INSERT INTO `table_task1` ({}) VALUES ({}); COMMIT;".format( - ','.join(data[0]), ','.join(values) - )) + cursor = db.cursor() + cursor.execute( + "START TRANSACTION; " + "INSERT INTO `table_task1` ({}) VALUES ({}); " + "COMMIT;".format( + ','.join(data[0]), ','.join(values) + ) + ) cursor.close() - return '

File uploaded

' + return 'Return to main page

File uploaded

' @route('/api/update', ['POST']) @@ -74,7 +91,7 @@ def update_post(query, *args): )) cursor.close() - return f'

Database Updated {query}

' + return f'Return to main page

Database Updated {query}

' @route('/api/delete', ['POST']) @@ -83,7 +100,7 @@ def delete_post(query, *args): cursor = db.cursor() cursor.execute(f'START TRANSACTION; DELETE FROM `table_task1` WHERE service_id="{service_id}"; COMMIT;') - return f'

Database Updated {query}

' + return f'Return to main page

Database Updated {query}

' @route('/api/add', ['POST']) @@ -103,7 +120,7 @@ def add_post(query, *args): )) cursor.close() - return f'

Database Updated {query}

' + return f'Return to main page

Database Updated {query}

' @route('/get', ['POST']) diff --git a/day9/task5/server.py b/day9/task5/server.py index 7757821..c5178bd 100644 --- a/day9/task5/server.py +++ b/day9/task5/server.py @@ -57,18 +57,22 @@ class MyHTTPRequestHandler(BaseHTTPRequestHandler): def finalize_request(self, response): if isinstance(response, int): self._set_response(response, 'text/html') - response = f'

ERROR {response} {HTTP_STATUS_CODES[response].upper()}

' + response = f'

ERROR {response} {HTTP_STATUS_CODES[response].upper()}

'.encode('utf-8') elif isinstance(response, (dict, list)): self._set_response(200, 'application/json') - response = dumps(response) + response = dumps(response).encode('utf-8') elif isinstance(response, tuple): if response[0] == 'image': self._set_response(200, f'image/{response[1]}') - response = '' + response = response[2] + elif response[0] in ['css', 'js']: + self._set_response(200, f'text/{response[1]}') + response = response[2].encode('utf-8') else: self._set_response(200, 'text/html') + response = response.encode('utf-8') - self.wfile.write(response.encode('utf-8')) + self.wfile.write(response) def start_server(host, port): diff --git a/day9/task5/static/css/ContentBoxStyle.css b/day9/task5/static/css/ContentBoxStyle.css index 78c37d6..5b7782d 100644 --- a/day9/task5/static/css/ContentBoxStyle.css +++ b/day9/task5/static/css/ContentBoxStyle.css @@ -1,7 +1,7 @@ .contentBox { padding: 20px; width: 500px; - height: 520px; + height: 700px; background-color: #f0f0f0; border-radius: 10px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); diff --git a/day9/task5/static/css/FormStyle.css b/day9/task5/static/css/FormStyle.css index 2659a68..dbe8a46 100644 --- a/day9/task5/static/css/FormStyle.css +++ b/day9/task5/static/css/FormStyle.css @@ -5,7 +5,7 @@ } .formRow-label { - font-size: 13px; + font-size: 20px; color: #404040; } @@ -16,6 +16,7 @@ border: none; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); padding: 5px; + font-size: 1.4em; -webkit-appearance: none; -moz-appearance: none; @@ -29,7 +30,7 @@ .formInput[type="date"], .formInput[type="time"] { padding: 5px; - font-size: 1.1em; + font-size: 1.6em; } .formRow-input > select:hover, .formRow-input > input:not([disabled]):hover { diff --git a/day9/task5/static/css/NewEntryStyle.css b/day9/task5/static/css/NewEntryStyle.css index e1141b2..be2a4f0 100644 --- a/day9/task5/static/css/NewEntryStyle.css +++ b/day9/task5/static/css/NewEntryStyle.css @@ -1,32 +1,38 @@ -.newEntryBtn { +.fixedButton { overflow: hidden; white-space: nowrap; position: fixed; - bottom: 50px; - left: 50px; padding: 5px; - border-radius: 20px; - width: 40px; - height: 40px; + border-radius: 50px; + width: 100px; + height: 100px; border: none; background-color: #2871e2; color: white; - font-size: 20px; + font-size: 45px; - transition-property: width, font-size; + transition-property: width; transition-duration: 0.6s; } -.newEntryBtn:hover { - width: 150px; - font-size: 15px; +.fixedButton:hover { + width: 300px; + font-size: 30px; background-color: #286bd6; } -.newEntryBtn:focus { - width: 200px; - font-size: 15px; +.fixedButton:focus { background-color: #2861c3; } + +.newEntryBtn { + bottom: 50px; + left: 50px; +} + +.uploadFileBtn { + bottom: 175px; + left: 50px; +} diff --git a/day9/task5/static/css/TableStyle.css b/day9/task5/static/css/TableStyle.css index 61f2f28..e4160fa 100644 --- a/day9/task5/static/css/TableStyle.css +++ b/day9/task5/static/css/TableStyle.css @@ -6,13 +6,13 @@ table { thead > tr > th { padding: 6px; - font-size: 16px; + font-size: 24px; background-color: #6f6f6f; } td { padding: 3px; - font-size: 13px; + font-size: 21px; } .odd { background-color: #dedede; } diff --git a/day9/task5/static/images/upload_icon.png b/day9/task5/static/images/upload_icon.png index 1e552a3..7d27fb5 100644 Binary files a/day9/task5/static/images/upload_icon.png and b/day9/task5/static/images/upload_icon.png differ diff --git a/day9/task5/static/js/main.js b/day9/task5/static/js/main.js index 63a025e..39c8c9b 100644 --- a/day9/task5/static/js/main.js +++ b/day9/task5/static/js/main.js @@ -26,292 +26,315 @@ const request = { } }; - const defaultColumnInputs = { - 'service_id': ``, - 'servtype': ``, - 'subtype': ``, - 'user_id': ``, - 'referrer_user_id': ``, - 'state': ``, + 'servtype': ``, + 'subtype': ``, + 'user_id': ``, + 'referrer_user_id': ``, + 'state': ``, + + 'creation_date': ``, + 'creation_time': ``, + 'creation_request_sent_date': ``, + 'notified_about_expiration': `` +}; + +const baseFormFields = `
+
+
service_id
+
+
+ +
+
servtype
+
+ +
+
+ +
+
subtype
+
+ +
+
+ +
+
user_id
+
+ +
+
+ +
+
referrer_user_id
+
+ +
+
+ +
+
state
+
+ `, - - 'creation_date': ``, - 'creation_time': ``, - 'creation_request_sent_date': ``, - 'notified_about_expiration': `` - }; - - const baseFormFields = ` -
-
service_id
-
-
-
servtype
-
- -
-
- -
-
subtype
-
- -
-
- -
-
user_id
-
- -
-
- -
-
referrer_user_id
-
- -
-
- -
-
state
-
- -
-
- -
-
creation_date
-
- -
-
-
-
creation_time
-
- -
-
- -
-
creation_request_sent_date
-
- - -
-
- -
-
notified_about_expiration
-
- -
-
- `; - - const formCreateButtons = `
- - -
`; - - const formEditButtons = `
- - -
`; - - 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}`); - } - }; + +
+
+ +
+
creation_date
+
+ +
+
+
+
creation_time
+
+ +
+
+ +
+
creation_request_sent_date
+
+ + +
+
+ +
+
notified_about_expiration
+
+ +
+
+`; + +const formCreateButtons = `
+ + +
`; + +const formEditButtons = `
+ + +
`; + +const uploadFileHtml = ''; + +function elementFromHTML(html) { + let elem = document.createElement('div'); + elem.innerHTML = html; + return elem.firstChild; +} + +function onPageLoad() { + request.post(`${HOST}/get`, renderTable, {'type': 'full'}); + + let btn = document.getElementById('uploadFileBtn'); + 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); - - 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(``); - row.push(``); - - 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 - }); + else { + let inputElement = fieldElement.firstChild; + inputElement.onkeyup = (event) => { + if (event.code === 'Enter') + fieldEditSubmit(fieldId, inputElement.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 - } + } +} + +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(``); + row.push(``); + + 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); } - } - - 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'); + 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 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 + } +} + +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)); + 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/utils.py b/day9/task5/utils.py index 8f3e794..c1b3a04 100644 --- a/day9/task5/utils.py +++ b/day9/task5/utils.py @@ -84,8 +84,6 @@ def parse_multipart_form(data: bytes): separator = b.readline().strip() files = [] - with open('request', 'wb') as f: - f.write(data) while True: line = b.readline().strip().strip(b'-') -- cgit v1.2.3