class PersonalPage extends Page
{
	static routes = {
		"Personal": {needRead: true, needWrite: false}
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
  static route = "Personal";
  static array = {};
  static groups = {};
  static subs = {
    "Abteilungen": {color: "purple", icon: "department.png", entries: []},
    "Gruppen": {color: "olive", icon: "group.png", entries: []},
    "Lehrgänge": {color: "teal", icon: "skill.png", entries: []},
    "Einweisungen": {color: "chocolate", icon: "person.png", entries: []}
  };
  static selects = {
  	"Kategorie" : [],
  	"Funktion" : []
  };
  static admin = true; // global page admin rights
  static prints = [];
  static filter = [];
  //static selected = [];
  //static dropzones = {};
  static visible = false;
  
  constructor(groupName, json) {
    super(
      groupName, 
      json, 
      Personal.route, 
      Personal.array, 
      Personal.groups, 
      Personal.subs,
      Personal.selects,
      Personal.admin/*, 
      Personal.prints, 
      Personal.filter, 
      Personal.selected, 
      Personal.dropzones*/
    );
  }
  
  init(json) {
  	this.OFNr = json.MAIN.OFNR;
  	this.PNr = json.MAIN.PNR;
  	this.Nr = json.MAIN.NR;
  	this.Login = json.MAIN.LOGIN;
  	this.Email = json.MAIN.EMAIL;
  	this.Vornamen = json.MAIN.VORNAMEN;
  	this.Nachnamen = json.MAIN.NACHNAMEN;
  	this.Name = json.MAIN.NAME;
  	this.Bild = json.MAIN.BILD;
  	this.Kategorie = json.MAIN.KATEGORIE;
  	this.Funktion = json.MAIN.FUNKTION;
  }
  
  renderEntry(drawEdit) {
  	let html = "<div class='bild'>";
  	if (this.Bild.EXISTIERT) {
  		html+= "<img src='/pic.php/Personal/Bildadresse/" + 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/Personal/Bildadresse/Nopic.svg' />";
  	}
  	if (drawEdit) {
  		html+= "<form action='/" + this.marker("Bilder") + "' class='dropzone' id='dropzone_" + this.ID + "'></form>";
  	}
  	html += "</div><ul>";
  	
  	// TODO: Draw selectbox
  	
  	if (drawEdit) {
  	  html+= this.renderField("number.png", this.renderInput("OFNr", this.OFNr, 1.5, 2) + "-" + this.renderInput("PNr", this.PNr, 2, 3))
  	       + this.renderField("person.png", this.renderInput("Nachnamen", this.Nachnamen) + ", " + this.renderInput("Vornamen", this.Vornamen))
  	       + this.renderField("type.png", this.renderSelect("Kategorie", this.Kategorie.ID))
  	       + this.renderField("note.png", this.renderInput("Login", this.Login) + "@feuerwehr-bs.net")
  	       + this.renderField("star.png", this.renderSelect("Funktion", this.Funktion.ID, 2.5))
  	       + this.renderButton("save.png", "Save", "Speichern")
  	       + this.renderButton("delete.png", "Delete", "Löschen")
  	       + this.renderButton("cancel.png", "Reset", "Zurücksetzen");
  	} else {
			html+= this.renderField("number.png", this.Nr)
			     + this.renderField("person.png", "<b>" + this.Nachnamen + ", " + this.Vornamen + "</b>")
			     + (this.Login=="" || this.Login===null ? this.renderField("note.png", "<span class='red'>Kein Login!</span>") : "")
			     + this.renderField("star.png", this.Funktion!==null ? this.Funktion.KÜRZEL : "-");
	  	if (this.admin) {
	  	  html += this.renderButton("edit.png", "Edit", "Bearbeiten");
	  	}
  	}
  	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='Personal/Add/Name' style='width: 8em;' /></li>"
  	         + "<li>Kürzel: <input id='Personal/Add/Kürzel' style='width: 4em;' /></li>"
  	         + "<li id='Personal/Add/Add' class='button'>Hinzufügen <img src='/res/dark/add.png' /></li></ul></div>";
    return html;
  }
  
  renderGroup() {
  	return Personal.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 Personal(groupName, json);
  }
  
  collect() {
    return Personal.Collect(this.ID);
  }
  
  static Collect(id, contextId = null) {
    return {
    	ID: id,
    	OFNR: this.Value(id, "OFNr"),
    	PNR: this.Value(id, "PNr"),
    	NACHNAMEN: this.Value(id, "Nachnamen"),
    	VORNAMEN: this.Value(id, "Vornamen"),
    	KATEGORIE: this.Value(id, "Kategorie"),
    	LOGIN: this.Value(id, "Login"),
    	FUNKTION: this.Value(id, "Funktion")
    };
  }
  
  static RenderSelect(selectId, fahrzeugId, nullable = true) {
    let html = "<select id='" + selectId + "'>" + (nullable ? "<option value='null'></option>" : "");
    for (let group in Personal.groups) {
    	for (let e in Personal.groups[group]) {
    		const entry = Personal.groups[group][e];
      	html+= "<option value='" + entry.ID + "'" + (entry.ID==fahrzeugId ? " selected" : "") + ">" + entry.Kürzel + "</option>";
    	}
    }
    html+= "</select>";
    return html;
  }
}