1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
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">✖</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) {
let [columnName, serviceId] = fieldId.split('-');
request.post(`${HOST}/api/update`, () => {}, {
'service_id': serviceId, [columnName]: 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(fieldId, value);
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) {
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
}
}
}
|
