Merge pull request #561 from gcivil-nyu-org/sensors-delete-fields

Fixed tables on configure sensor page
gcivil-nyu-org · Apr 26, 2020 · dc0bbb4 · dc0bbb4
2 parents f9ce4b9 + 73f63b9
commit dc0bbb4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/mercury/static/mercury/js/sensor.js b/mercury/static/mercury/js/sensor.js
@@ -82,19 +82,31 @@ function addRow(table_name){
     var rowCount = table.rows.length;
     var colCount = table.rows[0].cells.length;
     var newRow = table.insertRow(rowCount-1);
+    var today = new Date();
+    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
+    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds() + ":" + today.getMilliseconds();
+    var dateTime = date+' '+time;
     newRow.className = "sensor-fields-table-tr"
+    newRow.id = "sensor-fields-table-tr-".concat(dateTime) // need it to be unique so we can delete it if needed
     for(var i=0; i<colCount; i++){
         var newCell = newRow.insertCell(i);
+        if (i < 3) {
         /* set new cell to be same as cell in first data (non-header) row */
         newCell.innerHTML = table.rows[1].cells[i].innerHTML
         newCell.className = "sensor-fields-table-td"
+        }
+        else {
+            newCell.innerHTML = "<button type=\"button\" onclick=\"deleteRow('" + table_name + "', '" + newRow.id + "')\" class=\"grafana-btn grafana-btn-red\">X</button>"
+            newCell.className = "sensor-fields-table-td"
+        }
     }
 }
 
-function deleteRow(table_name, row) {
+function deleteRow(table_name, rowid) {
     var table = document.getElementById(table_name);
     if (table.rows.length > 3) {
-        table.deleteRow(row);
+        var row = document.getElementById(rowid);
+        row.parentNode.removeChild(row);
     }
 }
 

diff --git a/mercury/templates/sensor.html b/mercury/templates/sensor.html
@@ -37,15 +37,16 @@ <h2>Add New Sensor</h2>
 
                     <table id="new-sensor-table" class="sensor-fields-table">
                         <thead>
-                            <tr class="sensor-fields-table-td">
+                            <tr class="sensor-fields-table-tr">
                                 <th class="sensor-fields-table-th"><b> <u>Field Name </u></b></th>
                                 <th class="sensor-fields-table-th"><b> <u>Field Data Type </u></b></th>
                                 <th class="sensor-fields-table-th"><b> <u>Unit</u></b></th>
+                                <th class="sensor-fields-table-th"><b> <u>Action </u></b></th>
                             </tr>
                         </thead>
 
                         <tbody>
-                            <tr class="sensor-fields-table-td">
+                            <tr id="sensor-fields-table-td-FIRST" class="sensor-fields-table-td">
 
                                 <td class="sensor-fields-table-td"> <input type="text" id="field-name" name="field-names" required/> </td>
 
@@ -58,6 +59,11 @@ <h2>Add New Sensor</h2>
                                 </td>
 
                                 <td class="sensor-fields-table-td"> <input type="text" id="units" name="units"/> </td>
+
+                                <td class="sensor-fields-table-td">
+                                    <button type="button" onclick="deleteRow('new-sensor-table', 'sensor-fields-table-td-FIRST')" class="grafana-btn grafana-btn-red">X</button>
+                                </td>
+
                             </tr>
 
                             <tr class="sensor-fields-table-tr">
@@ -155,12 +161,12 @@ <h2>Existing Sensors</h2>
 
                             <tbody>
                                 {% for field_name, unit_and_format in sensor.type_id.format.items %}
-                                <tr class="sensor-fields-table-tr">
+                                <tr id="{{ sensor.name }}-fields-table-{{field_name}}" class="sensor-fields-table-tr">
                                         <td class="sensor-fields-table-td">
-                                            <input type="text" id="field-name" name="field-names" value="{{ field_name }}" required/> </input>
+                                            <input type="text" id="field-name-{{ field_name}}" name="field-names" value="{{ field_name }}" required/> </input>
                                         </td>
                                         <td class="sensor-fields-table-td">
-                                            <select id="data-types" name="data-types"/>
+                                            <select id="data-types-{{unit_and_format.data_type}}" name="data-types"/>
                                             {% if unit_and_format.data_type == "Numeric" %}
                                                 <option selected="selected"> Numeric </option>
                                                 <option> Character </option>
@@ -179,11 +185,11 @@ <h2>Existing Sensors</h2>
                                             </select>
                                         </td>
                                         <td class="sensor-fields-table-td">
-                                            <input type="text" id="units" name="units" value="{{unit_and_format.unit}}"/></input>
+                                            <input type="text" id="units-{{unit_and_format.unit}}" name="units" value="{{unit_and_format.unit}}"/></input>
                                         </td>
 
                                         <td class="sensor-fields-table-td">
-                                            <button type="button" onclick="deleteRow('{{ sensor.name }}-fields-table-edit','{{forloop.counter}}')" class="grafana-btn grafana-btn-red">X</button>
+                                            <button type="button" onclick="deleteRow('{{ sensor.name }}-fields-table-edit', '{{ sensor.name }}-fields-table-{{field_name}}')" class="grafana-btn grafana-btn-red" name="delete-button">X</button>
                                         </td>
                                 </tr>
                                 {% endfor %}