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

class CorpusList extends List {
  constructor(idOrElement, subscriberList, options={}) {
    super(idOrElement, {...CorpusList.DEFAULT_OPTIONS, ...options});
    subscriberList.push(this);
  }


  _init(corpora) {
    this.addCorpora(Object.values(corpora));
  }


  _update(patch) {
    let item, corpusStatusElement, operation, pathArray;

    for (operation of patch) {
      /* "/corpusId/valueName" -> ["corpusId", "valueName"] */
      pathArray = operation.path.split("/").slice(1);
      switch(operation.op) {
        case "add":
          this.addCorpora([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, _status: operation.value});
              break;
            default:
              break;
          }
        default:
          break;
      }
    }
  }


  addCorpora(corpora) {
    let data = [];
    for (let corpus of corpora) {
      data.push({description: corpus.description,
                 id: corpus.id,
                 link: `/corpora/${corpus.id}`,
                 status: corpus.status,
                 title: corpus.title});
    }
    this.add(data);
  }
}
CorpusList.DEFAULT_OPTIONS = {
  item: `<tr>
           <td>
             <a class="btn-floating disabled">
               <i class="material-icons">book</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 waves-effect waves-light link">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: "status", attr: "data-status"}]};



class JobList extends List {
  constructor(idOrElement, subscriberList, options={}) {
    super(idOrElement, {...JobList.DEFAULT_OPTIONS, ...options});
    subscriberList.push(this);
  }


  _init(jobs) {
    this.addJobs(Object.values(jobs));
  }


  _update(patch) {
    let item, jobStatusElement, operation, pathArray;

    for (operation of patch) {
      /* "/jobId/valueName" -> ["jobId", "valueName"] */
      pathArray = operation.path.split("/").slice(1);
      switch(operation.op) {
        case "add":
          if (pathArray.includes("results")) {break;}
          this.addJobs([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;
      }
    }
  }


  addJobs(jobs) {
    let data = [];
    for (let job of jobs) {
      data.push({description: job.description,
                 id: job.id,
                 link: `/jobs/${job.id}`,
                 service: job.service,
                 status: job.status,
                 title: job.title});
    }
    this.add(data);
  }
}
JobList.DEFAULT_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
  }
}