454 lines
19 KiB
JavaScript
454 lines
19 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
checkSession();
|
|
if (getCookie('sessionid')) {
|
|
loadUsers();
|
|
loadWiki();
|
|
}
|
|
});
|
|
|
|
function getCookie(name) {
|
|
const value = `; ${document.cookie}`;
|
|
const parts = value.split(`; ${name}=`);
|
|
if (parts.length === 2) return parts.pop().split(';').shift();
|
|
return '';
|
|
}
|
|
|
|
function setCookie(name, value, days) {
|
|
const expires = new Date();
|
|
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
|
|
document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + expires.toUTCString() + ';path=/';
|
|
}
|
|
|
|
const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login';
|
|
const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter';
|
|
const USER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/user';
|
|
const PROFILE_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/profile';
|
|
const WIKI_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/wiki';
|
|
|
|
function checkSession() {
|
|
const sessionid = getCookie('sessionid');
|
|
console.log('checkSession: sessionid =', sessionid);
|
|
const intro = document.getElementById('intro-section');
|
|
const news = document.getElementById('news-col');
|
|
const login = document.getElementById('login-panel');
|
|
const newsletter = document.querySelector('#login-panel .newsletter-panel');
|
|
const notebook = document.getElementById('notebook-panel');
|
|
console.log('checkSession elements:', { intro, news, login, newsletter, notebook });
|
|
if (sessionid) {
|
|
if (intro) intro.classList.add('hidden');
|
|
if (news) news.classList.add('hidden');
|
|
if (login) login.classList.add('hidden');
|
|
if (notebook) notebook.classList.remove('hidden');
|
|
document.querySelectorAll('.user-actions').forEach(el => el.classList.remove('hidden'));
|
|
} else {
|
|
if (notebook) notebook.classList.add('hidden');
|
|
if (login) login.classList.remove('hidden');
|
|
if (newsletter) newsletter.classList.remove('hidden');
|
|
document.querySelectorAll('.user-actions').forEach(el => el.classList.add('hidden'));
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('.lang-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const lang = btn.dataset.lang;
|
|
document.body.dataset.lang = lang;
|
|
document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.notebook .tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
document.querySelectorAll('.notebook .tab').forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
const tabName = tab.dataset.tab;
|
|
document.querySelectorAll('.notebook .tab-content').forEach(c => c.classList.add('hidden'));
|
|
document.getElementById('tab-' + tabName).classList.remove('hidden');
|
|
if (tabName === 'users') loadUsers();
|
|
if (tabName === 'wiki') loadWiki();
|
|
});
|
|
});
|
|
|
|
async function sendTelegramUser() {
|
|
const user = document.getElementById('telegram-user').value.trim();
|
|
if (!user) { alert('Bitte geben Sie einen Telegram-Nutzernamen ein.'); return; }
|
|
const btn = document.querySelector('#login-step-1 .btn-primary');
|
|
btn.disabled = true; btn.textContent = 'Verifizierung läuft...';
|
|
try {
|
|
const response = await fetch(API_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username: user })
|
|
});
|
|
console.log('sendTelegramUser response:', response.status, await response.clone().json());
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
console.log('sendTelegramUser data:', data);
|
|
if (data.Error && data.Error.includes('user not found')) {
|
|
const msg = document.body.dataset.lang === 'de'
|
|
? 'Dieser Benutzername ist noch nicht in unserer Datenbank. Bitte melden Sie sich über den Telegram Bot an, um sich zu registrieren.'
|
|
: 'This username is not yet in our database. Please sign up via the Telegram bot to register.';
|
|
alert(msg);
|
|
} else if (data.status === 'code send') {
|
|
document.getElementById('login-step-1').classList.add('hidden');
|
|
document.getElementById('login-step-2').classList.remove('hidden');
|
|
alert('Code wurde an Ihren Telegram-Account gesendet.');
|
|
} else if (data.sessionid) {
|
|
setCookie('sessionid', data.sessionid, 1);
|
|
document.getElementById('login-step-1').classList.add('hidden');
|
|
document.getElementById('login-step-2').classList.remove('hidden');
|
|
alert('Code wurde an Ihren Telegram-Account gesendet.');
|
|
} else {
|
|
alert('Fehler bei der Verifizierung. Bitte versuchen Sie es erneut.');
|
|
}
|
|
} else {
|
|
alert('Fehler bei der Verifizierung. Bitte versuchen Sie es erneut.');
|
|
}
|
|
} catch (error) {
|
|
console.error('sendTelegramUser error:', error);
|
|
alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
|
|
btn.disabled = false; btn.textContent = document.body.dataset.lang === 'de' ? 'Anmelden' : 'Login';
|
|
}
|
|
}
|
|
|
|
async function verifyCode() {
|
|
const code = document.getElementById('verification-code').value.trim();
|
|
if (!code) { alert('Bitte geben Sie den Verifizierungscode ein.'); return; }
|
|
const btns = document.querySelectorAll('#login-step-2 .btn-primary');
|
|
btns.forEach(b => b.disabled = true);
|
|
try {
|
|
const response = await fetch(API_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
username: document.getElementById('telegram-user').value,
|
|
code: code,
|
|
sessionid: getCookie('sessionid')
|
|
})
|
|
});
|
|
console.log('verifyCode response:', response.status, await response.clone().json());
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
console.log('verifyCode data:', data);
|
|
if (data.sessionid) {
|
|
setCookie('sessionid', data.sessionid, 1);
|
|
document.getElementById('intro-section').classList.add('hidden');
|
|
document.getElementById('news-col').classList.add('hidden');
|
|
document.getElementById('login-panel').classList.add('hidden');
|
|
document.getElementById('notebook-panel').classList.remove('hidden');
|
|
}
|
|
} else {
|
|
alert('Ungültiger Code. Bitte versuchen Sie es erneut.');
|
|
btns.forEach(b => b.disabled = false);
|
|
}
|
|
} catch (error) {
|
|
console.error('verifyCode error:', error);
|
|
alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
|
|
btns.forEach(b => b.disabled = false);
|
|
}
|
|
}
|
|
|
|
async function submitLoginData() {
|
|
const name = document.getElementById('full-name').value.trim();
|
|
const llc = document.getElementById('llc-name').value.trim();
|
|
if (!name || !llc) { alert('Bitte geben Sie Name und LLC-Namen ein.'); return; }
|
|
const btns = document.querySelectorAll('#login-step-3 .btn-primary');
|
|
btns.forEach(b => b.disabled = true);
|
|
try {
|
|
const response = await fetch(API_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
username: document.getElementById('telegram-user').value,
|
|
name: name,
|
|
llc: llc
|
|
})
|
|
});
|
|
console.log('submitLoginData response:', response.status, await response.clone().json());
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
console.log('submitLoginData data:', data);
|
|
if (data.sessionid) {
|
|
setCookie('sessionid', data.sessionid, 1);
|
|
}
|
|
document.getElementById('intro-section').classList.add('hidden');
|
|
document.getElementById('news-col').classList.add('hidden');
|
|
document.getElementById('login-panel').classList.add('hidden');
|
|
document.getElementById('notebook-panel').classList.remove('hidden');
|
|
document.getElementById('profile-username').value = document.getElementById('telegram-user').value;
|
|
document.getElementById('profile-name').value = document.getElementById('full-name').value;
|
|
document.getElementById('profile-llc').value = document.getElementById('llc-name').value;
|
|
document.querySelectorAll('.user-actions').forEach(el => el.classList.remove('hidden'));
|
|
alert('Erfolgreich angemeldet! Willkommen!');
|
|
} else {
|
|
alert('Fehler bei der Anmeldung.');
|
|
btns.forEach(b => b.disabled = false);
|
|
}
|
|
} catch (error) {
|
|
console.error('submitLoginData error:', error);
|
|
alert('Fehler bei der Verbindung.');
|
|
btns.forEach(b => b.disabled = false);
|
|
}
|
|
}
|
|
|
|
async function subscribeNewsletter() {
|
|
const email = document.getElementById('newsletter-email').value.trim();
|
|
if (!email) { alert('Bitte geben Sie eine E-Mail-Adresse ein.'); return; }
|
|
const btn = document.querySelector('#newsletter-form .btn-primary');
|
|
btn.disabled = true; btn.textContent = document.body.dataset.lang === 'de' ? 'Absenden...' : 'Submitting...';
|
|
try {
|
|
const response = await fetch(NEWSLETTER_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email: email })
|
|
});
|
|
console.log('subscribeNewsletter response:', response.status, await response.clone().json());
|
|
if (response.ok) {
|
|
document.getElementById('newsletter-form').classList.add('hidden');
|
|
document.getElementById('newsletter-success').classList.remove('hidden');
|
|
} else {
|
|
alert('Fehler bei der Anmeldung. Bitte versuchen Sie es erneut.');
|
|
btn.disabled = false;
|
|
btn.textContent = document.body.dataset.lang === 'de' ? 'Abonnieren' : 'Subscribe';
|
|
}
|
|
} catch (error) {
|
|
console.error('subscribeNewsletter error:', error);
|
|
alert('Fehler bei der Verbindung. Bitte versuchen Sie es erneut.');
|
|
btn.disabled = false;
|
|
btn.textContent = document.body.dataset.lang === 'de' ? 'Abonnieren' : 'Subscribe';
|
|
}
|
|
}
|
|
|
|
async function loadUsers() {
|
|
const usersContainer = document.getElementById('users-list');
|
|
if (!usersContainer) return;
|
|
console.log('loadUsers: starting fetch from', USER_URL);
|
|
try {
|
|
const response = await fetch(USER_URL);
|
|
console.log('loadUsers: response status =', response.status);
|
|
if (!response.ok) throw new Error('Failed to fetch users');
|
|
const data = await response.json();
|
|
console.log('loadUsers: response data =', data);
|
|
if (data.data && Array.isArray(data.data)) {
|
|
usersContainer.innerHTML = '';
|
|
console.log('loadUsers: rendering', data.data.length, 'users');
|
|
data.data.forEach(user => {
|
|
const card = document.createElement('div');
|
|
card.className = 'user-card';
|
|
card.style.cursor = 'pointer';
|
|
const avatarContent = user.image
|
|
? `<img src="${user.image}" alt="${user.username || 'user'}" class="user-avatar-img" />`
|
|
: `<span class="user-avatar-text">${(user.username || '').charAt(0).toUpperCase()}</span>`;
|
|
card.innerHTML = `
|
|
<div class="user-avatar">${avatarContent}</div>
|
|
<div class="user-info">
|
|
<h4>${user.username || 'N/A'}</h4>
|
|
<p class="user-company">${user.company || ''}</p>
|
|
<p class="user-email">${user.email || ''}</p>
|
|
<p class="user-location">${user.location || ''}</p>
|
|
<p class="user-description">${user.Description || ''}</p>
|
|
</div>
|
|
`;
|
|
card.addEventListener('click', () => openUserDetailModal(user));
|
|
usersContainer.appendChild(card);
|
|
});
|
|
console.log('loadUsers: done, users rendered');
|
|
} else {
|
|
console.log('loadUsers: no data.data array found');
|
|
usersContainer.innerHTML = '<p>No users found.</p>';
|
|
}
|
|
} catch (error) {
|
|
console.error('loadUsers error:', error);
|
|
usersContainer.innerHTML = '<p>Error loading users: ' + error.message + '</p>';
|
|
}
|
|
}
|
|
|
|
function filterUsers(searchTerm) {
|
|
const usersContainer = document.getElementById('users-list');
|
|
if (!usersContainer) return;
|
|
const cards = usersContainer.querySelectorAll('.user-card');
|
|
const term = searchTerm.toLowerCase();
|
|
cards.forEach(card => {
|
|
const username = card.querySelector('h4')?.innerText?.toLowerCase() || '';
|
|
const company = card.querySelector('.user-company')?.innerText?.toLowerCase() || '';
|
|
const email = card.querySelector('.user-email')?.innerText?.toLowerCase() || '';
|
|
const location = card.querySelector('.user-location')?.innerText?.toLowerCase() || '';
|
|
const description = card.querySelector('.user-description')?.innerText?.toLowerCase() || '';
|
|
const displayText = username + ' ' + company + ' ' + email + ' ' + location + ' ' + description;
|
|
card.style.display = displayText.includes(term) ? 'block' : 'none';
|
|
});
|
|
}
|
|
|
|
async function openProfileModal() {
|
|
const sessionid = getCookie('sessionid');
|
|
if (!sessionid) { alert('Bitte melden Sie sich an.'); return; }
|
|
try {
|
|
const response = await fetch(PROFILE_URL + '?sessionid=' + encodeURIComponent(sessionid));
|
|
console.log('openProfileModal response:', response.status, await response.clone().json());
|
|
if (response.ok) {
|
|
const user = await response.json();
|
|
console.log('openProfileModal user:', user);
|
|
document.getElementById('profile-username-display').textContent = user.username || '';
|
|
document.getElementById('profile-company').value = user.company || '';
|
|
document.getElementById('profile-email').value = user.email || '';
|
|
document.getElementById('profile-homepage').value = user.homepage || '';
|
|
document.getElementById('profile-image').value = user.image || '';
|
|
document.getElementById('profile-location').value = user.location || '';
|
|
document.getElementById('profile-description').value = user.Description || '';
|
|
document.getElementById('profile-publish').checked = true;
|
|
document.getElementById('profile-edit-fields').classList.remove('hidden');
|
|
}
|
|
} catch (error) {
|
|
console.error('openProfileModal error:', error);
|
|
alert('Fehler beim Laden des Profils.');
|
|
}
|
|
document.getElementById('profile-modal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeProfileModal() {
|
|
document.getElementById('profile-modal').classList.add('hidden');
|
|
}
|
|
|
|
function openUserDetailModal(user) {
|
|
const modal = document.getElementById('user-detail-modal');
|
|
const avatar = document.getElementById('user-detail-avatar');
|
|
const initial = document.getElementById('user-detail-initial');
|
|
const img = document.getElementById('user-detail-img');
|
|
|
|
// Avatar: image or initial
|
|
if (user.image) {
|
|
avatar.innerHTML = `<img src="${user.image}" alt="${user.username}" style="width:100%;height:100%;object-fit:cover;border-radius:50%;">`;
|
|
} else {
|
|
avatar.innerHTML = `<span class="user-avatar-text">${(user.username || '?').charAt(0).toUpperCase()}</span>`;
|
|
}
|
|
|
|
document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown');
|
|
document.getElementById('user-detail-company').textContent = user.company || '';
|
|
document.getElementById('user-detail-email').textContent = user.email || '-';
|
|
document.getElementById('user-detail-homepage').textContent = user.homepage || '-';
|
|
document.getElementById('user-detail-location').textContent = user.location || '-';
|
|
document.getElementById('user-detail-publish').textContent = user.publish ? 'Ja / Yes' : 'Nein / No';
|
|
document.getElementById('user-detail-description').textContent = user.Description || '-';
|
|
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
function closeUserDetailModal() {
|
|
document.getElementById('user-detail-modal').classList.add('hidden');
|
|
}
|
|
|
|
async function loadWiki() {
|
|
const wikiContainer = document.getElementById('wiki-content');
|
|
if (!wikiContainer) return;
|
|
console.log('loadWiki: starting fetch from', WIKI_URL);
|
|
try {
|
|
const response = await fetch(WIKI_URL);
|
|
console.log('loadWiki: response status =', response.status);
|
|
if (!response.ok) throw new Error('Failed to fetch wiki');
|
|
const result = await response.json();
|
|
console.log('loadWiki: response data =', result);
|
|
|
|
if (result.data && Array.isArray(result.data)) {
|
|
wikiContainer.innerHTML = '';
|
|
const topics = {};
|
|
|
|
result.data.forEach(item => {
|
|
const topic = item.topic || 'Unknown';
|
|
if (!topics[topic]) topics[topic] = [];
|
|
topics[topic].push(item);
|
|
});
|
|
|
|
for (const [topicName, subtopics] of Object.entries(topics)) {
|
|
const topicDiv = document.createElement('div');
|
|
topicDiv.className = 'wiki-topic';
|
|
topicDiv.innerHTML = `
|
|
<h4 class="topic-title">${topicName}</h4>
|
|
<div class="wiki-subtopics"></div>
|
|
`;
|
|
wikiContainer.appendChild(topicDiv);
|
|
|
|
const subtopicsDiv = topicDiv.querySelector('.wiki-subtopics');
|
|
const topicTitle = topicDiv.querySelector('.topic-title');
|
|
|
|
// Topics start collapsed
|
|
subtopicsDiv.classList.add('hidden');
|
|
|
|
// Toggle topic on click
|
|
topicTitle.onclick = () => {
|
|
console.log('Topic clicked:', topicName, 'current hidden:', subtopicsDiv.classList.contains('hidden'));
|
|
if (subtopicsDiv.classList.contains('hidden')) {
|
|
subtopicsDiv.classList.remove('hidden');
|
|
} else {
|
|
subtopicsDiv.classList.add('hidden');
|
|
}
|
|
};
|
|
|
|
subtopics.forEach(sub => {
|
|
const subtopicDiv = document.createElement('div');
|
|
subtopicDiv.className = 'wiki-subtopic';
|
|
subtopicDiv.innerHTML = `
|
|
<div class="wiki-subtopic-title">${sub.subtopic}</div>
|
|
<div class="wiki-subtopic-content">
|
|
<p>${sub.wiki || ''}</p>
|
|
</div>
|
|
`;
|
|
subtopicsDiv.appendChild(subtopicDiv);
|
|
|
|
const title = subtopicDiv.querySelector('.wiki-subtopic-title');
|
|
title.onclick = (e) => {
|
|
e.stopPropagation();
|
|
subtopicsDiv.querySelectorAll('.wiki-subtopic').forEach(s => {
|
|
if (s !== subtopicDiv) s.classList.add('hidden');
|
|
});
|
|
subtopicDiv.classList.toggle('hidden');
|
|
};
|
|
});
|
|
}
|
|
} else {
|
|
wikiContainer.innerHTML = '<p>No wiki data found.</p>';
|
|
}
|
|
} catch (error) {
|
|
console.error('loadWiki error:', error);
|
|
wikiContainer.innerHTML = '<p>Error loading wiki: ' + error.message + '</p>';
|
|
}
|
|
}
|
|
|
|
function logout() {
|
|
setCookie('sessionid', '', -1);
|
|
checkSession();
|
|
closeProfileModal();
|
|
}
|
|
|
|
async function saveProfile() {
|
|
const company = document.getElementById('profile-company').value.trim();
|
|
if (!company) { alert('Bitte geben Sie LLC/SRL-Namen ein.'); return; }
|
|
|
|
try {
|
|
const response = await fetch(PROFILE_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
username: document.getElementById('profile-username-display').textContent,
|
|
company: company,
|
|
email: document.getElementById('profile-email').value,
|
|
homepage: document.getElementById('profile-homepage').value,
|
|
image: document.getElementById('profile-image').value,
|
|
location: document.getElementById('profile-location').value,
|
|
Description: document.getElementById('profile-description').value,
|
|
sessionid: getCookie('sessionid'),
|
|
publish: document.getElementById('profile-publish').checked
|
|
})
|
|
});
|
|
console.log('saveProfile response:', response.status, await response.clone().json());
|
|
if (response.ok) {
|
|
alert('Profil erfolgreich gespeichert!');
|
|
closeProfileModal();
|
|
checkSession();
|
|
} else {
|
|
alert('Fehler beim Speichern.');
|
|
}
|
|
} catch (error) {
|
|
console.error('saveProfile error:', error);
|
|
alert('Fehler bei der Verbindung.');
|
|
}
|
|
} |