JSFiddle - React, Tailwind, and code Playground

by SHELDON PASCIAK

HTML

<ul style="display: inline-block;padding:5px;">
<li style="display: inline-block;padding:5px;">Aircraft</li>
<li style="display: inline-block;padding:5px;">AircraftType</li>
<li style="display: inline-block;padding:5px;">ExperienceTypeRequirement</li>
<li style="display: inline-block;padding:5px;">User</li>
<li style="display: inline-block;padding:5px;">Organization</li>
<li style="display: inline-block;padding:5px;">PilotLogEntry</li>
<li style="display: inline-block;padding:5px;">ExperienceType</li>
<li style="display: inline-block;padding:5px;">Role</li>
<li style="display: inline-block;padding:5px;">PilotCertification</li>
<li style="display: inline-block;padding:5px;">Certification</li>
</ul>

<!-- <p>
@ManyToOne<br>
@JoinColumn(name="store_id")<br>
private Store store;<br>
</p> -->

<!-- <p>
@OneToMany(mappedBy="store")<br>
private List &lt; Customer &gt; customers;<br>
</p> -->
<br>
For example: Many     'User'      In a      'Organization'<br>
For example: Many     'Aircraft'      In a      'Organization'<br>
For example: Many     'User'      In a      'Role'<br><br>

Many: <input  type="text" name="n1" id="n1" value="Customer" /><input type="button" onclick="swapthem()" value="<swap>" />
<input  type="text" name="n2" id="n2" value="Store" /> 
<input type="button" onclick="updatethem()" style="color:red;" value="Step 1" />
<hr>
<p>
List variable naming: <input disabled type="text" name="n3" id="n3" value="" />
</p>
<hr>
List variable renaming:<input type="text" name="n4" id="n4" value="customers" />
<input type="button" value="Step 2" style="color:red;" onclick="convert()" />
<hr>
<div id="lines"></div>

JavaScript

var n1="Customer";   // // Customer
var n2 ="Store";  		// // Store
var n3="customers";   // staffs //customers   
var n4="customers"    // employees //customers

function swapthem() {
  var aa1 = document.getElementById("n1").value;
  var bb1 = document.getElementById("n2").value;
  var cc1 = document.getElementById("n2").value;
  document.getElementById("n2").value = document.getElementById("n1").value;
  document.getElementById("n1").value = cc1;
}

function updatethem() {

  n1 = document.getElementById("n1").value;
  
  n2 = document.getElementById("n2").value;

  document.getElementById("n3").value = n1.toLowerCase()+"s";
  
  document.getElementById("n4").value = n1.toLowerCase()+"s";

  n3 = document.getElementById("n3").value;

  c1=n1;
  
  clst=n1.toLowerCase()+"s";
  
  clnm=n1.toLowerCase();
  
  r1=n2;

}
  
  /*
  
  example
  
  	public void addCustomer(Customer customer) {
		if (customers == null) {
			customers = new ArrayList<>();
		}
		if (!customers.contains(customer)) {
			customers.add(customer);
			if (customer.getStore() != null && !customer.getStore().equals(this)) {
				customer.getStore().removeCustomer(customer);
			}
			customer.setStore(this);
		}
	}

	public void removeCustomer(Customer customer) {
		if (customers != null && customers.contains(customer)) {
			customers.remove(customer);
			customer.setStore(null);
		}
	}
  
  
  */
  
/*   

 example

var manyToMany = `
  
    public void addFilm(Film film) {
      if (films == null) {
        films = new ArrayList<>();
      }
      if (!films.contains(film)) {
        films.add(film);
        film.addActor(this);
      }
    }
  
    public void removeFilm(Film film) {
      if (films != null && films.contains(film)) {
        films.remove(film);
        film.removeActor(this);
      }
    }
    
  ` */
  
  function convert() {
  
    var lines = `
    // NOTE: These are use for list mapping in the 'Store' class
    
  public void addCustomer(Customer customer) {
	&nbsp; &nbsp;...