wolfree-dockerfile/docusaurus/static/ajax/libs/wolfree/23.7.8/js/PodsParser.js

/**
 * @license
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * This file is part of Wolfree.
 * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 */

// @ts-check

export default class PodsParser {
  parse = ({
    input = String(),
    i2d = Boolean(),
    extraPodstates = Array(),
    response = { queryresult: { pods: Array() } },
  } = {}) => {
    try {
      return { html: this.buildHTML({ input, i2d, extraPodstates, response }) };
    } catch (error) {
      return console.error({ error }), { error };
    }
  };

  buildHTML = ({
    input = String(),
    i2d = Boolean(),
    extraPodstates = Array(),
    response = { queryresult: { pods: Array() } },
  } = {}) => {
    return `
      <div class="wolfree-pods">
        <div>
          <div>
            <section>
              ${this.parseQueryResult({ response })}
              ${this.buildTechnicalInfo({
                input,
                i2d,
                extraPodstates,
                response,
              })}
            </section>
          </div>
        </div>
      </div>
    `;
  };

  parseQueryResult = ({ response = { queryresult: { pods: Array() } } }) => {
    const { queryresult } = response;
    const { pods } = queryresult;
    if (pods) {
      return pods.map(this.parsePod).join("");
    }
    return "";
  };

  parsePod = (
    pod = {
      title: String(),
      states: Array(),
      subpods: Array(),
    }
  ) => {
    return `
      <section>
        ${this.buildPodHeader(pod)}
        <div></div>
        ${pod.subpods.map(this.buildSubpod).join("")}
      </section>
    `;
  };

  buildPodHeader = (pod = { title: String(), states: Array() }) => {
    return `
      <div>
        <h2>${this.escapeHTML(pod.title)}</h2>
        ${pod.states ? pod.states.map(this.buildSelectElement).join("") : ""}
      </div>
    `;
  };

  buildSubpod = (
    subpod = { img: { src: String(), alt: String() }, plaintext: String() }
  ) => {
    return `
      <div><div>
        <img
          src="${this.escapeHTML(subpod.img.src)}"
          alt="${this.escapeHTML(subpod.img.alt)}"
        >
      </div></div>
      <div style="font-family: monospace; overflow: auto;">
        <div><div>${this.buildSubpodDetails(subpod)}</div></div>
      </div>
    `;
  };

  buildSubpodDetails = (subpod = { plaintext: String() }) => {
    return `
      <details>
        <summary style="direction: rtl;"></summary>
        <div><pre>${this.escapeHTML(subpod.plaintext)}</pre></div>
        <br>
      </details>
    `;
  };

  buildSelectElement = (state = { value: String(), states: Array() }) => {
    if (state.states) {
      return `
        <select name="pod-states">
          <option>${this.escapeHTML(state.value)}</option>
          ${state.states.map(this.buildOption).join("")}
        </select>
      `;
    }
    return "";
  };

  buildOption = (state = { name: String() }) => {
    return `
      <option>${this.escapeHTML(state.name)}</option>
    `;
  };

  buildTechnicalInfo = ({
    input = String(),
    i2d = Boolean(),
    extraPodstates = Array(),
    response = { queryresult: { pods: Array() } },
  }) => {
    return `
      <section>
        <div><h2>Technical information</h2></div>
        <div></div>
        <div><div><div>${this.buildTechnicalInfoDetails({
          input,
          i2d,
          extraPodstates,
          response,
        })}</div></div></div>
        <div></div>
      </section>
    `;
  };

  buildTechnicalInfoDetails = ({
    input = String(),
    i2d = Boolean(),
    extraPodstates = Array(),
    response = { queryresult: { pods: Array() } },
  }) => {
    return `
      <details>
        <div>
          If you have programming knowledge, feel free to explore the technical information provided below:
        </div>
        ${this.buildTextarea({ input, i2d, extraPodstates, response })}
      </details>
    `;
  };

  buildTextarea = ({
    input = String(),
    i2d = Boolean(),
    extraPodstates = Array(),
    response = { queryresult: { pods: Array() } },
  }) => {
    return `
      <textarea name="technical-information">${this.escapeHTML(
        JSON.stringify(
          {
            document,
            input,
            i2d,
            extraPodstates,
            response,
          },
          null,
          4
        )
      )}</textarea>
    `;
  };

  escapeHTML = (unsafe = String()) => {
    return unsafe
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  };
}

// Can I escape HTML special chars in JavaScript? - Stack Overflow
// https://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript

// test case:
// https://www.wolframalpha.com/input?i=solve+%7By%27%28x%29+%3D+-2+y%2C+y%280%29%3D1%7D+from+0+to+10+using+r+k+f+algorithm