Data converter
This commit is contained in:
@@ -63,6 +63,10 @@
|
||||
<span class="nav-icon">👥</span>
|
||||
<span class="nav-text">Users</span>
|
||||
</a>
|
||||
<a href="#convert-data">
|
||||
<span class="nav-icon">📊</span>
|
||||
<span class="nav-text">Convert Data</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div id="mobile-admin-info" class="mobile-admin-info mobile-only"></div>
|
||||
@@ -353,6 +357,191 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Convert Data Section -->
|
||||
<section id="convert-data" class="admin-section" style="display: none;">
|
||||
<h2>Convert Data</h2>
|
||||
<p>Upload a CSV file containing addresses to geocode and import into the map.</p>
|
||||
|
||||
<div class="data-convert-container">
|
||||
<div class="upload-section" id="upload-section">
|
||||
<h3>CSV Upload</h3>
|
||||
<form id="csv-upload-form">
|
||||
<div class="upload-area" id="upload-area">
|
||||
<div class="upload-icon">📁</div>
|
||||
<p>Drag and drop your CSV file here or click to browse</p>
|
||||
<input type="file" id="csv-file-input" accept=".csv" style="display: none;">
|
||||
<button type="button" class="btn btn-primary" id="browse-btn">Choose File</button>
|
||||
</div>
|
||||
|
||||
<div class="file-info" id="file-info" style="display: none;">
|
||||
<p><strong>Selected file:</strong> <span id="file-name"></span></p>
|
||||
<p><strong>Size:</strong> <span id="file-size"></span></p>
|
||||
</div>
|
||||
|
||||
<div class="csv-requirements">
|
||||
<h4>CSV Requirements:</h4>
|
||||
<div class="requirements-section">
|
||||
<h5>Required Column:</h5>
|
||||
<ul>
|
||||
<li><strong>address</strong> - The street address to geocode (case-insensitive)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="requirements-section">
|
||||
<h5>Optional Columns (any of these names will work):</h5>
|
||||
<div class="field-mapping-grid">
|
||||
<div class="field-group">
|
||||
<strong>First Name:</strong>
|
||||
<ul>
|
||||
<li>first name</li>
|
||||
<li>firstname</li>
|
||||
<li>first_name</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<strong>Last Name:</strong>
|
||||
<ul>
|
||||
<li>last name</li>
|
||||
<li>lastname</li>
|
||||
<li>last_name</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<strong>Email:</strong>
|
||||
<ul>
|
||||
<li>email</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<strong>Phone:</strong>
|
||||
<ul>
|
||||
<li>phone</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<strong>Unit Number:</strong>
|
||||
<ul>
|
||||
<li>unit</li>
|
||||
<li>unit number</li>
|
||||
<li>unit_number</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<strong>Support Level (1-4):</strong>
|
||||
<ul>
|
||||
<li>support level</li>
|
||||
<li>support_level</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<strong>Sign (true/false):</strong>
|
||||
<ul>
|
||||
<li>sign</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<strong>Sign Size (Regular, Large, Unsure)</strong>
|
||||
<ul>
|
||||
<li>sign size</li>
|
||||
<li>sign_size</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<strong>Notes:</strong>
|
||||
<ul>
|
||||
<li>notes</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="requirements-section">
|
||||
<h5>File Specifications:</h5>
|
||||
<ul>
|
||||
<li>Maximum file size: 10MB</li>
|
||||
<li>Column names are case-insensitive</li>
|
||||
<li>Extra columns will be ignored</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="requirements-section">
|
||||
<h5>Example CSV Format:</h5>
|
||||
<pre class="csv-example">address,first name,last name,email,phone,support level,notes
|
||||
"123 Main St, Edmonton, AB",John,Doe,john@example.com,780-555-0123,2,Interested in campaign
|
||||
"456 Oak Ave, Edmonton, AB",Jane,Smith,jane@example.com,780-555-0456,1,Strong supporter</pre>
|
||||
<p style="margin-top: 10px;">
|
||||
<a href="data:text/csv;charset=utf-8,address%2Cfirst%20name%2Clast%20name%2Cemail%2Cphone%2Csupport%20level%2Cnotes%0A%22123%20Main%20St%2C%20Edmonton%2C%20AB%22%2CJohn%2CDoe%2Cjohn%40example.com%2C780-555-0123%2C2%2CInterested%20in%20campaign%0A%22456%20Oak%20Ave%2C%20Edmonton%2C%20AB%22%2CJane%2CSmith%2Cjane%40example.com%2C780-555-0456%2C1%2CStrong%20supporter"
|
||||
download="sample-import.csv"
|
||||
class="btn btn-secondary btn-sm">
|
||||
📄 Download Sample CSV
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" id="process-csv-btn" disabled>
|
||||
Process CSV
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" id="clear-upload-btn">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="processing-section" id="processing-section" style="display: none;">
|
||||
<h3>Processing Progress</h3>
|
||||
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar-fill" id="progress-bar-fill"></div>
|
||||
</div>
|
||||
<p class="progress-text"><span id="progress-current">0</span> / <span id="progress-total">0</span> addresses processed</p>
|
||||
</div>
|
||||
|
||||
<div class="processing-status" id="processing-status">
|
||||
<p id="current-address"></p>
|
||||
</div>
|
||||
|
||||
<div class="results-preview" id="results-preview" style="display: none;">
|
||||
<h4>Preview Results</h4>
|
||||
<div class="results-map" id="results-map"></div>
|
||||
<div class="results-table-container">
|
||||
<table class="results-table" id="results-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Original Address</th>
|
||||
<th>Geocoded Address</th>
|
||||
<th>Coordinates</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="results-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="processing-actions" id="processing-actions" style="display: none;">
|
||||
<button type="button" class="btn btn-success" id="save-results-btn">
|
||||
Add Data to Map
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" id="new-upload-btn">
|
||||
Upload New File
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -427,7 +616,9 @@
|
||||
<!-- Dashboard JavaScript -->
|
||||
<script src="js/dashboard.js"></script>
|
||||
|
||||
<!-- Data Convert JavaScript -->
|
||||
<!-- Admin JavaScript -->
|
||||
<script src="js/admin.js"></script>
|
||||
<script src="js/data-convert.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user