JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<link rel="stylesheet" href="https://agrisphere-portal.com/clientPortal/includes/allSafe/forms/css/AliveComponent.max.css?cc=1718638403">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table class="layout"><tbody><tr><td data-header="false" data-header-expanding="false" data-background-color="" data-font-color="" data-align="left" data-colspan="1" data-width="100" data-height="100" colspan="1" width="100%" style="height:100px; text-align: left; background-color: !important; color: !important; " class="aliveComponents" data-component-type="data"><label data-component-label="Facility"><span data-component-type="data"><span>Facility</span></span> <select class="dynamic-form-data-component" autocomplete="off" height="80" id="myController1" name="myController1" required="1" width="220" guid="b7e5b459-2922-47e8-b705-e5c25bf91456" data-table="facilities" data-table-alias="Facilities" mapto="facility"><option value="" selected="">Select..</option><option value="1000105" data-facility-id="1000105" data-facility-name="Facility Name #1" data-facility-conventionname="FCA" data-facility-address="" data-facility-city="" data-facility-state="AL" data-facility-zip="" data-facility-phone="">Facility Name #1</option><option value="1000106" data-facility-id="1000106" data-facility-name="Facility Name #2" data-facility-conventionname="FCB" data-facility-address="" data-facility-city="" data-facility-state="" data-facility-zip="" data-facility-phone="">Facility Name #2</option><option value="1000008" data-facility-id="1000008" data-facility-name="Houston TX" data-facility-conventionname="HTX" data-facility-address="12345 No-nome Street" data-facility-city="Houston" data-facility-state="TX" data-facility-zip="45433" data-facility-phone="555-555-5555">Houston TX</option><option value="3" data-facility-id="3" data-facility-name="Mattoon" data-facility-conventionname="MAP" data-facility-address="4159 Enquist Rd" data-facility-city="Matton"...

CSS

input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus {
    border-color: #e9322d;
    -webkit-box-shadow: 0 0 6px #f8b9b7;
    -moz-box-shadow: 0 0 6px #f8b9b7;
    box-shadow: 0 0 6px #f8b9b7;
}



.aliveComponents label>select[data-table="agGear_equipment"].docubinConnectedComponent, .aliveComponents label>select[data-table="agGear_ppe"].docubinConnectedComponent {
  
    width: calc(100% - 144px);
    
}
button.agGear-component-open-scanner-button{
  display: inline-block;
  width: 36px;
  margin-left: 4px;
  border: none;
  height: 36px;
  background-color: #000;
  background-image:...

JavaScript

function enableComponentScanner(){

	var scannerURL = 'https://agrisphere-portal.com/agGear/scanner.preview/';

	// place the trigger next to component
  
  $('select.dynamic-form-data-component[data-table="agGear_equipment"]').each(function(){
  
  	var component = $(this);
    
    component.addClass('docubinConnectedComponent');
  
  	let trigger = $('<button class="agGear-component-open-scanner-button"></button>');
    
    trigger.click(function(){
    
    	// check if linked to facilities or not
  
      if(component.attr('data-table-connect') == 'true'){
      
      	// connected to facility
        
        var facility = '';
        var type = '';
        
        if(component.attr('data-table-connect-to') == 'facilities'){
        
          if(!$('select.dynamic-form-data-component[data-table="facilities"]').val()){

            $('select.dynamic-form-data-component[data-table="facilities"]').focus();

            return false;

          }
        
        	facility = btoa($('select.dynamic-form-data-component[data-table="facilities"]').val());
        
        }
        
        if(component.attr('data-table') == 'agGear_equipment'){
        
        	type = "equipment";
        
        } else if(component.attr('data-table') == 'agGear_ppe'){
        
        	type = "ppe";
        
        }
        
        var request = scannerURL + '?docubinConnect=' + component.attr('mapto') + '&facility=' + facility + '&type=' + type;
      
      } else {
      
      	// not connected to facility
        
        var facility = '';
        var type = '';
        
        if(component.attr('data-table') == 'agGear_equipment'){
        
        	type = "equipment";
        
        } else if(component.attr('data-table') == 'agGear_ppe'){
        
        	type = "ppe";
        
        }
      	
        var request = scannerURL + '?docubinConnect=' + component.attr('mapto') + '&facility=' + facility + '&type=' + type;
      
      }
      
      // open the...