JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://cdn.jsdelivr.net/npm/meilisearch@latest/dist/bundles/meilisearch.umd.js"></script>
<h3>MeiliSearch : fill 5000+ doc in 10 indexes with 250 paired synonyms</h3>
<div id=container>
<label class=bl for=inMeiliUrl>MeiliSearch URL
<input type="text" id=inMeiliUrl placeholder="MeiliSearchURL" value="https://test.fxi.io">
</label>

<label class=bl for=inMeiliUrl>MeiliSearch master key
<input type="text" id=inMeiliKey placeholder="MeiliSearchKey" value="ZTM3ODIwNjExM2U3YzA0MzJmZmU1YTBi">
</label>
</div>

<div id=container>
  <div class=bl>
    <button id='btnUpdate'>Update</button>
    <div id='logs'></div>
  </div>
  <div class=bl>
    <button id='btnStatus' >Update status</button>
    <div id='status'></div>
  </div>
</div>

CSS

html,
body {
  font-family: helvetica, sans;
}

#container {
  display: flex;
  flex-wrap: wrap;
  /*flex-direction: column;*/
  align-items: center;
  justify-content: center;
}

.bl {
  max-width: 600px;
  min-width:500px;
  padding: 10px;
}

#logs,
#status {
  max-height: 200px;
  height: 200px;
  max-width: 600px;
  overflow-y: auto;
  background: #474747;
  color: #0F0;
  padding: 10px;
}

JavaScript

const opt = {
  urlSample: "https://www.eionet.europa.eu/gemet/getConceptsMatchingRegexByThesaurus?regex=.*&thesaurus_uri=http://www.eionet.europa.eu/gemet/concept/&language=en",
  urlSyn: "https://gistcdn.githack.com/fxi/8318cec26f3e041a54934d2d716ceede/raw/496544794fdd4c82eb6b6f3e6e70f6b1756165f7/synonyms.json",
  languages: ["en", "fr", "zh", "ps", "ar", "de", "fa", "es", "ru", "bn"]
}
const status = [];
const elLogs = document.getElementById("logs");
const elStatus = document.getElementById("status");
const elBtnUpdate = document.getElementById("btnUpdate");
const elBtnStatus = document.getElementById("btnStatus");
const elInputUrl = document.getElementById("inMeiliUrl");
const elInputKey = document.getElementById("inMeiliKey");

elBtnUpdate.addEventListener('click', handleClickUpdate)
elBtnStatus.addEventListener('click', handleClickStatus)


/**
 * Helpers
 */

async function handleClickUpdate(e) {
  try {
    e.target.setAttribute('disabled', true);
    elLogs.innerHTML = "";
    await update();

  } catch (e) {
    console.error(e);
  }
  e.target.removeAttribute('disabled');
}

async function handleClickStatus(e) {
  try {

    e.target.setAttribute('disabled', true);
    elStatus.innerHTML = "";
    const allStatus = await getStatus();
    addStatus(allStatus);

  } catch (e) {
    console.error(e);
  }
  e.target.removeAttribute('disabled');
}

async function getStatus() {
  const a = [];

  try {
    const meili = getClient();

    for (let s of status) {
      const d = await meili.index(s.index).getUpdateStatus(s.id);
      a.push(d);
    }
  } catch (e) {
    addLog(e);
  }
  return a;
}


async function update() {
  status.length = 0;
  try {
    const allStatus = await getStatus();
    addStatus(allStatus);
    const meili = getClient();
    addLog(`Update start --- ${(new Date()).toLocaleString()} ---`)
    for (let lang of opt.languages) {
      addLog(`fetching sample for ${lang}`);
      const data = await sample(lang);
      const syn =...