JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://agrisphere-portal.com/clientPortal/includes/allSafe/forms/js/jsondb.3.0.js"></script>
<script src="https://agrisphere-portal.com/agAudit/js/AmbientLightBox.js"></script>
<link href="https://agrisphere-portal.com/lotoProcedures/css/AmbientLightBox.css" rel="stylesheet" />

CSS

body{
  font-family:helvetica;
}




.loto-form-procedure-browser-component{
  max-width: 810px;
  margin: auto;
  border: solid 1px #ccc;
  padding: 30px;
  border-radius: 15px;
  position: relative;
  perspective: 100px;
}
.loto-form-procedure-browser-component:after{
  background-image: url(https://agrisphere-portal.com/lotoProcedures/assets/validated.svg);
    position: absolute;
    right: 5px;
    top: 20px;
    content: "";
    z-index: 9999;
    width: 48px;
    height: 48px;
    background-size: 100%;
    transform: translateZ(100px);
    pointer-events: none;
    opacity: 0;
    transition: all 0.7s;
}
.loto-form-procedure-browser-component:before{
    position: absolute;
    right: 5px;
    top: 10px;
    content: "VERIFIED";
    z-index: 9999;
    width: 48px;
    background-size: 100%;
    transform: translateZ(-100px);
    pointer-events: none;
    text-align: center;
    transition: all 0.7s;
    font-size: 10px;
    color: #24a14b;
    font-weight: bold;
    opacity: 0;
}
.loto-form-procedure-browser-component.verified:after{
  transform: translateZ(0px);
  opacity: 1;
}
.loto-form-procedure-browser-component.verified:before{
  transform: translateZ(0px);
  opacity: 1;
}
.loto-form-procedure-browser-component ul.current-item{
  list-style: none;
  margin: 0px;
  padding: 0px;
  margin-top: 15px;
}
.loto-form-procedure-browser-component ul.current-item>li{
  padding: 0px;
  width: calc(33.33% - 20px);
  margin: 10px;
  vertical-align: top;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s;
}
.loto-form-procedure-browser-component ul.current-item>li:hover{
  transform: scale(1.1);
}
.loto-form-procedure-browser-component ul.current-item>li>img{
  width: 100px;
  padding: 5px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 3px 5px 5px 0px rgba(0, 0, 0, 0.6);
  display: block;
  margin: auto;
  margin-bottom: 10px;
  transition: all...

JavaScript

class LOTOFormBrowser {
  constructor(parentElement, equipmentID, configuration) {

    if(!configuration.component_enabled){

      return false;

    }

    this.parentElement = parentElement;
    this.equipmentID = equipmentID;
    this.configuration = configuration;

    this.ui;

    this.build();
  }

  build() {
    let t = this;

    t.ui = $(`<div class="loto-form-procedure-browser-component">
    <h1><img src="https://agrisphere-portal.com/lotoProcedures/assets/loto-dashboard-icon.svg">Equipment Lock-Out / Tag-Out Procedures</h1>
    <div class="loto-browser"></div>
    <div class="procedure-preview" style="display: none;"><ul class="templated-steps"></ul><p><button class="verify">Verify</button><button class="cancel">Cancel</button></p></div>
    <ul class="current-item"></ul>
    <ol class="child-item"></ol>
    </div>`);

    if(t.configuration.component_mapto && !t.equipmentID){

      t.parentElement.append(t.ui);
      return false;

    }

    t.ui.find(".procedure-preview button.verify").click(function () {
      t.ui.find(".procedure-preview").hide();

      $([document.documentElement, document.body]).animate({
        scrollTop: t.ui.offset().top-20,

      }, 500).promise().then(function() {

        t.ui.addClass('verified');

      });

      

    });

    t.ui.find(".procedure-preview button.cancel").click(function () {
      t.ui.find(".procedure-preview").hide();

    });

    if (this.equipmentID) {
      t.loadProcedures(t.ui.find(".current-item"), t.equipmentID);
    } else {
      t.ui.find(".loto-browser")
        .append(`<p><label>Facility:</label><select name="loto-browser-facility"><option value="">Select..</option></select></p>
    <p><label>Select Equipment:</label><select name="loto-browser-equipment"><option value="">No facility Selected..</option></select></p>
    <p class="loto-browser-status" style="display: none;"><label>Service Status:</label><span...