Remove URL params - use localStorage for auth
- HUD reads businessId from localStorage instead of ?b= param - Portal opens HUD/quick-tasks without URL params - Business select auto-proceeds on selection (no button needed) - Quick tasks reads from payfrit_portal_business localStorage Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
John Mizerek
parent
f96d8f4fe3
commit
51e979a679
4 changed files with 1278 additions and 106 deletions
|
|
@ -12,7 +12,7 @@ const HUD = {
|
|||
pollInterval: 1000, // Poll every second for smooth animation
|
||||
targetSeconds: 60, // Target time to accept a task
|
||||
apiBaseUrl: '/api/tasks', // API endpoint
|
||||
businessId: parseInt(new URLSearchParams(window.location.search).get('b')) || 47,
|
||||
businessId: parseInt(localStorage.getItem('payfrit_portal_business')) || 0,
|
||||
},
|
||||
|
||||
// State
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@
|
|||
<div class="login-header">
|
||||
<div class="login-logo">P</div>
|
||||
<h1>Business Portal</h1>
|
||||
<p>Sign in to manage your business</p>
|
||||
<p>Sign in or enter your phone number to create an account</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Login -->
|
||||
|
|
@ -210,16 +210,14 @@
|
|||
|
||||
<!-- Step 2: Select Business -->
|
||||
<div class="step" id="step-business">
|
||||
<form class="login-form" id="businessForm">
|
||||
<div class="login-form">
|
||||
<div class="form-group">
|
||||
<label for="businessSelect">Select Business</label>
|
||||
<select id="businessSelect" class="business-select" required>
|
||||
<select id="businessSelect" class="business-select" onchange="PortalLogin.selectBusiness()">
|
||||
<option value="">Choose a business...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="login-btn" id="continueBtn">Continue</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
989
portal/portal.js
989
portal/portal.js
File diff suppressed because it is too large
Load diff
383
portal/quick-tasks.html
Normal file
383
portal/quick-tasks.html
Normal file
|
|
@ -0,0 +1,383 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Quick Tasks</title>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.quick-tasks-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.quick-task-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px 16px;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-height: 140px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quick-task-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.quick-task-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.quick-task-btn .material-icons {
|
||||
font-size: 40px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.quick-task-btn .name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.quick-task-btn .category {
|
||||
font-size: 11px;
|
||||
margin-top: 8px;
|
||||
opacity: 0.8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.quick-task-btn.creating {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.quick-task-btn.creating::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.loading .material-icons {
|
||||
font-size: 48px;
|
||||
animation: spin 1s linear infinite;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state .material-icons {
|
||||
font-size: 64px;
|
||||
color: #ddd;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
background: #333;
|
||||
color: #fff;
|
||||
padding: 14px 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast.success { background: #059669; }
|
||||
.toast.error { background: #dc2626; }
|
||||
|
||||
.toast .material-icons {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #4f46e5;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Ripple effect */
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.4);
|
||||
transform: scale(0);
|
||||
animation: ripple 0.6s linear;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.quick-tasks-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.quick-task-btn {
|
||||
min-height: 120px;
|
||||
padding: 20px 12px;
|
||||
}
|
||||
|
||||
.quick-task-btn .material-icons {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.quick-task-btn .name {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<a href="index.html" class="back-link">
|
||||
<span class="material-icons">arrow_back</span> Back to Portal
|
||||
</a>
|
||||
<h1>Quick Tasks</h1>
|
||||
<p>Tap to instantly create a task</p>
|
||||
</div>
|
||||
|
||||
<div id="quickTasksContainer" class="loading">
|
||||
<span class="material-icons">sync</span>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
|
||||
<div id="toast" class="toast"></div>
|
||||
|
||||
<script>
|
||||
const QuickTasks = {
|
||||
apiBaseUrl: '/api',
|
||||
businessId: null,
|
||||
|
||||
async init() {
|
||||
// Get businessId from localStorage (set by portal login)
|
||||
this.businessId = localStorage.getItem('payfrit_portal_business');
|
||||
|
||||
if (!this.businessId) {
|
||||
this.showError('Not logged in. Please sign in from the main portal.');
|
||||
return;
|
||||
}
|
||||
|
||||
await this.loadQuickTasks();
|
||||
},
|
||||
|
||||
async loadQuickTasks() {
|
||||
try {
|
||||
const response = await fetch(`${this.apiBaseUrl}/admin/quickTasks/list.cfm`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ BusinessID: this.businessId })
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.OK) {
|
||||
this.render(data.TEMPLATES || []);
|
||||
} else {
|
||||
this.showError(data.MESSAGE || 'Failed to load quick tasks');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading quick tasks:', err);
|
||||
this.showError('Could not connect to server');
|
||||
}
|
||||
},
|
||||
|
||||
render(templates) {
|
||||
const container = document.getElementById('quickTasksContainer');
|
||||
|
||||
if (!templates.length) {
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<span class="material-icons">touch_app</span>
|
||||
<p>No quick tasks configured yet.</p>
|
||||
<p style="margin-top:8px;font-size:13px;">Add them from the admin portal.</p>
|
||||
</div>
|
||||
`;
|
||||
container.className = '';
|
||||
return;
|
||||
}
|
||||
|
||||
container.className = 'quick-tasks-grid';
|
||||
container.innerHTML = templates.map(t => {
|
||||
const bgColor = t.Color || '#6366f1';
|
||||
// Determine if text should be light or dark based on background
|
||||
const isLight = this.isLightColor(bgColor);
|
||||
const textColor = isLight ? '#1a1a1a' : '#ffffff';
|
||||
|
||||
return `
|
||||
<button class="quick-task-btn"
|
||||
data-id="${t.QuickTaskTemplateID}"
|
||||
style="background:${bgColor}; color:${textColor};"
|
||||
onclick="QuickTasks.createTask(${t.QuickTaskTemplateID}, this)">
|
||||
<span class="material-icons">${t.Icon || 'add_box'}</span>
|
||||
<span class="name">${this.escapeHtml(t.Name)}</span>
|
||||
${t.CategoryName ? `<span class="category">${this.escapeHtml(t.CategoryName)}</span>` : ''}
|
||||
</button>
|
||||
`;
|
||||
}).join('');
|
||||
},
|
||||
|
||||
async createTask(templateId, btn) {
|
||||
// Add creating state
|
||||
btn.classList.add('creating');
|
||||
|
||||
// Add ripple effect
|
||||
this.addRipple(btn, event);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${this.apiBaseUrl}/admin/quickTasks/create.cfm`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
BusinessID: this.businessId,
|
||||
QuickTaskTemplateID: templateId
|
||||
})
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.OK) {
|
||||
this.toast('Task created!', 'success');
|
||||
} else {
|
||||
this.toast(data.MESSAGE || 'Failed to create task', 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error creating task:', err);
|
||||
this.toast('Could not connect to server', 'error');
|
||||
} finally {
|
||||
btn.classList.remove('creating');
|
||||
}
|
||||
},
|
||||
|
||||
addRipple(btn, e) {
|
||||
const ripple = document.createElement('span');
|
||||
ripple.className = 'ripple';
|
||||
const rect = btn.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height);
|
||||
ripple.style.width = ripple.style.height = size + 'px';
|
||||
ripple.style.left = (e?.clientX || rect.left + rect.width/2) - rect.left - size/2 + 'px';
|
||||
ripple.style.top = (e?.clientY || rect.top + rect.height/2) - rect.top - size/2 + 'px';
|
||||
btn.appendChild(ripple);
|
||||
setTimeout(() => ripple.remove(), 600);
|
||||
},
|
||||
|
||||
isLightColor(color) {
|
||||
const hex = color.replace('#', '');
|
||||
const r = parseInt(hex.substr(0, 2), 16);
|
||||
const g = parseInt(hex.substr(2, 2), 16);
|
||||
const b = parseInt(hex.substr(4, 2), 16);
|
||||
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
||||
return luminance > 0.6;
|
||||
},
|
||||
|
||||
escapeHtml(str) {
|
||||
if (!str) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
},
|
||||
|
||||
showError(message) {
|
||||
const container = document.getElementById('quickTasksContainer');
|
||||
container.className = 'empty-state';
|
||||
container.innerHTML = `
|
||||
<span class="material-icons">error_outline</span>
|
||||
<p>${this.escapeHtml(message)}</p>
|
||||
`;
|
||||
},
|
||||
|
||||
toast(message, type = 'info') {
|
||||
const toast = document.getElementById('toast');
|
||||
const icon = type === 'success' ? 'check_circle' : (type === 'error' ? 'error' : 'info');
|
||||
toast.innerHTML = `<span class="material-icons">${icon}</span> ${this.escapeHtml(message)}`;
|
||||
toast.className = `toast ${type} show`;
|
||||
setTimeout(() => toast.classList.remove('show'), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize on load
|
||||
document.addEventListener('DOMContentLoaded', () => QuickTasks.init());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in a new issue