app.js

import { parseString } from 'xml2js';
import { renderMeasurementResults } from './renderers/MeasurementRenderer.js';
import { renderAdminData } from './renderers/AdminRenderer.js';
import { version } from '../package.json';

import { EventEmitter } from 'events';
if (typeof window.EventEmitter !== 'function') {
  window.EventEmitter = EventEmitter;
}

export function init(xmlStr, options = {}) {
  const containerId = options.containerId || 'app';
  const appContainer = document.getElementById(containerId);
  if (!appContainer) {
    console.error('No container found with id', containerId);
    return;
  }
  appContainer.innerHTML = `<div id="disclaimer" style="background:orangered; color:#000; padding:8px; margin-bottom:10px; font-family: sans-serif; font-weight:bold;">
  This is a proof of concept and contains missing fields and errors. It is not for production use. dcc-viewer-js Version ${version}
</div>`;
  // Parse the XML string first
  const cleanXmlStr = xmlStr.trim();
  console.log("Clean XML string:", cleanXmlStr);
  parseString(cleanXmlStr, { explicitArray: false }, (err, result) => {
    if (err) {
      console.error('Error parsing XML:', err);
      return;
    }
    const dccData = result;
    const cert = dccData['dcc:digitalCalibrationCertificate'];
    if (!cert) {
      console.error("No dcc:digitalCalibrationCertificate found in XML");
      return;
    }

    // Extract available languages from the administrative data coreData section
    let languages = [];
    if (cert['dcc:administrativeData'] && cert['dcc:administrativeData']['dcc:coreData']) {
      const coreData = cert['dcc:administrativeData']['dcc:coreData'];
      let langs = coreData['dcc:usedLangCodeISO639_1'];
      if (langs) {
        if (!Array.isArray(langs)) { langs = [langs]; }
        languages = langs;
      }
    }

    // Use provided default language if available and present, else use the first available or fallback to 'en'
    let selectedLanguage = (options.language && languages.includes(options.language))
        ? options.language
        : (languages.length ? languages[0] : 'en');

    // Build a dynamic language dropdown based on the extracted languages
    const langSelect = document.createElement('select');
    languages.forEach(lang => {
      const option = document.createElement('option');
      option.value = lang;
      option.textContent = lang;
      if (lang === selectedLanguage) option.selected = true;
      langSelect.appendChild(option);
    });
    // When the language is changed, reinitialize the app with the same XML but new language.
    langSelect.addEventListener('change', (e) => {
      init(xmlStr, { containerId, language: e.target.value });
    });
    appContainer.appendChild(langSelect);

    // Create containers for admin data and measurement results
    const adminContainer = document.createElement('div');
    adminContainer.id = 'adminData';
    appContainer.appendChild(adminContainer);

    const measContainer = document.createElement('div');
    measContainer.id = 'measurementResults';
    appContainer.appendChild(measContainer);

    // Render admin and measurement data if available
    if (cert['dcc:administrativeData']) {
      renderAdminData(cert['dcc:administrativeData'], selectedLanguage);
    }
    if (cert['dcc:measurementResults']) {
      renderMeasurementResults(cert['dcc:measurementResults'], selectedLanguage);
    }
  });
}