andrewbejjani's picture
Add collapsable user guide in the UI
dbee56e
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MasterMap Cleaner</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<header>
<h1>MasterMap Cleaner</h1>
</header>
<main>
<section class="guide-panel">
<details>
<summary>
<span>User Guide</span>
<small>Open README instructions</small>
</summary>
<div class="guide-content readme-content">
{{ readme_guide_html|safe }}
</div>
</details>
</section>
<section>
<h2>Dataset to Clean</h2>
{% if clean_filename %}
<div class="file-pill">{{ clean_filename }}</div>
<form action="/remove-clean" method="post">
<button class="danger" type="submit">Remove File</button>
</form>
{% else %}
<form id="cleanUploadForm" action="/prepare-clean" method="post" enctype="multipart/form-data">
<div class="dropbox">
<strong>Drop or select an Excel file</strong>
<input name="file" type="file" accept=".xlsx,.xlsm" required onchange="submitUploadForm('cleanUploadForm', 'cleanUploadStatus')">
</div>
<div id="cleanUploadStatus" class="status"></div>
</form>
{% endif %}
<label for="sheetSelect">Source Sheet</label>
<select id="sheetSelect" {% if not clean_sheets %}disabled{% endif %}>
{% for sheet in clean_sheets %}
<option value="{{ sheet }}" {% if sheet == clean_selected_sheet %}selected{% endif %}>{{ sheet }}</option>
{% endfor %}
</select>
<label for="outputSheet">Output Sheet</label>
<input id="outputSheet" value="{{ output_sheet }}">
<label for="models">Groq Models</label>
<textarea id="models">{{ models or default_models }}</textarea>
<button id="fetchModels" class="secondary" type="button">Fetch Available Models</button>
<button id="runButton" type="button" {% if not clean_path %}disabled{% endif %}>Run Cleaning</button>
<div id="runStatus" class="status">{{ message }}</div>
<hr>
<h2>Apply Blueprint</h2>
<label>Workbook</label>
<div id="applyWorkbookFile">
{% if apply_workbook_filename %}
<div class="file-pill">{{ apply_workbook_filename }}</div>
{% endif %}
</div>
<form id="applyWorkbookForm" action="/prepare-apply-workbook" method="post" enctype="multipart/form-data" onsubmit="return false;">
<div class="dropbox">
<strong>Drop or select workbook</strong>
<input id="applyWorkbookInput" name="file" type="file" accept=".xlsx,.xlsm" required>
</div>
<div id="applyWorkbookUploadStatus" class="status"></div>
</form>
<label for="applySheetSelect">Sheet To Update</label>
<select id="applySheetSelect" {% if not apply_sheets %}disabled{% endif %}>
{% for sheet in apply_sheets %}
<option value="{{ sheet }}" {% if sheet == apply_selected_sheet %}selected{% endif %}>{{ sheet }}</option>
{% endfor %}
</select>
<label>Blueprint</label>
<div id="applyBlueprintFile">
{% if apply_blueprint_filename %}
<div class="file-pill">{{ apply_blueprint_filename }}</div>
{% endif %}
</div>
<form id="applyBlueprintForm" action="/prepare-apply-blueprint" method="post" enctype="multipart/form-data" onsubmit="return false;">
<div class="dropbox">
<strong>Drop or select blueprint</strong>
<input id="applyBlueprintInput" name="file" type="file" accept=".xlsx,.xlsm" required>
</div>
<div id="applyBlueprintUploadStatus" class="status"></div>
</form>
<button id="applyButton" type="button" {% if not can_apply %}disabled{% endif %}>Apply Blueprint</button>
<div id="applyStatus" class="status error">{{ error }}</div>
<hr>
<h2>References</h2>
<button id="saveReferencesButton" class="secondary" type="button" disabled>Save Manual References</button>
<div id="referencesStatus" class="status"></div>
</section>
<section>
<div class="output-block">
<h2>Cleaning Output</h2>
<div id="cleanProgressPanel" class="progress-panel">
<div class="progress-heading">
<span>Cleaning Progress</span>
<span id="cleanProgressSummary">Waiting...</span>
</div>
<div id="cleanProgressList" class="progress-list"></div>
</div>
<div id="cleanResult" class="blueprint-result"></div>
<details id="cleanRawLogDetails" class="raw-logs">
<summary>Raw cleaning logs</summary>
<div id="cleanLogs" class="log-screen"></div>
</details>
</div>
<div class="output-block">
<h2>Apply Output</h2>
<div id="applyResult" class="blueprint-result"></div>
<details id="applyRawLogDetails" class="raw-logs">
<summary>Raw apply logs</summary>
<div id="applyLogs" class="log-screen"></div>
</details>
</div>
</section>
</main>
<script>
window.MASTERMAP_CONFIG = {
cleanPath: {{ clean_path|tojson }},
applyWorkbookPath: {{ apply_workbook_path|tojson }},
applyBlueprintPath: {{ apply_blueprint_path|tojson }},
defaultOutputSheet: {{ default_output_sheet|tojson }}
};
</script>
<script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html>