udb/index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<base/>
<link href="/rr0.css" rel="stylesheet" type="text/css"/>
<link href="/manifest.json" rel="manifest">
<link href="/opensearch.xml" rel="search" title="RR0" type="application/opensearchdescription+xml"/>
<meta content="initial-scale=1, width=device-width" name="viewport">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CMV7R92GK1"></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag () {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', 'G-CMV7R92GK1')
</script>
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []
w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
})
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''
j.async = true
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl
f.parentNode.insertBefore(j, f)
})(window, document, 'script', 'dataLayer', 'GTM-NBPKWNM')</script>
<!-- End Google Tag Manager -->
<title>*U* UFO Database</title>
<link href="/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-NBPKWNM"
style="display:none;visibility:hidden" title="GTM"
width="0"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<header id="main-header">
<h1 class="full-page">*U* UFO Database</h1>
</header>
<nav id="main-nav">
<h1>Navigation</h1>
<ul>
<li class="full-page">
<a class="home" href="/" title="Home">RR0</a>
</li>
<li class="search full-page">
<rr0-search></rr0-search>
</li>
<li id="summary">
<a class="outline-title" href="#_top" id="out-top" title="D�but de l'article"></a>
<ul class="outline">
</ul>
</li>
<li>
<span id="alternate"></span>
</li>
<li class="map-toggle">
<button class="toggle">Carte</button>
</li>
</ul>
<script async src="../search/SearchComponent.mjs" type="module"></script>
</nav>
<script>
const summary = document.getElementById('out-top')
const observer = new IntersectionObserver(function (entries) {
summary.textContent = entries[0].intersectionRatio < 0.3 ? document.title : 'Sommaire'
}, { threshold: [0, 0.3, 1] })
observer.observe(document.querySelector('#main-header'))
var currentAddress
var mapEl
var currentPlaceEl
function showMap (event, address, display = true, mode = 'place') {
event.stopPropagation()
document.body.classList.toggle('with-map', display)
if (!address) {
address = currentPlaceEl?.textContent
}
if (address !== currentAddress) {
currentAddress = address
let qs
switch (mode) {
case 'streetview':
qs = address
break
default:
qs = `q=${address}&maptype=satellite`
}
mapEl.querySelector('iframe').src =
`https://www.google.com/maps/embed/v1/${mode}?${qs}&key=${mapsApiKey}`
}
}
const mapToggle = document.querySelector('.map-toggle .toggle')
document.addEventListener('DOMContentLoaded', () => {
mapEl = document.querySelector('#map-canvas')
currentPlaceEl = document.querySelector('.plac')
if (currentPlaceEl) {
mapToggle.style.display = 'inline-block'
}
})
function hasMap () {
return document.body.classList.contains('with-map')
}
mapToggle.addEventListener('click', (event) => {
showMap(event, currentAddress, !hasMap())
})
document.body.addEventListener('click', (event) => {
if (hasMap()) {
showMap(event, currentAddress, false)
}
})
</script>
<div aria-hidden="true" class="anchor" id="_top"></div>
<div class="metadata">
<!--#echo var="author" -->
</div>
<div class="contents">
<p>This is the web front of <a href="https://github.com/RR0/uDb">uDb</a>, a project to make <a
href="http://web.archive.org/web/20060701162044/http://www.larryhatch.net/">Larry Hatch database</a> available
again.
</p>
<hr/>
<script src="./index.mjs" type="module"></script>
<div>
<form action="javascript:submitIt()" id="searchForm">
<label>Match criteria <input type="search" value="year=1972&month=8|month=7&country=France"></label> <input
type="submit" value="Search">
</form>
<p>Supported operators are equal (<code>=</code>), not equal (<code>!=</code> or <code><></code>), below
(<code><</code> or <code><=</code>), above (<code>></code> or <code>>=</code>). They can be combined
using AND (<code>&</code>) or OR (<code>|</code>) logical operators.
</p>
<p>For example, <code>year=1972&month=8|month=7&country=France</code> will list cases that occurred on August of
1972, or in July of any year in France.
</p>
<div id="logs"></div>
<output class="scrollable" id="matchResult"></output>
</div>
<script>
const form = document.getElementById('searchForm')
const logs = document.getElementById('logs')
const result = document.getElementById('matchResult')
const criteria = document.querySelector('#searchForm input')
const onLog = msg => {
console.log(msg)
msg = msg.replace(/\n/g, '<br/>')
logs.innerHTML = msg
}
function submitIt () {
const logger = udbController.logger
logger.onLog(onLog)
udbController.search(criteria.value).then(records => {
if (records.length > 0) {
const heading = records[0]
const table = document.createElement('table')
const thead = document.createElement('thead')
const tr = document.createElement('tr')
for (const p in heading) {
const th = document.createElement('th')
th.textContent = p
tr.appendChild(th)
}
thead.appendChild(tr)
table.appendChild(thead)
const tbody = document.createElement('tbody')
table.appendChild(tbody)
for (const record of records) {
const tr = document.createElement('tr')
for (const p in record) {
const td = document.createElement('td')
let value = record[p]
if (p === 'year') {
value = `<a href="${udbController.timeLink(value)}">${value}</a>`
}
td.innerHTML = value
tr.appendChild(td)
}
thead.appendChild(tr)
}
result.replaceChildren(table)
} else {
result.innerText = 'No result'
}
})
}
form.onsubmit = submitIt
form.style.display = 'flex'
</script>
</div>
<footer>
<div class="full-page" id="footerTable">
<div class="footer">
Dernière modification le <!--#config timefmt="%d %B %Y %H:%M (%Z)" --><!--#flastmod virtual="$DOCUMENT_URI" -->- �
Copyright <span class="copyright"><!--#echo var="copyright" --></span> - <a href="/Contact.html">Contact</a>
</div>
</div>
</footer>
<aside class="map">
<h1>Map</h1>
<div id="map-canvas">
<iframe allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="Carte"></iframe>
</div>
</aside>
<script>
if (window !== top) document.querySelectorAll('.full-page').forEach(elem => elem.style.display = 'none')
</script>
</body>
</html>