Как сделать GUI на основе множеств?

const ingredients = [
  { id: "milk", name: "Молоко" },
  { id: "tea", name: "Чайная заварка" },
  { id: "cocoa", name: "Какао" },
  { id: "coffee", name: "Кофейный порошок" },
  { id: "sugar", name: "Сахар" },
  { id: "ice-cream", name: "Мороженое" },
  { id: "juice", name: "Сок" },
];
 
const recipes = [
  { name: "Кофе с молоком", ingredients: ["milk", "coffee", "sugar"] },
  { name: "Какао-напиток", ingredients: ["milk", "cocoa", "sugar"] },
  { name: "Коктейль", ingredients: ["ice-cream", "juice"] },
];
 
const template = (ingredients) => `
  <table>
    <thead>
      <tr>
        <th>Ингредиент</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      ${ingredients
        .map(
          (ingredient) =>
            `<tr>
          <td><label for="ingredient-${ingredient.id}">${ingredient.name}</label></td>
          <td><input id="ingredient-${ingredient.id}" type="checkbox" data-id="${ingredient.id}" /></td>
        </tr>`
        )
        .join("")}
    </tbody>
  </table>
`;
 
const container = document.querySelector("#table-container");
const button = document.querySelector("#analyze");
const answer = document.querySelector("#answer");
 
container.innerHTML = template(ingredients);
 
button.addEventListener("click", () => {
  const selected = [...document.querySelectorAll("input[data-id]:checked")].map(
    (input) => input.dataset.id
  );
 
  const possibleRecipes = recipes.filter((recipe) => {
    const recipeSet = new Set(recipe.ingredients);
    for (let ingredient of selected) {
      if (!recipeSet.has(ingredient)) {
        return false;
      }
    }
 
    return true;
  });
 
  answer.innerText = possibleRecipes.length
    ? possibleRecipes.map((recipe) => `"${recipe.name}"`).join(" или ")
    : "Нет рецептов с такими ингредиентами";
});

const ingredients = [
 
  { id: "pereboi_v_rabote_dvigatelya_na_holostom_hodu_(osobenno_v_holodnoe_vremya_goda)", name: "перебои в работе двигателя на холостом ходу (особенно в холодное время года)" },
  { id: "slishkom_vysokie_ili_nizkie_oboroty_dvigatelya_na_holostom_hodu", name: "слишком высокие или низкие обороты двигателя на холостом ходу" },
  { id: "problemy_s_zapuskom_dvigatelya_(v_sil'nye_morozy)", name: "проблемы с запуском двигателя (в сильные морозы)" },
  { id: "snizhenie_moshchnosti_dvigatelya", name: "снижение мощности двигателя" },
  { id: "slabo_razgonyaetsya", name: "слабо разгоняется" },
  { id: "ne_tyanet_osobenno_v_zagruzhennom_sostoyanii_i_pri_dvizhenii_na_poddem", name: "не тянет, особенно в загруженном состоянии и при движении на подъем" },
  { id: "pereraskhod_goryuchego", name: "перерасход горючего" },
  { id: "uvelichennyj_raskhod_topliva_(na_10_20_prochentov)", name: "увеличенный расход топлива (на 10…20%)" },
  { id: "tryaska dvigatelya", name: "тряска двигателя" },
  { id: "problemy_s_zapuskom_dvigatelya", name: "проблемы с запуском двигателя" },
  { id: "zatrudnennyj_zapusk_dvigatelya_na_holodnuyu_na_goryachuyu_i_v_drugih_rezhimah", name: "Проблемы с запуском двигателя,\n причем при любых условиях — \n«на холодную», «на горячую» и в других режимах" },
  
  { id: "neustojchivaya_rabota_dvigatelya", name: "неустойчивая работа двигателя" },
{ id: "plavayushchie_rabochie_oboroty_dvigatelya", name: "плавающие рабочие обороты двигателя" },
{ id: "plavayushchie_holostye_oboroty_dvigatelya", name: "плавающие холостые обороты двигателя" },
{ id: "provaly_v_dvizhenii_mashiny", name: "«Провалы» в движении машины" },
{ id: "pri_nazhatii_na_pedal_akseleratora_ona_otvechaet_ne_srazu", name: "при нажатии на педаль акселератора она отвечает не сразу" },
{ id: "pri_sbrose_pedali_akseleratora_dvigatel_glohnet", name: "при сбросе педали акселератора двигатель глохнет" },
{ id: "zagoraetsya_Check_Engine", name: "загорается Check Engine" },
 
  { id: "milk", name: "Молоко" },
  { id: "tea", name: "Чайная заварка" },
  { id: "cocoa", name: "Какао" },
  { id: "coffee", name: "Кофейный порошок" },
  { id: "sugar", name: "Сахар" },
  { id: "ice-cream", name: "Мороженое" },
  { id: "juice", name: "Сок" },
];
 
