enviPy-bayer/static/js/epp/epp.js

class Setting {
  constructor(nameInputId, selectedPackagesId, relativeReasoningSelectId, cutoffInputId, evaluationTypeSelectId,
              availableTSSelectId, formsId, tableId, summaryTableId) {
    this.nameInputId = nameInputId;
    this.selectedPackagesId = selectedPackagesId;
    this.relativeReasoningSelectId = relativeReasoningSelectId;
    this.cutoffInputId = cutoffInputId;
    this.evaluationTypeSelectId = evaluationTypeSelectId;
    this.availableTSSelectId = availableTSSelectId;
    this.formsId = formsId;
    this.tableId = tableId;
    this.summaryTableId = summaryTableId;

    // General settings
    this.name = null;
    this.selectedPackages = [];

    // Relative Reasoning related
    this.selectedRelativeReasoning = null;
    this.cutoff = null;
    this.evaluationType = null;

    // parameters such as { "lowPH": 7, "highPH": 8 }
    this.tsParams = {};
  }

  extractName() {
    var tempName = $('#' + this.nameInputId).val()
    if (tempName == '') {
        console.log("Name was empty...");
        return;
    }
    this.name = tempName;
  }

  extractSelectedPackages() {
    var selPacks = $("#" + this.selectedPackagesId + " :selected");
    var ref = this;
    ref.selectedPackages = [];
    selPacks.each(function () {
      var obj = {}
      obj['id'] = this.value;
      obj['name'] = this.text;
      ref.selectedPackages.push(obj);
    });
  }

  extractRelativeReasoning() {
    var tempRR = $('#' + this.relativeReasoningSelectId + " :selected").val()
    if (tempRR == '') {
        console.log("RR was empty...");
        return;
    }
    var obj = {}
    obj['id'] = $('#' + this.relativeReasoningSelectId + " :selected").val()
    obj['name'] = $('#' + this.relativeReasoningSelectId + " :selected").text()
    this.selectedRelativeReasoning = obj;
  }

  extractCutoff() {
    var tempCutoff = $('#' + this.cutoffInputId).val()
    if (tempCutoff == '') {
        console.log("Cutoff was empty...");
        return;
    }
    this.cutoff = tempCutoff;
  }

  extractEvaluationType() {
    var tempEvaluationType = $('#' + this.evaluationTypeSelectId).val()
    if (tempEvaluationType == '') {
        console.log("EvaluationType was empty...");
        return;
    }
    this.evaluationType = tempEvaluationType;
  }

  addTruncator() {
    // triggered by "Add"
    // will extract values and afterwards updates table + summary
    var type = $("#" + this.availableTSSelectId + " :selected").val();
    var text = $("#" + this.availableTSSelectId + " :selected").text();
    var form = $("#" + type + "_form > :input")

    // flag to check whether at least one input had a valid value
    var addedValue = false;

    // reference being used in each
    var ref = this;

    form.each(function() {
        if(this.value == "" || this.value === "undefined"){
            console.log(this);
            console.log("Skipping " + this.name);
        } else {
            var obj = {}
            obj[this.name] = this.value;
            obj['text'] = text;
            ref.tsParams[type] = obj
        }
    });

    this.updateTable();
    this.updateSummaryTable();
  }

  removeTruncator(rowId) {
    var summary = rowId.startsWith("sum") ? true : false;
    // plain key
    var key = rowId.replace(summary ? "sum" : "trunc", "").replace("row", "");

    console.log("Removing " + key);

    // remove the rows
    $("#trunc"+ key + "row").remove();
    if($("#sum"+ key + "row").length > 0) {
        $("#sum"+ key + "row").remove();
    }

    delete this.tsParams[key];
  }

  updateTable() {
    // remove all children
    $('#'+this.tableId + "Body").empty()

    var innerHTML = "<tr>" +
                      "<td>Name</td>" +
                      "<td>Value</td>" +
                      "<td width='10%'>Action</td>" +
                    "</tr>";

    for (var x in this.tsParams) {
      var val = "";
      for (var y in this.tsParams[x]){
        if (y == 'text') {
            continue;
        }
        val += this.tsParams[x][y]

      }
      innerHTML += "<tr id='trunc" + x + "row'>" +
                     "<td>" + this.tsParams[x]['text'] + "</td>" +
                     "<td>" + val + "</td>" +
                     "<td width='10%'>"+
                       "<button type='button' id='" + x + "button' class='form-control' onclick='s.removeTruncator(\"trunc" + x + "row\")'>Remove</button>" +
                     "</td>" +
                   "</tr>";
    }

    $('#'+this.tableId + "Body").append(innerHTML);
  }

  packageRows() {
    var res = '';
    for(var p in this.selectedPackages) {
        var obj = this.selectedPackages[p];
        res += "<tr>" +
                 "<td>Package</td>" +
                 "<td>" + obj['name'] + "</td>" +
                 "<td width='10%'>" +
                   // "<button type='button' id='relativereasoningbutton' class='form-control' onclick='s.removeTruncator(\"Relative Reasoning\")'>Remove</button>" +
                 "</td>" +
               "</tr>";
    }
    return res;
  }

  modelRow() {
    if(this.selectedRelativeReasoning == null) {
      return '';
    }
    return "<tr>" +
             "<td>Relative Reasoning</td>" +
             "<td>" + this.selectedRelativeReasoning['name'] + " " + (this.evaluationType == "singleGen" ? "SG" : "MG") + " with t=" + this.cutoff + " </td>" +
             "<td width='10%'>" +
               // "<button type='button' id='relativereasoningbutton' class='form-control' onclick='s.removeTruncator(\"Relative Reasoning\")'>Remove</button>" +
             "</td>" +
           "</tr>";
  }

  updateSummaryTable() {
    // remove all children
    $('#'+this.summaryTableId + "Body").empty()

    var innerHTML = "<tr>" +
                      "<td>Name</td>" +
                      "<td>Value</td>" +
                      "<td width='10%'>Action</td>" +
                    "</tr>";

    innerHTML += this.packageRows();
    innerHTML += this.modelRow();

    // var innerHTML = ''
    for (var x in this.tsParams) {
      var val = "";
      for (var y in this.tsParams[x]){
        if (y == 'text') {
            continue;
        }
        val += this.tsParams[x][y]

      }
      innerHTML += "<tr id='sum" + x + "row'>" +
                     "<td>" + this.tsParams[x]['text'] + "</td>" +
                     "<td>" + val + "</td>" +
                     "<td width='10%'>"+
                       "<button type='button' id='" + x + "button' class='form-control' onclick='s.removeTruncator(\"sum" + x + "row\")'>Remove</button>" +
                     "</td>" +
                   "</tr>";
    }

    $('#'+this.summaryTableId + "Body").append(innerHTML);
  }

}