mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-03-28 17:42:45 +01:00
Merge dev to main: Contact management improvements and bug fixes
This merge includes: - Fixed message loading crash (cleanupBtn null check) - Fixed contact deletion (use contact name instead of public key) - Enhanced /api/contacts/detailed to return full contact_info data - Added GPS coordinates, routing paths, and all meshcli fields - Improved contact management UI and sorting - Added detailed logging for debugging
This commit is contained in:
MarekWo
14
README.md
14
README.md
@@ -22,7 +22,11 @@ A lightweight web interface for meshcore-cli, providing browser-based access to
|
||||
- 🔓 **Public channels** - Join public channels (starting with #) without encryption keys
|
||||
- 🎯 **Reply to users** - Quick reply with `@[UserName]` format
|
||||
- 👥 **Contact management** - Manual contact approval mode with pending contacts list (persistent settings)
|
||||
- 🧹 **Clean contacts** - Remove inactive contacts with configurable threshold
|
||||
- **Dedicated pages:** Separate full-screen views for pending and existing contacts
|
||||
- **Advanced sorting:** Sort contacts by name (A-Z/Z-A) or last advertisement time (newest/oldest)
|
||||
- **Smart filtering:** Search by name/key, filter by contact type (CLI, REP, ROOM, SENS)
|
||||
- **Activity indicators:** Visual status icons (🟢 active, 🟡 recent, 🔴 inactive) based on last advertisement
|
||||
- **Cleanup tool:** Remove inactive contacts with configurable threshold (moved from Settings)
|
||||
- 📦 **Message archiving** - Automatic daily archiving with browse-by-date selector
|
||||
- ⚡ **Efficient polling** - Lightweight update checks every 10s, UI refreshes only when needed
|
||||
- 📡 **Network commands** - Send advertisement (advert) or flood advertisement (floodadv) for network management
|
||||
@@ -164,11 +168,16 @@ mc-webui/
|
||||
│ │ │ └── style.css # Custom styles
|
||||
│ │ └── js/
|
||||
│ │ ├── app.js # Main page frontend logic
|
||||
│ │ └── dm.js # Direct Messages page logic
|
||||
│ │ ├── dm.js # Direct Messages page logic
|
||||
│ │ └── contacts.js # Contact Management multi-page logic
|
||||
│ └── templates/
|
||||
│ ├── base.html # Base template
|
||||
│ ├── index.html # Main chat view
|
||||
│ ├── dm.html # Direct Messages full-page view
|
||||
│ ├── contacts_base.html # Contact pages base template
|
||||
│ ├── contacts-manage.html # Contact Management settings & navigation
|
||||
│ ├── contacts-pending.html # Pending contacts full-screen view
|
||||
│ ├── contacts-existing.html # Existing contacts with sort/filter
|
||||
│ └── components/ # Reusable components
|
||||
├── requirements.txt # Python dependencies
|
||||
├── .env.example # Example environment config
|
||||
@@ -193,6 +202,7 @@ mc-webui/
|
||||
- [x] Message Archiving (Daily archiving with browse-by-date selector)
|
||||
- [x] Smart Notifications (Unread counters per channel and total)
|
||||
- [x] Direct Messages (DM) - Private messaging with delivery status tracking
|
||||
- [x] Advanced Contact Management - Multi-page interface with sorting, filtering, and activity tracking
|
||||
|
||||
### Next Steps
|
||||
|
||||
|
||||
@@ -628,11 +628,15 @@ def delete_contact(selector: str) -> Tuple[bool, str]:
|
||||
try:
|
||||
success, stdout, stderr = _run_command(['remove_contact', selector.strip()])
|
||||
|
||||
# Log the meshcli response for debugging
|
||||
logger.info(f"remove_contact {selector}: success={success}, stdout='{stdout}', stderr='{stderr}'")
|
||||
|
||||
if success:
|
||||
message = stdout.strip() if stdout.strip() else f"Contact {selector} removed successfully"
|
||||
return True, message
|
||||
else:
|
||||
error = stderr.strip() if stderr.strip() else "Failed to remove contact"
|
||||
logger.warning(f"remove_contact failed for {selector}: {error}")
|
||||
return False, error
|
||||
|
||||
except Exception as e:
|
||||
|
||||
@@ -1209,6 +1209,8 @@ def get_contacts_detailed_api():
|
||||
"""
|
||||
Get detailed list of ALL existing contacts on the device (CLI, REP, ROOM, SENS).
|
||||
|
||||
Returns full contact_info data from meshcli including GPS coordinates, paths, etc.
|
||||
|
||||
Returns:
|
||||
JSON with contacts list:
|
||||
{
|
||||
@@ -1217,53 +1219,75 @@ def get_contacts_detailed_api():
|
||||
"limit": 350,
|
||||
"contacts": [
|
||||
{
|
||||
"name": "TK Zalesie Test 🦜",
|
||||
"public_key_prefix": "df2027d3f2ef",
|
||||
"type_label": "REP",
|
||||
"path_or_mode": "Flood",
|
||||
"last_seen": 1735429453, // Unix timestamp from last_advert
|
||||
"raw_line": "..."
|
||||
"name": "TK Zalesie Test 🦜", // adv_name
|
||||
"public_key": "df2027d3f2ef...", // Full public key (64 chars)
|
||||
"public_key_prefix": "df2027d3f2ef", // First 12 chars
|
||||
"type": 2, // 1=CLI, 2=REP, 3=ROOM, 4=SENS
|
||||
"type_label": "REP", // Human-readable type
|
||||
"flags": 0,
|
||||
"out_path_len": -1, // -1 = Flood mode
|
||||
"out_path": "", // Path string
|
||||
"last_advert": 1735429453, // Unix timestamp
|
||||
"adv_lat": 50.866005, // GPS latitude
|
||||
"adv_lon": 20.669308, // GPS longitude
|
||||
"lastmod": 1715973527 // Last modification timestamp
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
"""
|
||||
try:
|
||||
# Get basic contacts list
|
||||
success, contacts, total_count, error = cli.get_all_contacts_detailed()
|
||||
# Get detailed contact info from meshcli (includes all fields)
|
||||
success_detailed, contacts_detailed, error_detailed = cli.get_contacts_with_last_seen()
|
||||
|
||||
if not success:
|
||||
if not success_detailed:
|
||||
return jsonify({
|
||||
'success': False,
|
||||
'error': error or 'Failed to get contacts list',
|
||||
'error': error_detailed or 'Failed to get contact details',
|
||||
'contacts': [],
|
||||
'count': 0,
|
||||
'limit': 350
|
||||
}), 500
|
||||
|
||||
# Get detailed contact info with last_advert timestamps
|
||||
success_detailed, contacts_detailed, error_detailed = cli.get_contacts_with_last_seen()
|
||||
# Convert dict to list and add computed fields
|
||||
type_labels = {1: 'CLI', 2: 'REP', 3: 'ROOM', 4: 'SENS'}
|
||||
contacts = []
|
||||
|
||||
if success_detailed:
|
||||
# Merge last_advert data with contacts
|
||||
# Match by public_key_prefix (first 12 chars of full public_key)
|
||||
for contact in contacts:
|
||||
prefix = contact.get('public_key_prefix', '').lower()
|
||||
for public_key, details in contacts_detailed.items():
|
||||
# Compute path display string
|
||||
out_path_len = details.get('out_path_len', -1)
|
||||
out_path = details.get('out_path', '')
|
||||
if out_path_len == -1:
|
||||
path_or_mode = 'Flood'
|
||||
elif out_path:
|
||||
path_or_mode = out_path
|
||||
else:
|
||||
path_or_mode = f'Path len: {out_path_len}'
|
||||
|
||||
# Find matching contact in detailed data
|
||||
for full_key, details in contacts_detailed.items():
|
||||
if full_key.lower().startswith(prefix):
|
||||
# Add last_seen timestamp
|
||||
contact['last_seen'] = details.get('last_advert', None)
|
||||
break
|
||||
else:
|
||||
# If detailed fetch failed, log warning but still return contacts without last_seen
|
||||
logger.warning(f"Failed to get last_seen data: {error_detailed}")
|
||||
contact = {
|
||||
# All original fields from contact_info
|
||||
'public_key': public_key,
|
||||
'type': details.get('type'),
|
||||
'flags': details.get('flags'),
|
||||
'out_path_len': out_path_len,
|
||||
'out_path': out_path,
|
||||
'last_advert': details.get('last_advert'),
|
||||
'adv_lat': details.get('adv_lat'),
|
||||
'adv_lon': details.get('adv_lon'),
|
||||
'lastmod': details.get('lastmod'),
|
||||
# Computed/convenience fields
|
||||
'name': details.get('adv_name', ''), # Map adv_name to name for compatibility
|
||||
'public_key_prefix': public_key[:12] if len(public_key) >= 12 else public_key,
|
||||
'type_label': type_labels.get(details.get('type'), 'UNKNOWN'),
|
||||
'path_or_mode': path_or_mode, # For UI display
|
||||
'last_seen': details.get('last_advert'), # Alias for compatibility
|
||||
}
|
||||
contacts.append(contact)
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'contacts': contacts,
|
||||
'count': total_count,
|
||||
'count': len(contacts),
|
||||
'limit': 350 # MeshCore device limit
|
||||
}), 200
|
||||
|
||||
|
||||
@@ -44,10 +44,34 @@ def direct_messages():
|
||||
@views_bp.route('/contacts/manage')
|
||||
def contact_management():
|
||||
"""
|
||||
Contact Management view - manual approval settings and pending contacts list.
|
||||
Contact Management Settings - manual approval + cleanup + navigation.
|
||||
"""
|
||||
return render_template(
|
||||
'contacts.html',
|
||||
'contacts-manage.html',
|
||||
device_name=config.MC_DEVICE_NAME,
|
||||
refresh_interval=config.MC_REFRESH_INTERVAL
|
||||
)
|
||||
|
||||
|
||||
@views_bp.route('/contacts/pending')
|
||||
def contact_pending_list():
|
||||
"""
|
||||
Full-screen pending contacts list.
|
||||
"""
|
||||
return render_template(
|
||||
'contacts-pending.html',
|
||||
device_name=config.MC_DEVICE_NAME,
|
||||
refresh_interval=config.MC_REFRESH_INTERVAL
|
||||
)
|
||||
|
||||
|
||||
@views_bp.route('/contacts/existing')
|
||||
def contact_existing_list():
|
||||
"""
|
||||
Full-screen existing contacts list with search, filter, sort.
|
||||
"""
|
||||
return render_template(
|
||||
'contacts-existing.html',
|
||||
device_name=config.MC_DEVICE_NAME,
|
||||
refresh_interval=config.MC_REFRESH_INTERVAL
|
||||
)
|
||||
|
||||
@@ -99,10 +99,13 @@ function setupEventListeners() {
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup contacts button
|
||||
document.getElementById('cleanupBtn').addEventListener('click', function() {
|
||||
cleanupContacts();
|
||||
});
|
||||
// Cleanup contacts button (only exists on contact management page)
|
||||
const cleanupBtn = document.getElementById('cleanupBtn');
|
||||
if (cleanupBtn) {
|
||||
cleanupBtn.addEventListener('click', function() {
|
||||
cleanupContacts();
|
||||
});
|
||||
}
|
||||
|
||||
// Track user scrolling
|
||||
const container = document.getElementById('messagesContainer');
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
/**
|
||||
* Contact Management UI
|
||||
* Contact Management UI - Multi-Page Version
|
||||
*
|
||||
* Features:
|
||||
* - Manual contact approval toggle (persistent across restarts)
|
||||
* - Pending contacts list with approve/copy actions
|
||||
* - Existing contacts list with search, filter, and delete
|
||||
* - Existing contacts list with search, filter, and sort
|
||||
* - Three dedicated pages: manage, pending, existing
|
||||
* - Auto-refresh on page load
|
||||
* - Mobile-first design
|
||||
*/
|
||||
@@ -13,12 +14,17 @@
|
||||
// State Management
|
||||
// =============================================================================
|
||||
|
||||
let currentPage = null; // 'manage', 'pending', 'existing'
|
||||
let manualApprovalEnabled = false;
|
||||
let pendingContacts = [];
|
||||
let existingContacts = [];
|
||||
let filteredContacts = [];
|
||||
let contactToDelete = null;
|
||||
|
||||
// Sort state (for existing page)
|
||||
let sortBy = 'last_advert'; // 'name' or 'last_advert'
|
||||
let sortOrder = 'desc'; // 'asc' or 'desc'
|
||||
|
||||
// =============================================================================
|
||||
// Initialization
|
||||
// =============================================================================
|
||||
@@ -32,34 +38,209 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// Attach event listeners
|
||||
attachEventListeners();
|
||||
// Detect current page
|
||||
detectCurrentPage();
|
||||
|
||||
// Load initial state
|
||||
loadSettings();
|
||||
loadPendingContacts();
|
||||
loadExistingContacts();
|
||||
// Initialize page-specific functionality
|
||||
initializePage();
|
||||
});
|
||||
|
||||
function attachEventListeners() {
|
||||
function detectCurrentPage() {
|
||||
if (document.getElementById('managePageContent')) {
|
||||
currentPage = 'manage';
|
||||
} else if (document.getElementById('pendingPageContent')) {
|
||||
currentPage = 'pending';
|
||||
} else if (document.getElementById('existingPageContent')) {
|
||||
currentPage = 'existing';
|
||||
}
|
||||
console.log('Current page:', currentPage);
|
||||
}
|
||||
|
||||
function initializePage() {
|
||||
switch (currentPage) {
|
||||
case 'manage':
|
||||
initManagePage();
|
||||
break;
|
||||
case 'pending':
|
||||
initPendingPage();
|
||||
break;
|
||||
case 'existing':
|
||||
initExistingPage();
|
||||
break;
|
||||
default:
|
||||
console.warn('Unknown page type');
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Management Page Initialization
|
||||
// =============================================================================
|
||||
|
||||
function initManagePage() {
|
||||
console.log('Initializing Management page...');
|
||||
|
||||
// Load settings for manual approval toggle
|
||||
loadSettings();
|
||||
|
||||
// Load contact counts for badges
|
||||
loadContactCounts();
|
||||
|
||||
// Attach event listeners for manage page
|
||||
attachManageEventListeners();
|
||||
}
|
||||
|
||||
function attachManageEventListeners() {
|
||||
// Manual approval toggle
|
||||
const approvalSwitch = document.getElementById('manualApprovalSwitch');
|
||||
if (approvalSwitch) {
|
||||
approvalSwitch.addEventListener('change', handleApprovalToggle);
|
||||
}
|
||||
|
||||
// Pending contacts refresh button
|
||||
const refreshPendingBtn = document.getElementById('refreshPendingBtn');
|
||||
if (refreshPendingBtn) {
|
||||
refreshPendingBtn.addEventListener('click', () => {
|
||||
// Cleanup button
|
||||
const cleanupBtn = document.getElementById('cleanupBtn');
|
||||
if (cleanupBtn) {
|
||||
cleanupBtn.addEventListener('click', handleCleanupInactive);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadContactCounts() {
|
||||
try {
|
||||
// Fetch pending count
|
||||
const pendingResp = await fetch('/api/contacts/pending');
|
||||
const pendingData = await pendingResp.json();
|
||||
|
||||
const pendingBadge = document.getElementById('pendingBadge');
|
||||
if (pendingBadge && pendingData.success) {
|
||||
const count = pendingData.pending?.length || 0;
|
||||
pendingBadge.textContent = count;
|
||||
pendingBadge.classList.remove('spinner-border', 'spinner-border-sm');
|
||||
}
|
||||
|
||||
// Fetch existing count
|
||||
const existingResp = await fetch('/api/contacts/detailed');
|
||||
const existingData = await existingResp.json();
|
||||
|
||||
const existingBadge = document.getElementById('existingBadge');
|
||||
if (existingBadge && existingData.success) {
|
||||
const count = existingData.count || 0;
|
||||
const limit = existingData.limit || 350;
|
||||
existingBadge.textContent = `${count} / ${limit}`;
|
||||
existingBadge.classList.remove('spinner-border', 'spinner-border-sm');
|
||||
|
||||
// Apply counter color coding
|
||||
existingBadge.classList.remove('counter-ok', 'counter-warning', 'counter-alarm');
|
||||
if (count >= 340) {
|
||||
existingBadge.classList.add('counter-alarm');
|
||||
} else if (count >= 300) {
|
||||
existingBadge.classList.add('counter-warning');
|
||||
} else {
|
||||
existingBadge.classList.add('counter-ok');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading contact counts:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCleanupInactive() {
|
||||
const hoursInput = document.getElementById('inactiveHours');
|
||||
const cleanupBtn = document.getElementById('cleanupBtn');
|
||||
|
||||
if (!hoursInput || !cleanupBtn) return;
|
||||
|
||||
const hours = parseInt(hoursInput.value);
|
||||
|
||||
if (isNaN(hours) || hours < 1) {
|
||||
showToast('Please enter a valid number of hours', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
// Confirm action
|
||||
if (!confirm(`This will remove all contacts inactive for more than ${hours} hours. Continue?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Disable button during operation
|
||||
const originalHTML = cleanupBtn.innerHTML;
|
||||
cleanupBtn.disabled = true;
|
||||
cleanupBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Cleaning...';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/contacts/cleanup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
inactive_hours: hours
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showToast(data.message || 'Cleanup completed successfully', 'success');
|
||||
// Reload contact counts
|
||||
loadContactCounts();
|
||||
} else {
|
||||
showToast('Cleanup failed: ' + (data.error || 'Unknown error'), 'danger');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error during cleanup:', error);
|
||||
showToast('Network error during cleanup', 'danger');
|
||||
} finally {
|
||||
// Re-enable button
|
||||
cleanupBtn.disabled = false;
|
||||
cleanupBtn.innerHTML = originalHTML;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Pending Page Initialization
|
||||
// =============================================================================
|
||||
|
||||
function initPendingPage() {
|
||||
console.log('Initializing Pending page...');
|
||||
|
||||
// Load pending contacts
|
||||
loadPendingContacts();
|
||||
|
||||
// Attach event listeners for pending page
|
||||
attachPendingEventListeners();
|
||||
}
|
||||
|
||||
function attachPendingEventListeners() {
|
||||
// Refresh button
|
||||
const refreshBtn = document.getElementById('refreshPendingBtn');
|
||||
if (refreshBtn) {
|
||||
refreshBtn.addEventListener('click', () => {
|
||||
loadPendingContacts();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Existing contacts refresh button
|
||||
const refreshExistingBtn = document.getElementById('refreshExistingBtn');
|
||||
if (refreshExistingBtn) {
|
||||
refreshExistingBtn.addEventListener('click', () => {
|
||||
// =============================================================================
|
||||
// Existing Page Initialization
|
||||
// =============================================================================
|
||||
|
||||
function initExistingPage() {
|
||||
console.log('Initializing Existing page...');
|
||||
|
||||
// Parse sort parameters from URL
|
||||
parseSortParamsFromURL();
|
||||
|
||||
// Load existing contacts
|
||||
loadExistingContacts();
|
||||
|
||||
// Attach event listeners for existing page
|
||||
attachExistingEventListeners();
|
||||
}
|
||||
|
||||
function attachExistingEventListeners() {
|
||||
// Refresh button
|
||||
const refreshBtn = document.getElementById('refreshExistingBtn');
|
||||
if (refreshBtn) {
|
||||
refreshBtn.addEventListener('click', () => {
|
||||
loadExistingContacts();
|
||||
});
|
||||
}
|
||||
@@ -68,7 +249,7 @@ function attachEventListeners() {
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', () => {
|
||||
applyFilters();
|
||||
applySortAndFilters();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -76,7 +257,22 @@ function attachEventListeners() {
|
||||
const typeFilter = document.getElementById('typeFilter');
|
||||
if (typeFilter) {
|
||||
typeFilter.addEventListener('change', () => {
|
||||
applyFilters();
|
||||
applySortAndFilters();
|
||||
});
|
||||
}
|
||||
|
||||
// Sort buttons
|
||||
const sortByName = document.getElementById('sortByName');
|
||||
if (sortByName) {
|
||||
sortByName.addEventListener('click', () => {
|
||||
handleSortChange('name');
|
||||
});
|
||||
}
|
||||
|
||||
const sortByLastAdvert = document.getElementById('sortByLastAdvert');
|
||||
if (sortByLastAdvert) {
|
||||
sortByLastAdvert.addEventListener('click', () => {
|
||||
handleSortChange('last_advert');
|
||||
});
|
||||
}
|
||||
|
||||
@@ -90,7 +286,7 @@ function attachEventListeners() {
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Settings Management
|
||||
// Settings Management (shared)
|
||||
// =============================================================================
|
||||
|
||||
async function loadSettings() {
|
||||
@@ -134,9 +330,6 @@ async function handleApprovalToggle(event) {
|
||||
enabled ? 'Manual approval enabled' : 'Manual approval disabled',
|
||||
'success'
|
||||
);
|
||||
|
||||
// Reload pending contacts after toggle
|
||||
setTimeout(() => loadPendingContacts(), 500);
|
||||
} else {
|
||||
console.error('Failed to update setting:', data.error);
|
||||
showToast('Failed to update setting: ' + data.error, 'danger');
|
||||
@@ -156,7 +349,6 @@ async function handleApprovalToggle(event) {
|
||||
function updateApprovalUI(enabled) {
|
||||
const switchEl = document.getElementById('manualApprovalSwitch');
|
||||
const labelEl = document.getElementById('switchLabel');
|
||||
const infoEl = document.getElementById('approvalInfo');
|
||||
|
||||
if (switchEl) {
|
||||
switchEl.checked = enabled;
|
||||
@@ -167,10 +359,6 @@ function updateApprovalUI(enabled) {
|
||||
? 'Manual approval enabled'
|
||||
: 'Automatic approval (default)';
|
||||
}
|
||||
|
||||
if (infoEl) {
|
||||
infoEl.style.display = enabled ? 'none' : 'inline-block';
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
@@ -182,7 +370,7 @@ async function loadPendingContacts() {
|
||||
const emptyEl = document.getElementById('pendingEmpty');
|
||||
const listEl = document.getElementById('pendingList');
|
||||
const errorEl = document.getElementById('pendingError');
|
||||
const countBadge = document.getElementById('pendingCount');
|
||||
const countBadge = document.getElementById('pendingCountBadge');
|
||||
|
||||
// Show loading state
|
||||
if (loadingEl) loadingEl.style.display = 'block';
|
||||
@@ -207,7 +395,7 @@ async function loadPendingContacts() {
|
||||
// Render pending contacts list
|
||||
renderPendingList(pendingContacts);
|
||||
|
||||
// Update count badge
|
||||
// Update count badge (in navbar)
|
||||
if (countBadge) {
|
||||
countBadge.textContent = pendingContacts.length;
|
||||
countBadge.style.display = 'inline-block';
|
||||
@@ -216,7 +404,7 @@ async function loadPendingContacts() {
|
||||
} else {
|
||||
console.error('Failed to load pending contacts:', data.error);
|
||||
if (errorEl) {
|
||||
const errorMsg = document.getElementById('errorMessage');
|
||||
const errorMsg = document.getElementById('pendingErrorMessage');
|
||||
if (errorMsg) errorMsg.textContent = data.error || 'Failed to load pending contacts';
|
||||
errorEl.style.display = 'block';
|
||||
}
|
||||
@@ -225,7 +413,7 @@ async function loadPendingContacts() {
|
||||
console.error('Error loading pending contacts:', error);
|
||||
if (loadingEl) loadingEl.style.display = 'none';
|
||||
if (errorEl) {
|
||||
const errorMsg = document.getElementById('errorMessage');
|
||||
const errorMsg = document.getElementById('pendingErrorMessage');
|
||||
if (errorMsg) errorMsg.textContent = 'Network error: ' + error.message;
|
||||
errorEl.style.display = 'block';
|
||||
}
|
||||
@@ -425,15 +613,15 @@ async function loadExistingContacts() {
|
||||
existingContacts = data.contacts || [];
|
||||
filteredContacts = [...existingContacts];
|
||||
|
||||
// Update counter badge
|
||||
// Update counter badge (in navbar)
|
||||
updateCounter(data.count, data.limit);
|
||||
|
||||
if (existingContacts.length === 0) {
|
||||
// Show empty state
|
||||
if (emptyEl) emptyEl.style.display = 'block';
|
||||
} else {
|
||||
// Apply filters and render
|
||||
applyFilters();
|
||||
// Apply filters and sort
|
||||
applySortAndFilters();
|
||||
}
|
||||
} else {
|
||||
console.error('Failed to load existing contacts:', data.error);
|
||||
@@ -474,14 +662,83 @@ function updateCounter(count, limit) {
|
||||
}
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
// =============================================================================
|
||||
// Sorting Functionality (Existing Page)
|
||||
// =============================================================================
|
||||
|
||||
function parseSortParamsFromURL() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
sortBy = urlParams.get('sort') || 'last_advert';
|
||||
sortOrder = urlParams.get('order') || 'desc';
|
||||
|
||||
console.log('Parsed sort params:', { sortBy, sortOrder });
|
||||
|
||||
// Update UI to reflect current sort
|
||||
updateSortUI();
|
||||
}
|
||||
|
||||
function handleSortChange(newSortBy) {
|
||||
if (sortBy === newSortBy) {
|
||||
// Toggle order
|
||||
sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
// Change sort field
|
||||
sortBy = newSortBy;
|
||||
// Set default order for new field
|
||||
sortOrder = newSortBy === 'name' ? 'asc' : 'desc';
|
||||
}
|
||||
|
||||
console.log('Sort changed to:', { sortBy, sortOrder });
|
||||
|
||||
// Update URL parameters
|
||||
updateURLWithSortParams();
|
||||
|
||||
// Update UI
|
||||
updateSortUI();
|
||||
|
||||
// Re-apply filters and sort
|
||||
applySortAndFilters();
|
||||
}
|
||||
|
||||
function updateURLWithSortParams() {
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.set('sort', sortBy);
|
||||
url.searchParams.set('order', sortOrder);
|
||||
window.history.replaceState({}, '', url);
|
||||
}
|
||||
|
||||
function updateSortUI() {
|
||||
// Update sort button active states and icons
|
||||
const sortButtons = document.querySelectorAll('.sort-btn');
|
||||
|
||||
sortButtons.forEach(btn => {
|
||||
const btnSort = btn.dataset.sort;
|
||||
const icon = btn.querySelector('i');
|
||||
|
||||
if (btnSort === sortBy) {
|
||||
// Active button
|
||||
btn.classList.add('active');
|
||||
if (icon) {
|
||||
icon.className = sortOrder === 'asc' ? 'bi bi-sort-up' : 'bi bi-sort-down';
|
||||
}
|
||||
} else {
|
||||
// Inactive button
|
||||
btn.classList.remove('active');
|
||||
if (icon) {
|
||||
icon.className = 'bi bi-sort-down'; // Default icon
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function applySortAndFilters() {
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const typeFilter = document.getElementById('typeFilter');
|
||||
|
||||
const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
|
||||
const selectedType = typeFilter ? typeFilter.value : 'ALL';
|
||||
|
||||
// Filter contacts
|
||||
// First, filter contacts
|
||||
filteredContacts = existingContacts.filter(contact => {
|
||||
// Type filter
|
||||
if (selectedType !== 'ALL' && contact.type_label !== selectedType) {
|
||||
@@ -498,7 +755,20 @@ function applyFilters() {
|
||||
return true;
|
||||
});
|
||||
|
||||
// Render filtered contacts
|
||||
// Then, sort filtered contacts
|
||||
filteredContacts.sort((a, b) => {
|
||||
if (sortBy === 'name') {
|
||||
const comparison = a.name.localeCompare(b.name);
|
||||
return sortOrder === 'asc' ? comparison : -comparison;
|
||||
} else if (sortBy === 'last_advert') {
|
||||
const aTime = a.last_seen || 0;
|
||||
const bTime = b.last_seen || 0;
|
||||
return sortOrder === 'desc' ? bTime - aTime : aTime - bTime;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Render sorted and filtered contacts
|
||||
renderExistingList(filteredContacts);
|
||||
}
|
||||
|
||||
@@ -569,7 +839,7 @@ function formatRelativeTime(timestamp) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Get activity status indicator based on last_seen timestamp
|
||||
* Get activity status indicator based on last_advert timestamp
|
||||
* Returns: { icon: string, color: string, title: string }
|
||||
*/
|
||||
function getActivityStatus(timestamp) {
|
||||
@@ -589,7 +859,7 @@ function getActivityStatus(timestamp) {
|
||||
return {
|
||||
icon: '🟢',
|
||||
color: '#28a745',
|
||||
title: 'Active (seen recently)'
|
||||
title: 'Active (advert received recently)'
|
||||
};
|
||||
}
|
||||
|
||||
@@ -654,10 +924,10 @@ function createExistingContactCard(contact, index) {
|
||||
keyDiv.textContent = contact.public_key_prefix;
|
||||
keyDiv.title = 'Public Key Prefix';
|
||||
|
||||
// Last seen row (with activity status indicator)
|
||||
const lastSeenDiv = document.createElement('div');
|
||||
lastSeenDiv.className = 'text-muted small d-flex align-items-center gap-1';
|
||||
lastSeenDiv.style.marginBottom = '0.25rem';
|
||||
// Last advert row (with activity status indicator)
|
||||
const lastAdvertDiv = document.createElement('div');
|
||||
lastAdvertDiv.className = 'text-muted small d-flex align-items-center gap-1';
|
||||
lastAdvertDiv.style.marginBottom = '0.25rem';
|
||||
|
||||
if (contact.last_seen) {
|
||||
const status = getActivityStatus(contact.last_seen);
|
||||
@@ -669,10 +939,10 @@ function createExistingContactCard(contact, index) {
|
||||
statusIcon.title = status.title;
|
||||
|
||||
const timeText = document.createElement('span');
|
||||
timeText.textContent = `Last seen: ${relativeTime}`;
|
||||
timeText.textContent = `Last advert: ${relativeTime}`;
|
||||
|
||||
lastSeenDiv.appendChild(statusIcon);
|
||||
lastSeenDiv.appendChild(timeText);
|
||||
lastAdvertDiv.appendChild(statusIcon);
|
||||
lastAdvertDiv.appendChild(timeText);
|
||||
} else {
|
||||
// No last_seen data available
|
||||
const statusIcon = document.createElement('span');
|
||||
@@ -680,10 +950,10 @@ function createExistingContactCard(contact, index) {
|
||||
statusIcon.style.fontSize = '0.9rem';
|
||||
|
||||
const timeText = document.createElement('span');
|
||||
timeText.textContent = 'Last seen: Unknown';
|
||||
timeText.textContent = 'Last advert: Unknown';
|
||||
|
||||
lastSeenDiv.appendChild(statusIcon);
|
||||
lastSeenDiv.appendChild(timeText);
|
||||
lastAdvertDiv.appendChild(statusIcon);
|
||||
lastAdvertDiv.appendChild(timeText);
|
||||
}
|
||||
|
||||
// Path/mode (optional)
|
||||
@@ -716,7 +986,7 @@ function createExistingContactCard(contact, index) {
|
||||
// Assemble card
|
||||
card.appendChild(infoRow);
|
||||
card.appendChild(keyDiv);
|
||||
card.appendChild(lastSeenDiv);
|
||||
card.appendChild(lastAdvertDiv);
|
||||
if (pathDiv) card.appendChild(pathDiv);
|
||||
card.appendChild(actionsDiv);
|
||||
|
||||
@@ -772,13 +1042,16 @@ async function confirmDelete() {
|
||||
}
|
||||
|
||||
try {
|
||||
// Use contact name for deletion (meshcli remove_contact only works with name)
|
||||
const selector = contactToDelete.name;
|
||||
|
||||
const response = await fetch('/api/contacts/delete', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
selector: contactToDelete.public_key_prefix // Use prefix for reliability
|
||||
selector: selector
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
@@ -244,19 +244,6 @@
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6>Contact Management</h6>
|
||||
<hr>
|
||||
<div class="mb-3">
|
||||
<label for="inactiveHours" class="form-label">Remove contacts inactive for:</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="inactiveHours" value="48" min="1">
|
||||
<span class="input-group-text">hours</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-danger" id="cleanupBtn">
|
||||
<i class="bi bi-trash"></i> Clean Inactive Contacts
|
||||
</button>
|
||||
<hr>
|
||||
<h6>Device Information</h6>
|
||||
<div id="deviceInfo" class="small text-muted">
|
||||
Loading...
|
||||
|
||||
84
app/templates/contacts-existing.html
Normal file
84
app/templates/contacts-existing.html
Normal file
@@ -0,0 +1,84 @@
|
||||
{% extends "contacts_base.html" %}
|
||||
|
||||
{% block title %}Existing Contacts - mc-webui{% endblock %}
|
||||
|
||||
{% block navbar_content %}
|
||||
<span class="navbar-brand mb-0 h1">
|
||||
<i class="bi bi-person-lines-fill"></i> Existing Contacts
|
||||
<span class="badge counter-badge counter-ok rounded-pill" id="contactsCounter" style="display: none;">0 / 350</span>
|
||||
</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-outline-light btn-sm" id="refreshExistingBtn" title="Refresh">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_content %}
|
||||
<div id="existingPageContent">
|
||||
<!-- Back Buttons -->
|
||||
<div class="back-buttons">
|
||||
<button class="btn btn-outline-secondary" onclick="window.location.href='/contacts/manage';">
|
||||
<i class="bi bi-arrow-left"></i> Contact Management
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" onclick="window.location.href='/';">
|
||||
<i class="bi bi-house"></i> Home
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Toolbar -->
|
||||
<div class="search-toolbar">
|
||||
<input type="text" class="form-control" id="searchInput" placeholder="Search by name or public key...">
|
||||
</div>
|
||||
|
||||
<!-- Filter and Sort Toolbar -->
|
||||
<div class="filter-sort-toolbar">
|
||||
<!-- Type Filter -->
|
||||
<select class="form-select" id="typeFilter" style="max-width: 150px;">
|
||||
<option value="ALL">All Types</option>
|
||||
<option value="CLI">CLI</option>
|
||||
<option value="REP">REP</option>
|
||||
<option value="ROOM">ROOM</option>
|
||||
<option value="SENS">SENS</option>
|
||||
</select>
|
||||
|
||||
<!-- Sort Buttons -->
|
||||
<div class="sort-buttons">
|
||||
<button class="sort-btn" data-sort="name" id="sortByName" title="Sort by contact name">
|
||||
<span>Name</span>
|
||||
<i class="bi bi-sort-down"></i>
|
||||
</button>
|
||||
<button class="sort-btn active" data-sort="last_advert" id="sortByLastAdvert" title="Sort by last advertisement time">
|
||||
<span>Last advert</span>
|
||||
<i class="bi bi-sort-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div id="existingLoading" class="text-center py-5" style="display: none;">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-3 text-muted">Loading contacts...</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="existingEmpty" class="empty-state" style="display: none;">
|
||||
<i class="bi bi-inbox"></i>
|
||||
<p class="mb-0">No contacts found</p>
|
||||
<small class="text-muted">Contacts will appear here once added</small>
|
||||
</div>
|
||||
|
||||
<!-- Existing Contacts List (Full-screen) -->
|
||||
<div id="existingList" class="contacts-list-fullscreen">
|
||||
<!-- Dynamically populated by contacts.js -->
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div id="existingError" class="alert alert-danger" style="display: none;" role="alert">
|
||||
<i class="bi bi-exclamation-triangle"></i>
|
||||
<span id="existingErrorMessage">Failed to load contacts</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
91
app/templates/contacts-manage.html
Normal file
91
app/templates/contacts-manage.html
Normal file
@@ -0,0 +1,91 @@
|
||||
{% extends "contacts_base.html" %}
|
||||
|
||||
{% block title %}Contact Management Settings - mc-webui{% endblock %}
|
||||
|
||||
{% block navbar_content %}
|
||||
<span class="navbar-brand mb-0 h1">
|
||||
<i class="bi bi-person-check"></i> Contact Management
|
||||
</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-outline-light btn-sm" onclick="window.location.href='/';" title="Home">
|
||||
<i class="bi bi-house"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_content %}
|
||||
<div id="managePageContent">
|
||||
<!-- Page Header -->
|
||||
<div class="mb-4">
|
||||
<h2 class="mb-1">
|
||||
<i class="bi bi-gear"></i> Settings
|
||||
</h2>
|
||||
<p class="text-muted small mb-0">Configure contact management preferences</p>
|
||||
</div>
|
||||
|
||||
<!-- Manual Approval Settings Section -->
|
||||
<div class="compact-setting">
|
||||
<div class="form-check form-switch mb-0 d-flex align-items-center gap-2">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="manualApprovalSwitch" style="cursor: pointer; min-width: 3rem; min-height: 1.5rem;">
|
||||
<label class="form-check-label mb-0" for="manualApprovalSwitch" style="cursor: pointer; font-weight: 500;">
|
||||
<span id="switchLabel">Loading...</span>
|
||||
</label>
|
||||
</div>
|
||||
<i class="bi bi-info-circle info-icon"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="When enabled, new contacts must be manually approved before they can communicate with your node"></i>
|
||||
</div>
|
||||
|
||||
<!-- Cleanup Inactive Contacts Section -->
|
||||
<div class="cleanup-section">
|
||||
<h6>
|
||||
<i class="bi bi-trash"></i>
|
||||
<span>Cleanup Inactive Contacts</span>
|
||||
<i class="bi bi-info-circle info-icon"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Remove contacts that haven't sent an advertisement in a specified time period"></i>
|
||||
</h6>
|
||||
<div class="mb-3">
|
||||
<label for="inactiveHours" class="form-label">Remove contacts inactive for:</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="inactiveHours" value="48" min="1">
|
||||
<span class="input-group-text">hours</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-danger" id="cleanupBtn">
|
||||
<i class="bi bi-trash"></i> Clean Inactive Contacts
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Section -->
|
||||
<div class="mb-4">
|
||||
<h5 class="mb-3">
|
||||
<i class="bi bi-list-ul"></i> Manage Contacts
|
||||
</h5>
|
||||
|
||||
<!-- Pending Contacts Card -->
|
||||
<div class="nav-card" onclick="window.location.href='/contacts/pending';">
|
||||
<div>
|
||||
<h6><i class="bi bi-hourglass-split"></i> Pending Contacts</h6>
|
||||
<small class="text-muted">Contacts awaiting manual approval</small>
|
||||
</div>
|
||||
<span class="badge bg-primary rounded-pill" id="pendingBadge" style="font-size: 1.1rem;">
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Existing Contacts Card -->
|
||||
<div class="nav-card" onclick="window.location.href='/contacts/existing';">
|
||||
<div>
|
||||
<h6><i class="bi bi-person-lines-fill"></i> Existing Contacts</h6>
|
||||
<small class="text-muted">View and manage your approved contacts</small>
|
||||
</div>
|
||||
<span class="badge counter-badge counter-ok rounded-pill" id="existingBadge" style="font-size: 1.1rem;">
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
63
app/templates/contacts-pending.html
Normal file
63
app/templates/contacts-pending.html
Normal file
@@ -0,0 +1,63 @@
|
||||
{% extends "contacts_base.html" %}
|
||||
|
||||
{% block title %}Pending Contacts - mc-webui{% endblock %}
|
||||
|
||||
{% block navbar_content %}
|
||||
<span class="navbar-brand mb-0 h1">
|
||||
<i class="bi bi-hourglass-split"></i> Pending Contacts
|
||||
<span class="badge bg-light text-dark rounded-pill" id="pendingCountBadge" style="display: none;">0</span>
|
||||
</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-outline-light btn-sm" id="refreshPendingBtn" title="Refresh">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_content %}
|
||||
<div id="pendingPageContent">
|
||||
<!-- Back Buttons -->
|
||||
<div class="back-buttons">
|
||||
<button class="btn btn-outline-secondary" onclick="window.location.href='/contacts/manage';">
|
||||
<i class="bi bi-arrow-left"></i> Contact Management
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" onclick="window.location.href='/';">
|
||||
<i class="bi bi-house"></i> Home
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Page Description -->
|
||||
<div class="mb-3">
|
||||
<p class="text-muted small mb-0">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
Approve or reject contacts waiting for manual approval.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div id="pendingLoading" class="text-center py-5" style="display: none;">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-3 text-muted">Loading pending contacts...</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="pendingEmpty" class="empty-state" style="display: none;">
|
||||
<i class="bi bi-check-circle"></i>
|
||||
<p class="mb-0">No pending requests</p>
|
||||
<small class="text-muted">New contact requests will appear here when manual approval is enabled</small>
|
||||
</div>
|
||||
|
||||
<!-- Pending Contacts List (Full-screen) -->
|
||||
<div id="pendingList" class="contacts-list-fullscreen">
|
||||
<!-- Dynamically populated by contacts.js -->
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div id="pendingError" class="alert alert-danger" style="display: none;" role="alert">
|
||||
<i class="bi bi-exclamation-triangle"></i>
|
||||
<span id="pendingErrorMessage">Failed to load pending contacts</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
432
app/templates/contacts_base.html
Normal file
432
app/templates/contacts_base.html
Normal file
@@ -0,0 +1,432 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>{% block title %}Contact Management - mc-webui{% endblock %}</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon-16x16.png') }}">
|
||||
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
|
||||
<style>
|
||||
/* Mobile-first custom styles for Contact Management */
|
||||
/* Compact manual approval section */
|
||||
.compact-setting {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
color: #6c757d;
|
||||
cursor: help;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.info-icon:hover {
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.pending-contact-card {
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #212529;
|
||||
margin-bottom: 0.5rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.contact-key {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #6c757d;
|
||||
word-break: break-all;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
min-height: 44px; /* Touch-friendly size */
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 1.5rem 1rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state.compact {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.empty-state.compact i {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.info-badge {
|
||||
display: inline-block;
|
||||
background-color: #e7f3ff;
|
||||
color: #0c5460;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Existing Contacts Styles */
|
||||
.existing-contact-card {
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.existing-contact-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contact-info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.counter-badge {
|
||||
font-size: 1rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
}
|
||||
|
||||
.counter-ok {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.counter-warning {
|
||||
background-color: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.counter-alarm {
|
||||
background-color: #dc3545;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-toolbar input,
|
||||
.search-toolbar select {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* Scrollable contacts lists */
|
||||
#pendingList {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#existingList {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-height: calc(100vh - 400px);
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styling */
|
||||
#existingList::-webkit-scrollbar,
|
||||
#pendingList::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-track,
|
||||
#pendingList::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-thumb,
|
||||
#pendingList::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-thumb:hover,
|
||||
#pendingList::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Compact section headers */
|
||||
.section-compact {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* NEW: Full-screen lists for dedicated pages */
|
||||
.contacts-list-fullscreen {
|
||||
height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* NEW: Navigation cards on manage page */
|
||||
.nav-card {
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.nav-card h6 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* NEW: Sort toolbar */
|
||||
.filter-sort-toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sort-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.sort-btn:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.sort-btn.active {
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
|
||||
.sort-btn i {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* NEW: Back buttons */
|
||||
.back-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.back-buttons button {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* NEW: Cleanup section on manage page */
|
||||
.cleanup-section {
|
||||
background-color: #fff3cd;
|
||||
border: 1px solid #ffc107;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cleanup-section h6 {
|
||||
color: #856404;
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Override global overflow: hidden from style.css for Contact Management pages */
|
||||
html, body {
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
main {
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
#existingList {
|
||||
max-height: calc(100vh - 450px);
|
||||
}
|
||||
|
||||
.contacts-list-fullscreen {
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.filter-sort-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.sort-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-dark bg-primary">
|
||||
<div class="container-fluid">
|
||||
{% block navbar_content %}
|
||||
<span class="navbar-brand mb-0 h1">
|
||||
<i class="bi bi-person-check"></i> Contact Management
|
||||
</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-outline-light btn-sm" onclick="window.location.href='/';" title="Home">
|
||||
<i class="bi bi-house"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
<div class="container-fluid px-3 py-4">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-8 mx-auto">
|
||||
{% block page_content %}
|
||||
<!-- Content will be provided by child templates -->
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Delete Confirmation Modal (shared across all contact pages) -->
|
||||
<div class="modal fade" id="deleteContactModal" tabindex="-1" aria-labelledby="deleteContactModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-danger text-white">
|
||||
<h5 class="modal-title" id="deleteContactModalLabel">
|
||||
<i class="bi bi-exclamation-triangle"></i> Confirm Delete
|
||||
</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="mb-2">Are you sure you want to delete this contact?</p>
|
||||
<div class="alert alert-warning mb-0">
|
||||
<strong id="deleteContactName"></strong><br>
|
||||
<small class="font-monospace" id="deleteContactKey"></small>
|
||||
</div>
|
||||
<p class="text-muted small mt-2 mb-0">This action cannot be undone.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">
|
||||
<i class="bi bi-trash"></i> Delete Contact
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast container for notifications (shared across all contact pages) -->
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div id="contactToast" class="toast" role="alert">
|
||||
<div class="toast-header">
|
||||
<strong class="me-auto">Contact Management</strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
|
||||
</div>
|
||||
<div class="toast-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap 5 JS Bundle -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Contact Management JavaScript -->
|
||||
<script src="{{ url_for('static', filename='js/contacts.js') }}"></script>
|
||||
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
BIN
clients.json
Normal file
BIN
clients.json
Normal file
Binary file not shown.
91
docs/github-response-spaces-in-device-name.md
Normal file
91
docs/github-response-spaces-in-device-name.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# GitHub Issue Response: Spaces in MC_DEVICE_NAME
|
||||
|
||||
**Issue:** User @remowashere reported that the application fails when `MC_DEVICE_NAME` contains spaces (e.g., "Remo WebUI"), resulting in "file not found" errors for `.msgs` files.
|
||||
|
||||
---
|
||||
|
||||
Hi @remowashere,
|
||||
|
||||
Thanks for reporting this issue! I've investigated the problem with spaces in `MC_DEVICE_NAME` and did some testing.
|
||||
|
||||
**Good news:** The current version of mc-webui (on both `dev` and `main` branches) handles spaces in device names correctly. I tested with `MC_DEVICE_NAME="MarWoj Test"` and the application successfully reads the `.msgs` file without any issues:
|
||||
|
||||
```
|
||||
mc-webui | INFO - Loaded 1 messages from /root/.config/meshcore/MarWoj Test.msgs
|
||||
```
|
||||
|
||||
The application uses Python's `pathlib.Path` for file operations, which properly handles spaces and special characters in filenames.
|
||||
|
||||
## Possible causes of your issue
|
||||
|
||||
1. **Outdated version** - You might be running an older version of the application
|
||||
2. **meshcore-cli version** - Older versions of meshcore-cli might have had issues creating files with spaces
|
||||
3. **Configuration issue** - The `MC_DEVICE_NAME` environment variable might not match the actual device name used by meshcore-cli
|
||||
4. **File permissions** - The `.msgs` file might not have been created yet or lacks proper permissions
|
||||
|
||||
## Recommended steps
|
||||
|
||||
### 1. Update to the latest version
|
||||
|
||||
```bash
|
||||
cd ~/mc-webui
|
||||
git pull origin main
|
||||
docker compose down
|
||||
docker compose up -d --build
|
||||
```
|
||||
|
||||
### 2. Verify your configuration
|
||||
|
||||
```bash
|
||||
# Check your .env file
|
||||
cat .env | grep MC_DEVICE_NAME
|
||||
|
||||
# List actual .msgs files
|
||||
ls -la ~/.config/meshcore/*.msgs
|
||||
```
|
||||
|
||||
**Important:** Make sure the value of `MC_DEVICE_NAME` in your `.env` file matches the device name configured in meshcore-cli. The `.msgs` file is created by meshcore-cli using the device name you configured on the device itself.
|
||||
|
||||
### 3. Check logs for more details
|
||||
|
||||
```bash
|
||||
docker compose logs -f mc-webui | grep -i "messages file"
|
||||
```
|
||||
|
||||
Look for log lines indicating which file path the application is trying to access and whether it exists.
|
||||
|
||||
### 4. Verify meshcore-cli version
|
||||
|
||||
The application requires meshcore-cli >= 1.3.12. The Docker container installs the latest version automatically, but if you're running an older version, please update.
|
||||
|
||||
## Additional troubleshooting
|
||||
|
||||
If you're still experiencing issues after updating, please share:
|
||||
|
||||
1. **Docker logs:**
|
||||
```bash
|
||||
docker compose logs --tail=100 mc-webui
|
||||
docker compose logs --tail=100 meshcore-bridge
|
||||
```
|
||||
|
||||
2. **Git version:**
|
||||
```bash
|
||||
git log -1 --oneline
|
||||
```
|
||||
|
||||
3. **Environment configuration** (with sensitive data redacted):
|
||||
```bash
|
||||
cat .env
|
||||
```
|
||||
|
||||
4. **Actual .msgs files on disk:**
|
||||
```bash
|
||||
ls -la ~/.config/meshcore/ | grep .msgs
|
||||
```
|
||||
|
||||
This information will help me understand exactly what's happening in your environment.
|
||||
|
||||
Let me know if updating resolves the issue!
|
||||
|
||||
Best regards,
|
||||
Marek
|
||||
Reference in New Issue
Block a user