const recipes = [
 
{ name: "датчик распредвала (ELM 327: P0340, P0342, P0343)", ingredients: 
["zatrudnennyj_zapusk_dvigatelya_na_holodnuyu_na_goryachuyu_i_v_drugih_rezhimah",
"neustojchivaya_rabota_dvigatelya",
"plavayushchie_rabochie_oboroty_dvigatelya",
"plavayushchie_holostye_oboroty_dvigatelya",
"provaly_v_dvizhenii_mashiny",
"pri_nazhatii_na_pedal_akseleratora_ona_otvechaet_ne_srazu",
"slabo_razgonyaetsya",
"ne_tyanet_osobenno_v_zagruzhennom_sostoyanii_i_pri_dvizhenii_na_poddem",
"pri_sbrose_pedali_akseleratora_dvigatel_glohnet",
"uvelichennyj_raskhod_topliva_(na_10_20_prochentov)",
"zagoraetsya_Check_Engine"] },
 
{ name: "датчик температуры всасываемого воздуха", ingredients: 
["pereboi_v_rabote_dvigatelya_na_holostom_hodu_(osobenno_v_holodnoe_vremya_goda)",
"slishkom_vysokie_ili_nizkie_oboroty_dvigatelya_na_holostom_hodu",
"problemy_s_zapuskom_dvigatelya_(v_sil'nye_morozy)",
"snizhenie_moshchnosti_dvigatelya",
"pereraskhod_goryuchego"] },
 
{ name: "датчик детонации", ingredients: 
["tryaska dvigatelya",
"snizhenie_moshchnosti_dvigatelya",
"problemy_s_zapuskom_dvigatelya",
"pereraskhod_goryuchego",
""] },
 
  { name: "Кофе с молоком", ingredients: ["milk", "coffee", "sugar"] },
  { name: "Какао-напиток", ingredients: ["milk", "cocoa", "sugar"] },
  { name: "Коктейль", ingredients: ["ice-cream", "juice"] },
];
 
const template = (ingredients) => `
  <table border = 1px>
    <thead>
      <tr>
        <th>Ингредиент</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      ${ingredients
        .map(
          (ingredient) =>
            `<tr>
          <td><label for="ingredient-${ingredient.id}">${ingredient.name}</label></td>
          <td><input id="ingredient-${ingredient.id}" type="checkbox" data-id="${ingredient.id}" /></td>
        </tr>`
        )
        .join("")}
    </tbody>
  </table>
`;
 
const container = document.querySelector("#table-container");
const button = document.querySelector("#analyze");
const answer = document.querySelector("#answer");
 
container.innerHTML = template(ingredients);
 
button.addEventListener("click", () => {
  const selected = [...document.querySelectorAll("input[data-id]:checked")].map(
    (input) => input.dataset.id
  );
 
  const possibleRecipes = recipes.filter((recipe) => {
    const recipeSet = new Set(recipe.ingredients);
    for (let ingredient of selected) {
      if (!recipeSet.has(ingredient)) {
        return false;
      }
    }
 
    return true;
  });
 
  answer.innerText = possibleRecipes.length
    ? possibleRecipes.map((recipe) => `"${recipe.name}"`).join(" или ")
    : "Нет варианта диагностики";
});

