will/osm-import-tools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add counties CRUD page, dynamic county config, crosshair cursor for multi-select

Browse Source
This commit is contained in:
zyphlar
2026-04-09 22:11:38 -07:00
parent f3a1ca6020
commit d904fb4f3d
6 changed files with 547 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/index.html
+51 -39
View File
@@ -104,8 +104,7 @@
.county-tab:hover { color: #444; }
.county-tab.active.lake { color: #1a7a33; border-bottom-color: #28a745; background: white; }
.county-tab.active.sumter { color: #0d7a8f; border-bottom-color: #17a2b8; background: white; }
.county-tab.active { background: white; border-bottom-color: var(--county-color, #28a745); color: var(--county-color, #28a745); }
/* Scrollable workflow area */
.workflows {
@@ -189,8 +188,7 @@
.btn-run:hover { filter: brightness(0.88); }
.btn-run:disabled { filter: brightness(0.5); cursor: not-allowed; }
.lake-active .btn-run { background: #28a745; }
.sumter-active .btn-run { background: #17a2b8; }
.left .btn-run { background: var(--active-color, #28a745); }
/* Force redownload */
.force-label {
@@ -249,8 +247,7 @@
font-weight: 500;
}
.file-link.lake { background: #28a745; }
.file-link.sumter { background: #17a2b8; }
.file-link { background: var(--link-color, #888); }
/* ── Right panel (console) ── */
.right {
@@ -330,6 +327,7 @@
<button class="btn-topbar" onclick="runScript('make-new-latest', '')">New Latest</button>
<button class="btn-topbar" onclick="runScript('ls', '')">List Files</button>
<div style="flex:1"></div>
<a href="/counties" class="btn-topbar">Counties</a>
<a href="/exceptions" class="btn-topbar">Street Exceptions</a>
<a href="/map" class="btn-topbar purple">Open Map Viewer</a>
</div>
@@ -340,8 +338,11 @@
<div class="left" id="leftPanel">
<div class="county-tabs">
<button class="county-tab lake active" onclick="selectCounty('lake')">Lake County</button>
<button class="county-tab sumter" onclick="selectCounty('sumter')">Sumter County</button>
{% for county in counties %}
<button class="county-tab" data-county="{{ county.id }}"
style="--county-color: {{ county.color }}"
onclick="selectCounty('{{ county.id }}')">{{ county.name }}</button>
{% endfor %}
</div>
<div class="workflows">
@@ -455,12 +456,15 @@
<div class="files-strip">
<div class="files-strip-title">Downloaded files</div>
<div class="file-links">
{% for county, file_names in data_files.items() %}
{% for file_name in file_names %}
<a class="file-link {% if 'lake' in county %}lake{% else %}sumter{% endif %}"
href="/data/latest/{{ county }}/{{ file_name }}"
title="{{ county }}/{{ file_name }}">{{ file_name }}</a>
{% for county in counties %}
{% if county.id in data_files %}
{% for file_name in data_files[county.id] %}
<a class="file-link"
style="--link-color: {{ county.color }}"
href="/data/latest/{{ county.id }}/{{ file_name }}"
title="{{ county.id }}/{{ file_name }}">{{ file_name }}</a>
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
@@ -482,51 +486,59 @@
</div><!-- /page -->
<script>
let activeCounty = 'lake';
const COUNTY_CONFIG = {{ counties_json | safe }};
let activeCounty = COUNTY_CONFIG.length ? COUNTY_CONFIG[0].id : '';
let currentJobId = null;
let logCheckInterval = null;
function selectCounty(county) {
activeCounty = county;
const config = COUNTY_CONFIG.find(c => c.id === county);
// Update tab styles
document.querySelectorAll('.county-tab').forEach(t => t.classList.remove('active'));
document.querySelector(`.county-tab.${county}`).classList.add('active');
const tab = document.querySelector(`.county-tab[data-county="${county}"]`);
if (tab) tab.classList.add('active');
// Update left panel class for button color theming
// Update button color via CSS custom property
const panel = document.getElementById('leftPanel');
panel.classList.toggle('lake-active', county === 'lake');
panel.classList.toggle('sumter-active', county === 'sumter');
panel.style.setProperty('--active-color', config ? config.color : '#28a745');
// Update paths section availability
renderPathsActions(county);
renderPathsActions(county, config);
}
function renderPathsActions(county) {
if (county === 'lake') {
function renderPathsActions(county, config) {
const pathsUrl = config ? (config.paths_url || '') : '';
const na = '<span class="na">Not available</span>';
if (!pathsUrl) {
['1','2','3','4'].forEach(n => {
document.getElementById(`paths-step-${n}-actions`).innerHTML =
'<span class="na">Not available for Lake</span>';
});
} else {
// Step 1: upload
document.getElementById('paths-step-1-actions').innerHTML =
'<input type="file" id="upload-sumter-paths" class="upload-input" accept=".zip">' +
'<button class="btn-run" onclick="uploadFile(\'upload-sumter-paths\', \'/data/latest/sumter/paths.shp.zip\')">Upload</button>';
// Steps 2-4: run buttons
[
['2', 'download-osm-paths'],
['3', 'convert-paths'],
['4', 'diff-paths'],
].forEach(([n, script]) => {
document.getElementById(`paths-step-${n}-actions`).innerHTML =
`<button class="btn-run" onclick="runScript('${script}')">Run</button>`;
document.getElementById(`paths-step-${n}-actions`).innerHTML = na;
});
return;
}
// Step 1: upload or download
const inputId = `upload-${county}-paths`;
const dest = `/data/latest/${county}/paths.shp.zip`;
if (pathsUrl === 'upload') {
document.getElementById('paths-step-1-actions').innerHTML =
`<input type="file" id="${inputId}" class="upload-input" accept=".zip">` +
`<button class="btn-run" onclick="uploadFile('${inputId}', '${dest}')">Upload</button>`;
} else {
document.getElementById('paths-step-1-actions').innerHTML =
`<button class="btn-run" onclick="runScript('download-county-paths')">Run</button>`;
}
// Steps 2–4
[['2','download-osm-paths'],['3','convert-paths'],['4','diff-paths']].forEach(([n, script]) => {
document.getElementById(`paths-step-${n}-actions`).innerHTML =
`<button class="btn-run" onclick="runScript('${script}')">Run</button>`;
});
}
// Init
selectCounty('lake');
if (activeCounty) selectCounty(activeCounty);
/* ── Script runner ── */
function runScript(scriptName) {