-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathNotificationModal.html
255 lines (213 loc) · 9.63 KB
/
NotificationModal.html
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<span class="close-btn" onclick="toggleRedNotificationAdd()"> <i class="fa fa-times" aria-hidden="true"></i></span>
<form>
<div>
<h1>Start Date</h1>
<hr>
</div>
<div>
<div class="table-wrapper p-l-10 p-r-10">
<table id="notiftable" class="table table-striped table-bordered table-sm">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<link href="https://cdn.datatables.net/v/bs5/dt-2.1.3/r-3.0.2/datatables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/v/bs5/dt-2.1.3/r-3.0.2/datatables.min.js"></script>
<script>
// Function to show the selected row data in a modal
function showSelectedRowDataRed(rowData, rowIndex) {
// Set the values of input boxes based on the selected row data
$('#redittroubleticket').val(rowData[0]);
$('#reditcablesystem').val(rowData[1]);
$('#reditndt').val(rowData[2]);
$('#reditsdt').val(rowData[3]);
$('#reditedt').val(rowData[4]);
$('#reditoutagedur').val(rowData[5]);
$('#reditaid').val(rowData[6]);
$('#reditimpact').val(rowData[7]);
$('#reditinctype').val(rowData[8]);
$('#reditas1').val(rowData[9]);
$('#reditas2').val(rowData[10]);
$('#reditas3').val(rowData[11]);
$('#reditlocation').val(rowData[12]);
$('#reditrootchl').val(rowData[13]);
$('#reditrootcsi').val(rowData[14]);
$('#reditaddrem').val(rowData[15]);
$('#reditmoyr').val(rowData[16]);
$('#rsendtoEndDateBtn').off().on('click', function () {
var troubleTicket = document.getElementById("redittroubleticket").value;
var cableSystem = document.getElementById("reditcablesystem").value;
var notificationDateTime = document.getElementById("reditndt").value;
var startDateTimeUTC = document.getElementById("reditsdt").value;
var endDateTimeUTC = document.getElementById("reditedt").value;
var outageDuration = document.getElementById("reditoutagedur").value;
var affectedSegment1 = document.getElementById("reditas1").value;
var location = document.getElementById("reditlocation").value;
var activityImpactDuration = document.getElementById("reditaid").value;
var affectedSegment2 = document.getElementById("reditas2").value;
var rootCauseH = document.getElementById("reditrootchl").value;
var impact = document.getElementById("reditimpact").value;
var affectedSegment3 = document.getElementById("reditas3").value;
var incidentType = document.getElementById("reditinctype").value;
var rootCauseSpecificInternal = document.getElementById("reditrootcsi").value;
var additionalRemarks = document.getElementById("reditaddrem").value;
var monthYear = document.getElementById("reditmoyr").value;
var majorIncidents = [
troubleTicket, cableSystem, notificationDateTime, startDateTimeUTC, endDateTimeUTC, outageDuration, activityImpactDuration, impact, incidentType, affectedSegment1, affectedSegment2, affectedSegment3, location, rootCauseH, rootCauseSpecificInternal, additionalRemarks, monthYear
];
$('#spinnerModal').modal('show');
google.script.run.withSuccessHandler(function (result) {
console.log('Data added to the sheet');
// Data update failed
console.error('Error updating data:', result);
$('#spinnerModal').modal('hide');
showGoogleScriptAlert('Failed to add record. Please try again.', 'error');
}).copyToStartTableWithTheCurrentDate('End Date', troubleTicket);
console.log('Sending to start date==================================')
google.script.run.withSuccessHandler().addToActivityLog('toEndDate', troubleTicket, "");
google.script.run.withSuccessHandler(function (url) {
window.open(url, '_top');
}).getScriptUrl();
});
// Add click event to "Save Changes" button
$('#rsaveChangesBtn').off().on('click', function () {
// Get updated values from input boxes
var updatedData = [
$('#redittroubleticket').val(),
$('#reditcablesystem').val(),
$('#reditndt').val(),
$('#reditsdt').val(),
$('#reditedt').val(),
$('#reditoutagedur').val(),
$('#reditaid').val(),
$('#reditimpact').val(),
$('#reditinctype').val(),
$('#reditas1').val(),
$('#reditas2').val(),
$('#reditas3').val(),
$('#reditlocation').val(),
$('#reditrootchl').val(),
$('#reditrootcsi').val(),
$('#reditaddrem').val(),
$('#reditmoyr').val()
];
// Call the server-side function to update data in the sheet
google.script.run.withSuccessHandler(function (result) {
if (result === 'success') {
// Data updated successfully
console.log('Data updated in the sheet:', result);
$('#selectedRowContainerRed').modal('hide');
// Update the DataTable with the edited data
var table = $('#notiftable').DataTable();
var rowNode = table.row(rowIndex).node();
for (var k = 0; k < updatedData.length; k++) {
table.cell(rowNode, k).data(updatedData[k]);
}
console.log('Updating==================================')
google.script.run.withSuccessHandler().addToActivityLog('Update', $('#redittroubleticket').val(), "");
// Show success alert
showGoogleScriptAlert('Record updated successfully. Refresh the page.', 'success');
google.script.run.withSuccessHandler(function (url) {
window.open(url, '_top');
}).getScriptUrl();
} else {
// Data update failed
console.error('Error updating data:', result);
$('#spinnerModal').modal('hide');
showGoogleScriptAlert('Failed to update record. Please try again.', 'error');
}
}).updateRowMI('Start Date', rowData[0], updatedData);
});
// Add click event to "Delete" button
$('#rdeleteRowBtn').off().on('click', function () {
// Call the server-side function to delete data from the sheet
google.script.run.withSuccessHandler(function (result) {
if (result === 'success') {
// Data deleted successfully
// Show success alert
showGoogleScriptAlert('Record deleted successfully. Refresh the page.', 'success');
console.log('Data deleted from the sheet:', result);
// Remove the DataTable row for the deleted data
table.row(rowIndex).remove().draw();
console.log('Deleting==================================')
google.script.run.withSuccessHandler().addToActivityLog('Delete', $('#redittroubleticket').val(), "");
// Close the modal
$('#selectedRowContainerRed').modal('hide');
google.script.run.withSuccessHandler(function (url) {
window.open(url, '_top');
}).getScriptUrl();
} else {
// Data deletion failed
console.error('Error deleting data:', result);
// Show error alert
showGoogleScriptAlert('Failed to delete record. Please try again.', 'error');
}
}).deleteRowMI('Start Date', rowData[0]);
});
$('#selectedRowContainerRed').modal('show');
}
</script>
<script>
window.onload = startAutoRefresh();
function startAutoRefresh() {
fetchDataFromStartTable(); // Call immediately on load
setInterval(fetchDataFromStartTable, 1 * 60 * 1000); // Repeat every 5 minutes
}
function fetchDataFromStartTable() {
console.log("refreshing start table data")
// Execute the Google Script function to load DataTables after the page has fully loaded
google.script.run.withSuccessHandler(function (data) {
console.log('Data received:', data); // Log the data to the console for debugging
// Destroy existing DataTable instance if it exists
if ($.fn.DataTable.isDataTable('#notiftable')) {
$('#notiftable').DataTable().destroy();
}
if (data && data.length > 0) {
table = $('#notiftable').DataTable({
responsive: true,
data: data,
order: [[3, 'asc']],
columns: [
{ title: "Trouble Ticket" },
{ title: "Cable System" },
{ title: "Notification Date and Time" },
{ title: "Start Date and Time (UTC)" },
{ title: "End Date and Time (UTC)" },
{ title: "Outage Duration" },
{ title: "Activity Impact Duration" },
{ title: "Impact" },
{ title: "Incident Type" },
{ title: "Affected Segment 1" },
{ title: "Affected Segment 2" },
{ title: "Affected Segment 3" },
{ title: "Location" },
{ title: "Root Cause (High Level)" },
{ title: "Root Cause (Specific - Internal)" },
{ title: "Additional Remarks (Internal)" },
{ title: "Month Year" }
],
scrollY: 450,
scrollX: true,
fixedColumns: {
leftColumns: 2
},
rowCallback: function (row, data, index) {
// Add click event to each row
$(row).on('click', function () {
showSelectedRowDataRed(data, index);
});
}
});
}
}).getMIForDataTable('Start Date');
}
</script>