summaryrefslogtreecommitdiff
path: root/day9/task5/static/js/main.js
diff options
context:
space:
mode:
Diffstat (limited to 'day9/task5/static/js/main.js')
-rw-r--r--day9/task5/static/js/main.js276
1 files changed, 3 insertions, 273 deletions
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()
-}
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-16 21:45:23 +0000