JSFiddle - React, Tailwind, and code Playground

by Danish Farman

HTML

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js”></script>

<div id="results">

</div>

JavaScript

let inductions = [
{
    name:'nonsuperbatch',
    selectedFilters:{
      Zones: ['01','02'],
      SpecificFilters: {
        orderNumber: '',
        toteId: '',
        splitToggle: false,
      },
      OrderNumberFilters: ['order1'],
      ColumnFilters: [{'quantity':22}],
    }
  },
{
    name:'superbatch',
    selectedFilters:{
      Zones: ['03','04'],
      SpecificFilters: {
        orderNumber: '',
        toteId: '',
        splitToggle: false,
      },
      OrderNumberFilters: ['order2'],
      ColumnFilters: [{'order':'order3'}],
    }
  }
]

//console.log(inductions.find((f)=>f.name === 'superbatch'));
//console.log(inductions.find((f)=>f.name === 'nonsuperbatch'));
let element = document.getElementById("results");
let eventHandlers = { 
    changeZoneGroup: function (value) {
			element.innerHTML = "zone group name was changed: " + value;
			element.innerHTML += "<br />";
    }, 
    changeZones: function (value) {
			element.innerHTML += "zones selected: " + value;
			element.innerHTML += "<br />";
    },
    applyOrderNumberFilter: function(value) {
			element.innerHTML += "order numbers: " + value;
			element.innerHTML += "<br />";
    }, 
    applyColumnFilter: function(value) {
			element.innerHTML += "column numbers: " + value;
			element.innerHTML += "<br />";
    }    
};

let superBatch = inductions.find((f)=>f.name === 'superbatch');
let nonSuperBatch = inductions.find((f)=>f.name === 'nonsuperbatch');

eventHandlers.changeZoneGroup("zg1");
eventHandlers.changeZones(superBatch.selectedFilters.Zones);
eventHandlers.applyOrderNumberFilter(superBatch.selectedFilters.OrderNumberFilters);
eventHandlers.applyColumnFilter(JSON.stringify(superBatch.selectedFilters.ColumnFilters));