mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-05 04:52:58 +00:00
Add files via upload
This commit is contained in:
Tomáš Dvořák
@@ -187,7 +187,6 @@ func parseExcelFile(filename string) ([]Contact, error) {
|
|||||||
func parseTable(f *excelize.File, sheetName, startCol, endCol string, tableNum int) []Contact {
|
func parseTable(f *excelize.File, sheetName, startCol, endCol string, tableNum int) []Contact {
|
||||||
var contacts []Contact
|
var contacts []Contact
|
||||||
var currentContact *Contact
|
var currentContact *Contact
|
||||||
var lastUpdate string
|
|
||||||
|
|
||||||
// Get all rows in the sheet
|
// Get all rows in the sheet
|
||||||
rows, err := f.GetRows(sheetName)
|
rows, err := f.GetRows(sheetName)
|
||||||
@@ -220,8 +219,6 @@ func parseTable(f *excelize.File, sheetName, startCol, endCol string, tableNum i
|
|||||||
|
|
||||||
// Check for "Aktualizace" - end of data
|
// Check for "Aktualizace" - end of data
|
||||||
if len(row) > nameCol && strings.Contains(strings.ToLower(row[nameCol]), "aktualizace") {
|
if len(row) > nameCol && strings.Contains(strings.ToLower(row[nameCol]), "aktualizace") {
|
||||||
lastUpdate = row[nameCol]
|
|
||||||
currentContact = nil // Reset to avoid attaching to previous contact
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -259,43 +256,19 @@ func parseTable(f *excelize.File, sheetName, startCol, endCol string, tableNum i
|
|||||||
Table: tableNum,
|
Table: tableNum,
|
||||||
}
|
}
|
||||||
contacts = append(contacts, *currentContact)
|
contacts = append(contacts, *currentContact)
|
||||||
} else if strings.Contains(name, "Aktualizace") {
|
} else if currentContact != nil {
|
||||||
// Capture the update date
|
// This is additional data for the current contact
|
||||||
lastUpdate = name
|
newContact := *currentContact
|
||||||
currentContact = nil // Reset to avoid attaching to previous contact
|
if position != "" {
|
||||||
} else if currentContact != nil && name == "" {
|
|
||||||
// This is additional data for the current contact or a general contact
|
|
||||||
if position != "" && !strings.Contains(position, "Vorlová") && !strings.Contains(position, "inženýrka") {
|
|
||||||
// Treat as a general contact if it doesn't contain specific personal identifiers
|
|
||||||
currentContact = &Contact{
|
|
||||||
Name: position, // Use position as the name for general contacts
|
|
||||||
Position: "",
|
|
||||||
Phone: phone,
|
|
||||||
ServicePhone: servicePhone,
|
|
||||||
Table: tableNum,
|
|
||||||
}
|
|
||||||
contacts = append(contacts, *currentContact)
|
|
||||||
} else if position != "" {
|
|
||||||
newContact := *currentContact
|
|
||||||
newContact.Position = position
|
newContact.Position = position
|
||||||
if phone != "" {
|
|
||||||
newContact.Phone = phone
|
|
||||||
}
|
|
||||||
if servicePhone != "" {
|
|
||||||
newContact.ServicePhone = servicePhone
|
|
||||||
}
|
|
||||||
contacts = append(contacts, newContact)
|
|
||||||
}
|
}
|
||||||
}
|
if phone != "" {
|
||||||
}
|
newContact.Phone = phone
|
||||||
|
}
|
||||||
// Update last updated date
|
if servicePhone != "" {
|
||||||
if lastUpdate != "" {
|
newContact.ServicePhone = servicePhone
|
||||||
lastUpdated, err := time.Parse("2.1.2006", lastUpdate)
|
}
|
||||||
if err != nil {
|
contacts = append(contacts, newContact)
|
||||||
log.Printf("Error parsing last updated date: %v", err)
|
|
||||||
} else {
|
|
||||||
currentData.LastUpdated = lastUpdated
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
+370
-373
@@ -1,374 +1,371 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="cs">
|
<html lang="cs">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Kontakty</title>
|
<title>Kontakty</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<style>
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
||||||
.contact-card {
|
<style>
|
||||||
transition: all 0.2s ease-in-out;
|
.contact-card {
|
||||||
}
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
.contact-card:hover {
|
}
|
||||||
transform: translateY(-2px);
|
.contact-card:hover {
|
||||||
}
|
transform: translateY(-5px);
|
||||||
.search-highlight {
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||||
background-color: #fef3c7;
|
}
|
||||||
padding: 1px 2px;
|
.search-highlight {
|
||||||
border-radius: 2px;
|
background-color: #fef3c7;
|
||||||
}
|
padding: 1px 2px;
|
||||||
</style>
|
border-radius: 2px;
|
||||||
</head>
|
}
|
||||||
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
|
</style>
|
||||||
<div class="container mx-auto px-4 py-8 max-w-7xl">
|
</head>
|
||||||
<div class="bg-white rounded-xl shadow-xl p-6 md:p-8">
|
<body class="bg-gray-100 min-h-screen">
|
||||||
<!-- Header -->
|
<header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-lg" style="margin-bottom: 20px;">
|
||||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4">
|
<div class="container mx-auto px-4 py-6">
|
||||||
<div>
|
<h1 class="text-3xl font-bold">Poppe + Potthoff - Kontakty</h1>
|
||||||
<h1 class="text-4xl font-bold text-gray-800 mb-2">📞 Kontakty</h1>
|
<p class="mt-2 text-blue-100">Firemní telefonní seznam</p>
|
||||||
<p class="text-gray-600">Firemní telefonní seznam</p>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
<button onclick="reloadContacts()" id="reloadBtn"
|
|
||||||
class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg flex items-center gap-2">
|
<main class="container mx-auto px-4 py-8">
|
||||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<!-- Search -->
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
<div class="mb-8 max-w-xl mx-auto">
|
||||||
</svg>
|
<div class="relative">
|
||||||
Obnovit
|
<input type="text" id="searchInput" placeholder="Hledat podle jména, pozice nebo telefonu..."
|
||||||
</button>
|
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>
|
<div class="absolute right-3 top-3 text-gray-400">
|
||||||
|
<i class="fas fa-search"></i>
|
||||||
<!-- Search Bar -->
|
</div>
|
||||||
<div class="mb-6">
|
</div>
|
||||||
<div class="relative">
|
</div>
|
||||||
<input type="text" id="searchInput" placeholder="Hledat podle jména, pozice nebo telefonu..."
|
|
||||||
class="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm text-lg"
|
<!-- Filter Buttons -->
|
||||||
onkeyup="filterContacts()">
|
<div class="mb-6 flex flex-wrap gap-2">
|
||||||
<svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<button onclick="filterByTable('all')" class="px-4 py-2 rounded-lg bg-blue-600 text-white font-medium">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
Všechny kontakty
|
||||||
</svg>
|
</button>
|
||||||
</div>
|
<button onclick="filterByTable(1)" class="px-4 py-2 rounded-lg bg-gray-200 text-gray-700 font-medium hover:bg-gray-300">
|
||||||
</div>
|
Tabulka 1
|
||||||
|
</button>
|
||||||
<!-- Filter Buttons -->
|
<button onclick="filterByTable(2)" class="px-4 py-2 rounded-lg bg-gray-200 text-gray-700 font-medium hover:bg-gray-300">
|
||||||
<div class="mb-6 flex flex-wrap gap-2">
|
Tabulka 2
|
||||||
<button onclick="filterByTable('all')" class="filter-btn active" data-filter="all">
|
</button>
|
||||||
Všechny kontakty
|
</div>
|
||||||
</button>
|
|
||||||
<button onclick="filterByTable(1)" class="filter-btn" data-filter="1">
|
<!-- Loading State -->
|
||||||
Tabulka 1
|
<div id="loading" class="text-center py-16">
|
||||||
</button>
|
<div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
|
||||||
<button onclick="filterByTable(2)" class="filter-btn" data-filter="2">
|
<p class="text-gray-600 text-lg">Načítání kontaktů...</p>
|
||||||
Tabulka 2
|
</div>
|
||||||
</button>
|
|
||||||
</div>
|
<!-- Main Content -->
|
||||||
|
<div id="contactsList" class="hidden">
|
||||||
<!-- Loading State -->
|
<!-- Stats -->
|
||||||
<div id="loading" class="text-center py-16">
|
<div id="stats" class="mb-6 p-4 bg-gray-50 rounded-lg border text-sm text-gray-700"></div>
|
||||||
<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>
|
<!-- Contacts Grid -->
|
||||||
</div>
|
<div id="contacts" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"></div>
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- No Results -->
|
||||||
<div id="contactsList" class="hidden">
|
<div id="noResults" class="hidden text-center py-16">
|
||||||
<!-- Stats -->
|
<div class="text-6xl mb-4">🔍</div>
|
||||||
<div id="stats" class="mb-6 p-4 bg-gray-50 rounded-lg border text-sm text-gray-700"></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>
|
||||||
<!-- Contacts Grid -->
|
</div>
|
||||||
<div id="contacts" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"></div>
|
</div>
|
||||||
|
|
||||||
<!-- No Results -->
|
<!-- Error State -->
|
||||||
<div id="noResults" class="hidden text-center py-16">
|
<div id="error" class="hidden text-center py-16">
|
||||||
<div class="text-6xl mb-4">🔍</div>
|
<div class="text-6xl mb-4">⚠️</div>
|
||||||
<h3 class="text-xl font-semibold text-gray-700 mb-2">Žádné výsledky</h3>
|
<h3 class="text-xl font-semibold text-red-600 mb-2">Chyba při načítání</h3>
|
||||||
<p class="text-gray-500">Zkuste změnit hledaný výraz</p>
|
<p class="text-gray-600 mb-4">Nepodařilo se načíst kontakty</p>
|
||||||
</div>
|
<button onclick="loadContacts()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors">
|
||||||
</div>
|
Zkusit znovu
|
||||||
|
</button>
|
||||||
<!-- Error State -->
|
</div>
|
||||||
<div id="error" class="hidden text-center py-16">
|
</main>
|
||||||
<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>
|
<footer class="bg-gray-800 text-gray-400 py-6 mt-12">
|
||||||
<p class="text-gray-600 mb-4">Nepodařilo se načíst kontakty</p>
|
<div class="container mx-auto px-4 text-center">
|
||||||
<button onclick="loadContacts()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors">
|
<p> 2025 Poppe + Potthoff</p>
|
||||||
Zkusit znovu
|
</div>
|
||||||
</button>
|
</footer>
|
||||||
</div>
|
|
||||||
</div>
|
<script>
|
||||||
</div>
|
let allContacts = [];
|
||||||
|
let filteredContacts = [];
|
||||||
<script>
|
let currentTableFilter = 'all';
|
||||||
let allContacts = [];
|
|
||||||
let filteredContacts = [];
|
async function loadContacts() {
|
||||||
let currentTableFilter = 'all';
|
try {
|
||||||
|
showLoading();
|
||||||
async function loadContacts() {
|
const response = await fetch('/contacts');
|
||||||
try {
|
if (!response.ok) {
|
||||||
showLoading();
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||||
const response = await fetch('/contacts');
|
}
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
const data = await response.json();
|
||||||
}
|
allContacts = data.contacts || [];
|
||||||
|
|
||||||
const data = await response.json();
|
hideLoading();
|
||||||
allContacts = data.contacts || [];
|
showContactsList();
|
||||||
|
|
||||||
hideLoading();
|
updateStats(data);
|
||||||
showContactsList();
|
filterContacts();
|
||||||
|
} catch (error) {
|
||||||
updateStats(data);
|
console.error('Error loading contacts:', error);
|
||||||
filterContacts();
|
hideLoading();
|
||||||
} catch (error) {
|
showError('Chyba při načítání kontaktů: ' + error.message);
|
||||||
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');
|
||||||
function showLoading() {
|
document.getElementById('error').classList.add('hidden');
|
||||||
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 hideLoading() {
|
|
||||||
document.getElementById('loading').classList.add('hidden');
|
function showContactsList() {
|
||||||
}
|
document.getElementById('contactsList').classList.remove('hidden');
|
||||||
|
document.getElementById('error').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;
|
||||||
function showError(message) {
|
document.getElementById('contactsList').classList.add('hidden');
|
||||||
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;
|
||||||
function updateStats(data) {
|
const table2Count = allContacts.filter(c => c.table === 2).length;
|
||||||
const lastUpdated = new Date(data.last_updated).toLocaleString('cs-CZ');
|
|
||||||
const table1Count = allContacts.filter(c => c.table === 1).length;
|
document.getElementById('stats').innerHTML = `
|
||||||
const table2Count = allContacts.filter(c => c.table === 2).length;
|
<div class="flex flex-wrap items-center gap-4 text-sm">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
document.getElementById('stats').innerHTML = `
|
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
|
||||||
<div class="flex flex-wrap items-center gap-4 text-sm">
|
<span><strong>Celkem:</strong> ${allContacts.length} kontaktů</span>
|
||||||
<div class="flex items-center gap-2">
|
</div>
|
||||||
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
|
<div class="flex items-center gap-2">
|
||||||
<span><strong>Celkem:</strong> ${allContacts.length} kontaktů</span>
|
<span class="w-2 h-2 bg-blue-500 rounded-full"></span>
|
||||||
</div>
|
<span><strong>Tabulka 1:</strong> ${table1Count}</span>
|
||||||
<div class="flex items-center gap-2">
|
</div>
|
||||||
<span class="w-2 h-2 bg-blue-500 rounded-full"></span>
|
<div class="flex items-center gap-2">
|
||||||
<span><strong>Tabulka 1:</strong> ${table1Count}</span>
|
<span class="w-2 h-2 bg-purple-500 rounded-full"></span>
|
||||||
</div>
|
<span><strong>Tabulka 2:</strong> ${table2Count}</span>
|
||||||
<div class="flex items-center gap-2">
|
</div>
|
||||||
<span class="w-2 h-2 bg-purple-500 rounded-full"></span>
|
<div class="flex items-center gap-2">
|
||||||
<span><strong>Tabulka 2:</strong> ${table2Count}</span>
|
<span class="w-2 h-2 bg-gray-400 rounded-full"></span>
|
||||||
</div>
|
<span><strong>Poslední aktualizace:</strong> ${lastUpdated}</span>
|
||||||
<div class="flex items-center gap-2">
|
</div>
|
||||||
<span class="w-2 h-2 bg-gray-400 rounded-full"></span>
|
</div>
|
||||||
<span><strong>Poslední aktualizace:</strong> ${lastUpdated}</span>
|
`;
|
||||||
</div>
|
}
|
||||||
</div>
|
|
||||||
`;
|
function filterByTable(tableNum) {
|
||||||
}
|
currentTableFilter = tableNum;
|
||||||
|
|
||||||
function filterByTable(tableNum) {
|
// Update filter buttons
|
||||||
currentTableFilter = tableNum;
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||||||
|
btn.classList.remove('active');
|
||||||
// Update filter buttons
|
if (btn.dataset.filter == tableNum) {
|
||||||
document.querySelectorAll('.filter-btn').forEach(btn => {
|
btn.classList.add('active');
|
||||||
btn.classList.remove('active');
|
}
|
||||||
if (btn.dataset.filter == tableNum) {
|
});
|
||||||
btn.classList.add('active');
|
|
||||||
}
|
filterContacts();
|
||||||
});
|
}
|
||||||
|
|
||||||
filterContacts();
|
function filterContacts() {
|
||||||
}
|
const query = document.getElementById('searchInput').value.toLowerCase().trim();
|
||||||
|
|
||||||
function filterContacts() {
|
// Apply table filter
|
||||||
const query = document.getElementById('searchInput').value.toLowerCase().trim();
|
let contacts = allContacts;
|
||||||
|
if (currentTableFilter !== 'all') {
|
||||||
// Apply table filter
|
contacts = contacts.filter(contact => contact.table == currentTableFilter);
|
||||||
let contacts = allContacts;
|
}
|
||||||
if (currentTableFilter !== 'all') {
|
|
||||||
contacts = contacts.filter(contact => contact.table == currentTableFilter);
|
// Apply search filter
|
||||||
}
|
if (query) {
|
||||||
|
contacts = contacts.filter(contact =>
|
||||||
// Apply search filter
|
(contact.name && contact.name.toLowerCase().includes(query)) ||
|
||||||
if (query) {
|
(contact.position && contact.position.toLowerCase().includes(query)) ||
|
||||||
contacts = contacts.filter(contact =>
|
(contact.phone && contact.phone.replace(/\s/g, '').includes(query.replace(/\s/g, ''))) ||
|
||||||
(contact.name && contact.name.toLowerCase().includes(query)) ||
|
(contact.service_phone && contact.service_phone.replace(/\s/g, '').includes(query.replace(/\s/g, '')))
|
||||||
(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);
|
||||||
|
}
|
||||||
filteredContacts = contacts;
|
|
||||||
displayContacts(filteredContacts, query);
|
function highlightText(text, query) {
|
||||||
}
|
if (!query || !text) return text;
|
||||||
|
const regex = new RegExp(`(${query})`, 'gi');
|
||||||
function highlightText(text, query) {
|
return text.replace(regex, '<span class="search-highlight">$1</span>');
|
||||||
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');
|
||||||
function displayContacts(contacts, searchQuery = '') {
|
|
||||||
const container = document.getElementById('contacts');
|
if (contacts.length === 0) {
|
||||||
const noResults = document.getElementById('noResults');
|
container.innerHTML = '';
|
||||||
|
noResults.classList.remove('hidden');
|
||||||
if (contacts.length === 0) {
|
return;
|
||||||
container.innerHTML = '';
|
}
|
||||||
noResults.classList.remove('hidden');
|
|
||||||
return;
|
noResults.classList.add('hidden');
|
||||||
}
|
container.innerHTML = '';
|
||||||
|
|
||||||
noResults.classList.add('hidden');
|
contacts.forEach(contact => {
|
||||||
container.innerHTML = '';
|
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';
|
||||||
contacts.forEach(contact => {
|
|
||||||
const contactCard = document.createElement('div');
|
const name = contact.name || 'Bez jména';
|
||||||
contactCard.className = 'contact-card bg-white p-6 rounded-lg border border-gray-200 hover:shadow-lg transition-all duration-200';
|
const position = contact.position || '';
|
||||||
|
const tableColor = contact.table === 1 ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800';
|
||||||
const name = contact.name || 'Bez jména';
|
|
||||||
const position = contact.position || '';
|
contactCard.innerHTML = `
|
||||||
const tableColor = contact.table === 1 ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800';
|
<div class="flex items-start justify-between mb-3">
|
||||||
|
<h3 class="font-bold text-gray-800 text-lg leading-tight">${highlightText(name, searchQuery)}</h3>
|
||||||
contactCard.innerHTML = `
|
<span class="text-xs ${tableColor} px-2 py-1 rounded-full font-medium flex-shrink-0 ml-2">T${contact.table}</span>
|
||||||
<div class="flex items-start justify-between mb-3">
|
</div>
|
||||||
<h3 class="font-bold text-gray-800 text-lg leading-tight">${highlightText(name, searchQuery)}</h3>
|
${position ? `<p class="text-gray-600 mb-4 text-sm leading-relaxed">${highlightText(position, searchQuery)}</p>` : ''}
|
||||||
<span class="text-xs ${tableColor} px-2 py-1 rounded-full font-medium flex-shrink-0 ml-2">T${contact.table}</span>
|
<div class="space-y-2">
|
||||||
</div>
|
${contact.phone ? `
|
||||||
${position ? `<p class="text-gray-600 mb-4 text-sm leading-relaxed">${highlightText(position, searchQuery)}</p>` : ''}
|
<div class="flex items-center text-sm group">
|
||||||
<div class="space-y-2">
|
<svg class="w-4 h-4 text-gray-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
${contact.phone ? `
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||||
<div class="flex items-center text-sm group">
|
</svg>
|
||||||
<svg class="w-4 h-4 text-gray-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<span class="font-medium text-gray-700 mr-2">Tel:</span>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
<a href="tel:${contact.phone}" class="text-blue-600 hover:text-blue-800 hover:underline transition-colors">
|
||||||
</svg>
|
${highlightText(contact.phone, searchQuery)}
|
||||||
<span class="font-medium text-gray-700 mr-2">Tel:</span>
|
</a>
|
||||||
<a href="tel:${contact.phone}" class="text-blue-600 hover:text-blue-800 hover:underline transition-colors">
|
</div>
|
||||||
${highlightText(contact.phone, searchQuery)}
|
` : ''}
|
||||||
</a>
|
${contact.service_phone ? `
|
||||||
</div>
|
<div class="flex items-center text-sm group">
|
||||||
` : ''}
|
<svg class="w-4 h-4 text-gray-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
${contact.service_phone ? `
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0V6a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2V6"></path>
|
||||||
<div class="flex items-center text-sm group">
|
</svg>
|
||||||
<svg class="w-4 h-4 text-gray-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<span class="font-medium text-gray-700 mr-2">Služební:</span>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0V6a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2V6"></path>
|
<a href="tel:${contact.service_phone}" class="text-blue-600 hover:text-blue-800 hover:underline transition-colors">
|
||||||
</svg>
|
${highlightText(contact.service_phone, searchQuery)}
|
||||||
<span class="font-medium text-gray-700 mr-2">Služební:</span>
|
</a>
|
||||||
<a href="tel:${contact.service_phone}" class="text-blue-600 hover:text-blue-800 hover:underline transition-colors">
|
</div>
|
||||||
${highlightText(contact.service_phone, searchQuery)}
|
` : ''}
|
||||||
</a>
|
${!contact.phone && !contact.service_phone ? '<p class="text-gray-400 text-sm italic">Bez telefonu</p>' : ''}
|
||||||
</div>
|
</div>
|
||||||
` : ''}
|
`;
|
||||||
${!contact.phone && !contact.service_phone ? '<p class="text-gray-400 text-sm italic">Bez telefonu</p>' : ''}
|
|
||||||
</div>
|
container.appendChild(contactCard);
|
||||||
`;
|
});
|
||||||
|
}
|
||||||
container.appendChild(contactCard);
|
|
||||||
});
|
async function reloadContacts() {
|
||||||
}
|
const btn = document.getElementById('reloadBtn');
|
||||||
|
const originalText = btn.innerHTML;
|
||||||
async function reloadContacts() {
|
|
||||||
const btn = document.getElementById('reloadBtn');
|
btn.disabled = true;
|
||||||
const originalText = btn.innerHTML;
|
btn.innerHTML = `
|
||||||
|
<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
btn.disabled = true;
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||||
btn.innerHTML = `
|
</svg>
|
||||||
<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
Načítání...
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
`;
|
||||||
</svg>
|
|
||||||
Načítání...
|
try {
|
||||||
`;
|
const response = await fetch('/reload', { method: 'POST' });
|
||||||
|
if (!response.ok) {
|
||||||
try {
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||||
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();
|
||||||
// Small delay to show the loading state
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
// Show success feedback
|
||||||
await loadContacts();
|
btn.innerHTML = `
|
||||||
|
<svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
// Show success feedback
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
btn.innerHTML = `
|
</svg>
|
||||||
<svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
Obnoveno
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
`;
|
||||||
</svg>
|
|
||||||
Obnoveno
|
setTimeout(() => {
|
||||||
`;
|
btn.innerHTML = originalText;
|
||||||
|
}, 2000);
|
||||||
setTimeout(() => {
|
|
||||||
btn.innerHTML = originalText;
|
} catch (error) {
|
||||||
}, 2000);
|
console.error('Error reloading:', error);
|
||||||
|
btn.innerHTML = `
|
||||||
} catch (error) {
|
<svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
console.error('Error reloading:', error);
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||||
btn.innerHTML = `
|
</svg>
|
||||||
<svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
Chyba
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
`;
|
||||||
</svg>
|
|
||||||
Chyba
|
setTimeout(() => {
|
||||||
`;
|
btn.innerHTML = originalText;
|
||||||
|
}, 2000);
|
||||||
setTimeout(() => {
|
|
||||||
btn.innerHTML = originalText;
|
alert('Chyba při obnovování: ' + error.message);
|
||||||
}, 2000);
|
} finally {
|
||||||
|
btn.disabled = false;
|
||||||
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');
|
||||||
// Initialize filter button styles
|
style.textContent = `
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
.filter-btn {
|
||||||
const style = document.createElement('style');
|
@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;
|
||||||
style.textContent = `
|
}
|
||||||
.filter-btn {
|
.filter-btn.active {
|
||||||
@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;
|
@apply bg-blue-500 text-white border-blue-500 shadow-md;
|
||||||
}
|
}
|
||||||
.filter-btn.active {
|
.filter-btn:hover:not(.active) {
|
||||||
@apply bg-blue-500 text-white border-blue-500 shadow-md;
|
@apply bg-gray-100 border-gray-400;
|
||||||
}
|
}
|
||||||
.filter-btn:hover:not(.active) {
|
`;
|
||||||
@apply bg-gray-100 border-gray-400;
|
document.head.appendChild(style);
|
||||||
}
|
});
|
||||||
`;
|
|
||||||
document.head.appendChild(style);
|
// Load contacts on page load
|
||||||
});
|
document.addEventListener('DOMContentLoaded', loadContacts);
|
||||||
|
|
||||||
// Load contacts on page load
|
// Add keyboard shortcuts
|
||||||
document.addEventListener('DOMContentLoaded', loadContacts);
|
document.addEventListener('keydown', function(e) {
|
||||||
|
// Ctrl/Cmd + K to focus search
|
||||||
// Add keyboard shortcuts
|
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||||
document.addEventListener('keydown', function(e) {
|
e.preventDefault();
|
||||||
// Ctrl/Cmd + K to focus search
|
document.getElementById('searchInput').focus();
|
||||||
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 = '';
|
||||||
// Escape to clear search
|
filterContacts();
|
||||||
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');
|
||||||
// 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');
|
||||||
|
});
|
||||||
document.getElementById('searchInput').addEventListener('blur', function() {
|
</script>
|
||||||
this.parentElement.classList.remove('ring-2', 'ring-blue-500');
|
</body>
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user