Javascript-форум (https://javascript.ru/forum/)
-   Работа (https://javascript.ru/forum/job/)
-   -   Javascript разработчику подправить скрипт экспертной системы (https://javascript.ru/forum/job/85319-javascript-razrabotchiku-podpravit-skript-ehkspertnojj-sistemy.html)

trambalimpum 23.06.2023 06:57

Javascript разработчику подправить скрипт экспертной системы
 
Вложений: 1
Человек написал программу (макет для более сложного варианта), только неудобно, что файлы настроек нужно загружать каждый раз из интерфейса. Поправьте пожалуйста код, чтобы автоматически подгружалось.
index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Рецепты</title>
        <style>
            hr {
             border: none; 
             background-color: black; 
             color: black; 
             height: 2px; 
            }
        </style>
    </head>

    <body>
        <div id="recipe-container">
            <strong>Рецепты</strong>
            <input type="file" id="recipe-selector">
            <p id="recipe-error-check"></p>
        </div>
        <div>
            <strong>Ингредиенты</strong>
            <input type="file" id="ingredient-selector">
            <p id="ingredient-error-check"></p>
        </div>
        <div id="input-container"></div>

        <button id="submit">Обработать</button>
        <button id="clear">Очистить</button>
        <button id="check-all">Выбрать всё</button>

        <p id="answer"></p>

        <script src="main.js"></script>
    </body>

</html>


main.js
// функция переводит русские слова на латиницу это нужно для создания уникальных id для checkbox-ов 
function rus_to_latin ( str ) {
    
    var ru = {
        'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 
        'е': 'e', 'ё': 'e', 'ж': 'j', 'з': 'z', 'и': 'i', 
        'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o', 
        'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 
        'ф': 'f', 'х': 'h', 'ц': 'c', 'ч': 'ch', 'ш': 'sh', 
        'щ': 'shch', 'ы': 'y', 'э': 'e', 'ю': 'u', 'я': 'ya',
    'ъ': 'ie', 'ь': '', 'й': 'i'
    }, n_str = [];
        
    for ( var i = 0; i < str.length; ++i ) {
       n_str.push(
              ru[ str[i] ]
           || ru[ str[i].toLowerCase() ] == undefined && str[i]
           || ru[ str[i].toLowerCase() ].replace(/^(.)/, function ( match ) { return match.toUpperCase() })
       );
    }
    
    return n_str.join('');
}

// селектор файла с рецептами
const recipesSelector = document.getElementById("recipe-selector");

recipesSelector.addEventListener('change', (event) => {
    
    const fileList = event.target.files;
    const file = fileList[0];

    const reader = new FileReader();
    reader.readAsText(file);
    
    
    // то что происходит после загрузки файла с рецептами
    reader.onload = function() {
        let text = reader.result;
        const recipes = JSON.parse(text)["recipes"]; // все рецепты из полученного файла
        
        const button = document.querySelector("#submit");
        const answer = document.querySelector("#answer");

        // кнопка обработки. Не работает, пока не загружен файл
        button.addEventListener("click", () => {
            
            // список всех выбранных ингредиентов
            const selected = [...document.querySelectorAll("input[id]:checked")].map(
                (input) => input.id
            );
            answer.innerHTML = ""; // очистка ответа
            let lines = 0; 
            
            //сравнение массива выбранных ингредиентов с массивом всех ингредиентов
            let intersectionsList = []; 
            let intersections; 

            for (recipe of recipes) {

                intersections = recipe.ingredients.filter((item) => 
                selected.includes(rus_to_latin(item).toLowerCase())) 
                recipeIntersections = {"name": recipe.name, "intersections": intersections} // словарь {имя, пересечения}
                intersectionsList.push(recipeIntersections); // добавляем словарь в список

            }
            
            // сортировка
            intersectionsList.sort((a, b) => {
                return b.intersections.length-a.intersections.length;
            });

            // вывод на экран ингредиентов 
            
            for (i of intersectionsList) {

                if (i.intersections.length !== 0){
                let line = document.createElement("hr");
                let nextLine = document.createElement("br");
                answer.append(i.intersections.join(", ") + ": " + i.name);
                answer.append(nextLine);
                answer.append(line);
                lines++;

                }

            }   

            if (lines === 0){
                answer.innerHTML = "Таких рецептов нет!";
            }
        });
    }
});

// селектор ингредиентов
const ingredientsSelector = document.getElementById('ingredient-selector');
ingredientsSelector.addEventListener('change', (event) => {

    const fileList = event.target.files;
    const file = fileList[0];

    const reader = new FileReader() 
    reader.readAsText(file);

    
    // функционал после загрузки файла с ингредиентами 
    reader.onload = function() {
        let text = reader.result
        let ingredients = JSON.parse(text)["ingredients"]

        let inputContainer = document.getElementById("input-container")
        inputContainer.innerHTML = "";

        // вывод всех ингредиентов из файла

        for(let i = 0; i<ingredients.length; i++) {

            let ingredientCheckbox = document.createElement("input")
            ingredientCheckbox.id = rus_to_latin(ingredients[i]).toLowerCase();
            ingredientCheckbox.type = "checkbox"
            
            let ingredientLabel = document.createElement("label")
            ingredientLabel.for = ingredientCheckbox.id
            ingredientLabel.id = ingredientCheckbox.id + "-label"
            ingredientLabel.innerHTML = ingredients[i] + "\n"
            
            let nextLine = document.createElement("br")
            inputContainer.append(ingredientCheckbox);
            inputContainer.append(ingredientLabel);
            inputContainer.append(nextLine)

        }
    }
});

// кнопка очистки выбора
let clearButton = document.getElementById("clear")
clearButton.addEventListener("click", () => {

    const selected = [...document.querySelectorAll("input[id]:checked")].map(
        (input) => input.id
    );

    for (ingredient of selected) {

        const getInput = document.getElementById(ingredient)
        getInput.checked = false;

    }

});
// кнопка "Выбрать все"
let checkAllButton = document.getElementById("check-all")
checkAllButton.addEventListener("click", () => {

    const inputs = [...document.querySelectorAll("input[id]")].map(
        (input) => input.id
    );

    for (ingredient of inputs) {

        const getInput = document.getElementById(ingredient)
        getInput.checked = true;

    }

});


recipes.json
Код:

{
    "recipes": [
    {
        "name": "Пицца",
        "ingredients": [
            "Мука", "Вода", "Соль", "Колбаса", "Помидоры", "Соус"
        ]
    },
    {
        "name": "Хлеб",
        "ingredients": ["Мука", "Вода", "Соль"]
    },
    {
        "name": "Кекс",
        "ingredients": ["Мука", "Вода", "Яйца", "Соль", "Сахар"]
    }
]}

ingredients.json
Код:

{
    "ingredients": [
        "Мука",
        "Вода",
        "Сахар",
        "Яйца",
        "Соль",
        "Колбаса",
        "Помидоры",
        "Соус"
    ]}

Другой человек подсказал такой фрагмент кода, только не знаю, как его интегрировать.
https://developer.mozilla.org/ru/doc...PI/Using_Fetch
Код:

fetch('/recipes.json')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });

Заплатить могу 500 российских рублей ($6) минус стоимость комиссии из этой суммы. На случай, если не найду за эти деньги, предлагайте ваши условия. Просьба не писать решение заранее, так как, если несколько напишет, со всеми не смогу рассчитаться. Жду предложение в личку. Просьба указать, какие системы платежей предпочитаете и из какой Вы страны. Оплата работы после приемки. Сам в конечном итоге собираюсь также через программу упаковать в apk (делал с первой версией этого скрипта так раньше), возможно это, если кроме компьютера, просто так на Андроид в браузере не будет работать (кнопки не нажимались с первой версией, поэтому паковал).

trambalimpum 23.06.2023 08:26

Вложений: 1
Вот скриншот.

voraa 23.06.2023 09:05

У вас все файлы расположены на локальном компьютере.
fetch работает только для загрузки с сервера.

trambalimpum 23.06.2023 11:32

Благодарю.

trambalimpum 23.06.2023 14:30

Задание выполнено

trambalimpum 23.06.2023 15:00

Сейчас думаю, можно ли сделать, чтобы в браузере на Андроид отображались чекбоксы и надписи для них, а также нажимались кнопки.

trambalimpum 23.06.2023 23:10

Кому интересно, что в конечном итоге получилось и какая проблема осталась https://javascript.ru/forum/showthread.php?p=552497

trambalimpum 25.06.2023 18:46

Проблема перестала проявляться.


Часовой пояс GMT +3, время: 23:04.