api_g

Sleeping

File size: 15,116 Bytes

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Калькулятор удобрений</title>
<style>
    body {
        margin: 0 auto;
        width: 1000px;
        padding: 1em;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }

    fieldset {
        border: 2px solid #2e8b57;
        background-color: #eaffea;
        padding: 1em;
        margin-bottom: 20px;
        border-radius: 8px;
    }
    h1 {
        background-color: #2e8b57;
        color: white;
        text-align: center;
        padding: 1em;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    legend {
        font-weight: bold;
        color: #2e8b57;
        padding: 0 10px;
    }
    input[type=number] {
        width: 80px;
        padding: 3px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    
    /* Общие стили для обоих блоков */
    .main-container {
        display: grid;
        grid-template-columns: 120px repeat(8, 90px);
        gap: 10px;
        padding: 10px;
    }
    
    /* Верхний блок - макропрофиль */
    .profile-container {
        display: contents;
    }
    
    .profile-element {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .profile-label {
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    /* Азотные элементы */
    .nitrogen-container {
        grid-column: 1 / -1;
        display: flex;
        gap: 20px;
        padding-left: 120px;
        margin-top: 10px;
    }
    
    .nitrogen-group {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    /* Нижний блок - составы солей (переделан в горизонтальный) */
    .fertilisers-container {
        display: flex;
        flex-direction: column;
    }
    
    .fert-row {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .fert-header {
        font-weight: bold;
        text-align: center;
        min-width: 90px;
        padding: 5px;
    }
    
    .fert-name {
        font-weight: bold;
        min-width: 120px;
        text-align: left;
        padding-right: 10px;
    }
    
    .fert-cell {
        text-align: center;
        min-width: 90px;
        padding: 5px;
    }
    
    .fert-input {
        width: 80px;
        margin: 0 5px;
    }


/* Стиль для новой рамки с кнопкой */
/* Стиль для блока расчёта */
.calculation-box {
    border: 2px solid #2e8b57;
    background-color: #eaffea;
    padding: 1em;
    margin-bottom: 20px;
    border-radius: 8px;
}

.calculation-box legend {
    font-weight: bold;
    color: #2e8b57;
    padding: 0 10px;
}

.calculation-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calculation-label {
    font-weight: bold;
    margin-right: 5px;
}

#liters-input {
    width: 80px;
    padding: 3px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#calculate-btn {
    background-color: #2e8b57;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#calculate-btn:hover {
    background-color: #3cb371;
}
  
</style>
</head>

<body>

    <h1>Калькулятор удобрений</h1>


<fieldset>
    <legend>Макропрофиль в мг/л (ppm)</legend>
    <div class="main-container">
        <!-- Основные элементы -->
        <div class="profile-container">
            <div class="profile-element" style="grid-column: 2">
                <span class="profile-label">N</span>
                <input id="profile_p" type="number" value="125.000" step="0.001"/>
            </div>
            <div class="profile-element" style="grid-column: 3">
                <span class="profile-label">P</span>
                <input id="profile_k" type="number" value="31.000" step="0.001"/>
            </div>
            <div class="profile-element" style="grid-column: 4">
                <span class="profile-label">K</span>
                <input id="profile_ca" type="number" value="210.000" step="0.001"/>
            </div>
            <div class="profile-element" style="grid-column: 5">
                <span class="profile-label">Ca</span>
                <input id="profile_mg" type="number" value="84.000" step="0.001"/>
            </div>
            <div class="profile-element" style="grid-column: 6">
                <span class="profile-label">Mg</span>
                <input id="profile_s" type="number" value="24.000" step="0.001"/>
            </div>
            <div class="profile-element" style="grid-column: 7">
                <span class="profile-label">S</span>
                <input id="profile_cl" type="number" value="56.439" step="0.001"/>
            </div>
            <div class="profile-element" style="grid-column: 8">
                <span class="profile-label">EC</span>
                <input id="profile_ec" type="number" value="0.0" step="0.001"/>
            </div>
        </div>
        
        <!-- Азотные элементы -->
        <div class="nitrogen-container">
            <div class="nitrogen-group">
                <label for="profile_nh4">NH4:</label>
               <input id="profile_nh4" type="number" value="1.0" step="1.0" readonly style="background-color: #f0f0f0; border: 1px solid #ccc; color: #666;">
            </div>
            <div class="nitrogen-group">
                <label for="profile_no3">NO3:</label>
                <input id="profile_no3" type="number" value="10.0" step="0.01" min="5" max="10.001"/>
            </div>
        </div>
    </div>
</fieldset>

<fieldset>
    <legend>Составы солей</legend>
    <div class="fertilisers-container">
        <!-- Заголовки -->
        <div class="fert-row">
            <span class="fert-name">Удобрение</span>
            <span class="fert-header">NH4</span>
            <span class="fert-header">NO3</span>
            <span class="fert-header">P</span>
            <span class="fert-header">K</span>
            <span class="fert-header">Ca</span>
            <span class="fert-header">Mg</span>
            <span class="fert-header">S</span>
            <span class="fert-header">Грамм</span>
        </div>
        
        <!-- Строки с удобрениями -->
        <div class="fert-row">
            <span class="fert-name">CaN2O6</span>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" value="11.863" step="0.001" id="fert_ca_no3"/>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" value="16.972" step="0.001" id="fert_ca_ca"/>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" step="0.001" id="calcium_nitrate"/>
        </div>
        
        <div class="fert-row">
            <span class="fert-name">KNO3</span>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" value="13.854" step="0.001" id="fert_kno3_no3"/>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" value="36.672" step="0.001" id="fert_kno3_k"/>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" step="0.001" id="potassium_nitrate"/>
        </div>
        
        <div class="fert-row">
            <span class="fert-name">NH4NO3</span>
            <input class="fert-input" type="number" value="17.499" step="0.001" id="fert_nh4no3_nh4"/>
            <input class="fert-input" type="number" value="17.499" step="0.001" id="fert_nh4no3_no3"/>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" step="0.001" id="ammonium_nitrate"/>
        </div>
        
        <div class="fert-row">
            <span class="fert-name">MgSO4</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" value="10.22" step="0.001" id="fert_mgso4_mg"/>
            <input class="fert-input" type="number" value="13.483" step="0.001" id="fert_mgso4_s"/>
            <input class="fert-input" type="number" step="0.001" id="magnesium_sulfate"/>
        </div>
        
        <div class="fert-row">
            <span class="fert-name">KH2PO4</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" value="22.761" step="0.001" id="fert_kh2po4_p"/>
            <input class="fert-input" type="number" value="28.731" step="0.001" id="fert_kh2po4_k"/>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" step="0.001" id="monopotassium_phosphate"/>
        </div>
        
        <div class="fert-row">
            <span class="fert-name">K2SO4</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" value="44.874" step="0.001" id="fert_k2so4_k"/>
            <span class="fert-cell">-</span>
            <span class="fert-cell">-</span>
            <input class="fert-input" type="number" value="18.401" step="0.001" id="fert_k2so4_s"/>
            <input class="fert-input" type="number" step="0.001" id="potassium_sulfate"/>
        </div>
    </div>
</fieldset>

  
<fieldset class="calculation-box">
    <legend>Расчёт удобрений</legend>
    <div class="calculation-container">
        <div class="calculation-label">Литры:</div>
        <input type="number" id="liters-input" value="100" min="1" step="1">
        <button id="calculate-btn">Рассчитать</button>
    </div>
</fieldset>


<script>
document.getElementById('calculate-btn').addEventListener('click', function() {
    // 1. Функция для безопасного получения числового значения
    const getValue = (id) => {
        const element = document.getElementById(id);
        const value = parseFloat(element.value);
        if (isNaN(value)) {
            console.error(`Ошибка: поле ${id} содержит не число! Значение:`, element.value);
            return 0;
        }
        return value;
    };

    // 2. Формируем данные в ТОЧНОМ формате для сервера
    const requestData = {
        fertilizerConstants: {
            "Кальциевая селитра": {
                "N (NO3-)": getValue('fert_ca_no3') / 100,
                "Ca": getValue('fert_ca_ca') / 100
            },
            "Калий азотнокислый": {
                "N (NO3-)": getValue('fert_kno3_no3') / 100,
                "K": getValue('fert_kno3_k') / 100
            },
            "Аммоний азотнокислый": {
                "N (NO3-)": getValue('fert_nh4no3_no3') / 100,
                "N (NH4+)": getValue('fert_nh4no3_nh4') / 100
            },
            "Сульфат магния": {
                "Mg": getValue('fert_mgso4_mg') / 100,
                "S": getValue('fert_mgso4_s') / 100
            },
            "Монофосфат калия": {
                "P": getValue('fert_kh2po4_p') / 100,
                "K": getValue('fert_kh2po4_k') / 100
            },
            "Калий сернокислый": {
                "K": getValue('fert_k2so4_k') / 100,
                "S": getValue('fert_k2so4_s') / 100
            }
        },
        profileSettings: {
            'P': getValue('profile_k'),
            'K': getValue('profile_ca'),
            'Mg': getValue('profile_s'),
            'Ca': getValue('profile_mg'),
            'S': getValue('profile_cl'),
            'N (NO3-)': getValue('profile_no3'),
            'N (NH4+)': getValue('profile_nh4'),
            'liters': parseInt(document.getElementById('liters-input').value) || 1
        }
    };

    // 3. Выводим данные для проверки
    console.log("Данные для отправки на сервер:");
    console.log(JSON.stringify(requestData, null, 2));

    // 4. Проверка данных
    let hasErrors = false;
    const requiredFertilizers = ["Кальциевая селитра", "Калий азотнокислый", "Аммоний азотнокислый", 
                               "Сульфат магния", "Монофосфат калия", "Калий сернокислый"];
    
    for (const fert of requiredFertilizers) {
        if (!requestData.fertilizerConstants[fert]) {
            console.error(`Отсутствует удобрение: ${fert}`);
            hasErrors = true;
        }
    }

    const requiredElements = ['P', 'K', 'Mg', 'Ca', 'S', 'N (NO3-)', 'N (NH4+)'];
    for (const elem of requiredElements) {
        if (isNaN(requestData.profileSettings[elem])) {
            console.error(`Некорректное значение для элемента ${elem}`);
            hasErrors = true;
        }
    }

    if (hasErrors) {
        console.error("Обнаружены ошибки в данных! Отправка отменена.");
        return;
    }

    // 5. Отправка данных на сервер
    console.log("Отправка данных на сервер...");
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/calculation", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            console.log("Статус ответа:", xhr.status);
            if (xhr.status === 200) {
                console.log("Успешный ответ от сервера:", JSON.parse(xhr.responseText));
            } else {
                console.error("Ошибка сервера:", xhr.status, xhr.statusText);
                console.error("Текст ошибки:", xhr.responseText);
            }
        }
    };
    
    xhr.onerror = function() {
        console.error("Ошибка сети при отправке запроса");
    };
    
    xhr.send(JSON.stringify(requestData));
});
</script>


  
</body>
</html>