class Fahrzeuge extends Route
{
  static route = "Fahrzeuge";
  static array = {};
  static groups = {};
  static subs = {
    "Eingewiesene": {color: "chocolate", icon: "person.png", entries: []}
  };
  static selects = {};
  static admin = false; // global page admin rights
  static prints = [];
  static filter = [];
  //static selected = [];
  //static dropzones = {};
  static visible = false;
  
  constructor(groupName, json) {
    super(
      groupName, 
      json, 
      Fahrzeuge.route, 
      Fahrzeuge.array, 
      Fahrzeuge.groups, 
      Fahrzeuge.subs,
      Fahrzeuge.selects,
      Fahrzeuge.admin/*, 
      Fahrzeuge.prints, 
      Fahrzeuge.filter, 
      Fahrzeuge.selected, 
      Fahrzeuge.dropzones*/
    );
  }
  
  init(json) {
  	this.Kürzel = json.MAIN.KÜRZEL;
  	this.Name = json.MAIN.NAME;
  	this.Bild = json.MAIN.BILD;
  }
  
  renderEntry(drawEdit) {
  	let html = "<div class='bild'>";
  	if (this.Bild.EXISTIERT) {
  		html+= "<img src='/pic.php/Fahrzeuge/Bild/" + this.Bild.ADRESSE + "?h=260' />";
  		if (drawEdit) {
  			html+= "<div id='" + this.marker("Bild/Delete") + "' class='deleter'><img src='/res/dark/delete.png' /></div>";
  		}
  	} else {
  		html+= "<img src='/upl/Fahrzeuge/Bild/Nopic.svg' />";
  	}
  	if (drawEdit) {
  		html+= "<form action='/" + this.marker("Bilder") + "' class='dropzone' id='dropzone_" + this.ID + "'></form>";
  	}
  	html += "</div>";
  	if (drawEdit) {
  		html+= "<ul>"
  		     + "<li><img src='/res/dark/truck.png' /><input id='" + this.marker("Name") + "' value='" + this.Name + "' style='width: 8cm;'></li>"
	  			 + "<li><img src='/res/dark/truck.png' /><input id='" + this.marker("Kürzel") + "' value='" + this.Kürzel + "' style='width: 4cm;'></li>"
	  			 + "<li id='" + this.marker("Save") + "' class='button'><img src='/res/dark/save.png' /></li>"
	         + "<li id='" + this.marker("Delete") + "' class='button'><img src='/res/dark/delete.png' /></li>"
	         + "<li id='" + this.marker("Reset") + "' class='button'><img src='/res/dark/cancel.png' /></li>"
	         + "</ul>";
  	} else {
			html+= "<ul><li><img src='/res/dark/truck.png' />" + this.Name + "</li>"
			       "<li><img src='/res/dark/truck.png' />" + this.Kürzel + "</li>";
	  	if (this.admin) {
	  	  html += "<li id='" + this.marker("Edit") + "' class='button'><img src='/res/dark/edit.png' title='Bearbeiten' /></li>";
	  	}
	  	html+= "</ul>";
  	}
  	document.getElementById(this.marker("Main")).innerHTML = html;
  }
  
  static RenderAdd() {
  	let html = "<h1>Fahrzeug hinzufügen</h1>"
  	         + "<div class='toggleVisibility'><ul><li>Name: <input id='Fahrzeuge/Add/Name' style='width: 8em;' /></li>"
  	         + "<li>Kürzel: <input id='Fahrzeuge/Add/Kürzel' style='width: 4em;' /></li>"
  	         + "<li id='Fahrzeuge/Add/Add' class='button'>Hinzufügen <img src='/res/dark/add.png' /></li></ul></div>";
    return html;
  }
  
  renderGroup() {
  	return Fahrzeuge.RenderGroup(this.groupName);
  }
  
  static RenderGroup(groupName) {
  	return {
  		begin: "<article id='Group/" + groupName + "'><div class='group_title'><h1>" + groupName + "</h1></div>",
  		end: "</article>"
  	};
  }
  
  static New(groupName, json) {
    return new Fahrzeuge(groupName, json);
  }
  
  collect() {
    return Fahrzeuge.Collect(this.ID);
  }
  
  static Collect(id, contextId = null) {
    return {
    	ID: id,
    	KÜRZEL: this.Value(id, "Kürzel"),
    	NAME: this.Value(id, "Name")
    };
  }
  
  static RenderSelect(selectId, fahrzeugId, nullable = true) {
    let html = "<select id='" + selectId + "'>" + (nullable ? "<option value='null'></option>" : "");
    for (let group in Fahrzeuge.groups) {
    	for (let e in Fahrzeuge.groups[group]) {
    		const entry = Fahrzeuge.groups[group][e];
      	html+= "<option value='" + entry.ID + "'" + (entry.ID==fahrzeugId ? " selected" : "") + ">" + entry.Kürzel + "</option>";
    	}
    }
    html+= "</select>";
    return html;
  }
}