turns-00050.parquet:46745
1af935e32e99f7825c90b0ebdegenerate_repetitionAbsentFinal dense release
USER
в таблице в изображении 16 сегментного индикатора должны неактивные сегменты выводиться серым цветом а активные выводится белым цветом
ASSISTANT
Чтобы реализовать отображение 16-сегментного индикатора в таблице, где активные сегменты белые, а неактивные серые, мы можем воспользоваться встроенными стилями для каждого SVG в таблице. Мы будем использовать данные из `$segments` для управления классами активных и неактивных сегментов.
Ниже приведен обновленный `index.php` с корректным отображением индикаторов в таблице:
### index.php
```php
<?php
// Загрузка существующей карты символов из файла
$file = 'alfabet.txt';
$charMap = [];
if (file_exists($file)) {
$content = file_get_contents($file);
$charMap = json_decode($content, true);
}
// Обработка POST-запроса для сохранения нового символа и его состояний сегментов
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['character']) && isset($_POST['segments'])) {
$character = $_POST['character'];
$segments = array_map('intval', explode(',', $_POST['segments']));
$charMap[$character] = $segments;
file_put_contents($file, json_encode($charMap));
}
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>16-сегментный индикатор</title>
<style>
body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
}
.character path {
fill: gray;
cursor: pointer;
}
.character path.active {
fill: white;
}
.indicator-container {
margin-top: 20px;
}
svg.character {
height: 300px;
}
table svg {
height: 100px;
}
</style>
</head>
<body>
<svg id="indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.81 18.31" class="character">
<!-- SVG paths for each segment -->
<path class="seg0" d="M5.77,7.79v-1.56...Z"/>
<path class="seg1" d="M8.27,8.02h.53...Z"/>
<!-- ... другие сегменты ... -->
<path class="seg15" d="M7.31,9.32l.57...Z"/>
</svg>
<form method="POST" class="indicator-container">
<input type="text" id="character" name="character" placeholder="Введите символ" required>
<input type="hidden" id="segments" name="segments">
<button type="submit">Сохранить</button>
</form>
<table>
<thead>
<tr>
<th>Символ</th>
<th>Индикатор</th>
<th>Действия</th>
</tr>
</thead>
<tbody>
<?php foreach ($charMap as $char => $segments): ?>
<tr>
<td><?= htmlspecialchars($char) ?></td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.81 18.31" class="character">
<!-- Отображение сегментов в зависимости от сохраненного состояния -->
<?php foreach ($segments as $index => $isActive): ?>
<path class="seg<?= $index ?> <?= $isActive ? 'active' : '' ?>" d="M5.77,7.79v-1.56...Z"/>
<?php endforeach; ?>
<!-- Предполагается, что сегменты дублируются для каждого path -->
</svg>
</td>
<td>
<form method="POST" style="display:inline;">
<input type="hidden" name="delete_character" value="<?= htmlspecialchars($char) ?>">
<button type="submit">Удалить</button>
</form>
<button onclick="editCharacter('<?= htmlspecialchars($char) ?>', '<?= htmlspecialchars(implode(',', $segments)) ?>')">Изменить</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
document.querySelectorAll('.character path').forEach((segment, index) => {
segment.addEventListener('click', () => {
segment.classList.toggle('active');
updateSegmentsInput();
});
});
function editCharacter(char, segments) {
document.getElementById('character').value = char;
setSegments(segments.split(',').map(Number));
}
function setSegments(segments) {
document.querySelectorAll('.character path').forEach((segment, index) => {
if (segments[index]) {
segment.classList.add('active');
} else {
segment.classList.remove('active');
}
});
}
function updateSegmentsInput() {
const segments = Array.from(document.querySelectorAll('.character path'))
.map(segment => segment.classList.contains('active') ? 1 : 0);
document.getElementById('segments').value = segments.join(',');
}
</script>
</body>
</html>
```
### Объяснение изменений:
- **SVG в таблице**: каждый сегмент SVG в таблице имеет условно добавляемый класс `'active'` на основе сохраненного состояния `($isActive)`. Это управляет их цветом (белый для активных и серый для неактивных).
- **Общая структура SVG**: в цикле PHP внутри SVG строятся пути с соответствующими атрибутами. Вам нужно заменить путь `d="M5.77,7.79v-1.56...Z"` настоящими значениями из вашего SVG-кода для каждого сегмента (необходим 16-кратный повтор или 16 разных значений).
### Примечание:
Замените представленные пути и количество сегментов в каждом SVG на актуальные значения из вашего полного SVG. Это создание аналогов сегментов в соответствии с приложенными данными.