260 lines
9 KiB
HTML
260 lines
9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Unique ID generator</title>
|
|
<script src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js"></script>
|
|
<link rel="icon" type="image/png" href="../res/id.png">
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: #faf8f3;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
}
|
|
header {
|
|
background: linear-gradient(135deg, #2aab95 0%, #1e8e7b 100%); /* Adjusted var defaults */
|
|
color: white;
|
|
padding: 15px 20px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
header h1 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
flex: 1;
|
|
margin: 0;
|
|
}
|
|
/* Single Container Fix */
|
|
.container {
|
|
flex: 1;
|
|
max-width: 1200px;
|
|
margin: 20px auto; /* Reduced top/bottom margin */
|
|
width: 100%;
|
|
padding: 0 20px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px; /* Controls distance between cards */
|
|
}
|
|
.card {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
border: 1px solid #e0d9d0;
|
|
width: 100%; /* Force full width */
|
|
box-sizing: border-box;
|
|
}
|
|
.card h2 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
border-bottom: 2px solid #2aab95;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Diff Viewer Layout */
|
|
.diff-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
.diff-column {
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
border: 1px solid #eee;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
.diff-row.new { background-color: #e6ffec; }
|
|
.diff-row.modified { background-color: #fffbdd; }
|
|
|
|
/* File Input Styling */
|
|
.file-input-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
.file-input-label {
|
|
display: block;
|
|
padding: 30px;
|
|
border: 2px dashed #2aab95;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
background: rgba(42, 171, 149, 0.05);
|
|
}
|
|
.file-input-label:hover {
|
|
border-color: #1e8e7b;
|
|
background: rgba(37, 150, 190, 0.05);
|
|
}
|
|
.file-input-wrapper input[type="file"] { display: none; }
|
|
|
|
/* Buttons */
|
|
button {
|
|
background: #2aab95;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: background 0.3s ease;
|
|
}
|
|
button:hover { background: #238b7d; }
|
|
button:disabled { background: #ccc; cursor: not-allowed; }
|
|
|
|
.header-btn {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
}
|
|
.header-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.hidden { display: none; }
|
|
|
|
.actions-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
footer {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-top: 20px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: #666;
|
|
border: 1px solid #e0d9d0;
|
|
}
|
|
|
|
.two-column-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-top: 15px;
|
|
}
|
|
.upload-column { min-width: 0; }
|
|
|
|
/* Table Styling */
|
|
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
th { text-align: left; background: #f4f4f4; padding: 5px; position: sticky; top: 0; }
|
|
td { padding: 5px; border-bottom: 1px solid #eee; }
|
|
|
|
.status-text {
|
|
margin-top: 10px;
|
|
color: #2aab95;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
if (sessionStorage.getItem('authenticated') !== 'true') {
|
|
window.location.href = '../login.html';
|
|
}
|
|
</script>
|
|
<header>
|
|
<button class="header-btn" onclick="window.location.href='../';" title="Back to main tools">← Back</button>
|
|
<h1>🆔 Unique ID generator</h1>
|
|
<button class="header-btn" id="clearAllBtn">Clear all</button>
|
|
</header>
|
|
|
|
<main class="container">
|
|
|
|
<div class="card">
|
|
<h2><span style="font-size: 24px;">📋</span> Upload client list</h2>
|
|
<p>Upload the master client list (SmartCane_client_list.xlsx)</p>
|
|
<div class="file-input-wrapper">
|
|
<label class="file-input-label" for="clientListInput">
|
|
<div id="fileLabelText">Drop the client list file here<br><small>or click to browse</small></div>
|
|
</label>
|
|
<input type="file" id="clientListInput" accept=".xlsx, .xls"/>
|
|
</div>
|
|
<p id="clientListStatus" class="status-text"></p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2><span style="font-size: 24px;">🗺️</span> Upload GeoJSON file(s)</h2>
|
|
<div class="two-column-grid">
|
|
<div class="upload-column">
|
|
<p><strong>Raw GeoJSON</strong></p>
|
|
<p>Upload the raw GeoJSON for which you wish to generate Unique IDs.</p>
|
|
<div class="file-input-wrapper">
|
|
<label class="file-input-label" for="rawGeoJSONInput">
|
|
<div>Drop the raw GeoJSON file here (Required)<br><small>or click to browse</small></div>
|
|
</label>
|
|
<input type="file" id="rawGeoJSONInput" accept=".geojson, .json"/>
|
|
</div>
|
|
<p id="rawGeoJSONStatus" class="status-text"></p>
|
|
</div>
|
|
|
|
<div class="upload-column">
|
|
<p><strong>Previously edited GeoJSON</strong></p>
|
|
<p>If you have an edited GeoJSON, upload it here to continue numbering.</p>
|
|
<div class="file-input-wrapper">
|
|
<label class="file-input-label" for="prevGeoJSONInput">
|
|
<div>Drop the previous GeoJSON file here (Optional)<br><small>or click to browse</small></div>
|
|
</label>
|
|
<input type="file" id="prevGeoJSONInput" accept=".geojson, .json"/>
|
|
</div>
|
|
<p id="prevGeoJSONStatus" class="status-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls hidden" id="controlsSection">
|
|
<div class="card">
|
|
<h2><span style="font-size: 24px;">⚙️</span> Client selection & UID Generation</h2>
|
|
<label for="clientSelect">Select Client:</label>
|
|
<select id="clientSelect" style="padding: 8px; width: 100%; max-width: 300px;">
|
|
<option value="">-- Select Client --</option>
|
|
</select>
|
|
<div class="actions-row">
|
|
<button id="processBtn">Process / Update Diff</button>
|
|
<button id="downloadBtn" disabled>Download GeoJSON</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diff-viewer hidden" id="diffViewer">
|
|
<div class="card">
|
|
<h2><span style="font-size: 24px;">🔍</span> Review Changes</h2>
|
|
<div class="diff-grid">
|
|
<div class="diff-column" id="rawColumn">
|
|
<h3>Raw GeoJSON</h3>
|
|
<div id="rawTableContainer"></div>
|
|
</div>
|
|
<div class="diff-column" id="editedColumn">
|
|
<h3>Edited GeoJSON</h3>
|
|
<div id="editedTableContainer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
Unique ID Generator for SmartCane clients
|
|
</footer>
|
|
</main>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |