DMRmap/frontend/static/index.html
2026-02-21 09:40:20 +01:00

175 lines
11 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>DMRmap</title>
<link rel="stylesheet" href="lib/leaflet.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="map"></div>
<div id="controls">
<div class="controls-row">
<label class="band-label band-2m"><input type="checkbox" id="band-2m" checked> <span class="band-text">VHF<span class="band-sub">2m</span></span></label>
<label class="band-label band-70cm"><input type="checkbox" id="band-70cm" checked> <span class="band-text">UHF<span class="band-sub">70cm</span></span></label>
<span id="count" class="count"></span>
</div>
<div class="controls-row search-row">
<input type="text" id="search-input" data-i18n-placeholder="search_placeholder" placeholder="Search callsign, city, ID..." autocomplete="off" />
<button type="button" id="search-clear" class="search-clear-btn" style="display:none">&times;</button>
</div>
<div id="search-list" class="pin-list" style="display:none"></div>
<details class="advanced">
<summary data-i18n="filters">Filters</summary>
<div class="controls-row network-row">
<label class="net-label net-bm"><input type="checkbox" id="net-bm" checked> BM</label>
<label class="net-label net-dmrplus"><input type="checkbox" id="net-dmrplus"> DMR+</label>
<label class="net-label net-tgif"><input type="checkbox" id="net-tgif"> TGIF</label>
<label class="net-label net-other"><input type="checkbox" id="net-other"> Other</label>
</div>
<label class="hotspot-label"><input type="checkbox" id="show-hotspots"> <span data-i18n="show_hotspots">Show personal hotspots</span></label>
<label class="hotspot-label"><input type="checkbox" id="show-inactive"> <span data-i18n="show_inactive">Show inactive repeaters</span></label>
</details>
<details class="experimental">
<summary data-i18n="experimental">Experimental</summary>
<label class="hotspot-label"><input type="checkbox" id="show-heatmap"> <span data-i18n="show_heatmap">Visualize Last Heard Heatmap</span></label>
</details>
<div class="controls-row route-row autocomplete-wrap">
<input type="text" id="route-from" data-i18n-placeholder="from_address" placeholder="From address" autocomplete="off" />
<ul class="autocomplete-list" id="ac-from"></ul>
</div>
<div class="controls-row route-row autocomplete-wrap">
<input type="text" id="route-to" data-i18n-placeholder="to_address" placeholder="To address" autocomplete="off" />
<ul class="autocomplete-list" id="ac-to"></ul>
</div>
<div class="controls-row route-row">
<button id="route-btn" data-i18n="route_btn" disabled>Route</button>
<button id="clear-btn" data-i18n="clear_btn">Clear</button>
</div>
<div class="controls-row route-row corridor-row" id="corridor-row" style="display:none">
<label class="corridor-label"><span data-i18n="corridor">Corridor</span>
<input type="range" id="corridor-range" min="1" max="50" value="10" />
<span id="corridor-val">10</span> km
</label>
</div>
<div id="route-list" class="pin-list" style="display:none"></div>
<div id="pin-controls" class="pin-controls" style="display:none">
<div class="controls-row pin-header">
<label class="pin-radius-label"><span data-i18n="radius">Radius</span>
<input type="range" id="pin-radius" min="10" max="200" value="50" step="10" />
<span id="pin-radius-val">50</span> km
</label>
<button id="pin-clear" class="pin-clear-btn" data-i18n="clear_pin">Clear pin</button>
</div>
<div id="pin-list" class="pin-list"></div>
</div>
<div id="coords" class="coords-row"></div>
<div class="attribution">
Repeater data provided by <a href="https://radioid.net/database/dumps" target="_blank" rel="noopener">RadioID</a>.
Availability data by <a href="https://brandmeister.network" target="_blank" rel="noopener">BrandMeister</a>.
Not affiliated with or endorsed by RadioID or BrandMeister.<br>
Geocoding by <a href="https://nominatim.openstreetmap.org" target="_blank" rel="noopener">Nominatim</a>.
Routing by <a href="https://project-osrm.org" target="_blank" rel="noopener">OSRM</a>.
Map by <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a>.
Built by <a rel="me" href="https://social.darc.de/@DA6KM" target="_blank" rel="noopener">DA6KM</a>.<br>
<a href="/impressum.html" id="link-impressum" data-i18n="impressum">Impressum</a> · <a href="/datenschutz.html" id="link-datenschutz" data-i18n="datenschutz">Datenschutz</a> · <a href="https://git.kida.io/marcus/DMRmap" target="_blank" rel="noopener" data-i18n="source">Source</a> <span class="app-version" style="display:none">(<a id="app-version-link" target="_blank" rel="noopener"><code id="app-version"></code></a>)</span><br>
</div>
</div>
<div id="cps-modal" class="cps-modal" style="display:none">
<div class="cps-modal-backdrop"></div>
<div class="cps-modal-dialog">
<div class="cps-modal-header">
<h2 data-i18n="cps_studio_title">CPS Studio</h2> <span class="cps-exp-badge" data-i18n="experimental">Experimental</span>
<button type="button" class="cps-modal-close" id="cps-modal-close">&times;</button>
</div>
<div class="cps-modal-body">
<p class="cps-exp-note" data-i18n="cps_experimental_note">This feature is still in development. Please review the generated output before importing.</p>
<div class="cps-repeater-tags" id="cps-repeater-tags"></div>
<div id="cps-tg-section">
<div class="cps-alias-format">
<label data-i18n="cps_alias_format">Channel alias format</label>
<select id="cps-alias-format">
<option value="tg-name" selected>TG262 Deutschland</option>
<option value="tg-ts">TG262-TS2</option>
<option value="call-tg-ts">DB0XYZ 262-2</option>
</select>
</div>
<div id="cps-motorola-settings">
<div class="cps-alias-format">
<label data-i18n="cps_language">CPS language</label>
<select id="cps-language">
<option value="de">Deutsch</option>
<option value="en">English</option>
</select>
</div>
<p class="cps-exp-note" data-i18n="cps_language_note">The selected language must match your CPS installation language, otherwise the import will fail.</p>
</div>
<table class="cps-tg-table">
<thead>
<tr>
<th data-i18n="cps_tg_id">TG</th>
<th data-i18n="cps_tg_name">Name</th>
<th data-i18n="cps_tg_slot">Timeslot</th>
<th></th>
</tr>
</thead>
<tbody id="cps-tg-tbody"></tbody>
</table>
<div class="cps-add-tg-row autocomplete-wrap">
<input type="text" id="cps-add-tg-input" data-i18n-placeholder="cps_add_tg_placeholder" placeholder="Add TG by ID or name..." autocomplete="off" />
<ul class="autocomplete-list cps-ac-list" id="cps-ac-list"></ul>
</div>
<div class="cps-channel-count" id="cps-channel-count"></div>
</div>
</div>
<div class="cps-modal-footer">
<div class="cps-type-row">
<label data-i18n="cps_type_label">CPS type</label>
<select id="cps-type">
<option value="" selected data-i18n="cps_type_select">Select CPS type...</option>
<option value="motorola">Motorola</option>
<option value="anytone">Anytone</option>
</select>
</div>
<div id="cps-export-motorola" style="display:none">
<div class="cps-export-step">
<span class="cps-step-label" data-i18n="cps_step1_label">Step 1: Import contacts</span>
<div class="cps-step-buttons">
<button type="button" id="cps-contacts-btn" class="cps-btn-primary" disabled data-i18n="cps_download_contacts">Download Contacts CSV</button>
</div>
</div>
<div class="cps-export-step">
<span class="cps-step-label" data-i18n="cps_step2_label">Step 2: Paste zone</span>
<div class="cps-step-buttons">
<button type="button" id="cps-download-btn" class="cps-btn-primary" disabled data-i18n="cps_download_xml">Download Zone XML</button>
<button type="button" id="cps-copy-btn" class="cps-btn-secondary" disabled data-i18n="cps_copy_xml">Copy to Clipboard</button>
</div>
</div>
</div>
<div id="cps-export-anytone" style="display:none">
<div class="cps-export-step">
<span class="cps-step-label" data-i18n="cps_at_step1_label">Step 1: Import talk groups</span>
<div class="cps-step-buttons">
<button type="button" id="cps-at-tg-btn" class="cps-btn-primary" disabled data-i18n="cps_at_download_tg">Download Talkgroups CSV</button>
</div>
</div>
<div class="cps-export-step">
<span class="cps-step-label" data-i18n="cps_at_step2_label">Step 2: Import channels</span>
<div class="cps-step-buttons">
<button type="button" id="cps-at-ch-btn" class="cps-btn-primary" disabled data-i18n="cps_at_download_ch">Download Channels CSV</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="lib/i18next.min.js"></script>
<script src="lib/i18next-browser-languagedetector.min.js"></script>
<script src="lib/i18next-http-backend.min.js"></script>
<script src="i18n.js"></script>
<script src="lib/leaflet.js"></script>
<script src="lib/socket.io.min.js"></script>
<script src="app.js"></script>
</body>
</html>