173 lines
7.0 KiB
HTML
173 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Services Homepage</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>My Services</h1>
|
|
<p class="subtitle">Quick links to the commonly used containers on this host</p>
|
|
<div class="search-container">
|
|
<input type="text" id="search-input" placeholder="🔍 Search services..." />
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="grid" id="services-grid">
|
|
<!-- Services will be populated dynamically from /services.xml -->
|
|
</section>
|
|
|
|
<section class="notes">
|
|
<h2>Notes</h2>
|
|
<ul>
|
|
<li>If any service is behind a reverse proxy or uses host networking, the path/host may differ.</li>
|
|
<li>Edit <code>services.xml</code> in this repo to add/remove links.</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<small>Generated: static homepage — served by nginx in a container. Edit and rebuild to update.</small>
|
|
</footer>
|
|
<script>
|
|
// Fetch services.xml and render the service cards with logos.
|
|
(async function(){
|
|
const grid = document.getElementById('services-grid');
|
|
const searchInput = document.getElementById('search-input');
|
|
const host = window.location.hostname;
|
|
let allServices = []; // Store all service elements for filtering
|
|
|
|
try{
|
|
const res = await fetch('/services.xml', {cache: 'no-cache'});
|
|
if(!res.ok){ throw new Error('Failed to load services.xml'); }
|
|
const text = await res.text();
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(text, 'application/xml');
|
|
const services = Array.from(doc.getElementsByTagName('service'));
|
|
if(services.length===0){ grid.innerHTML = '<p class="notes">No services found in services.xml</p>'; return; }
|
|
services.forEach(s=>{
|
|
const name = s.getAttribute('name') || s.getAttribute('id') || 'unknown';
|
|
const proto = s.getAttribute('proto') || 'http';
|
|
const port = s.getAttribute('port') || '';
|
|
const logo = s.getAttribute('logo') || '';
|
|
const hostAttr = s.getAttribute('host'); // optional public hostname or full URL
|
|
const status = s.getAttribute('status'); // optional: 'online', 'offline', 'maintenance'
|
|
|
|
// Build href: prefer explicit host attribute when present.
|
|
// Rules:
|
|
// - If hostAttr starts with http(s)://, use it as-is.
|
|
// - If hostAttr is a hostname (no protocol) and does NOT include a port, prefer HTTPS and DO NOT append the service port.
|
|
// - If hostAttr includes a port (example.com:8096), use it as provided (no extra port appended).
|
|
// - If no hostAttr, fall back to current page hostname and use the service port.
|
|
let href = '';
|
|
if(hostAttr){
|
|
if(/^https?:\/\//i.test(hostAttr)){
|
|
href = hostAttr;
|
|
} else {
|
|
const hasPortInHost = /:\d+$/.test(hostAttr);
|
|
if(hasPortInHost){
|
|
// host includes port, use the host as provided with the proto
|
|
href = `${proto}://${hostAttr}`;
|
|
} else {
|
|
// Hostname without port: prefer HTTPS and do NOT append numeric port.
|
|
href = `https://${hostAttr}`;
|
|
}
|
|
}
|
|
} else {
|
|
// Fallback to current page hostname and include port if non-standard
|
|
let portPart = '';
|
|
if(port && !((proto==='http'&&port==='80')||(proto==='https'&&port==='443'))){ portPart = ':'+port; }
|
|
href = `${proto}://${host}${portPart}`;
|
|
}
|
|
|
|
const a = document.createElement('a');
|
|
a.className = 'card';
|
|
a.href = href;
|
|
a.target = '_blank';
|
|
a.rel = 'noreferrer';
|
|
a.dataset.serviceName = name.toLowerCase(); // For search filtering
|
|
|
|
const img = document.createElement('img');
|
|
img.className = 'logo';
|
|
img.src = logo ? ('/logos/'+logo) : '/logos/default.svg';
|
|
img.alt = name + ' logo';
|
|
|
|
const span = document.createElement('div');
|
|
span.className = 'label';
|
|
span.textContent = `${name}`;
|
|
|
|
a.appendChild(img);
|
|
a.appendChild(span);
|
|
|
|
// Add status indicator if status attribute is set
|
|
if(status){
|
|
const statusDot = document.createElement('span');
|
|
statusDot.className = `status-dot status-${status}`;
|
|
statusDot.title = `Status: ${status}`;
|
|
a.appendChild(statusDot);
|
|
}
|
|
|
|
// Add info button if both hostname and port are available
|
|
if((hostAttr || host) && port){
|
|
const infoBtn = document.createElement('button');
|
|
infoBtn.className = 'info-btn';
|
|
infoBtn.title = 'Connection details';
|
|
infoBtn.innerHTML = 'ⓘ';
|
|
infoBtn.onclick = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const displayHost = hostAttr || host;
|
|
const details = `Service: ${name}\nHost: ${displayHost}\nPort: ${port}\nProtocol: ${proto}`;
|
|
alert(details);
|
|
};
|
|
a.appendChild(infoBtn);
|
|
}
|
|
|
|
grid.appendChild(a);
|
|
allServices.push(a);
|
|
});
|
|
|
|
// Search functionality
|
|
searchInput.addEventListener('input', (e) => {
|
|
const searchTerm = e.target.value.toLowerCase().trim();
|
|
let visibleCount = 0;
|
|
allServices.forEach(card => {
|
|
const serviceName = card.dataset.serviceName;
|
|
if(serviceName.includes(searchTerm)){
|
|
card.style.display = '';
|
|
visibleCount++;
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
// Show message if no results
|
|
const existingMsg = grid.querySelector('.no-results');
|
|
if(existingMsg) existingMsg.remove();
|
|
if(visibleCount === 0 && searchTerm !== ''){
|
|
const msg = document.createElement('p');
|
|
msg.className = 'notes no-results';
|
|
msg.textContent = `No services found matching "${e.target.value}"`;
|
|
grid.appendChild(msg);
|
|
}
|
|
});
|
|
|
|
// Focus search on '/' key
|
|
document.addEventListener('keydown', (e) => {
|
|
if(e.key === '/' && document.activeElement !== searchInput){
|
|
e.preventDefault();
|
|
searchInput.focus();
|
|
}
|
|
});
|
|
|
|
}catch(err){
|
|
console.error(err);
|
|
grid.innerHTML = '<p class="notes">Error loading services.xml — see console for details.</p>';
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|