TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-03 20:12:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Tomáš Dvořák
2025-05-23 08:59:49 +02:00
committed by GitHub
parent 78ccd760ee
commit f3eebeb698
2 changed files with 369 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contact-scrape.service
+29
View File
@@ -0,0 +1,29 @@
[Unit]
Description=Contact Scrape Service
After=network.target
[Service]
Type=simple
User=www-data
WorkingDirectory=/opt/contact-scrape
ExecStart=/opt/contact-scrape/contact-scrape
Restart=always
RestartSec=5
Environment=PORT=8080
# Security settings
NoNewPrivileges=true
PrivateTmp=true
ProtectSystem=strict
ProtectHome=true
ReadWritePaths=/opt/contact-scrape/data
CapabilityBoundingSet=CAP_NET_BIND_SERVICE
AmbientCapabilities=CAP_NET_BIND_SERVICE
# Logging
StandardOutput=journal
StandardError=journal
SyslogIdentifier=contact-scrape
[Install]
WantedBy=multi-user.target
index.html
+340 -99
View File
@@ -3,132 +3,373 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikační Rozcestník</title>
<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>
.card {
transition: transform 0.2s, box-shadow 0.2s;
.contact-card {
transition: all 0.2s ease-in-out;
border-top: 4px solid #2563eb;
}
.card:hover {
.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>
</head>
<body class="bg-gray-100 min-h-screen">
<header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-lg" style="margin-bottom: 20px;">
<div class="container mx-auto px-4 py-6 flex items-center">
<div>
<h1 class="text-3xl font-bold">Poppe + Potthoff - Firemní Aplikace</h1>
<p class="mt-2 text-blue-100">Rychlý přístup ke všem důležitým systémům</p>
</div>
<div class="container mx-auto px-4 py-6">
<h1 class="text-3xl font-bold">📞 Firemní telefonní seznam</h1>
<p class="mt-2 text-blue-100">Poppe + Potthoff kontakty</p>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<!-- Search -->
<div class="mb-8 max-w-xl mx-auto">
<div class="relative">
<input type="text" id="search" placeholder="Hledat aplikaci..." style="margin-bottom: 20px;"
class="w-full px-4 py-3 rounded-lg shadow-sm border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none">
<div class="absolute right-3 top-3 text-gray-400">
<i class="fas fa-search"></i>
<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">📞 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>
<!-- Filter Buttons -->
<div class="mb-6 flex flex-wrap gap-2">
<button onclick="filterByTable('all')" class="filter-btn active" data-filter="all">
Všechny kontakty
</button>
<button onclick="filterByTable(1)" class="filter-btn" data-filter="1">
Tabulka 1
</button>
<button onclick="filterByTable(2)" class="filter-btn" data-filter="2">
Tabulka 2
</button>
</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 id="contacts" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"></div>
<!-- No Results -->
<div id="noResults" class="hidden text-center py-16">
<div class="text-6xl mb-4">🔍</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-6xl mb-4">⚠️</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">
Zkusit znovu
</button>
</div>
</div>
<!-- Apps Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- 1. Car trips app -->
<div class="card bg-white rounded-xl shadow p-6 border-t-4 border-blue-600" data-name="zápis cest aut project">
<div class="rounded-full w-14 h-14 flex items-center justify-center bg-blue-100 text-blue-600 mb-4">
<i class="fas fa-car-side text-2xl"></i>
</div>
<h2 class="text-xl font-bold text-gray-800 mb-2">Záznam služebních jízd</h2>
<p class="text-gray-600 mb-4">Jednoduchý systém pro evidenci a správu jízd služebními vozidly.</p>
<a href="/evidence-aut" class="block text-center bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
Otevřít aplikaci
</a>
</div>
<!-- Contact card -->
<div class="card bg-white rounded-xl shadow p-6 border-t-4 border-green-600" data-name="kontakt">
<div class="rounded-full w-14 h-14 flex items-center justify-center bg-green-100 text-green-600 mb-4">
<i class="fas fa-envelope text-2xl"></i>
</div>
<h2 class="text-xl font-bold text-gray-800 mb-2">Kontaktní formulář</h2>
<p class="text-gray-600 mb-4">Formulář pro kontaktování vedení společnosti.</p>
<a href="/kontakt" class="block text-center bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
Otevřít
</a>
</div>
<!-- 2. Lunches -->
<div class="card bg-white rounded-xl shadow p-6 border-t-4 border-green-600" data-name="obědy obedy jídlo lunch">
<div class="rounded-full w-14 h-14 flex items-center justify-center bg-green-100 text-green-600 mb-4">
<i class="fas fa-utensils text-2xl"></i>
</div>
<h2 class="text-xl font-bold text-gray-800 mb-2">Objednávka obědů</h2>
<p class="text-gray-600 mb-4">Portál pro objednávku a přehled firemních obědů</p>
<a href="http://ppc-app/pwkweb2/" class="block text-center bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
Otevřít aplikaci
</a>
</div>
<!-- 3. OSTicket -->
<div class="card bg-white rounded-xl shadow p-6 border-t-4 border-orange-600" data-name="osticket pomoc podpora support ticket">
<div class="rounded-full w-14 h-14 flex items-center justify-center bg-orange-100 text-orange-600 mb-4">
<i class="fas fa-headset text-2xl"></i>
</div>
<h2 class="text-xl font-bold text-gray-800 mb-2">OSTicket</h2>
<p class="text-gray-600 mb-4">Systém technické podpory a hlášení problémů</p>
<a href="http://osticket/" class="block text-center bg-orange-600 hover:bg-orange-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
Otevřít aplikaci
</a>
</div>
<!-- 4. Canboard tasks -->
<div class="card bg-white rounded-xl shadow p-6 border-t-4 border-purple-600" data-name="canboard úkoly úkolníček tasks">
<div class="rounded-full w-14 h-14 flex items-center justify-center bg-purple-100 text-purple-600 mb-4">
<i class="fas fa-tasks text-2xl"></i>
</div>
<h2 class="text-xl font-bold text-gray-800 mb-2">Kanboard</h2>
<p class="text-gray-600 mb-4">Správa úkolů a projektů v přehledném kanban stylu</p>
<a href="http://kanboard/" class="block text-center bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
Otevřít aplikaci
</a>
</div>
</div>
</main>
</div>
<footer class="bg-gray-800 text-gray-400 py-6 mt-12">
<div class="container mx-auto px-4 text-center">
<p> 2025 Poppe + Potthoff</p>
<p class="mt-2 text-sm">Created by <a href="https://tdvorak.dev" class="text-blue-400 hover:text-blue-300">TDvorak</a></p>
<p>2025 Poppe + Potthoff</p>
</div>
</footer>
<script>
// Search functionality
const searchInput = document.getElementById('search');
const appCards = document.querySelectorAll('.card');
searchInput.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
appCards.forEach(card => {
const cardName = card.getAttribute('data-name').toLowerCase();
const cardTitle = card.querySelector('h2').textContent.toLowerCase();
const cardDesc = card.querySelector('p').textContent.toLowerCase();
let allContacts = [];
let filteredContacts = [];
let currentTableFilter = 'all';
async function loadContacts() {
try {
showLoading();
const response = await fetch('/contacts');
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
if (cardName.includes(searchTerm) || cardTitle.includes(searchTerm) || cardDesc.includes(searchTerm)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
const data = await response.json();
allContacts = data.contacts || [];
hideLoading();
showContactsList();
updateStats(data);
filterContacts();
} catch (error) {
console.error('Error loading contacts:', error);
hideLoading();
showError('Chyba při načítání kontaktů: ' + error.message);
}
}
function showLoading() {
document.getElementById('loading').classList.remove('hidden');
document.getElementById('contactsList').classList.add('hidden');
document.getElementById('error').classList.add('hidden');
}
function hideLoading() {
document.getElementById('loading').classList.add('hidden');
}
function showContactsList() {
document.getElementById('contactsList').classList.remove('hidden');
document.getElementById('error').classList.add('hidden');
}
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 table1Count = allContacts.filter(c => c.table === 1).length;
const table2Count = allContacts.filter(c => c.table === 2).length;
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> ${allContacts.length} kontaktů</span>
</div>
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-blue-500 rounded-full"></span>
<span><strong>Tabulka 1:</strong> ${table1Count}</span>
</div>
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-purple-500 rounded-full"></span>
<span><strong>Tabulka 2:</strong> ${table2Count}</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 filterByTable(tableNum) {
currentTableFilter = tableNum;
// Update filter buttons
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.classList.remove('active');
if (btn.dataset.filter == tableNum) {
btn.classList.add('active');
}
});
filterContacts();
}
function filterContacts() {
const query = document.getElementById('searchInput').value.toLowerCase().trim();
// Apply table filter
let contacts = allContacts;
if (currentTableFilter !== 'all') {
contacts = contacts.filter(contact => contact.table == currentTableFilter);
}
// Apply search filter
if (query) {
contacts = contacts.filter(contact =>
(contact.name && contact.name.toLowerCase().includes(query)) ||
(contact.position && contact.position.toLowerCase().includes(query)) ||
(contact.phone && contact.phone.replace(/\s/g, '').includes(query.replace(/\s/g, ''))) ||
(contact.service_phone && contact.service_phone.replace(/\s/g, '').includes(query.replace(/\s/g, '')))
);
}
filteredContacts = contacts;
displayContacts(filteredContacts, query);
}
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>');
}
function displayContacts(contacts, searchQuery = '') {
const container = document.getElementById('contacts');
const noResults = document.getElementById('noResults');
if (contacts.length === 0) {
container.innerHTML = '';
noResults.classList.remove('hidden');
return;
}
noResults.classList.add('hidden');
container.innerHTML = '';
contacts.forEach(contact => {
const contactCard = document.createElement('div');
contactCard.className = 'contact-card bg-white p-6 rounded-lg border border-gray-200 hover:shadow-lg transition-all duration-200';
const name = contact.name || 'Bez jména';
const position = contact.position || '';
const tableColor = contact.table === 1 ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800';
contactCard.innerHTML = `
<div class="flex items-start justify-between mb-3">
<h3 class="font-bold text-gray-800 text-lg leading-tight">${highlightText(name, searchQuery)}</h3>
<span class="text-xs ${tableColor} px-2 py-1 rounded-full font-medium flex-shrink-0 ml-2">T${contact.table}</span>
</div>
${position ? `<p class="text-gray-600 mb-4 text-sm leading-relaxed">${highlightText(position, searchQuery)}</p>` : ''}
<div class="space-y-2">
${contact.phone ? `
<div class="flex items-center text-sm group">
<i class="fas fa-phone-alt text-gray-400 mr-3 flex-shrink-0"></i>
<span class="font-medium text-gray-700 mr-2">Tel:</span>
<a href="tel:${contact.phone}" class="text-blue-600 hover:text-blue-800 hover:underline transition-colors">
${highlightText(contact.phone, searchQuery)}
</a>
</div>
` : ''}
${contact.service_phone ? `
<div class="flex items-center text-sm group">
<i class="fas fa-phone-alt text-gray-400 mr-3 flex-shrink-0"></i>
<span class="font-medium text-gray-700 mr-2">Služební:</span>
<a href="tel:${contact.service_phone}" class="text-blue-600 hover:text-blue-800 hover:underline transition-colors">
${highlightText(contact.service_phone, searchQuery)}
</a>
</div>
` : ''}
${!contact.phone && !contact.service_phone ? '<p class="text-gray-400 text-sm italic">Bez telefonu</p>' : ''}
</div>
`;
container.appendChild(contactCard);
});
}
async function reloadContacts() {
const btn = document.getElementById('reloadBtn');
const originalText = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = `
<i class="fas fa-sync-alt animate-spin"></i>
Načítání...
`;
try {
const response = await fetch('/reload', { method: 'POST' });
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
// Small delay to show the loading state
await new Promise(resolve => setTimeout(resolve, 500));
await loadContacts();
// Show success feedback
btn.innerHTML = `
<i class="fas fa-check text-green-500"></i>
Obnoveno
`;
setTimeout(() => {
btn.innerHTML = originalText;
}, 2000);
} catch (error) {
console.error('Error reloading:', error);
btn.innerHTML = `
<i class="fas fa-times text-red-500"></i>
Chyba
`;
setTimeout(() => {
btn.innerHTML = originalText;
}, 2000);
alert('Chyba při obnovování: ' + error.message);
} finally {
btn.disabled = false;
}
}
// 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>