dashboard/html/js/main.js

console.log("main.js loaded");

document.addEventListener("DOMContentLoaded", () => {
  console.log("dom loaded");
  fakeFocus();
  getConfig();
  getCVE();
});

function fakeFocus() {
  document.querySelector("input").addEventListener("focus", () => {
    document.querySelector(".search-wrapper").classList.add("fake-focus");
  });
  document.querySelector("input").addEventListener("focusout", () => {
    document.querySelector(".search-wrapper").classList.remove("fake-focus");
  });
}

async function getConfig() {
  const CONFIG = "../assets/config.json";
  try {
    const response = await fetch(CONFIG);
    if (!response.ok) {
      throw new Error(`Failed to fetch ${CONFIG}`);
    }
    const container = document.querySelector("section");
    container.innerHTML = "";
    const config = await response.json();
    config.forEach((element) => {
      const div = document.createElement("div");
      div.classList.add("section-wrapper");
      div.innerHTML += `<h1>${element.name}</h1>`;
      const div2 = document.createElement("div");
      div2.classList.add("links-wrapper");
      element.content.forEach((e) => {
        div2.innerHTML += `
            <a href="${e.url}">
              <div class="link-wrapper-inner">
                <img src="${e.icon}" class="icon">
                <p>${e.name}</p>
              </div>
            </a>
        `;
      });
      div.appendChild(div2);
      container.appendChild(div);
    });
  } catch (error) {
    console.error("Error fetching or parsing config file:", error);
    document.querySelector("section").innerHTML =
      `Failed to load config file. Please debug this fu***** dashboard : ${error}`;
  }
}

async function getCVE() {
  const RSS_URL = "./latest.xml";
  try {
    // Fetch xml RSS feed
    const response = await fetch(RSS_URL);
    if (!response.ok) {
      throw new Error("Failed to fetch RSS feed");
    }
    const rssText = await response.text();
    // Parse xml file and extract items in an array
    const parser = new DOMParser();
    const xml = parser.parseFromString(rssText, "application/xml");
    const items = xml.querySelectorAll("item");
    // clear cve div content
    const cveDiv = document.querySelector(".aside-wrapper");
    cveDiv.innerHTML = "";
    cveDiv.innerHTML += `<h1>Latest CVE</h1>`;
    // Loop items and extrat infos for each CVE
    items.forEach((item) => {
      const title = item.querySelector("title").textContent;
      const link = item.querySelector("link").textContent;
      const description = item
        .querySelector("description")
        .textContent.replace(/\r?\n|\r/g, " ")
        .replace(/<br>/g, "\n");
      console.log(description);
      const parsedDescription = description.match(
        /Description : <\/strong>(.*)/,
      )[1];
      const parsedPublished = description.match(
        /Published : <\/strong>(.*)/,
      )[1];
      const parsedSeverity = description.match(
        /Severity:<\/strong> (.*) \|/,
      )[1];
      colorHue = -12 * parseFloat(parsedSeverity) + 120;
      console.log(colorHue);
      cveDiv.innerHTML += `
      <div class="cve-wrapper">
        <div class="cve-header">
          <div class="cve-severity" style="background-color:hsl(${colorHue} 100% 70%)">${parsedSeverity}</div>
          <div class="cve-title-wrapper">
            <div class="cve-title">
              <a href="${link}">${title}</a>
            </div>
            <div class="cve-published">${parsedPublished}</div>
          </div>
        </div>
        <div class="cve-description">
          ${parsedDescription}
        </div>
      </div>
      `;
    });
  } catch (error) {
    console.error("Error fetching or parsing RSS feed:", error);
    document.querySelector("#cve").innerHTML =
      "Failed to load RSS feed. Please try again later.";
  }
}