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, matchRowElement, lcCellElement, lcTokenElement, token;
    // gather values from item
    values = item.values();
    console.log("CHONK");
    console.log(chunk);
    // get infos for full match row
    matchRowElement = document.createElement("tr");
    for (cpos of values["lc"]) {
      console.log(cpos);
      lcCellElement = document.createElement("td");
      lcTokenElement = document.createElement("span");
      lcTokenElement.classList.add("token");
      lcTokenElement.dataset.cpos = cpos;
      token = chunk["cpos_lookup"][cpos];
      lcTokenElement.innerText = token["word"];
      lcCellElement.appendChild(lcTokenElement);
      //   let hit_tokens = "";
    }
    matchRowElement.appendChild(lcCellElement);
    //   // get infos of match
    //   let textTitles = new Set();
    //   for (cpos of match["hit"]) {
    //     tokenElement = document.createElement("span");
    //     tokenElement.classList.add("token");
    //     tokenElement.dataset.cpos = cpos;
    //     token = chunk["cpos_lookup"][cpos];
    //     tokenElement.innerText = token["word"];
    //     hit_tokens += " " + tokenElement.outerHTML;
    //     // 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.onclick = function() {inspect()};
    //   inspectBtn.innerHTML = '<i class="material-icons">search</i>';
    //   hit_tokens += "<p>" + inspectBtn.outerHTML + "</p>";
    //   // get infos for right context of match
    //   let rc_tokens = "";
    //   for (cpos of match["rc"]) {
    //     tokenElement = document.createElement("span");
    //     tokenElement.classList.add("token");
    //     tokenElement.dataset.cpos = cpos;
    //     token = chunk["cpos_lookup"][cpos];
    //     tokenElement.innerText = token["word"];
    //     rc_tokens += " " + tokenElement.outerHTML;
    //   }
    //   // put all infos into an javascribt object
    //   textTitleElement = document.createElement("span");
    //   textTitleElement.classList.add("text-titles");
    //   textTitles = [...textTitles].join(",");
    //   textTitleElement.innerText = textTitles;
    //
    //   matchRowElement.appendChild(textTitleElement);
    //   // matchRowElement.appendChild(lc_tokens);
    //   // matchRowElement.appendChild(hit_tokens);
    //   // matchRowElement.appendChild(rc_tokens);
    //   // matchRowElement.appendChild(index);
    // }
    console.log(matchRowElement.outerHTML);
    return matchRowElement
  }
}