mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-03 20:12:59 +00:00
Tomáš Dvořák
473 lines
22 KiB
HTML
473 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kontakty</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
<style>
|
|
.contact-card {
|
|
transition: all 0.2s ease-in-out;
|
|
border-top: 4px solid #2563eb;
|
|
}
|
|
.contact-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
.search-highlight {
|
|
background-color: #fef3c7;
|
|
padding: 1px 2px;
|
|
border-radius: 2px;
|
|
}
|
|
</style>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'brand-blue': '#004990',
|
|
'brand-light-blue': '#0072b0',
|
|
'brand-gray': '#f0f2f5'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-gray-100 min-h-screen">
|
|
<nav class="bg-brand-blue text-white shadow-lg">
|
|
<div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
|
|
<div class="flex items-center space-x-2">
|
|
<a href="webportal"><img src="http://pp-kunovice.cz/wp-content/uploads/2022/04/logo-retina-white.png" alt="Poppe Potthoff Logo" class="h-10"></a>
|
|
<div class="hidden md:block text-xl font-semibold">Poppe + Potthoff</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<div class="md:hidden">
|
|
<button id="mobile-menu-button" class="text-white focus:outline-none">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Desktop menu -->
|
|
<div class="hidden md:flex space-x-6">
|
|
<a href="webportal" class="hover:text-brand-light-blue">Rozcestník</a>
|
|
<a href="webportal/evidence-aut" class="hover:text-brand-light-blue">Evidence aut</a>
|
|
<a href="http://ppc-app/pwkweb2/" class="hover:text-brand-light-blue">Objednávka obědů</a>
|
|
<a href="http://osticket/" class="hover:text-brand-light-blue">OSticket</a>
|
|
<a href="http://kanboard/" class="hover:text-brand-light-blue">Kanboard</a>
|
|
<a href="index.html" class="hover:text-brand-light-blue">Kontakt</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
<div id="mobile-menu" class="hidden md:hidden px-2 pt-2 pb-3 space-y-1">
|
|
<a href="webportal" class="block px-3 py-2 rounded-md text-base font-medium hover:text-brand-light-blue">Rozcestník</a>
|
|
<a href="webportal/evidence-aut" class="block px-3 py-2 rounded-md text-base font-medium hover:text-brand-light-blue">Evidence aut</a>
|
|
<a href="http://ppc-app/pwkweb2/" class="block px-3 py-2 rounded-md text-base font-medium hover:text-brand-light-blue">Objednávka obědů</a>
|
|
<a href="http://osticket/" class="block px-3 py-2 rounded-md text-base font-medium hover:text-brand-light-blue">OSticket</a>
|
|
<a href="http://kanboard/" class="block px-3 py-2 rounded-md text-base font-medium hover:text-brand-light-blue">Kanboard</a>
|
|
<a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium hover:text-brand-light-blue">Kontakt</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<script>
|
|
// Mobile menu toggle
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
mobileMenuButton.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
</script>
|
|
|
|
<!-- Page Header -->
|
|
<div class="bg-gradient-to-r from-brand-blue to-brand-light-blue text-white py-6 mb-8">
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
<h1 class="text-3xl font-bold">Poppe + Potthoff - Firemní telefonní seznam</h1>
|
|
<p class="text-gray-100 mt-2">Poppe + Potthoff kontakty</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 py-8 max-w-7xl">
|
|
<div class="bg-white rounded-xl shadow p-6 md:p-8">
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4">
|
|
<div>
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2"><i class="fas fa-phone-alt text-brand-blue mr-2"></i>Kontakty</h1>
|
|
<p class="text-gray-600">Firemní telefonní seznam</p>
|
|
</div>
|
|
<button onclick="reloadContacts()" id="reloadBtn"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg flex items-center gap-2">
|
|
<i class="fas fa-sync-alt"></i>
|
|
Obnovit
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Search Bar -->
|
|
<div class="mb-6">
|
|
<div class="relative">
|
|
<input type="text" id="searchInput" placeholder="Hledat podle jména, pozice nebo telefonu..."
|
|
class="w-full px-4 py-3 pl-12 rounded-lg shadow-sm border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none text-lg"
|
|
onkeyup="filterContacts()">
|
|
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Switcher -->
|
|
<div class="flex items-center justify-center mb-8">
|
|
<div class="inline-flex rounded-md shadow-sm" role="group">
|
|
<button
|
|
id="showMainContacts"
|
|
class="switcher-btn px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-200 bg-blue-600 text-white focus:z-10 focus:ring-2 focus:ring-blue-500 active"
|
|
onclick="switchTab(this)"
|
|
data-type="main">
|
|
Hlavní kontakty
|
|
</button>
|
|
<button
|
|
id="showInternalContacts"
|
|
class="switcher-btn px-4 py-2 text-sm font-medium rounded-r-md border border-gray-200 bg-gray-100 text-gray-700 hover:bg-gray-200 focus:z-10 focus:ring-2 focus:ring-blue-500"
|
|
onclick="switchTab(this)"
|
|
data-type="internal">
|
|
Interní kontakty
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="loading" class="text-center py-16">
|
|
<div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
|
|
<p class="text-gray-600 text-lg">Načítání kontaktů...</p>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div id="contactsList" class="hidden">
|
|
<!-- Stats -->
|
|
<div id="stats" class="mb-6 p-4 bg-gray-50 rounded-lg border text-sm text-gray-700"></div>
|
|
|
|
<!-- Contacts Grid -->
|
|
<div class="container">
|
|
|
|
<div class="section">
|
|
<div id="contacts" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"></div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div id="internal-contacts" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- No Results -->
|
|
<div id="noResults" class="hidden text-center py-16">
|
|
<div class="text-5xl mb-4 text-gray-400">
|
|
<i class="fas fa-search"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-700 mb-2">Žádné výsledky</h3>
|
|
<p class="text-gray-500">Zkuste změnit hledaný výraz</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div id="error" class="hidden text-center py-16">
|
|
<div class="text-5xl mb-4 text-red-400">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-red-600 mb-2">Chyba při načítání</h3>
|
|
<p class="text-gray-600 mb-4">Nepodařilo se načíst kontakty</p>
|
|
<button onclick="loadContacts()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-colors">
|
|
<i class="fas fa-sync-alt mr-2"></i>Zkusit znovu
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="bg-gray-800 text-gray-400 py-8 mt-12">
|
|
<div class="max-w-6xl mx-auto px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- Company Info -->
|
|
<div>
|
|
<h3 class="text-white text-lg font-semibold mb-4">Poppe + Potthoff CZ</h3>
|
|
<p class="mb-2">IČO: 26902214</p>
|
|
<p class="mb-2">DIČ: CZ26902214</p>
|
|
<p class="mb-2">Schránka: gfrk5qy</p>
|
|
<p>Na Záhonech 1086, 686 04 Kunovice</p>
|
|
</div>
|
|
|
|
<!-- Quick Links -->
|
|
<div>
|
|
<h3 class="text-white text-lg font-semibold mb-4">Rychlé odkazy</h3>
|
|
<ul class="space-y-2">
|
|
<li><a href="webportal" class="hover:text-white">Rozcestník</a></li>
|
|
<li><a href="webportal/evidence-aut" class="hover:text-white">Evidence aut</a></li>
|
|
<li><a href="http://ppc-app/pwkweb2/" class="hover:text-white">Objednávka obědů</a></li>
|
|
<li><a href="http://osticket/" class="hover:text-white">Technická podpora</a></li>
|
|
<li><a href="/kontakt" class="hover:text-white">Kontakty</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Copyright -->
|
|
<div class="md:text-right">
|
|
<img src="http://pp-kunovice.cz/wp-content/uploads/2022/04/logo-retina-white.png" alt="Poppe Potthoff Logo" class="h-10 mb-4 inline-block">
|
|
<p class="text-sm"> 2025 Poppe + Potthoff CZ</p>
|
|
<p class="text-xs mt-2">Všechna práva vyhrazena</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm">
|
|
<p>Created by <a href="https://tdvorak.dev" class="text-blue-400 hover:text-blue-300">TDvorak</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
let currentData = {
|
|
Contacts: [],
|
|
InternalContacts: [],
|
|
last_updated: new Date().toISOString()
|
|
};
|
|
|
|
async function loadContacts() {
|
|
try {
|
|
showLoading();
|
|
const response = await fetch('/contacts');
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
|
|
const apiData = await response.json();
|
|
currentData = {
|
|
Contacts: apiData.contacts || [],
|
|
InternalContacts: apiData.internal_contacts || [],
|
|
last_updated: apiData.last_updated
|
|
};
|
|
|
|
hideLoading();
|
|
showContactsList();
|
|
updateStats(currentData);
|
|
} catch (error) {
|
|
hideLoading();
|
|
showError('Chyba při načítání kontaktů');
|
|
console.error('Error:', error);
|
|
}
|
|
}
|
|
|
|
function showLoading() {
|
|
const loading = document.getElementById('loading');
|
|
const contactsList = document.getElementById('contactsList');
|
|
if (loading) loading.classList.remove('hidden');
|
|
if (contactsList) contactsList.classList.add('hidden');
|
|
}
|
|
|
|
function hideLoading() {
|
|
const loading = document.getElementById('loading');
|
|
if (loading) loading.classList.add('hidden');
|
|
}
|
|
|
|
function showContactsList() {
|
|
const contactsList = document.getElementById('contactsList');
|
|
const errorElement = document.getElementById('error');
|
|
|
|
if (contactsList) contactsList.classList.remove('hidden');
|
|
if (errorElement) errorElement.classList.add('hidden');
|
|
|
|
// Show default tab (main contacts) if none active
|
|
const mainBtn = document.querySelector('.switcher-btn[data-type="main"]');
|
|
const activeBtn = document.querySelector('.switcher-btn.active');
|
|
|
|
if (!activeBtn && mainBtn) {
|
|
mainBtn.classList.add('active');
|
|
}
|
|
|
|
filterContacts();
|
|
}
|
|
|
|
function switchTab(btn) {
|
|
// Update button states
|
|
document.querySelectorAll('.switcher-btn').forEach(b => {
|
|
b.classList.remove('active', 'bg-blue-600', 'text-white');
|
|
b.classList.add('bg-gray-100', 'text-gray-700');
|
|
});
|
|
|
|
// Set active button
|
|
btn.classList.add('active', 'bg-blue-600', 'text-white');
|
|
btn.classList.remove('bg-gray-100', 'text-gray-700');
|
|
|
|
// Filter and display contacts
|
|
filterContacts();
|
|
}
|
|
|
|
function filterContacts() {
|
|
const query = document.getElementById('searchInput').value.toLowerCase().trim();
|
|
|
|
// Always show all contacts when searching
|
|
if (query) {
|
|
const allContacts = [...(currentData?.Contacts || []), ...(currentData?.InternalContacts || [])];
|
|
const filteredContacts = allContacts.filter(contact =>
|
|
(contact.name && contact.name.toLowerCase().includes(query)) ||
|
|
(contact.position && contact.position.toLowerCase().includes(query)) ||
|
|
(contact.phone && contact.phone.includes(query)) ||
|
|
(contact.service_phone && contact.service_phone.includes(query))
|
|
);
|
|
displayContacts(filteredContacts, query);
|
|
}
|
|
// Show only active tab's contacts when no search
|
|
else {
|
|
const activeTab = document.querySelector('.switcher-btn.active')?.dataset.type || 'main';
|
|
const contacts = activeTab === 'main' ? currentData?.Contacts : currentData?.InternalContacts;
|
|
displayContacts(contacts || [], '');
|
|
}
|
|
}
|
|
|
|
function showError(message) {
|
|
document.getElementById('error').classList.remove('hidden');
|
|
document.getElementById('error').querySelector('p').textContent = message;
|
|
document.getElementById('contactsList').classList.add('hidden');
|
|
}
|
|
|
|
function updateStats(data) {
|
|
const lastUpdated = new Date(data.last_updated).toLocaleString('cs-CZ');
|
|
const totalContacts = (data.Contacts?.length || 0) + (data.InternalContacts?.length || 0);
|
|
|
|
document.getElementById('stats').innerHTML = `
|
|
<div class="flex flex-wrap items-center gap-4 text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
|
|
<span><strong>Celkem:</strong> ${totalContacts} kontaktů</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-gray-400 rounded-full"></span>
|
|
<span><strong>Poslední aktualizace:</strong> ${lastUpdated}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function displayContacts(contacts = [], searchQuery = '') {
|
|
const container = document.getElementById('contacts');
|
|
const noResults = document.getElementById('noResults');
|
|
|
|
// Clear previous results
|
|
container.innerHTML = '';
|
|
|
|
if (!contacts || !contacts.length) {
|
|
noResults.classList.remove('hidden');
|
|
noResults.querySelector('h3').textContent = 'Žádné kontakty';
|
|
noResults.querySelector('p').textContent = searchQuery
|
|
? 'Nebyly nalezeny žádné odpovídající kontakty'
|
|
: 'Nebyly načteny žádné kontakty';
|
|
return;
|
|
}
|
|
|
|
noResults.classList.add('hidden');
|
|
|
|
// Display contacts
|
|
container.innerHTML = contacts
|
|
.map(contact => formatContactCard(contact, searchQuery))
|
|
.join('');
|
|
}
|
|
|
|
function formatContactCard(contact, highlight = '') {
|
|
const highlightClass = highlight ? 'bg-yellow-50 border-yellow-200' : '';
|
|
|
|
// Phone display logic
|
|
let phoneDisplay = '<p class="text-gray-400 italic">Bez telefonu</p>';
|
|
if (contact.phone || contact.service_phone || contact.phone_flap) {
|
|
phoneDisplay = [
|
|
contact.phone ? `<div class="flex items-center gap-2">
|
|
<i class="fas fa-phone text-gray-400 w-4"></i>
|
|
<span>${contact.phone}</span>
|
|
</div>` : '',
|
|
contact.service_phone ? `<div class="flex items-center gap-2">
|
|
<i class="fas fa-mobile-alt text-gray-400 w-4"></i>
|
|
<span>${contact.service_phone}</span>
|
|
</div>` : '',
|
|
contact.phone_flap ? `<div class="flex items-center gap-2">
|
|
<i class="fas fa-headset text-gray-400 w-4"></i>
|
|
<span>${contact.phone_flap}</span>
|
|
</div>` : ''
|
|
].filter(Boolean).join('');
|
|
}
|
|
|
|
return `
|
|
<div class="contact-card p-5 bg-white rounded-xl border border-gray-200 ${highlightClass} hover:shadow-md transition-all">
|
|
<h3 class="font-semibold text-lg text-gray-800 mb-1">${contact.name}</h3>
|
|
<p class="text-gray-500 mb-3 text-sm">${contact.position || '—'}</p>
|
|
<div class="space-y-2 text-sm text-gray-700">
|
|
${phoneDisplay}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function highlightText(text, query) {
|
|
if (!query || !text) return text;
|
|
const regex = new RegExp(`(${query})`, 'gi');
|
|
return text.replace(regex, '<span class="search-highlight">$1</span>');
|
|
}
|
|
|
|
async function reloadContacts() {
|
|
const btn = document.getElementById('reloadBtn');
|
|
if (!btn) return;
|
|
|
|
const originalText = btn.innerHTML;
|
|
btn.innerHTML = '<i class="fas fa-sync-alt animate-spin mr-2"></i> Aktualizace...';
|
|
|
|
try {
|
|
showLoading();
|
|
const response = await fetch('/reload', { method: 'POST' });
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
await loadContacts();
|
|
} catch (error) {
|
|
showError(error.message);
|
|
} finally {
|
|
btn.innerHTML = originalText;
|
|
}
|
|
}
|
|
|
|
// Initialize filter button styles
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.filter-btn {
|
|
@apply px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 transition-all duration-200 text-sm font-medium;
|
|
}
|
|
.filter-btn.active {
|
|
@apply bg-blue-500 text-white border-blue-500 shadow-md;
|
|
}
|
|
.filter-btn:hover:not(.active) {
|
|
@apply bg-gray-100 border-gray-400;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
});
|
|
|
|
// Load contacts on page load
|
|
document.addEventListener('DOMContentLoaded', loadContacts);
|
|
|
|
// Add keyboard shortcuts
|
|
document.addEventListener('keydown', function(e) {
|
|
// Ctrl/Cmd + K to focus search
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
document.getElementById('searchInput').focus();
|
|
}
|
|
|
|
// Escape to clear search
|
|
if (e.key === 'Escape') {
|
|
document.getElementById('searchInput').value = '';
|
|
filterContacts();
|
|
}
|
|
});
|
|
|
|
// Add search input focus ring and animations
|
|
document.getElementById('searchInput').addEventListener('focus', function() {
|
|
this.parentElement.classList.add('ring-2', 'ring-blue-500');
|
|
});
|
|
|
|
document.getElementById('searchInput').addEventListener('blur', function() {
|
|
this.parentElement.classList.remove('ring-2', 'ring-blue-500');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |