From 8b02f90f7b1ac37d444ac16491778fda4f9c2c8a Mon Sep 17 00:00:00 2001
From: Nik Verweel <nikverweel@gmail.com>
Date: Tue, 17 Feb 2026 16:20:22 +0100
Subject: [PATCH] Create UID generator webapp

---
 webapps/index.html               |  17 ++
 webapps/res/id.png               | Bin 0 -> 4590 bytes
 webapps/uid_generator/app.js     | 310 +++++++++++++++++++++++++++++++
 webapps/uid_generator/index.html | 260 ++++++++++++++++++++++++++
 4 files changed, 587 insertions(+)
 create mode 100644 webapps/res/id.png
 create mode 100644 webapps/uid_generator/app.js
 create mode 100644 webapps/uid_generator/index.html

diff --git a/webapps/index.html b/webapps/index.html
index a13ec78..d74f831 100644
--- a/webapps/index.html
+++ b/webapps/index.html
@@ -254,6 +254,7 @@
                     <h2>ODK Data Viewer</h2>
                     <p>Upload ODK CSVs to visualise and turn field corner points into polygons</p>
                     <ul class="app-features">
+                        <li>Upload ODK CSVs</li>
                         <li>View ODK data</li>
                         <li>Turn corner points into polygons</li>
                         <li>Download created polygons</li>
@@ -261,6 +262,22 @@
                     <a href="./odk_viewer/" class="app-btn">Open Viewer</a>
                 </div>
             </div>
+
+            <!-- Unique ID Generator -->
+            <div class="app-card">
+                <div class="app-icon">🆔</div>
+                <div class="app-content">
+                    <h2>Unique ID generator</h2>
+                    <p>Generate unique IDs for fields from different clients</p>
+                    <ul class="app-features">
+                        <li>Upload GeoJSONs</li>
+                        <li>Identify client</li>
+                        <li>Generate unique IDs following SmartCane structure</li>
+                        <li>Download GeoJSON with new IDs</li>
+                    </ul>
+                    <a href="./uid_generator/" class="app-btn">Open Editor</a>
+                </div>
+            </div>
         </div>
         
         <footer>
diff --git a/webapps/res/id.png b/webapps/res/id.png
new file mode 100644
index 0000000000000000000000000000000000000000..683d3a39e678402a40b08818b78bb7e834d8300e
GIT binary patch
literal 4590
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
YKQP8$ahHm^F#rGn07*qoM6N<$f@n+l2LJ#7

literal 0
HcmV?d00001

