Toggles button state with mouse click

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

CSS

body{
  font-family:helvetica;
}

.loto-form-intergration-setup-component{
  max-width: 560px;
  margin: auto;
  border: solid 1px #ccc;
  padding: 30px;
  border-radius: 15px;
}
.loto-form-intergration-setup-component p{
  font-size: 13px;
  margin-left: 30px;
  margin-right: 140px;
  position: relative;
}
.loto-form-intergration-setup-component .toggle-switch-button.true-floater{
  float: right;
  margin-top: -6px;
}
.loto-form-intergration-setup-component .toggle-switch-button.floater{
  margin-left: 10px;
  margin-right: 10px;
  right: -120px;
  top:-8px;
  vertical-align: middle;
  position: absolute;
}
.loto-form-intergration-setup-component .toggle-switch-button.floater:before{
  top: 38px;
  font-size: 11px;
  right: calc(100% - 15px);
}
.loto-form-intergration-setup-component .toggle-switch-button.floater:after{
  top: 38px;
  font-size: 11px;
  left: calc(100% - 15px);
}
.loto-form-intergration-setup-component .toggle-switch-button{
  position: relative;
  width: 60px;
  height: 30px;
  border-radius: 15px;
  border: solid 1px #ccc;
  margin-left: 30px;
  margin-right: 30px;
  cursor: pointer;
}
.loto-form-intergration-setup-component .toggle-switch-button>span{
  background-color: red;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  top: 2px;
  left: 2px;
  position: absolute;
  display: block;
  transition: all 0.3s;
  pointer-events: none;
}
.loto-form-intergration-setup-component .toggle-switch-button.on>span{
  transform: translateX(30px);
  background-color: #319e3b;
}
.loto-form-intergration-setup-component .toggle-switch-button:before{
  content: "OFF";
  position: absolute;
  top: 8px;
  font-size: 11px;
  right: calc(100% + 10px);
  width: 24px;
  text-align: left;
}
.loto-form-intergration-setup-component .toggle-switch-button:after{
  content: "ON";
  position: absolute;
  top: 8px;
  font-size: 11px;
  left: calc(100% + 10px);
  width: 24px;
 ...

JavaScript

class LOTOFormIntegrationComponent {
  constructor(parentElement,configuration,formDataProperties) {
    this.parentElement = parentElement;
    this.configuration = configuration;
    this.formDataProperties = formDataProperties;
    this.ui;

    this.component_enabled = configuration.component_enabled;
    this.component_mapto = configuration.component_mapto;
    this.attachments_enabled = configuration.attachments_enabled;
    this.attachments_required = configuration.attachments_required;
    this.signatures_required = configuration.signatures_required;
    this.signatures = configuration.signatures;
    this.fields = configuration.fields;

    this.build();
  }

  build() {
    let t = this;

    t.ui = $(`<div class="loto-form-intergration-setup-component">
    <h1><img src="https://agrisphere-portal.com/lotoProcedures/assets/loto-dashboard-icon.svg">Equipment Lock-Out / Tag-Out Procedures</h1>
    <div class="configure-fields" style="display: none;">
      <p>Select data fields to display:</p>
      <table width="100%" border="0" cellspacing="0" cellpadding="5">
  <tbody>
    <tr>
      <td width="30" scope="col"><input type="checkbox" value="Equipment Name"></td>
      <td scope="col">Equipment Name</td>
      <td width="30" scope="col"><input type="checkbox" value="Equipment Type"></td>
      <td scope="col">Equipment Type</td>
    </tr>
    <tr>
      <td><input type="checkbox" value="Common Name"></td>
      <td>Common Name</td>
      <td><input type="checkbox" value="Description"></td>
      <td>Description</td>
    </tr>
    <tr>
      <td><input type="checkbox" value="Model"></td>
      <td>Model</td>
      <td><input type="checkbox" value="Manufacturer"></td>
      <td>Manufacturer</td>
    </tr>
    <tr>
      <td><input type="checkbox" value="Serial Number"></td>
      <td>Serial Number</td>
      <td><input type="checkbox" value="Equipment Images"></td>
      <td>Equipment Images</td>
   ...