ui_layers_panels_reports.mjs

/**
## /ui/layers/panels/reports
Exports a function for creating a drawer or just a panel which contains links to custom views.

```JSON
    {
      "report_1":{
        "template": "report_template"
      }
    }
```

Supplying `layer.reports.drawer: false` will return the links a plain dev instead of a drawer

@module /ui/layers/panels/filter
*/

/**
@function reports

@description
Creates a list of `a` elements containing links to custom views.

Specifying `layer.reports.drawer: false` will prevent a drawer from being made for the reports panel.

@param {Object} layer
@property {Array} layer.reports The configuration of the reports

@returns {HTMLElement} The report element for the panel.
*/
export default function reports(layer) {
  // Create chkbox controls for each dataview entry.
  const reportLinks = mapp.utils.html.node`<div>`;
  for (const [key, report] of Object.entries(layer.reports)) {
    if (report === false) continue;

    report.key = key;

    report.host = layer.mapview.host;

    const href = `${report.host}/view?${mapp.utils.paramString({
      lat: mapp.hooks.current?.lat,
      lng: mapp.hooks.current?.lng,
      locale: layer.mapview.locale.key,
      template: report.template,
      z: mapp.hooks.current?.z,
    })}`;

    reportLinks.appendChild(mapp.utils.html.node`
      <div>
      <a
        class="link-with-img"
        target="_blank"
        href="${href}">
        <span class="material-symbols-outlined">summarize</span>
        <span>${report.title || report.key}`);
  }

  // Create a drawer with the dataview chkbox controls.
  if (layer.reports.drawer === false) {
    return mapp.utils.html
      .node`<div data-id="reports-drawer"><h3>Reports</h3>${reportLinks}`;
  }
  const drawer = mapp.ui.elements.drawer({
    class: 'raised',
    data_id: `reports-drawer`,
    header: mapp.utils.html`
      <h3>Reports</h3>
      <div class="material-symbols-outlined caret"/>`,
    content: reportLinks,
  });

  return drawer;
}