271 lines
8.4 KiB
HTML
271 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>FutaClone</title>
|
||
<!-- Добавляем библиотеку для визуализации графа -->
|
||
<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
|
||
<style>
|
||
/* Добавляем новые стили */
|
||
#network {
|
||
width: 100%;
|
||
height: 600px;
|
||
border: 1px solid #800;
|
||
background: white;
|
||
}
|
||
.hidden { display: none; }
|
||
#greeting { text-align: center; padding: 20px; }
|
||
#graphContainer { margin-top: 20px; }
|
||
/* Стили в духе традиционных имиджборд */
|
||
body {
|
||
background-color: #F0E0D6;
|
||
font-family: Arial, sans-serif;
|
||
margin: 20px;
|
||
max-width: 800px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.post-form {
|
||
background: #FFF;
|
||
border: 1px solid #800;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.post {
|
||
background: #FFF;
|
||
border: 1px solid #800;
|
||
padding: 15px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.post img {
|
||
max-width: 200px;
|
||
max-height: 200px;
|
||
margin-top: 10px;
|
||
}
|
||
input, textarea, button {
|
||
margin: 5px;
|
||
padding: 5px;
|
||
}
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
.preview-image {
|
||
max-width: 150px;
|
||
margin: 10px 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Добавляем новые блоки -->
|
||
<div id="greeting" class="hidden">
|
||
<h2>Отправьте первое сообщение, чтобы начать</h2>
|
||
</div>
|
||
|
||
<div id="graphContainer" class="hidden">
|
||
<h2>Древо мыслей</h2>
|
||
<div id="network"></div>
|
||
</div>
|
||
<!-- Форма создания поста -->
|
||
<div class="post-form">
|
||
<h2>Новый пост</h2>
|
||
<form id="postForm">
|
||
<textarea id="postText" rows="4" cols="50" placeholder="Текст поста"></textarea><br>
|
||
<input type="file" id="imageInput" accept="image/*"><br>
|
||
<div id="imagePreview" class="hidden"></div>
|
||
<button type="submit">Отправить</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Форма поиска (только текст) -->
|
||
<div class="post-form">
|
||
<h2>Поиск</h2>
|
||
<input type="text" id="searchText" placeholder="Текст для поиска">
|
||
<button onclick="searchPosts()">Искать</button>
|
||
</div>
|
||
|
||
<!-- Список постов -->
|
||
<div id="postsContainer"></div>
|
||
|
||
<script>
|
||
// Базовый URL бэкенда
|
||
const API_URL = 'http://localhost:8000';
|
||
|
||
// Обработка отправки поста (оставляем без изменений)
|
||
document.getElementById('postForm').addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
|
||
const text = document.getElementById('postText').value;
|
||
const fileInput = document.getElementById('imageInput');
|
||
|
||
const formData = new FormData();
|
||
if (text) formData.append('text', text);
|
||
if (fileInput.files[0]) formData.append('image', fileInput.files[0]);
|
||
|
||
try {
|
||
const response = await fetch(`${API_URL}/posts/`, {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
if (response.ok) {
|
||
const postData = await response.json();
|
||
// Сохраняем вектор в localStorage
|
||
localStorage.setItem('userVector', JSON.stringify(postData.vector));
|
||
checkUserVector();
|
||
loadPosts();
|
||
document.getElementById('postForm').reset();
|
||
document.getElementById('imagePreview').classList.add('hidden');
|
||
} else {
|
||
console.error('Error:', error);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
}
|
||
});
|
||
|
||
// Превью изображения перед загрузкой
|
||
document.getElementById('imageInput').addEventListener('change', function(e) {
|
||
const preview = document.getElementById('imagePreview');
|
||
if (this.files && this.files[0]) {
|
||
const reader = new FileReader();
|
||
reader.onload = function(e) {
|
||
preview.innerHTML = `<img src="${e.target.result}" class="preview-image">`;
|
||
preview.classList.remove('hidden');
|
||
}
|
||
reader.readAsDataURL(this.files[0]);
|
||
}
|
||
});
|
||
|
||
// Загрузка и отображение постов (оставляем без изменений)
|
||
async function loadPosts() {
|
||
try {
|
||
const response = await fetch(`${API_URL}/posts/`);
|
||
const posts = await response.json();
|
||
|
||
const container = document.getElementById('postsContainer');
|
||
container.innerHTML = posts.map(post => `
|
||
<div class="post">
|
||
<div class="post-meta">#${post.id} - ${new Date(post.created_at).toLocaleString()}</div>
|
||
${post.text ? `<div class="post-text">${post.text}</div>` : ''}
|
||
${post.image ? `<img src="${API_URL}/${post.image}" />` : ''}
|
||
</div>
|
||
`).join('');
|
||
} catch (error) {
|
||
console.error('Error:', error);
|
||
}
|
||
}
|
||
|
||
// Обновлённая функция поиска, использующая GET-запрос
|
||
async function searchPosts() {
|
||
const text = document.getElementById('searchText').value;
|
||
// Формируем строку запроса, если введён текст
|
||
const query = text ? `?text=${encodeURIComponent(text)}` : '';
|
||
|
||
try {
|
||
const response = await fetch(`${API_URL}/search/${query}`, {
|
||
method: 'GET'
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Запрос поиска завершился с ошибкой');
|
||
}
|
||
|
||
const results = await response.json();
|
||
alert('Найдено постов: ' + results.length);
|
||
// Здесь можно добавить отображение результатов поиска в интерфейсе
|
||
} catch (error) {
|
||
console.error('Error during search:', error);
|
||
}
|
||
}
|
||
|
||
// Первоначальная загрузка постов
|
||
loadPosts();
|
||
// Новая функция проверки вектора
|
||
function checkUserVector() {
|
||
const hasVector = localStorage.getItem('userVector') !== null;
|
||
document.getElementById('greeting').classList.toggle('hidden', hasVector);
|
||
document.getElementById('graphContainer').classList.toggle('hidden', !hasVector);
|
||
|
||
if (hasVector) {
|
||
loadUserTree();
|
||
} else {
|
||
loadPosts();
|
||
}
|
||
}
|
||
|
||
// Функция загрузки дерева
|
||
async function loadUserTree() {
|
||
const userVector = JSON.parse(localStorage.getItem('userVector'));
|
||
if (!userVector) return;
|
||
|
||
try {
|
||
const response = await fetch(`${API_URL}/posts/tree`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ vector: userVector }),
|
||
});
|
||
const posts = await response.json();
|
||
renderGraph(posts);
|
||
} catch (error) {
|
||
console.error('Error loading tree:', error);
|
||
}
|
||
}
|
||
|
||
// Визуализация графа
|
||
function renderGraph(posts) {
|
||
const container = document.getElementById('network');
|
||
const nodes = [];
|
||
const edges = [];
|
||
|
||
posts.forEach((post, index) => {
|
||
nodes.push({
|
||
id: post.id,
|
||
label: post.text || '[Изображение]',
|
||
image: post.image ? `${API_URL}/${post.image}` : 'https://via.placeholder.com/100',
|
||
shape: 'circularImage',
|
||
size: 25
|
||
});
|
||
|
||
if (index > 0) {
|
||
edges.push({
|
||
from: posts[index-1].id,
|
||
to: post.id,
|
||
arrows: 'to',
|
||
smooth: { type: 'curvedCW' }
|
||
});
|
||
}
|
||
});
|
||
|
||
const data = { nodes, edges };
|
||
const options = {
|
||
nodes: {
|
||
borderWidth: 2,
|
||
color: {
|
||
border: '#800',
|
||
background: '#F0E0D6'
|
||
},
|
||
font: { size: 14 }
|
||
},
|
||
edges: {
|
||
color: '#800',
|
||
width: 2
|
||
},
|
||
physics: {
|
||
stabilization: true,
|
||
barnesHut: {
|
||
gravitationalConstant: -2000,
|
||
springLength: 200
|
||
}
|
||
}
|
||
};
|
||
|
||
new vis.Network(container, data, options);
|
||
}
|
||
|
||
// Инициализация при загрузке страницы
|
||
checkUserVector();
|
||
</script>
|
||
</body>
|
||
</html>
|