nopaque/app/static/js/nopaque.CorpusAnalysisClient.js

class CorpusAnalysisClient {
  constructor(corpusId, socket) {
    this.callbacks = {};
    this.corpusId = corpusId;
    this.displays = {};
    this.socket = socket;
    this.resultList = {}; // why do you save it here? we have a global variable results

    // js list options and intialization
    let displayOptionsData = this.getDisplayOptions(displayOptionsFormElement);
    let resultListOptions = {page: displayOptionsData["resultsPerPage"],
      pagination: [{
        name: "paginationTop",
        paginationClass: "paginationTop",
        innerWindow: 8,
        outerWindow: 1
      }, {
        paginationClass: "paginationBottom",
        innerWindow: 8,
        outerWindow: 1
      }],
      valueNames: ["titles", "lc", "c", "rc", {data: ["index"]}],
      item: `<span></span>`};
      this.resultList = new ResultList("result-list", resultListOptions);

    // socket on event fpr corpous analysis initialization
    socket.on("pj_corpus_analysis_init", (response) => {
      var errorText;

      if (response.code === 200) {
        console.log(`pj_corpus_analysis_init: ${response.code} - ${response.msg}`);
        if (this.callbacks.init != undefined) {
          this.callbacks.init(response.payload);
        }
        if (this.displays.init != undefined) {
          this.displays.init.setVisibilityByStatus("success");
        }
      } else {
        errorText = `Error ${response.code} - ${response.msg}`;
        if (this.displays.init.errorContainer != undefined)  {
          this.displays.init.errorContainer.innerHTML = `<p class="red-text"><i class="material-icons tiny">error</i> ${errorText}</p>`;
        }
        if (this.displays.init != undefined)  {
          this.displays.init.setVisibilityByStatus("error");
        }
        console.error(`pj_corpus_analysis_init: ${errorText}`);
      }
    });

    // socket on event for recieveing query results
    socket.on("pj_corpus_analysis_query", (response) => {
      var errorText;

      if (response.code === 200) {
        console.log(`pj_corpus_analysis_query: ${response.code} - ${response.msg}`);
        if (this.callbacks.query != undefined)  {
          this.callbacks.query(response.payload);
        }
        if (this.displays.query != undefined)  {
          this.displays.query.setVisibilityByStatus("success");
        }
      } else {
        errorText = `Error ${response.payload.code} - ${response.payload.msg}`;
        nopaque.flash("error", errorText);
        if (this.displays.query.errorContainer != undefined)  {
          this.displays.query.errorContainer.innerHTML = `<p class="red-text"><i class="material-icons tiny">error</i> ${errorText}</p>`;
        }
        if (this.displays.query != undefined)  {
          this.displays.query.setVisibilityByStatus("error");
        }
        console.error(`pj_corpus_analysis_query: ${errorText}`);
      }
    });

    socket.on("pj_corpus_analysis_query_results", (response) => {
        if (this.callbacks.query_results != undefined) {this.callbacks.query_results(response.payload);}
    });
  }

  init() {
    if (this.displays.init.errorContainer != undefined)  {
      this.displays.init.errorContainer.innerHTML == "";
    }
    if (this.displays.init != undefined)  {
      this.displays.init.setVisibilityByStatus("waiting");
    }
    this.socket.emit("pj_corpus_analysis_init", this.corpusId);
  }

  sendQuery(queryStr) {
    let displayOptionsData;
    let resultListOptions;

    if (this.displays.query.errorContainer != undefined)  {
      this.displays.query.errorContainer.innerHTML == "";
    }
    if (this.displays.query != undefined)  {
      this.displays.query.setVisibilityByStatus("waiting");
    }
    this.resultList.clear(); // empty list for new query
    nopaque.socket.emit("pj_corpus_analysis_query", queryStr);
  }

  getQueryStr(queryFormElement) {
    // gets query
    let queryFormData;
    let queryStr;
    queryFormData = new FormData(queryFormElement);
    queryStr = queryFormData.get("query-form-query");
    return queryStr
  }

  getDisplayOptions(displayOptionsFormElement) {
    // gets display options parameters
    let displayOptionsFormData
    let displayOptionsData;
    displayOptionsFormData = new FormData(displayOptionsFormElement);
    displayOptionsData = {"resultsPerPage": displayOptionsFormData.get("display-options-form-results_per_page"),
                          "resultsContex": displayOptionsFormData.get("display-options-form-result_context"),
                          "expertMode": displayOptionsFormData.get("display-options-form-expert_mode")};
    console.log(displayOptionsData);
    return displayOptionsData
  }

  setCallback(type, callback) {
    // saves callback functions into an object. Key is function type, callback
    // is the callback function
    this.callbacks[type] = callback;
  }

  setDisplay(type, display) {
    this.displays[type] = display;
  }
}


class CorpusAnalysisDisplay {
  constructor(element) {
    this.element = element;
    this.errorContainer = element.querySelector(".error-container");
    this.showOnError = element.querySelectorAll(".show-on-error");
    this.showOnSuccess = element.querySelectorAll(".show-on-success");
    this.showWhileWaiting = element.querySelectorAll(".show-while-waiting");
    this.hideOnComplete = element.querySelectorAll(".hide-on-complete")
  }

  setVisibilityByStatus(status) {
    switch (status) {
      case "error":
        for (let element of this.showOnError) {
          element.classList.remove("hide");
        }
        for (let element of this.showOnSuccess) {
          element.classList.add("hide");
        }
        for (let element of this.showWhileWaiting) {
          element.classList.add("hide");
        }
        break;
      case "success":
        for (let element of this.showOnError) {
          element.classList.add("hide");

        }
        for (let element of this.showOnSuccess) {
          element.classList.remove("hide");
        }
        for (let element of this.showWhileWaiting) {
          element.classList.add("hide");
        }
        break;
      case "waiting":
        for (let element of this.showOnError) {
          element.classList.add("hide");
        }
        for (let element of this.showOnSuccess) {
          element.classList.add("hide");
        }
        for (let element of this.showWhileWaiting) {
          element.classList.remove("hide");
        }
        break;
      default:
        // Hide all
        for (let element of this.showOnError) {
          element.classList.add("hide");
        }
        for (let element of this.showOnSuccess) {
          element.classList.add("hide");
        }
        for (let element of this.showWhileWaiting) {
          element.classList.add("hide");
        }
    }
  }
}