51e979a679
- 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>
383 lines
10 KiB
HTML
383 lines
10 KiB
HTML
<!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>
|