summaryrefslogtreecommitdiff
path: root/day9/task5
diff options
context:
space:
mode:
Diffstat (limited to 'day9/task5')
-rw-r--r--day9/task5/index.html1
-rw-r--r--day9/task5/static/js/constants.js135
-rw-r--r--day9/task5/static/js/editForm.js86
-rw-r--r--day9/task5/static/js/overlayButtonsCallbacks.js2
-rw-r--r--day9/task5/static/js/tableCallbacks.js75
-rw-r--r--day9/task5/static/js/utils.js28
6 files changed, 189 insertions, 138 deletions
diff --git a/day9/task5/index.html b/day9/task5/index.html
index f059911..eca610b 100644
--- a/day9/task5/index.html
+++ b/day9/task5/index.html
@@ -37,7 +37,6 @@
</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>
diff --git a/day9/task5/static/js/constants.js b/day9/task5/static/js/constants.js
deleted file mode 100644
index 7078fb4..0000000
--- a/day9/task5/static/js/constants.js
+++ /dev/null
@@ -1,135 +0,0 @@
-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
index f3f2bd8..8107159 100644
--- a/day9/task5/static/js/editForm.js
+++ b/day9/task5/static/js/editForm.js
@@ -1,3 +1,89 @@
+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>`;
+
function showContentBox() {
let elem = document.getElementById('backgroundTint');
elem.classList.remove('hidden');
diff --git a/day9/task5/static/js/overlayButtonsCallbacks.js b/day9/task5/static/js/overlayButtonsCallbacks.js
index dd38b7d..866a302 100644
--- a/day9/task5/static/js/overlayButtonsCallbacks.js
+++ b/day9/task5/static/js/overlayButtonsCallbacks.js
@@ -1,3 +1,5 @@
+const uploadFileHtml = '<img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;">';
+
function addNewRowOnHover() {
let btn = document.getElementById('newEntryBtn');
btn.innerText = 'Add new row';
diff --git a/day9/task5/static/js/tableCallbacks.js b/day9/task5/static/js/tableCallbacks.js
index 252e429..52296fd 100644
--- a/day9/task5/static/js/tableCallbacks.js
+++ b/day9/task5/static/js/tableCallbacks.js
@@ -1,36 +1,107 @@
+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">`
+};
+
function onFieldClick(fieldId) {
let fieldElement = document.getElementById(fieldId);
+ fieldElement.onclick = () => {};
if (fieldElement.firstChild.nodeName !== 'INPUT' && fieldElement.firstChild.nodeName !== 'SELECT') {
let [columnName, serviceId] = fieldId.split('-');
+ let previousValue = fieldElement.innerText;
+
fieldElement.innerHTML = defaultColumnInputs[columnName];
+ let submitBtn = elementFromHTML('<button type="button">Submit</button>');
+ let cancelBtn = elementFromHTML('<button type="button">&#10006</button>');
+
+ fieldElement.appendChild(submitBtn);
+ fieldElement.appendChild(cancelBtn);
+
if (columnName === 'creation_request_sent_date') {
let dateElement = fieldElement.firstChild;
let timeElement = fieldElement.childNodes[1];
+ submitBtn.onclick = () => fieldEditSubmitBtn(fieldId, `${dateElement.value} ${timeElement.value}`);
+ cancelBtn.onclick = () => fieldEditCancelBtn(fieldId, previousValue);
+
dateElement.onkeyup = timeElement.onkeyup = (event) => {
if (event.code === 'Enter') {
if (dateElement.value !== '' && timeElement.value !== '')
fieldEditSubmit(fieldId, `${dateElement.value} ${timeElement.value}`);
}
+ else if (event.code === 'Escape')
+ fieldEditCancel(fieldId, previousValue);
};
}
else {
let inputElement = fieldElement.firstChild;
+
+ submitBtn.onclick = () => fieldEditSubmitBtn(fieldId, inputElement.value);
+ cancelBtn.onclick = () => fieldEditCancelBtn(fieldId, previousValue);
+
inputElement.onkeyup = (event) => {
if (event.code === 'Enter')
fieldEditSubmit(fieldId, inputElement.value);
+ else if (event.code === 'Escape')
+ fieldEditCancel(fieldId, previousValue);
};
}
}
}
-function fieldEditSubmit(fieldId, 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 fieldEditSubmit(fieldId, value) {
+ _fieldEditSubmit(fieldId, value);
+
+ let fieldElement = document.getElementById(fieldId);
+ fieldElement.innerHTML = value;
+ fieldElement.onclick = () => onFieldClick(fieldId);
+}
+
+function fieldEditSubmitBtn(fieldId, value) {
+ _fieldEditSubmit();
+
+ let fieldElement = document.getElementById(fieldId);
+ fieldElement.innerHTML = value;
+ fieldElement.onclick = () => {
+ fieldElement.onclick = () => onFieldClick(fieldId);
+ }
+}
+
+function fieldEditCancel(fieldId, value) {
+ let fieldElement = document.getElementById(fieldId);
+ fieldElement.innerHTML = value;
+ fieldElement.onclick = () => onFieldClick(fieldId);
+}
+
+function fieldEditCancelBtn(fieldId, value) {
+ let fieldElement = document.getElementById(fieldId);
+ fieldElement.innerHTML = value;
+ fieldElement.onclick = () => {
+ fieldElement.onclick = () => onFieldClick(fieldId);
+ }
}
function removeField(service_id) {
diff --git a/day9/task5/static/js/utils.js b/day9/task5/static/js/utils.js
index 5d60723..d76c547 100644
--- a/day9/task5/static/js/utils.js
+++ b/day9/task5/static/js/utils.js
@@ -1,3 +1,31 @@
+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("&")
+ }
+ };
+
function elementFromHTML(html) {
let elem = document.createElement('div');
elem.innerHTML = html;
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-16 16:07:06 +0000