forked from Tank/braga
214 lines
11 KiB
HTML
214 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Форма добавления емкости</title>
|
||
<!-- Bulma CSS -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
|
||
<!-- JQuery -->
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
<!-- JQuery UI -->
|
||
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||
<style>
|
||
/* Стили полей */
|
||
label {margin-bottom: 0.5rem;}
|
||
.field {margin-bottom: 1.5rem;}
|
||
.select, .control.is-expanded {width: 100%;}
|
||
button.delete {background-color: red !important; color: white !important;}
|
||
|
||
/* Ползунки */
|
||
.slider-range {margin: 1rem 0;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="section">
|
||
<form id="add-tank-form" method="post" action="/save_tank">
|
||
<input type="hidden" name="id" value="">
|
||
|
||
<!-- Основные поля -->
|
||
<div class="columns">
|
||
<div class="column is-half">
|
||
<label for="tank_name">Название емкости:</label>
|
||
<input class="input" type="text" name="tank_name" placeholder="Имя емкости">
|
||
|
||
<label for="device_id">ID блока датчиков:</label>
|
||
<input class="input" type="input" name="device_id">
|
||
|
||
<label for="tank_volume">Объем емкости (л):</label>
|
||
<div class="slider-range" data-min="3" data-max="300" data-default-value="38"></div>
|
||
<output id="volume-output" name="tank_volume">38 л</output>
|
||
|
||
<label for="comments">Комментарии:</label>
|
||
<textarea class="textarea" name="comments" rows="3" placeholder="Дополнительная информация..."></textarea>
|
||
|
||
<label for="active"><input type="checkbox" name="active" checked> Емкость активна?</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Исходное сырье -->
|
||
<hr />
|
||
<h3>Исходное сырье</h3>
|
||
<div class="columns">
|
||
<div class="column is-one-third">
|
||
<label for="raw_type">Тип сырья:</label>
|
||
<div class="select">
|
||
<select name="raw_type">
|
||
<option value="vine">Сок винограда винных сортов</option>
|
||
<option value="vine_wild">Сок винограда диких и садовых сортов</option>
|
||
<option value="apple_sugar">Сладкий яблочный сок</option>
|
||
<option value="apple">Яблочный сок из кислых сортов яблок</option>
|
||
<option value="pear">Грушевый сок</option>
|
||
<option value="birch">Берёзовый сок</option>
|
||
<option value="water">Родниковая вода</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="raw_start_value">Начальный объём сока (л):</label>
|
||
<input class="input" type="number" step="any" min="0" name="raw_start_value">
|
||
|
||
<label for="raw_value">Объём сока после выпаривания (л):</label>
|
||
<input class="input" type="number" step="any" min="0" name="raw_value">
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="raw_start_sugar">Сахаристость сока начальная (%):</label>
|
||
<input class="input" type="number" step="any" min="0" name="raw_start_sugar">
|
||
|
||
<label for="raw_sugar">Сахаристость сока после выпаривания (%):</label>
|
||
<input class="input" type="number" step="any" min="0" name="raw_sugar">
|
||
</div>
|
||
</div>
|
||
<label for="raw_addons">Дополнительные ингредиенты:</label>
|
||
<textarea class="textarea" name="raw_addons" rows="3" placeholder="Ингредиенты..."></textarea>
|
||
|
||
<!-- Брожение -->
|
||
<hr />
|
||
<h3>Брожение</h3>
|
||
<div class="columns">
|
||
<div class="column is-one-third">
|
||
<label for="ferment_start">Дата начала брожения:</label>
|
||
<input class="input" type="date" name="ferment_start" value="<?php echo date('Y-m-d'); ?>">
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="ferment_end">Дата конца брожения:</label>
|
||
<input class="input" type="date" name="ferment_end">
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="sediment_first">Первое снятие с осадка:</label>
|
||
<input class="input" type="date" name="sediment_first">
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="sediment_second">Второе снятие с осадка:</label>
|
||
<input class="input" type="date" name="sediment_second">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Шаптализация -->
|
||
<hr />
|
||
<h3>Шаптализация</h3>
|
||
<div class="columns">
|
||
<div class="column is-one-third">
|
||
<label for="polisugar_value">Масса внесённых полисахаров (кг):</label>
|
||
<input class="input" type="number" step="any" min="0" name="polisugar_value">
|
||
|
||
<label for="polisugar_date">Дата внесения полисахаров:</label>
|
||
<input class="input" type="date" name="polisugar_date" value="<?php echo date('Y-m-d'); ?>">
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="polisugar_temp">Температура кислотного гидролиза полисахаров (°C):</label>
|
||
<div class="slider-range" data-min="30" data-max="100" data-default-value="50"></div>
|
||
<output id="temp-polysaccharide-output" name="polisugar_temp">50 °C</output>
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="dextrose_value">Масса внесённой декстрозы (кг):</label>
|
||
<input class="input" type="number" step="any" min="0" name="dextrose_value">
|
||
|
||
<label for="dextrose_date">Дата внесения декстрозы:</label>
|
||
<input class="input" type="date" name="dextrose_date" value="<?php echo date('Y-m-d'); ?>">
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="fructose_value">Масса внесённой фруктозы (кг):</label>
|
||
<input class="input" type="number" step="any" min="0" name="fructose_value">
|
||
|
||
<label for="fructose_date">Дата внесения фруктозы:</label>
|
||
<input class="input" type="date" name="fructose_date" value="<?php echo date('Y-m-d'); ?>">
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="honey_value">Масса добавленного мёда (кг):</label>
|
||
<input class="input" type="number" step="any" min="0" name="honey_value">
|
||
|
||
<label for="honey_date">Дата добавления мёда:</label>
|
||
<input class="input" type="date" name="honey_date">
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="acid_value">Масса внесённой кислоты (г):</label>
|
||
<input class="input" type="number" step="any" min="0" name="acid_value">
|
||
|
||
<label for="acid_date">Дата внесения кислоты:</label>
|
||
<input class="input" type="date" name="acid_date">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Измерения -->
|
||
<hr />
|
||
<h3>Измерения</h3>
|
||
<div class="columns">
|
||
<div class="column is-one-third">
|
||
<label for="sugar_content">Сахаристость сусла (%):</label>
|
||
<input class="input" type="number" step="any" min="0" name="sugar_content">
|
||
|
||
<label for="sugar_content_date">Дата измерения сахаристости:</label>
|
||
<input class="input" type="date" name="sugar_content_date">
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="ph">PH раствора:</label>
|
||
<input class="input" type="number" step="any" min="0" name="ph">
|
||
|
||
<label for="ph_date">Дата измерения pH:</label>
|
||
<input class="input" type="date" name="ph_date">
|
||
</div>
|
||
<div class="column is-one-third">
|
||
<label for="temp">Температура сусла (°C):</label>
|
||
<input class="input" type="number" step="any" min="0" name="temp">
|
||
|
||
<label for="temp_date">Дата измерения температуры:</label>
|
||
<input class="input" type="date" name="temp_date" value="<?php echo date('Y-m-d'); ?>">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Кнопки -->
|
||
<button class="button is-success" type="submit">Сохранить</button>
|
||
<button class="button delete" type="button">Удалить</button>
|
||
</form>
|
||
</div>
|
||
|
||
<script>
|
||
$(document).ready(function() {
|
||
// Создание ползунков
|
||
$('.slider-range').each(function () {
|
||
let min = $(this).data('min');
|
||
let max = $(this).data('max');
|
||
let defaultValue = $(this).data('default-value') || Math.round((min + max)/2);
|
||
let outputField = $(this).next();
|
||
|
||
$(this).slider({
|
||
range: false,
|
||
min: min,
|
||
max: max,
|
||
value: defaultValue,
|
||
slide: function(event, ui) {
|
||
outputField.val(ui.value + ' ' + (ui.value === 1 ? 'л' : 'л'));
|
||
},
|
||
change: function(event, ui) {
|
||
outputField.val(ui.value + ' ' + (ui.value === 1 ? 'л' : 'л'));
|
||
}
|
||
});
|
||
outputField.val(defaultValue + ' ' + (defaultValue === 1 ? 'л' : 'л'));
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|