class UI {
  constructor({ ingredients, recipes, title, errorMessage, columnName }) {
    this.ingredients = ingredients;
    this.recipes = recipes;
    this.title = title;
    this.errorMessage = errorMessage;
    this.columnName = columnName;
    this.id = crypto.getRandomValues(new Uint8Array(10)).join("-");
 
    this.root = null;
    this.button = null;
    this.result = null;
 
    this.ingredientMap = new Map();
    this.ingredients.forEach((ingredient) =>
      this.ingredientMap.set(ingredient.id, ingredient)
    );
  }
 
  render(container) {
    container.innerHTML = this.template();
    this.root = document.getElementById(`table-${this.id}`);
    this.button = document.getElementById(`analyze-${this.id}`);
    this.result = document.getElementById(`answer-${this.id}`);
    this.button.addEventListener("click", this.analyze.bind(this));
  }
 
  analyze() {
    const selected = [
      ...this.root.querySelectorAll("input[data-id]:checked"),
    ].map((input) => input.dataset.id);
 
    const possibleRecipes = this.recipes.filter((recipe) => {
      const recipeSet = new Set(recipe.ingredients);
      for (let ingredient of selected) {
        if (!recipeSet.has(ingredient)) {
          return false;
        }
      }
 
      return true;
    });
 
    this.result.innerText = possibleRecipes.length
      ? possibleRecipes
          .map(
            (recipe) =>
              `"${selected
                .map((id) => this.ingredientMap.get(id)?.name)
                .join(", ")}: ${recipe.name}"`
          )
          .join(" или ")
      : this.errorMessage;
  }
 
  template() {
    return `
      <table id="table-${this.id}" border="1px">
        <caption>${this.title}</caption>
        <thead>
          <tr>
            <th>${this.columnName}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          ${this.ingredients
            .map(
              (ingredient) =>
                `<tr>
                  <td><label for="ingredient-${ingredient.id}">${ingredient.name}</label></td>
                  <td><input id="ingredient-${ingredient.id}" type="checkbox" data-id="${ingredient.id}" /></td>
                </tr>`
            )
            .join("")}
        </tbody>
      </table>
 
      <button id="analyze-${this.id}">Анализировать</button>
      <p id="answer-${this.id}"></p>
    `;
  }
}
 
