.track-widget {
position: relative;
min-height: 760px;
}
#map {
width: 100%;
height: 100%;
min-height: 760px;
background: #101820;
}
.track-header {
position: absolute;
z-index: 500;
top: 22px;
left: 22px;
right: 22px;
display: flex;
justify-content: space-between;
gap: 20px;
align-items: flex-start;
pointer-events: none;
}
.track-header > * {
pointer-events: auto;
}
.track-header h1 {
margin: 0;
font-size: 30px;
line-height: 1.05;
letter-spacing: -0.04em;
}
.track-range-control {
position: absolute;
z-index: 500;
top: 94px;
left: 22px;
display: flex;
gap: 8px;
padding: 6px;
border-radius: 999px;
background: rgba(8,14,20,0.78);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(12px);
}
.track-range-control button {
border: 0;
border-radius: 999px;
padding: 8px 13px;
background: transparent;
color: var(--text-soft);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.track-range-control button.active {
background: rgba(79,180,255,0.18);
color: #fff;
}
.track-footer {
position: absolute;
z-index: 500;
left: 22px;
bottom: 22px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(8, 14, 20, 0.78);
border: 1px solid rgba(255,255,255,0.12);
color: var(--text-soft);
font-size: 13px;
backdrop-filter: blur(12px);
}
.ym-anchor-icon {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(8,14,20,0.86);
border: 1px solid rgba(79,180,255,0.45);
color: #ffffff;
font-size: 20px;
box-shadow:
0 0 0 4px rgba(79,180,255,0.12),
0 0 24px rgba(79,180,255,0.45);
}
.leaflet-control-attribution {
background: rgba(8,14,20,0.72) !important;
color: rgba(255,255,255,0.55) !important;
}
.leaflet-control-attribution a {
color: rgba(255,255,255,0.75) !important;
}
@media (max-width: 600px) {
.track-widget {
border-radius: 0;
min-height: 100vh;
}
#map {
min-height: 100vh;
}
.track-header {
flex-direction: column;
}
.track-header h1 {
font-size: 24px;
}
.track-range-control {
top: 130px;
left: 16px;
right: 16px;
justify-content: center;
flex-wrap: wrap;
}
.track-footer {
left: 16px;
right: 16px;
text-align: center;
}
.leaflet-popup-content-wrapper {
border-radius: 18px;
min-width: 380px;
}
.leaflet-popup-content {
margin: 16px 18px !important;
min-width: 340px;
width: 340px !important;
}
.ym-anchor-popup .leaflet-popup-content-wrapper {
width: 320px !important;
max-width: 320px !important;
border-radius: 18px;
}
.ym-anchor-popup .leaflet-popup-content {
width: 280px !important;
max-width: 280px !important;
margin: 16px 20px !important;
}
.anchor-popup {
width: 280px;
}
.anchor-popup-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 12px;
color: #1d2a36;
white-space: nowrap;
}
.anchor-popup-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.anchor-popup-table th {
width: 155px;
text-align: left;
font-weight: 700;
color: #405060;
padding: 3px 12px 3px 0;
white-space: nowrap;
}
.anchor-popup-table td {
text-align: left;
color: #1d2a36;
padding: 3px 0;
white-space: nowrap;
}
}
===== anchorages-list/index.php =====
<?= htmlspecialchars($t['title'] ?? 'Anchorages') ?>
===== anchorages-list/widget.js =====
const T = YM_LABELS || {};
const params = new URLSearchParams(window.location.search);
const YM_RANGE = params.get('range') || '1y';
async function loadAnchorages() {
const container = document.getElementById('anchoragesList');
try {
const response = await fetch(
`../../api/public/anchorages_list.php?vessel=${encodeURIComponent(YM_VESSEL)}&lang=${encodeURIComponent(YM_LANG)}&range=${encodeURIComponent(YM_RANGE)}`
);
const json = await response.json();
if (!json.success) {
container.innerHTML = 'No data
';
return;
}
container.innerHTML = '';
(json.anchorages || []).forEach(anchor => {
const title = buildTitle(anchor);
const meta =
`${T.wind ?? 'Wind'} ${fmt(anchor.max_windspeed)} kn`
+ ` · ${T.depth ?? 'Tiefe'} ${fmt(anchor.max_depth)} m`
+ ` · ${T.chain_length ?? 'Kette'} ${fmt(anchor.max_chainlength)} m`
+ ` · ${T.chain_force ?? 'Kraft'} ${fmt(anchor.max_chainforce)} kg`;
const item = document.createElement('div');
item.className = `anchorage-item state-${anchor.state || 'blue'}`;
item.innerHTML = `
${title}
${formatDate(anchor.start_time)} – ${formatDate(anchor.end_time)}
${anchor.duration_text ?? '-'}
${meta}
`;
container.appendChild(item);
});
} catch (error) {
console.error(error);
container.innerHTML = 'Error loading anchorages
';
}
}
function buildTitle(anchor) {
const number = anchor.anchorage_number
? `#${anchor.anchorage_number}`
: '#';
const name = anchor.anchorage_name
? anchor.anchorage_name
: (T.unnamed ?? 'Unbenannter Ankerplatz');
return `${number} · ${name}`;
}
function fmt(value) {
if (value === null || value === undefined || value === '') {
return '-';
}
const n = Number(value);
if (!Number.isFinite(n)) {
return value;
}
return Math.round(n * 10) / 10;
}
function formatDate(value) {
if (!value) {
return '-';
}
const d = new Date(value.replace(' ', 'T'));
if (Number.isNaN(d.getTime())) {
return value;
}
return d.toLocaleString(locale(), {
day: '2-digit',
month: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
}
function locale() {
if (YM_LANG === 'en') return 'en-US';
if (YM_LANG === 'fr') return 'fr-FR';
if (YM_LANG === 'it') return 'it-IT';
return 'de-DE';
}
loadAnchorages();
===== anchorages-list/widget.css =====
.ym-anchorages-list,
.anchorages-list-widget {
padding: 18px;
}
.anchorage-list {
display: grid;
gap: 10px;
}
.anchorage-item {
display: grid;
grid-template-columns: 1.25fr 1.25fr 0.8fr 1.8fr;
gap: 16px;
align-items: center;
padding: 10px 14px;
border-radius: 14px;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.06);
border-left: 6px solid #64748b;
}
.anchorage-title,
.anchorage-period,
.anchorage-duration,
.anchorage-meta {
margin: 0;
line-height: 1.3;
}
.anchorage-title {
font-size: 15px;
font-weight: 700;
color: #ffffff;
}
.anchorage-period {
font-size: 13px;
color: #cbd5e1;
}
.anchorage-duration {
color: #7dd3fc;
font-weight: 700;
white-space: nowrap;
}
.anchorage-meta {
font-size: 12px;
color: #94a3b8;
}
.state-green {
border-left-color: #22c55e;
}
.state-blue {
border-left-color: #3b82f6;
}
.state-red {
border-left-color: #ef4444;
}
.anchorage-title {
font-size: 16px;
font-weight: 700;
color: #ffffff;
line-height: 1.35;
}
.anchorage-period {
margin-top: 5px;
font-size: 13px;
color: #cbd5e1;
line-height: 1.45;
}
.anchorage-duration {
margin-left: 10px;
color: #7dd3fc;
font-weight: 700;
white-space: nowrap;
}
.anchorage-meta {
margin-top: 5px;
font-size: 12px;
color: #94a3b8;
line-height: 1.45;
}
.loading {
color: #94a3b8;
padding: 18px;
}
.anchorages-list-widget {
height: 100vh;
overflow: hidden;
}
.anchorage-list {
max-height: calc(100vh - 90px);
overflow-y: auto;
padding-right: 6px;
}
/* Schlanker Hover-Hinweis für Ankerplatz-Marker. */
.leaflet-tooltip.ym-anchor-tooltip {
padding: 7px 10px;
border: 1px solid rgba(125, 211, 252, 0.22);
border-radius: 10px;
background: rgba(8, 14, 20, 0.94);
color: #eef4f8;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
font-family: Inter, Arial, sans-serif;
font-size: 12px;
line-height: 1.35;
}
.leaflet-tooltip-top.ym-anchor-tooltip::before {
border-top-color: rgba(8, 14, 20, 0.94);
}
.track-year-control {
position: absolute;
z-index: 500;
top: 148px;
left: 22px;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 9px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
background: rgba(8,14,20,0.78);
color: rgba(255,255,255,0.72);
font-size: 12px;
backdrop-filter: blur(12px);
}
.track-year-control[hidden] {
display: none !important;
}
.track-year-control label {
font-weight: 600;
white-space: nowrap;
}
.track-year-control select {
min-width: 112px;
padding: 5px 8px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
background: #172131;
color: #eef4f8;
font: inherit;
}
.track-year-control select.active {
border-color: rgba(125,211,252,0.65);
color: #7dd3fc;
}
@media (max-width: 600px) {
.track-year-control {
top: 154px;
left: 14px;
right: 14px;
justify-content: space-between;
}
}