diff --git a/webapps/uid_generator/app.js b/webapps/uid_generator/app.js
new file mode 100644
index 0000000..78cab31
--- /dev/null
+++ b/webapps/uid_generator/app.js
@@ -0,0 +1,310 @@
+// Global State
+let clientList = [];
+let rawGeoJSON = null;
+let prevGeoJSON = null;
+let generatedGeoJSON = null;
+let detectedClientCode = null;
+
+// DOM Elements
+const clientListInput = document.getElementById('clientListInput');
+const rawGeoJSONInput = document.getElementById('rawGeoJSONInput');
+const prevGeoJSONInput = document.getElementById('prevGeoJSONInput');
+const clientSelect = document.getElementById('clientSelect');
+const processBtn = document.getElementById('processBtn');
+const downloadBtn = document.getElementById('downloadBtn');
+const controlsSection = document.getElementById('controlsSection');
+const diffViewer = document.getElementById('diffViewer');
+const rawTableContainer = document.getElementById('rawTableContainer');
+const editedTableContainer = document.getElementById('editedTableContainer');
+const clearAllBtn = document.getElementById('clearAllBtn');
+
+// Event Listeners
+clientListInput.addEventListener('change', handleClientListUpload);
+rawGeoJSONInput.addEventListener('change', handleRawGeoJSONUpload);
+prevGeoJSONInput.addEventListener('change', handlePrevGeoJSONUpload);
+processBtn.addEventListener('click', processGeoJSON);
+downloadBtn.addEventListener('click', downloadGeoJSON);
+clientSelect.addEventListener('change', () => {
+    // If we have raw data, re-process or enable processing
+    if (rawGeoJSON) {
+        processBtn.disabled = false;
+    }
+});
+
+// Clear All Logic
+clearAllBtn.addEventListener('click', () => {
+    if(confirm('Are you sure you want to clear all data and reset?')) {
+        window.location.reload();
+    }
+});
+
+// Helper: Attempt to match filename to client code
+function tryAutoSelectClient(filename) {
+    if (!filename) return;
+
+    // Matches strings starting with alphanumerics followed by an underscore
+    // e.g. KQ001_2023-10-10.geojson -> match "KQ001"
+    const match = filename.match(/^([A-Z0-9]+)_/);
+    
+    if (match && match[1]) {
+        const potentialCode = match[1];
+        console.log(`Detected potential client code from filename: ${potentialCode}`);
+        
+        detectedClientCode = potentialCode;
+
+        // Try to select it in the dropdown if options exist
+        const option = Array.from(clientSelect.options).find(opt => opt.value === potentialCode);
+        if (option) {
+            clientSelect.value = potentialCode;
+            // Visual feedback could be added here if desired
+        }
+    }
+}
+
+// Helper: Parse Excel
+function handleClientListUpload(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = function(e) {
+        const data = new Uint8Array(e.target.result);
+        const workbook = XLSX.read(data, { type: 'array' });
+
+        let sheetName = workbook.SheetNames.find(n => n === 'Client List') || workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[sheetName];
+        const jsonData = XLSX.utils.sheet_to_json(worksheet);
+
+        clientList = jsonData.map(row => ({
+            country: row['Country'],
+            name: row['Name'],
+            code: row['SC-client-Code']
+        })).filter(item => item.code);
+
+        // Show count instead of filename
+        document.getElementById('clientListStatus').textContent = `✓ ${clientList.length} clients uploaded`;
+        
+        populateClientDropdown();
+        controlsSection.classList.remove('hidden');
+    };
+    reader.readAsArrayBuffer(file);
+}
+
+function populateClientDropdown() {
+    clientSelect.innerHTML = '<option value="">-- Select Client --</option>';
+    clientList.forEach(client => {
+        const option = document.createElement('option');
+        option.value = client.code;
+        option.textContent = `${client.code} - ${client.name} (${client.country})`;
+        clientSelect.appendChild(option);
+    });
+    
+    // Attempt auto-selection if code was detected previously (e.g., from raw upload before client list)
+    if (detectedClientCode) {
+        const option = Array.from(clientSelect.options).find(opt => opt.value === detectedClientCode);
+        if (option) {
+            clientSelect.value = detectedClientCode;
+        }
+    }
+}
+
+// Helper: Parse GeoJSON
+function handleRawGeoJSONUpload(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    // Show filename
+    document.getElementById('rawGeoJSONStatus').textContent = `Uploaded: ${file.name}`;
+    
+    // Try to detect client code from this filename
+    tryAutoSelectClient(file.name);
+
+    const reader = new FileReader();
+    reader.onload = function(e) {
+        try {
+            rawGeoJSON = JSON.parse(e.target.result);
+            renderTable(rawGeoJSON, rawTableContainer, false);
+            
+            // Clear the right column (edited view) when new raw file is uploaded
+            editedTableContainer.innerHTML = '';
+            
+            // Reset generated GeoJSON and disable download
+            generatedGeoJSON = null;
+            downloadBtn.disabled = true;
+            
+            diffViewer.classList.remove('hidden');
+            processBtn.disabled = false;
+        } catch (err) {
+            console.error('Error parsing GeoJSON:', err);
+            alert('Error parsing Raw GeoJSON');
+        }
+    };
+    reader.readAsText(file);
+}
+
+function handlePrevGeoJSONUpload(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    // Show filename
+    document.getElementById('prevGeoJSONStatus').textContent = `Uploaded: ${file.name}`;
+
+    // Try to detect client code from this filename
+    tryAutoSelectClient(file.name);
+
+    const reader = new FileReader();
+    reader.onload = function(e) {
+        try {
+            prevGeoJSON = JSON.parse(e.target.result);
+            console.log("Previous GeoJSON loaded", prevGeoJSON);
+        } catch (err) {
+            console.error("Error parsing Previous GeoJSON", err);
+            alert("Error parsing Previous GeoJSON");
+        }
+    };
+    reader.readAsText(file);
+}
+
+// Core Logic: Generate IDs
+function processGeoJSON() {
+    if (!rawGeoJSON) {
+        alert("Please upload Raw GeoJSON first.");
+        return;
+    }
+    
+    // Validate Client Selection for Prefix
+    const clientCode = clientSelect.value;
+    if (!clientCode) {
+        alert("Please select a Client first to generate the correct ID format.");
+        return;
+    }
+
+    // Helper to extract number from ID
+    // Handles simple "0001" or complex "CODE_0001"
+    const extractIdNumber = (idStr) => {
+        if (!idStr) return 0;
+        // Split by underscore and take the last segment
+        const parts = String(idStr).split('_'); 
+        const numPart = parts[parts.length - 1];
+        const num = parseInt(numPart, 10);
+        return isNaN(num) ? 0 : num;
+    };
+
+    // Determine max ID
+    let maxId = 0;
+    
+    // 1. Scan Previous GeoJSON
+    if (prevGeoJSON && prevGeoJSON.features) {
+        prevGeoJSON.features.forEach(f => {
+            if (f.properties && f.properties['sc_id']) {
+                const num = extractIdNumber(f.properties['sc_id']);
+                if (num > maxId) maxId = num;
+            }
+        });
+    }
+
+    // 2. Scan Raw GeoJSON (avoid collisions)
+    if (rawGeoJSON && rawGeoJSON.features) {
+        rawGeoJSON.features.forEach(f => {
+            if (f.properties && f.properties['sc_id']) {
+                const num = extractIdNumber(f.properties['sc_id']);
+                if (num > maxId) maxId = num;
+            }
+        });
+    }
+
+    // Clone Raw GeoJSON to create Generated one
+    generatedGeoJSON = JSON.parse(JSON.stringify(rawGeoJSON));
+    
+    let currentId = maxId;
+
+    generatedGeoJSON.features.forEach(f => {
+        if (!f.properties) f.properties = {};
+        
+        let existingId = f.properties['sc_id'];
+        
+        // Check if empty or missing
+        if (existingId === undefined || existingId === null || existingId === "") {
+            currentId++;
+            // Format: CLIENTCODE_0001
+            f.properties['sc_id'] = `${clientCode}_${String(currentId).padStart(4, '0')}`;
+            f.isNew = true; // Flag for UI
+        }
+    });
+
+    renderTable(generatedGeoJSON, editedTableContainer, true);
+    downloadBtn.disabled = false;
+}
+
+function renderTable(geojson, container, isEdited) {
+    if (!geojson || !geojson.features) return;
+
+    container.innerHTML = '';
+    const table = document.createElement('table');
+    const thead = document.createElement('thead');
+    const trHead = document.createElement('tr');
+    ['Field', 'Subfield', 'SC_ID'].forEach(text => {
+        const th = document.createElement('th');
+        th.textContent = text;
+        trHead.appendChild(th);
+    });
+    thead.appendChild(trHead);
+    table.appendChild(thead);
+
+    const tbody = document.createElement('tbody');
+    
+    geojson.features.forEach(f => {
+        const props = f.properties || {};
+        const field = props['field'] || '';
+        const subfield = props['subfield'] || '';
+        const scId = props['sc_id'] || '';
+        
+        const tr = document.createElement('tr');
+        if (isEdited && f.isNew) {
+            tr.className = 'diff-row new';
+        }
+
+        const tdField = document.createElement('td');
+        tdField.textContent = field;
+        tr.appendChild(tdField);
+
+        const tdSubfield = document.createElement('td');
+        tdSubfield.textContent = subfield;
+        tr.appendChild(tdSubfield);
+
+        const tdScId = document.createElement('td');
+        tdScId.textContent = scId;
+        tr.appendChild(tdScId);
+
+        tbody.appendChild(tr);
+    });
+    
+    table.appendChild(tbody);
+    container.appendChild(table);
+}
+
+function downloadGeoJSON() {
+    if (!generatedGeoJSON) return;
+    
+    // Remove temporary flags
+    const cleanGeoJSON = JSON.parse(JSON.stringify(generatedGeoJSON));
+    cleanGeoJSON.features.forEach(f => {
+        delete f.isNew;
+    });
+
+    const clientCode = clientSelect.value || "UNKNOWN";
+    const date = new Date();
+    const dateStr = date.toISOString().split('T')[0]; // YYYY-MM-DD
+    const filename = `${clientCode}_${dateStr}.geojson`;
+    
+    const blob = new Blob([JSON.stringify(cleanGeoJSON, null, 2)], { type: 'application/geo+json' });
+    const url = URL.createObjectURL(blob);
+    
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
\ No newline at end of file
diff --git a/webapps/uid_generator/index.html b/webapps/uid_generator/index.html
new file mode 100644
index 0000000..41b17ad
--- /dev/null
+++ b/webapps/uid_generator/index.html
@@ -0,0 +1,260 @@
+<!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>
\ No newline at end of file