const cars = new UI({
  ingredients: [
    {
      id: "pereboi_v_rabote_dvigatelya_na_holostom_hodu_(osobenno_v_holodnoe_vremya_goda)",
      name: "перебои в работе двигателя на холостом ходу (особенно в холодное время года)",
    },
    {
      id: "slishkom_vysokie_ili_nizkie_oboroty_dvigatelya_na_holostom_hodu",
      name: "слишком высокие или низкие обороты двигателя на холостом ходу",
    },
    {
      id: "problemy_s_zapuskom_dvigatelya_(v_sil'nye_morozy)",
      name: "проблемы с запуском двигателя (в сильные морозы)",
    },
    {
      id: "snizhenie_moshchnosti_dvigatelya",
      name: "снижение мощности двигателя",
    },
    { id: "slabo_razgonyaetsya", name: "слабо разгоняется" },
    {
      id: "ne_tyanet_osobenno_v_zagruzhennom_sostoyanii_i_pri_dvizhenii_na_poddem",
      name: "не тянет, особенно в загруженном состоянии и при движении на подъем",
    },
    { id: "pereraskhod_goryuchego", name: "перерасход горючего" },
    {
      id: "uvelichennyj_raskhod_topliva_(na_10_20_prochentov)",
      name: "увеличенный расход топлива (на 10…20%)",
    },
    { id: "tryaska dvigatelya", name: "тряска двигателя" },
    {
      id: "problemy_s_zapuskom_dvigatelya",
      name: "проблемы с запуском двигателя",
    },
    {
      id: "zatrudnennyj_zapusk_dvigatelya_na_holodnuyu_na_goryachuyu_i_v_drugih_rezhimah",
      name: "Проблемы с запуском двигателя,\n причем при любых условиях — \n«на холодную», «на горячую» и в других режимах",
    },
    {
      id: "neustojchivaya_rabota_dvigatelya",
      name: "неустойчивая работа двигателя",
    },
    {
      id: "plavayushchie_rabochie_oboroty_dvigatelya",
      name: "плавающие рабочие обороты двигателя",
    },
    {
      id: "plavayushchie_holostye_oboroty_dvigatelya",
      name: "плавающие холостые обороты двигателя",
    },
    { id: "provaly_v_dvizhenii_mashiny", name: "«Провалы» в движении машины" },
    {
      id: "pri_nazhatii_na_pedal_akseleratora_ona_otvechaet_ne_srazu",
      name: "при нажатии на педаль акселератора она отвечает не сразу",
    },
    {
      id: "pri_sbrose_pedali_akseleratora_dvigatel_glohnet",
      name: "при сбросе педали акселератора двигатель глохнет",
    },
    { id: "zagoraetsya_Check_Engine", name: "загорается Check Engine" },
  ],
  recipes: [
    {
      name: "датчик распредвала (ELM 327: P0340, P0342, P0343)",
      ingredients: [
        "zatrudnennyj_zapusk_dvigatelya_na_holodnuyu_na_goryachuyu_i_v_drugih_rezhimah",
        "neustojchivaya_rabota_dvigatelya",
        "plavayushchie_rabochie_oboroty_dvigatelya",
        "plavayushchie_holostye_oboroty_dvigatelya",
        "provaly_v_dvizhenii_mashiny",
        "pri_nazhatii_na_pedal_akseleratora_ona_otvechaet_ne_srazu",
        "slabo_razgonyaetsya",
        "ne_tyanet_osobenno_v_zagruzhennom_sostoyanii_i_pri_dvizhenii_na_poddem",
        "pri_sbrose_pedali_akseleratora_dvigatel_glohnet",
        "uvelichennyj_raskhod_topliva_(na_10_20_prochentov)",
        "zagoraetsya_Check_Engine",
      ],
    },
    {
      name: "датчик температуры всасываемого воздуха",
      ingredients: [
        "pereboi_v_rabote_dvigatelya_na_holostom_hodu_(osobenno_v_holodnoe_vremya_goda)",
        "slishkom_vysokie_ili_nizkie_oboroty_dvigatelya_na_holostom_hodu",
        "problemy_s_zapuskom_dvigatelya_(v_sil'nye_morozy)",
        "snizhenie_moshchnosti_dvigatelya",
        "pereraskhod_goryuchego",
      ],
    },
    {
      name: "датчик детонации",
      ingredients: [
        "tryaska dvigatelya",
        "snizhenie_moshchnosti_dvigatelya",
        "problemy_s_zapuskom_dvigatelya",
        "pereraskhod_goryuchego",
        "",
      ],
    },
  ],
  title: " Диагностика автомобиля",
  errorMessage: "Нет варианта диагностики",
  columnName: "Неисправность",
});
 
const drinks = new UI({
  ingredients: [
    { id: "milk", name: "Молоко" },
    { id: "tea", name: "Чайная заварка" },
    { id: "cocoa", name: "Какао" },
    { id: "coffee", name: "Кофейный порошок" },
    { id: "sugar", name: "Сахар" },
    { id: "ice-cream", name: "Мороженое" },
    { id: "juice", name: "Сок" },
  ],
  recipes: [
    { name: "Кофе с молоком", ingredients: ["milk", "coffee", "sugar"] },
    { name: "Какао-напиток", ingredients: ["milk", "cocoa", "sugar"] },
    { name: "Коктейль", ingredients: ["ice-cream", "juice"] },
  ],
  title: "Напитки",
  errorMessage: "Нет такого напитка",
  columnName: "Ингредиент",
});
 
cars.render(document.querySelector("#cars"));
drinks.render(document.querySelector("#drinks"));

const ingredients = [
  { id: "muka", name: "Мука" },
  { id: "voda", name: "Вода" },
  { id: "saxar", name: "Сахар" },
  { id: "iaicha", name: "Яйца" },
  { id: "soli", name: "Соль" },
  { id: "kolbasa", name: "Колбаса" },
  { id: "pomidori", name: "Помидоры" },
  { id: "sous", name: "Соус" },
];
 
const recipes = [
  { name: "Кекс", ingredients: ["muka", "voda", "soli", "iaicha", "saxar"] },
  { name: "Хлеб", ingredients: ["muka", "voda", "soli"] },
  { name: "Пицца", ingredients: ["muka", "voda", "soli", "kolbasa, "pomidori, "sous"] },
];