Also, I have a table that display sensor list data of 10 records, when the tblSensorList loads at the same time will load btnSensor and btnGateway
On the left side is tbl sensor list and right side loads the buttons sensor and gateway
BtnSensor | AddSensor: ______(input) | Enter | Reset all | Set all | clear Sensors
BntGateway | AddGateway:____ (input) | Enter | Clear Gateways
When the tbl sensor list loads I would like to see the btn Gateway enabled but the title text, the input text area, the button Enter, and the button ClearGateway should grey out disabled and if I clicked btn gateway it will display tbl Gateway list on the life side, too; but I would like to see the btn sensor the button Sensor stays in function for the click but the title text, the input text area, the button Enter, Reset all for Shipping, Set all sensors to 10HB and clear Sensor should grey out disabled….back and forth/
I have been spending to figure out the best function to make that work.
<divclass="clearfix"></div>
<divstyle="height: 85px; width: 600px"class="gridPanel eventsList shadow-sm mx-1 rounded testingSensorList" data-id="<%: item.SensorID %>">
Gateway List:
<div style="height: 125px; width: 425px;" class="gridPanel eventsList shadow-sm rounded mx-1 testingGateway" data-id="<%:item.GatewayID %>"></div>
Buttons Sensor and Gateways:
<div class="col-12 col-md-10 col-xl-12">
<button type="button" id="btnSensor" data-id="sensorsList" data-toggleclass="btnToggle" data-togglepane="tab-pane" class="btn btn-primary btn-sm btnToggle -active" onclick="ToggleButtons('btnSensor');" > <%=Html.GetThemedSVG("sensor") %> Sensor </button>
<strong style="font-size : 15px;" id="AddTitleSensor"> Add Sensor:</strong>
<input type="text" id="AddInputSensorID" class="float-right" value="" />
<%-- <button type="button" class="btn btn-secondary btn-m fa fa-binoculars" aria-hidden="true" id="addSensorBtn" data-url="/Testing/AddSensor/"> Enter </button>--%>
<button type="button" class="btn btn-secondary btn-m fa-regular fa fa-search" role="button" aria-hidden="true" id="AddSensorBtnEnter" data-url="/Testing/AddSensor/" > Enter </button>
<button type="button" class="btn btn-primary b-btn actionBtn btn-lg fa fa-refresh" aria-hidden="true" id="ResetAllForShipping" data-url="/Testing/ResetAllForShipping/"> Reset all for Shipping </button>
<button type="button" class="btn btn-primary b-btn actionBtn btn-lg fa fa-cogs" aria-hidden="true" id="SetAllSensorsTo10HB" data-url="/Testing/AllSensorsTo10HeartBeat"> Set all sensors to 10 HB </button>
<button type="button" class="btn btn-primary b-btn actionBtn btn-lg fa fa-trash-o" aria-hidden="true" id="ClearSensors" data-url="/Testing/ClearSensors/"> Clear Sensors </button>
<br />
<div class="clearfix"></div>
<br />
<button type="button" id="btnGateway" data-id="gatewaysList" data-toggleclass="btnToggle" data-togglepane="tab-pane" class="btn btn-primary btn-sm btnToggle inactive" onclick="ToggleButtons('bntGateway');" style="display;"> <%=Html.GetThemedSVG("gateway") %> Gateway</button>
<strong style="font-size : 15px;" id="AddTitleGateway"> Add Gateway:</strong>
<input type="text" id="AddInputGatewayID" class="float-right" value="" />
<button type="button" class="btn btn-secondary btn-m fa-regular fa fa-search" role="button" aria-hidden="true" id="AddGatewayBtnEnter" data-url="/Testing/AddGateway/" > Enter </button>
<button type="button" class="btn btn-primary b-btn actionBtn btn-lg fa fa-trash-o" aria-hidden="true" id="ClearGateways" data-url="/Testing/ClearGateways/"> Clear Gateways </button>
jQuery:
<script>
function ToggleButtons(buttonId) {
var hideBtn, showBtn;
if (buttonId == 'btnSensor') {
showBtn = 'btnSensor';
hideBtn = 'btnGateway';
} else {
showBtn = 'btnGateway';
hideBtn = 'btnSensor';
document.getElementById("btnSensor").disabled = false;
document.getElementById("btnSensor").style.color = "black";
document.getElementById("AddTitleSensor").style.color = "grey";
document.getElementById("AddInputSensorID").disabled = false;
document.getElementById("AddSensorBtnEnter").disabled = false;
document.getElementById("AddSensorBtnEnter").style.background = "red";
document.getElementById("ResetAllForShipping").disabled = false;
document.getElementById("SetAllSensorsTo10HB").disabled = false;
document.getElementById("ClearSensors").disabled = false;
} if (buttonId == 'btnGateway') {
showBtn = 'btnGateway';
hideBtn = 'btnSensor';
} else {
hideBtn = 'btnGateway';
document.getElementById("btnGateway").disabled = false;
document.getElementById("AddTitleGateway").style.color = "grey";
document.getElementById("AddInputGatewayID").disabled = true;
document.getElementById("AddGatewayBtnEnter").disabled = true;
document.getElementById("AddGatewayBtnEnter").style.background = 'green';
document.getElementById("ClearGateways").disabled = true;
}
//document.getElementById(hideBtn).style.display = 'disabled';
//document.getElementById(showBtn).style.display = '';
}
</script>
Your help is much appreciated. Thanks.
