nopaque/app/static/js/nopaque.lists.js

class RessourceList extends List {
  constructor(idOrElement, subscriberList, dataMapper=null, options={}) {
    super(idOrElement, {...RessourceList.options, ...options});
    this.dataMapper = dataMapper;
    subscriberList.push(this);
  }


  _init(ressources) {
    this.addRessources(Object.values(ressources));
  }


  _update(patch) {
    let item, pathArray;

    for (let operation of patch) {
      /* "/ressourceId/valueName" -> ["ressourceId", "valueName"] */
      pathArray = operation.path.split("/").slice(1);
      switch(operation.op) {
        case "add":
          this.addRessources([operation.value]);
          break;
        case "remove":
          this.remove("id", pathArray[0]);
          break;
        case "replace":
          item = this.get("id", pathArray[0])[0];
          switch(pathArray[1]) {
            case "status":
              item.values({status: operation.value});
              break;
            default:
              break;
          }
        default:
          break;
      }
    }
  }


  addRessources(ressources) {
    if (this.dataMapper) {
      this.add(ressources.map(x => this.dataMapper(x)));
    } else {
      this.add(ressources);
    }
  }
}
RessourceList.dataMapper = {
  corpus: corpus => ({description: corpus.description,
                     id: corpus.id,
                     link: `/corpora/${corpus.id}`,
                     service: "corpus",
                     status: corpus.status,
                     title: corpus.title}),
  job: job => ({description: job.description,
               id: job.id,
               link: `/jobs/${job.id}`,
               service: job.service,
               status: job.status,
               title: job.title})
};
RessourceList.options = {
  item: `<tr>
           <td>
             <a class="btn-floating disabled">
               <i class="material-icons service"></i>
             </a>
           </td>
           <td>
             <b class="title"></b><br>
             <i class="description"></i>
           </td>
           <td>
             <span class="badge new status" data-badge-caption=""></span>
           </td>
           <td class="right-align">
             <a class="btn-small link waves-effect waves-light">View<i class="material-icons right">send</i>
           </td>
         </tr>`,
  page: 4,
  pagination: {innerWindow: 8, outerWindow: 1},
  valueNames: ["description",
               "title",
               {data: ["id"]},
               {name: "link", attr: "href"},
               {name: "service", attr: "data-service"},
               {name: "status", attr: "data-status"}]};


class ResultList extends List {

  createResultRowElement(item, chunk) {
    let values, cpos, token, matchRowElement, lcCellElement, hitCellElement, rcCellElement, textTitlesCellElement;
    // gather values from item
    values = item.values();
    console.log("CHONK");
    console.log(chunk);

    // get infos for full match row
    matchRowElement = document.createElement("tr");
    matchRowElement.setAttribute("data-index", values["index"])
    lcCellElement = document.createElement("td");
    lcCellElement.classList.add("left-context");
    matchRowElement.appendChild(lcCellElement);
    for (cpos of values["lc"]) {
      token = chunk["cpos_lookup"][cpos];
      lcCellElement.insertAdjacentHTML("beforeend", `<span class="token" data-cpos="${cpos}">${token["word"]} </span>`);
    }

    // get infos for hit of match
    let textTitles = new Set();
    hitCellElement = document.createElement("td");
    hitCellElement.classList.add("match-hit");
    textTitlesCellElement = document.createElement("td");
    textTitlesCellElement.classList.add("titles");
    matchRowElement.appendChild(hitCellElement);
    for (cpos of values["hit"]) {
      token = chunk["cpos_lookup"][cpos];
      hitCellElement.insertAdjacentHTML("beforeend", `<span class="token" data-cpos="${cpos}">${token["word"]} </span>`);
      // get text titles of every hit cpos token
      textTitles.add(chunk["text_lookup"][token["text"]]["title"]);
      // add button to trigger more context to every match td
      var inspectBtn = document.createElement("a");
      inspectBtn.setAttribute("class", "btn-floating btn-flat waves-effect waves-light grey right inspect");
      inspectBtn.innerHTML = '<i class="material-icons">search</i>';
      inspectBtn.onclick = function () {inspect(values["index"])};
    }
    // add text titles at front as first td of one row
    hitCellElement.appendChild(inspectBtn);
    textTitlesCellElement.innerText = [...textTitles].join(", ");
    matchRowElement.insertAdjacentHTML("afterbegin", textTitlesCellElement.outerHTML);

    // get infos for right context of match
    rcCellElement = document.createElement("td");
    rcCellElement.classList.add("right-context");
    matchRowElement.appendChild(rcCellElement);
    for (cpos of values["rc"]) {
      token = chunk["cpos_lookup"][cpos];
      rcCellElement.insertAdjacentHTML("beforeend", `<span class="token" data-cpos="${cpos}">${token["word"]} </span>`);
    }
    console.log(matchRowElement);
    return matchRowElement
  }
}