search tool

by fxi

HTML

<label for=search> Search WESR views </label>
<input id=search type=text placeholder='Search'/>
<ul id='results'></ul>

JavaScript

const elInput = document.getElementById('search');
const elList = document.getElementById('results');

// url mapx
const urlMapxView = 'https://app.staging.mapx.org/static.html?views='

// search tool
const urlSearch = 'https://search.staging.mapx.org:443/indexes/views_en/search';
const apiToken = 'ba42fa8d4564234e242a6fcb661eedfc484766d8b13e4570239f7b85aee54ce8';


// list of projects
const endpoint_projects = 'https://api.staging.mapx.org/get/project/search?';
const regex = '^(WESR|Minamata Convention on Mercury|Chemicals Observatory).*$'
const ids = [
  'MX-KVV-ANS-WBN-QXR-S71',
  'MX-U83-0SB-Y2T-A48-GFS',
  'MX-XNI-RMZ-KKL-FMS-DVH',
  'MX-6D4-562-1UT-E3X-4YY',
  'MX-3ZK-82N-DY8-WU2-IGF',
  'MX-2LD-FBB-58N-ROK-8RH'
];
const ids_str = ids.join(',');
const args_projects = `titleRegex=${regex}&language=en&idProjects=${ids_str}&maxByPage=2000&pageNumber=1`
const urlProject = `${endpoint_projects}${args_projects}`

elInput.addEventListener('input', (e) => {
  const txt = e.target.value;
  update(txt);
})


update();

async function update(txt) {
  try {

    if (!txt) {
      txt = "";
    }
    const query = {
      "q": txt,
      "limit": 20
    };

    const data = await fetchSearch(query, urlSearch, urlProject, apiToken);

    while (elList.firstElementChild) {
      elList.firstElementChild.remove()
    }

    for (const h of data.hits) {
      const elItem = document.createElement('li');
      elItem.innerHTML = `
       <h3>${h.view_title}</h3>
       <small><a target='_blank' href=${urlMapxView}${h.view_id}>${h.view_id}</a></small>
       <p>${h.view_abstract}</p>
     `
      elList.appendChild(elItem);
    }
  } catch (e) {
    console.warn(e)
  }
}


async function fetchProject(urlProject) {
  if (window.idProjects) {
    return window.idProjects;
  }

  const rProject = await fetch(urlProject);

  if (!rProject.ok) {
    throw new Error(`erreur HTTP! statut: ${rProject.status}`);
  }
  const j = await rProject.json();
  if (typeof(j) === 'object' &&...