Enabling toggle to turn on/off ACPU power

Author: shivaahir158

src/components/Tables/ACPUTable.js

@@ -33,6 +33,11 @@ function ACPUTable({ device, update, notify }) {
   const [disable, setDisable] = React.useState(true);
   const loadActivity = GetOptions('A45_Load');
 
+  // Toggle handler to enable/disable ACPU fields
+  const handleToggle = () => {
+    setDisable(!disable);
+  };
+
   function fetchPort(port, link) {
     server.GET(server.peripheralPath(device, `${link}/${port.href}`), (data) => {
       const ep = parseInt(port.href.slice(-1), 10);
@@ -46,7 +51,6 @@ function ACPUTable({ device, update, notify }) {
   function fetchAcpuData(link) {
     if (link !== '') {
       server.GET(server.peripheralPath(device, link), (data) => {
-        // resolve cycling
         if (data.name !== acpuData.name
           || data.frequency !== acpuData.frequency
           || data.load !== acpuData.load) {
@@ -75,7 +79,7 @@ function ACPUTable({ device, update, notify }) {
   function fetchData() {
     server.GET(server.api.fetch(server.Elem.peripherals, device), (data) => {
       const acpu = getPeripherals(data, 'acpu');
-      setDisable(acpu.length === 0);
+      setDisable(true);
       if (acpu.length > 0) {
         const link = acpu[0].href;
         setHref(link);
@@ -124,7 +128,6 @@ function ACPUTable({ device, update, notify }) {
   }
 
   const deleteRow = (index) => {
-    // no delete method for acpu. this is just clear name of the endpoint which mean disable
     const val = endpoints[index].data;
     val.name = '';
     server.PATCH(server.peripheralPath(device, `${href}/ep/${endpoints[index].ep}`), val, () => fetchAcpuData(href));
@@ -147,9 +150,20 @@ function ACPUTable({ device, update, notify }) {
 
   const powerHeader = ['Power', '%'];
   const title = 'ACPU';
+
   return (
     <div className="component-table-head">
       <ComponentLabel name={title} />
+
+      {/* Toggle Switch for ACPU */}
+      <div className="toggle-container">
+        <label htmlFor="acpu-toggle">ACPU Power</label>
+        <label className="toggle-switch">
+          <input type="checkbox" onChange={handleToggle} checked={!disable} />
+          <span className="slider" />
+        </label>
+      </div>
+
       <div className="cpu-container">
         <PowerTable
           title="ACPU power"
@@ -172,28 +186,28 @@ function ACPUTable({ device, update, notify }) {
             <Dropdown value={acpuData.load} onChangeHandler={(value) => handleChange('load', value)} items={loadActivity} disabled={disable} />
           </div>
         </div>
+
         <TableBase header={header} disabled={disable} onClick={() => setModalOpen(true)}>
-          {
-            endpoints.map((row, index) => (
-              (row.data !== undefined && row.data.name !== '')
-              && (
-              <tr key={row.ep}>
-                <StatusColumn messages={row.data.consumption.messages} />
-                <Actions
-                  onEditClick={() => { setEditIndex(index); setModalOpen(true); }}
-                  onDeleteClick={() => deleteRow(index)}
-                />
-                <td>{row.data.name}</td>
-                <SelectionCell val={row.data.activity} values={loadActivity} />
-                <PercentsCell val={row.data.read_write_rate} />
-                <PercentsCell val={row.data.toggle_rate} precition={1} />
-                <BandwidthCell val={row.data.consumption.calculated_bandwidth} />
-                <PowerCell val={row.data.consumption.noc_power} />
-              </tr>
-              )
-            ))
-          }
+          {endpoints.map((row, index) => (
+            (row.data !== undefined && row.data.name !== '')
+            && (
+            <tr key={row.ep}>
+              <StatusColumn messages={row.data.consumption.messages} />
+              <Actions
+                onEditClick={() => { setEditIndex(index); setModalOpen(true); }}
+                onDeleteClick={() => deleteRow(index)}
+              />
+              <td>{row.data.name}</td>
+              <SelectionCell val={row.data.activity} values={loadActivity} />
+              <PercentsCell val={row.data.read_write_rate} />
+              <PercentsCell val={row.data.toggle_rate} precition={1} />
+              <BandwidthCell val={row.data.consumption.calculated_bandwidth} />
+              <PowerCell val={row.data.consumption.noc_power} />
+            </tr>
+            )
+          ))}
         </TableBase>
+
         {modalOpen && (
           <ABCPUModal
             title={title}

src/components/style/ACPUTable.css

@@ -26,3 +26,55 @@
     padding-right: 10px;
     padding-left: 10px;
 }
+
+.toggle-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+    margin-left: 0.3rem;
+    width: 100%;
+}
+
+.toggle-label {
+    flex-grow: 1;
+    margin-left: 0.5rem;
+}
+
+.toggle-switch {
+    position: relative;
+    width: 35px;
+    height: 18px;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 18px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    border-radius: 50%;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    transition: 0.4s;
+}
+
+input:checked + .slider {
+    background-color: #4CAF50;
+}
+
+input:checked + .slider:before {
+    transform: translateX(17px);
+}