feat(notes): multi-attachment support, card icons, and inline previews\n\n- Allow selecting and uploading multiple attachments per note (images, videos, docs)\n- Batch audio segments and files into PocketBase multi-file field (Attachments.file)\n- Fallback to read files directly from input; per-file error logging\n- Note cards show clickable attachment-type icons (image/video/file/audio)\n- Inline preview panel in notes list + full attachment rendering in detail\n- Keep existing Notes/Attachments collections and pb_id association
This commit is contained in:
+488
-27
@@ -62,6 +62,7 @@
|
||||
<div class="flex gap-2">
|
||||
<button id="refreshNotesBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Refresh</button>
|
||||
<button id="newNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Note</button>
|
||||
<button id="conversationsBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Conversations</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mt-3">
|
||||
@@ -74,6 +75,14 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Attachment preview panel -->
|
||||
<div id="notesAttachmentPreviewPanel" class="hidden mt-3 rounded-xl border border-purple-200 bg-white shadow p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div id="notesAttachmentPreviewTitle" class="text-sm font-semibold text-gray-800">Attachment Preview</div>
|
||||
<button id="notesAttachmentPreviewClose" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm">Close</button>
|
||||
</div>
|
||||
<div id="notesAttachmentPreviewContent" class="space-y-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div id="notesListStatus" class="text-sm text-gray-600"></div>
|
||||
@@ -101,6 +110,11 @@
|
||||
<audio id="noteDetailAudio" controls class="hidden w-full"></audio>
|
||||
<div id="noteDetailAudioStatus" class="text-xs text-gray-500"></div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="text-sm text-gray-600">Attachments</div>
|
||||
<div id="noteDetailAttachments" class="space-y-1 text-sm text-gray-800"></div>
|
||||
<div id="noteDetailAttachmentsStatus" class="text-xs text-gray-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -158,15 +172,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="space-y-2 relative pb-32">
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="recordBtn" class="px-4 py-2 rounded bg-primary text-white font-semibold disabled:opacity-50">Record Audio</button>
|
||||
<button id="stopBtn" class="hidden w-10 h-10 flex items-center justify-center rounded-full bg-red-600 text-white shadow disabled:opacity-50" title="Stop recording" disabled>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<rect x="5" y="5" width="10" height="10" rx="2"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button id="recordBtn" class="absolute bottom-12 right-0 w-24 h-24 rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-shadow disabled:opacity-50 border-4 border-white bg-white" title="Click to record audio">
|
||||
<img src="images/prism.png" alt="Prism" class="w-full h-full object-cover object-center scale-125">
|
||||
</button>
|
||||
<div class="relative">
|
||||
<audio id="audioPreview" class="hidden" preload="metadata"></audio>
|
||||
<div id="audioPlayer" class="hidden mt-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-3 shadow-sm">
|
||||
@@ -194,12 +210,146 @@
|
||||
</div>
|
||||
<div id="recordStatus" class="text-xs text-gray-500"></div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-gray-700">Attachments</label>
|
||||
<input id="noteAttachmentsInput" type="file" multiple class="w-full text-sm" accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt">
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="clearAttachmentsBtn" class="px-3 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm" type="button">Clear</button>
|
||||
<div id="noteAttachmentsSummary" class="text-xs text-gray-600">No attachments selected.</div>
|
||||
</div>
|
||||
<div id="noteAttachmentsList" class="space-y-1"></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="submitNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Note</button>
|
||||
<div id="submitStatus" class="text-sm text-gray-600"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversations List Container -->
|
||||
<div id="conversationsContainer" class="hidden flex flex-col bg-purple-100 rounded-2xl shadow-2xl border border-purple-200 max-w-5xl w-full p-6 gap-4 flex-1 overflow-hidden mt-2.5 mb-3">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-800">Conversations</h2>
|
||||
<p class="text-sm text-gray-600">Browse all conversations.</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="backToListFromConversationsBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
|
||||
<button id="newConversationBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Conversation</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div id="conversationsListStatus" class="text-sm text-gray-600"></div>
|
||||
<div id="conversationsEmpty" class="hidden text-sm text-gray-500">No conversations yet. Click New Conversation to start one.</div>
|
||||
<div id="conversationsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conversation Form Container -->
|
||||
<div id="conversationContainer" class="hidden self-start bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="backToConversationsListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Conversations</button>
|
||||
<h2 class="text-2xl font-bold text-gray-800">New Conversation</h2>
|
||||
</div>
|
||||
<span id="conversationGraphStatus" class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600">Graph: checking…</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="conversationTitle" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
|
||||
<div class="relative">
|
||||
<input type="text" id="conversationTitle" class="w-full rounded-lg border border-gray-300 p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter conversation title (optional)">
|
||||
<button id="conversationTitleVoiceBtn" class="absolute right-3 top-1/2 -translate-y-1/2 text-purple-600 hover:text-purple-700 transition-colors" title="Click to speak title">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1">
|
||||
<label for="conversationIsJobConversation" class="block text-sm font-medium text-gray-700 mb-1">Job Conversation</label>
|
||||
<select id="conversationIsJobConversation" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary">
|
||||
<option value="no">No</option>
|
||||
<option value="yes">Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label for="conversationType" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
|
||||
<select id="conversationType" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary">
|
||||
<option value="personal">Personal</option>
|
||||
<option value="manager">Manager</option>
|
||||
<option value="job">Job</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="conversationJobNumberContainer" class="hidden">
|
||||
<label for="conversationJobNumber" class="block text-sm font-medium text-gray-700 mb-1">Job Number <span class="text-red-600">*</span></label>
|
||||
<input type="text" id="conversationJobNumber" class="w-full rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter job number (required)">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="conversationText" class="block text-sm font-medium text-gray-700 mb-1">Conversation Text</label>
|
||||
<div class="relative">
|
||||
<textarea id="conversationText" rows="4" class="w-full rounded-lg border border-gray-300 p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Type your conversation or click speaker icon to dictate..."></textarea>
|
||||
<button id="conversationVoiceBtn" class="absolute right-3 top-3 text-purple-600 hover:text-purple-700 transition-colors" title="Click to speak conversation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 relative pb-32">
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="conversationStopBtn" class="hidden w-10 h-10 flex items-center justify-center rounded-full bg-red-600 text-white shadow disabled:opacity-50" title="Stop recording" disabled>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<rect x="5" y="5" width="10" height="10" rx="2"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button id="conversationRecordBtn" class="absolute bottom-12 right-0 w-24 h-24 rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-shadow disabled:opacity-50 border-4 border-white bg-white" title="Click to record audio">
|
||||
<img src="images/prism.png" alt="Prism" class="w-full h-full object-cover object-center scale-125">
|
||||
</button>
|
||||
<div class="relative">
|
||||
<audio id="conversationAudioPreview" class="hidden" preload="metadata"></audio>
|
||||
<div id="conversationAudioPlayer" class="hidden mt-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-3 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="conversationPlayPauseBtn" class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-white shadow" title="Play">
|
||||
▶
|
||||
</button>
|
||||
<div class="flex-1">
|
||||
<div class="h-2 bg-gray-200 rounded-full overflow-hidden cursor-pointer" id="conversationProgressTrack">
|
||||
<div id="conversationProgressFill" class="h-full bg-primary w-0"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-600 mt-1">
|
||||
<span id="conversationCurrentTime">0:00</span>
|
||||
<span id="conversationDurationTime">0:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="conversationAudioMenuContainer" class="relative">
|
||||
<button id="conversationAudioMenuBtn" class="px-2 py-1 rounded bg-white text-gray-700 hover:bg-gray-100 border border-gray-200" title="More options">⋯</button>
|
||||
<div id="conversationAudioMenu" class="hidden absolute right-0 mt-1 w-36 rounded border border-gray-200 bg-white shadow-lg">
|
||||
<button id="conversationRemoveAudioBtn" class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100">Remove audio</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="conversationRecordStatus" class="text-xs text-gray-500"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="submitConversationBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Conversation</button>
|
||||
<div id="conversationSubmitStatus" class="text-sm text-gray-600"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
|
||||
<script>
|
||||
const APP_VERSION = '1.0.0-alpha3';
|
||||
@@ -224,6 +374,7 @@
|
||||
let isNoteRecognizing = false;
|
||||
let silenceTimer = null;
|
||||
let searchSilenceTimer = null;
|
||||
let pendingNoteAttachments = [];
|
||||
|
||||
// --- Voice Recognition Setup with auto-stop ---
|
||||
function setupTitleVoiceRecognition() {
|
||||
@@ -493,6 +644,54 @@
|
||||
}
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (!Number.isFinite(bytes) || bytes <= 0) return '';
|
||||
const units = ['B', 'KB', 'MB', 'GB'];
|
||||
let value = bytes;
|
||||
let unitIndex = 0;
|
||||
while (value >= 1024 && unitIndex < units.length - 1) {
|
||||
value /= 1024;
|
||||
unitIndex += 1;
|
||||
}
|
||||
const decimals = value >= 10 ? 0 : 1;
|
||||
return `${value.toFixed(decimals)} ${units[unitIndex]}`;
|
||||
}
|
||||
|
||||
function attachmentKindFromName(name) {
|
||||
const ext = (name || '').split('.').pop()?.toLowerCase();
|
||||
if (!ext) return 'file';
|
||||
if (['mp3', 'wav', 'm4a', 'aac', 'ogg', 'webm'].includes(ext)) return 'audio';
|
||||
if (['mp4', 'mov', 'mkv', 'avi', 'm4v', 'webm'].includes(ext)) return 'video';
|
||||
if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg'].includes(ext)) return 'image';
|
||||
return 'file';
|
||||
}
|
||||
|
||||
function getAttachmentFileNames(att) {
|
||||
const val = att[ATTACHMENTS_FILE_FIELD];
|
||||
if (!val) return [];
|
||||
return Array.isArray(val) ? val : [val];
|
||||
}
|
||||
|
||||
function buildKindSetFromAttachments(atts) {
|
||||
const kinds = new Set();
|
||||
(atts || []).forEach((att) => {
|
||||
getAttachmentFileNames(att).forEach((name) => kinds.add(attachmentKindFromName(name)));
|
||||
});
|
||||
return kinds;
|
||||
}
|
||||
|
||||
function findFirstAttachmentByKind(atts, kind) {
|
||||
for (const att of (atts || [])) {
|
||||
const names = getAttachmentFileNames(att);
|
||||
for (const name of names) {
|
||||
if (attachmentKindFromName(name) === kind) {
|
||||
return { att, name, url: pb.files.getURL(att, name) };
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Update auth UI based on login state
|
||||
function updateAuthUI() {
|
||||
const loginContainer = document.getElementById('loginContainer');
|
||||
@@ -501,6 +700,8 @@
|
||||
const notesListContainer = document.getElementById('notesListContainer');
|
||||
const noteDetailContainer = document.getElementById('noteDetailContainer');
|
||||
const noteContainer = document.getElementById('noteContainer');
|
||||
const conversationsContainer = document.getElementById('conversationsContainer');
|
||||
const conversationContainer = document.getElementById('conversationContainer');
|
||||
if (pb.authStore.isValid) {
|
||||
loginContainer.classList.add('hidden');
|
||||
userDisplay.classList.remove('hidden');
|
||||
@@ -508,6 +709,8 @@
|
||||
notesListContainer.classList.remove('hidden');
|
||||
noteDetailContainer.classList.add('hidden');
|
||||
noteContainer.classList.add('hidden');
|
||||
conversationsContainer.classList.add('hidden');
|
||||
conversationContainer.classList.add('hidden');
|
||||
loadNotesList();
|
||||
} else {
|
||||
loginContainer.classList.remove('hidden');
|
||||
@@ -517,6 +720,8 @@
|
||||
notesListContainer.classList.add('hidden');
|
||||
noteDetailContainer.classList.add('hidden');
|
||||
noteContainer.classList.add('hidden');
|
||||
conversationsContainer.classList.add('hidden');
|
||||
conversationContainer.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -538,22 +743,48 @@
|
||||
console.log('✓ Backend health check passed');
|
||||
}
|
||||
const graphBadge = document.getElementById('graphStatus');
|
||||
const conversationGraphBadge = document.getElementById('conversationGraphStatus');
|
||||
const graphResp = await fetch('/api/graph/status');
|
||||
if (graphResp.ok) {
|
||||
const gs = await graphResp.json();
|
||||
graphBadge.textContent = `Graph: active (exp ${new Date(gs.expiresOnISO).toLocaleTimeString()})`;
|
||||
graphBadge.className = 'text-xs px-2 py-1 rounded bg-green-100 text-green-700';
|
||||
const txt = `Graph: active (exp ${new Date(gs.expiresOnISO).toLocaleTimeString()})`;
|
||||
const cls = 'text-xs px-2 py-1 rounded bg-green-100 text-green-700';
|
||||
if (graphBadge) {
|
||||
graphBadge.textContent = txt;
|
||||
graphBadge.className = cls;
|
||||
}
|
||||
if (conversationGraphBadge) {
|
||||
conversationGraphBadge.textContent = txt;
|
||||
conversationGraphBadge.className = cls;
|
||||
}
|
||||
console.log('✓ Graph token active');
|
||||
} else {
|
||||
graphBadge.textContent = 'Graph: error';
|
||||
graphBadge.className = 'text-xs px-2 py-1 rounded bg-red-100 text-red-700';
|
||||
const txt = 'Graph: error';
|
||||
const cls = 'text-xs px-2 py-1 rounded bg-red-100 text-red-700';
|
||||
if (graphBadge) {
|
||||
graphBadge.textContent = txt;
|
||||
graphBadge.className = cls;
|
||||
}
|
||||
if (conversationGraphBadge) {
|
||||
conversationGraphBadge.textContent = txt;
|
||||
conversationGraphBadge.className = cls;
|
||||
}
|
||||
console.log('❌ Graph token status failed');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to check backend:', error.message);
|
||||
const graphBadge = document.getElementById('graphStatus');
|
||||
graphBadge.textContent = 'Graph: error';
|
||||
graphBadge.className = 'text-xs px-2 py-1 rounded bg-red-100 text-red-700';
|
||||
const conversationGraphBadge = document.getElementById('conversationGraphStatus');
|
||||
const txt = 'Graph: error';
|
||||
const cls = 'text-xs px-2 py-1 rounded bg-red-100 text-red-700';
|
||||
if (graphBadge) {
|
||||
graphBadge.textContent = txt;
|
||||
graphBadge.className = cls;
|
||||
}
|
||||
if (conversationGraphBadge) {
|
||||
conversationGraphBadge.textContent = txt;
|
||||
conversationGraphBadge.className = cls;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -987,12 +1218,59 @@
|
||||
document.getElementById('notesListContainer').classList.remove('hidden');
|
||||
document.getElementById('noteDetailContainer').classList.add('hidden');
|
||||
document.getElementById('noteContainer').classList.add('hidden');
|
||||
document.getElementById('conversationsContainer').classList.add('hidden');
|
||||
document.getElementById('conversationContainer').classList.add('hidden');
|
||||
}
|
||||
|
||||
function showNoteForm() {
|
||||
document.getElementById('notesListContainer').classList.add('hidden');
|
||||
document.getElementById('noteDetailContainer').classList.add('hidden');
|
||||
document.getElementById('noteContainer').classList.remove('hidden');
|
||||
document.getElementById('conversationsContainer').classList.add('hidden');
|
||||
document.getElementById('conversationContainer').classList.add('hidden');
|
||||
}
|
||||
|
||||
function showConversations() {
|
||||
document.getElementById('notesListContainer').classList.add('hidden');
|
||||
document.getElementById('noteDetailContainer').classList.add('hidden');
|
||||
document.getElementById('noteContainer').classList.add('hidden');
|
||||
document.getElementById('conversationsContainer').classList.remove('hidden');
|
||||
document.getElementById('conversationContainer').classList.add('hidden');
|
||||
}
|
||||
|
||||
function showConversationForm() {
|
||||
document.getElementById('notesListContainer').classList.add('hidden');
|
||||
document.getElementById('noteDetailContainer').classList.add('hidden');
|
||||
document.getElementById('noteContainer').classList.add('hidden');
|
||||
document.getElementById('conversationsContainer').classList.add('hidden');
|
||||
document.getElementById('conversationContainer').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function renderNoteAttachmentsList() {
|
||||
const listEl = document.getElementById('noteAttachmentsList');
|
||||
const summaryEl = document.getElementById('noteAttachmentsSummary');
|
||||
listEl.innerHTML = '';
|
||||
if (!pendingNoteAttachments.length) {
|
||||
summaryEl.textContent = 'No attachments selected.';
|
||||
return;
|
||||
}
|
||||
summaryEl.textContent = `${pendingNoteAttachments.length} file(s) selected`;
|
||||
const frag = document.createDocumentFragment();
|
||||
pendingNoteAttachments.forEach((file) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'flex items-center gap-2 text-sm text-gray-800';
|
||||
const kind = attachmentKindFromName(file.name);
|
||||
const badge = document.createElement('span');
|
||||
badge.className = 'px-2 py-0.5 rounded-full text-xs border border-gray-200 text-gray-700 bg-gray-50';
|
||||
badge.textContent = kind;
|
||||
const label = document.createElement('span');
|
||||
const size = formatBytes(file.size);
|
||||
label.textContent = size ? `${file.name} (${size})` : file.name;
|
||||
row.appendChild(badge);
|
||||
row.appendChild(label);
|
||||
frag.appendChild(row);
|
||||
});
|
||||
listEl.appendChild(frag);
|
||||
}
|
||||
|
||||
function resetNoteForm() {
|
||||
@@ -1003,6 +1281,21 @@
|
||||
document.getElementById('jobNumber').value = '';
|
||||
document.getElementById('jobNumberContainer').classList.add('hidden');
|
||||
clearAudio();
|
||||
pendingNoteAttachments = [];
|
||||
const noteAttachmentsInput = document.getElementById('noteAttachmentsInput');
|
||||
if (noteAttachmentsInput) noteAttachmentsInput.value = '';
|
||||
renderNoteAttachmentsList();
|
||||
}
|
||||
|
||||
function resetConversationForm() {
|
||||
document.getElementById('conversationTitle').value = '';
|
||||
document.getElementById('conversationText').value = '';
|
||||
document.getElementById('conversationIsJobConversation').value = 'no';
|
||||
document.getElementById('conversationType').value = 'personal';
|
||||
document.getElementById('conversationJobNumber').value = '';
|
||||
document.getElementById('conversationJobNumberContainer').classList.add('hidden');
|
||||
document.getElementById('conversationAudioPreview').src = '';
|
||||
document.getElementById('conversationAudioPlayer').classList.add('hidden');
|
||||
}
|
||||
|
||||
function renderNotesList(items) {
|
||||
@@ -1030,15 +1323,21 @@
|
||||
const plain = note[NOTE_BODY_PLAIN_FIELD] || (note[NOTE_BODY_HTML_FIELD] ? htmlToPlainText(note[NOTE_BODY_HTML_FIELD]) : '');
|
||||
const snippet = (plain || '').slice(0, 160) + ((plain && plain.length > 160) ? '…' : '');
|
||||
const meta = `${note.type || 'personal'} • ${note.job_note ? 'Job' : 'General'}${note.Job_Number ? ' • #' + note.Job_Number : ''}`;
|
||||
const attachmentCount = (note._attachments || []).length;
|
||||
const attachmentBadge = attachmentCount ? `
|
||||
<div class="flex items-center gap-1 text-purple-700 text-xs">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M5 8.25a.75.75 0 0 1 .75.75v4.25a3.5 3.5 0 1 0 7 0V6.5a2.25 2.25 0 0 0-4.5 0v5.75a1 1 0 1 0 2 0V7.25a.75.75 0 0 1 1.5 0v5a2.5 2.5 0 1 1-5 0V6.5a3.75 3.75 0 0 1 7.5 0v6.75a5 5 0 1 1-10 0V9a.75.75 0 0 1 .75-.75Z" />
|
||||
</svg>
|
||||
<span>${attachmentCount}</span>
|
||||
</div>
|
||||
` : '';
|
||||
const atts = note._attachments || [];
|
||||
const typeSet = buildKindSetFromAttachments(atts);
|
||||
function iconBtnHtml(kind) {
|
||||
const map = {
|
||||
image: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M4.5 6A1.5 1.5 0 0 1 6 4.5h12A1.5 1.5 0 0 1 19.5 6v12a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 18V6Zm2 10l3.75-5 3 4 2.25-3 3 4.5H6.5Z"/></svg>',
|
||||
video: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6.75A1.75 1.75 0 0 1 5.75 5h7.5A1.75 1.75 0 0 1 15 6.75v10.5A1.75 1.75 0 0 1 13.25 19h-7.5A1.75 1.75 0 0 1 4 17.25V6.75Zm12.5.5 3.75 2.25v5l-3.75 2.25V7.25Z"/></svg>',
|
||||
audio: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M9 5.25a.75.75 0 0 1 .75-.75h.5A3.75 3.75 0 0 1 14 8.25v6a3.75 3.75 0 0 1-3.75 3.75h-.5A.75.75 0 0 1 9 17.25V5.25Zm7.75 3a.75.75 0 0 1 1.25.57v5.36a.75.75 0 0 1-1.25.57l-2.5-1.79a.75.75 0 0 1 0-1.21l2.5-1.5Z"/></svg>',
|
||||
file: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M6.75 3A1.75 1.75 0 0 0 5 4.75v14.5A1.75 1.75 0 0 0 6.75 21h10.5A1.75 1.75 0 0 0 19 19.25V8.5l-5.5-5.5H6.75Z"/></svg>',
|
||||
};
|
||||
return `<button type="button" class="px-1.5 py-1 rounded bg-white/70 hover:bg-white border border-gray-200 text-purple-700" data-attachment-button data-attachment-kind="${kind}">${map[kind] || ''}</button>`;
|
||||
}
|
||||
const attachmentIcons = ['image', 'video', 'file', 'audio']
|
||||
.filter((k) => typeSet.has(k))
|
||||
.map(iconBtnHtml)
|
||||
.join('');
|
||||
card.innerHTML = `
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="font-semibold text-gray-900 truncate">${escapeHtml(title)}</div>
|
||||
@@ -1047,7 +1346,7 @@
|
||||
<div class="text-sm text-gray-700 line-clamp-3 flex-1">${escapeHtml(snippet || '(empty)')}</div>
|
||||
<div class="flex items-center justify-between text-xs text-gray-600">
|
||||
<span>${escapeHtml(meta)}</span>
|
||||
${attachmentBadge}
|
||||
<div class="flex items-center gap-1">${attachmentIcons}</div>
|
||||
</div>
|
||||
`;
|
||||
frag.appendChild(card);
|
||||
@@ -1125,28 +1424,133 @@
|
||||
|
||||
const audioEl = document.getElementById('noteDetailAudio');
|
||||
const audioStatus = document.getElementById('noteDetailAudioStatus');
|
||||
const attachmentsListEl = document.getElementById('noteDetailAttachments');
|
||||
const attachmentsStatusEl = document.getElementById('noteDetailAttachmentsStatus');
|
||||
audioEl.classList.add('hidden');
|
||||
audioEl.src = '';
|
||||
audioStatus.textContent = 'Loading audio...';
|
||||
attachmentsListEl.innerHTML = '';
|
||||
attachmentsStatusEl.textContent = 'Loading attachments...';
|
||||
try {
|
||||
const atts = await pb.collection(ATTACHMENTS_COLLECTION).getList(1, 1, {
|
||||
const atts = await pb.collection(ATTACHMENTS_COLLECTION).getFullList({
|
||||
sort: '-created',
|
||||
filter: `${ATTACHMENTS_PBID_FIELD} = "${note.id}"`,
|
||||
batch: 200,
|
||||
});
|
||||
if (atts.items.length) {
|
||||
const att = atts.items[0];
|
||||
audioEl.src = pb.files.getURL(att, att[ATTACHMENTS_FILE_FIELD]);
|
||||
|
||||
const audioMatch = findFirstAttachmentByKind(atts, 'audio');
|
||||
if (audioMatch) {
|
||||
audioEl.src = audioMatch.url;
|
||||
audioEl.classList.remove('hidden');
|
||||
audioStatus.textContent = '';
|
||||
} else {
|
||||
audioStatus.textContent = 'No audio attached.';
|
||||
}
|
||||
|
||||
if (!atts.length) {
|
||||
attachmentsStatusEl.textContent = 'No attachments uploaded.';
|
||||
} else {
|
||||
attachmentsStatusEl.textContent = '';
|
||||
const frag = document.createDocumentFragment();
|
||||
atts.forEach((att) => {
|
||||
const names = getAttachmentFileNames(att);
|
||||
names.forEach((name) => {
|
||||
const url = pb.files.getURL(att, name);
|
||||
const kind = attachmentKindFromName(name);
|
||||
const row = document.createElement('div');
|
||||
row.className = 'flex items-center gap-2';
|
||||
const badge = document.createElement('span');
|
||||
badge.className = 'px-2 py-0.5 rounded-full text-xs border border-gray-200 text-gray-700 bg-gray-50';
|
||||
badge.textContent = kind;
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.target = '_blank';
|
||||
link.rel = 'noopener noreferrer';
|
||||
link.className = 'text-purple-700 hover:text-purple-900 break-all';
|
||||
link.textContent = name;
|
||||
row.appendChild(badge);
|
||||
row.appendChild(link);
|
||||
frag.appendChild(row);
|
||||
});
|
||||
});
|
||||
attachmentsListEl.appendChild(frag);
|
||||
}
|
||||
} catch (e) {
|
||||
audioStatus.textContent = `Audio load failed: ${e.message}`;
|
||||
attachmentsStatusEl.textContent = `Attachments load failed: ${e.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
function showAttachmentPreview(note, kind) {
|
||||
const panel = document.getElementById('notesAttachmentPreviewPanel');
|
||||
const titleEl = document.getElementById('notesAttachmentPreviewTitle');
|
||||
const contentEl = document.getElementById('notesAttachmentPreviewContent');
|
||||
contentEl.innerHTML = '';
|
||||
const match = findFirstAttachmentByKind(note._attachments || [], kind);
|
||||
if (!match) {
|
||||
titleEl.textContent = 'Attachment Preview';
|
||||
contentEl.textContent = 'No matching attachment.';
|
||||
panel.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
const { att, name: fileName, url } = match;
|
||||
titleEl.textContent = `Preview: ${kind}`;
|
||||
let node = null;
|
||||
if (kind === 'image') {
|
||||
node = document.createElement('img');
|
||||
node.src = url;
|
||||
node.className = 'max-h-80 rounded border border-gray-200';
|
||||
node.alt = fileName || 'image';
|
||||
} else if (kind === 'video') {
|
||||
node = document.createElement('video');
|
||||
node.src = url;
|
||||
node.controls = true;
|
||||
node.className = 'w-full max-h-80 rounded border border-gray-200 bg-black';
|
||||
} else if (kind === 'audio') {
|
||||
node = document.createElement('audio');
|
||||
node.src = url;
|
||||
node.controls = true;
|
||||
node.className = 'w-full';
|
||||
} else {
|
||||
// Try inline preview for PDFs, otherwise provide a link
|
||||
const isPdf = (fileName || '').toLowerCase().endsWith('.pdf');
|
||||
if (isPdf) {
|
||||
node = document.createElement('embed');
|
||||
node.src = url;
|
||||
node.type = 'application/pdf';
|
||||
node.className = 'w-full h-80 rounded border border-gray-200';
|
||||
} else {
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.target = '_blank';
|
||||
link.rel = 'noopener noreferrer';
|
||||
link.className = 'text-purple-700 hover:text-purple-900 underline';
|
||||
link.textContent = 'Open attachment';
|
||||
node = link;
|
||||
}
|
||||
}
|
||||
contentEl.appendChild(node);
|
||||
panel.classList.remove('hidden');
|
||||
}
|
||||
|
||||
document.getElementById('notesAttachmentPreviewClose').addEventListener('click', () => {
|
||||
document.getElementById('notesAttachmentPreviewPanel').classList.add('hidden');
|
||||
});
|
||||
|
||||
document.getElementById('notesGrid').addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('[data-attachment-button]');
|
||||
if (btn) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const card = btn.closest('[data-note-id]');
|
||||
if (!card) return;
|
||||
const kind = btn.getAttribute('data-attachment-kind');
|
||||
const note = notesCache[card.dataset.noteId];
|
||||
if (note && kind) {
|
||||
showAttachmentPreview(note, kind);
|
||||
return;
|
||||
}
|
||||
}
|
||||
const card = e.target.closest('[data-note-id]');
|
||||
if (!card) return;
|
||||
const note = notesCache[card.dataset.noteId];
|
||||
@@ -1162,6 +1566,23 @@
|
||||
loadNotesList();
|
||||
});
|
||||
|
||||
document.getElementById('conversationsBtn').addEventListener('click', () => {
|
||||
showConversations();
|
||||
});
|
||||
|
||||
document.getElementById('backToListFromConversationsBtn').addEventListener('click', () => {
|
||||
showNotesList();
|
||||
});
|
||||
|
||||
document.getElementById('newConversationBtn').addEventListener('click', () => {
|
||||
resetConversationForm();
|
||||
showConversationForm();
|
||||
});
|
||||
|
||||
document.getElementById('backToConversationsListBtn').addEventListener('click', () => {
|
||||
showConversations();
|
||||
});
|
||||
|
||||
document.getElementById('backToListBtn').addEventListener('click', () => {
|
||||
showNotesList();
|
||||
});
|
||||
@@ -1175,6 +1596,18 @@
|
||||
showNoteForm();
|
||||
});
|
||||
|
||||
document.getElementById('noteAttachmentsInput').addEventListener('change', (e) => {
|
||||
pendingNoteAttachments = Array.from(e.target.files || []);
|
||||
renderNoteAttachmentsList();
|
||||
});
|
||||
|
||||
document.getElementById('clearAttachmentsBtn').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
pendingNoteAttachments = [];
|
||||
document.getElementById('noteAttachmentsInput').value = '';
|
||||
renderNoteAttachmentsList();
|
||||
});
|
||||
|
||||
// Search input + voice
|
||||
const notesSearchInput = document.getElementById('notesSearch');
|
||||
const searchVoiceBtn = document.getElementById('searchVoiceBtn');
|
||||
@@ -1313,22 +1746,50 @@
|
||||
|
||||
const noteRecord = await pb.collection(NOTES_COLLECTION).create(payload);
|
||||
const attachmentRecords = [];
|
||||
let audioAttachmentCount = 0;
|
||||
let fileAttachmentCount = 0;
|
||||
if (recordedSegments && recordedSegments.length) {
|
||||
const fd = new FormData();
|
||||
for (let i = 0; i < recordedSegments.length; i++) {
|
||||
const seg = recordedSegments[i];
|
||||
const blobToUpload = seg.blob || seg;
|
||||
const fileName = seg.name || `note-audio-seg-${i + 1}.webm`;
|
||||
const file = new File([blobToUpload], fileName, { type: blobToUpload.type || 'audio/webm' });
|
||||
const fd = new FormData();
|
||||
fd.append(ATTACHMENTS_FILE_FIELD, file);
|
||||
fd.append(ATTACHMENTS_PBID_FIELD, noteRecord.id);
|
||||
const createdAtt = await pb.collection(ATTACHMENTS_COLLECTION).create(fd);
|
||||
attachmentRecords.push(createdAtt);
|
||||
audioAttachmentCount += 1;
|
||||
}
|
||||
fd.append(ATTACHMENTS_PBID_FIELD, noteRecord.id);
|
||||
const createdAtt = await pb.collection(ATTACHMENTS_COLLECTION).create(fd);
|
||||
attachmentRecords.push(createdAtt);
|
||||
}
|
||||
const inputEl = document.getElementById('noteAttachmentsInput');
|
||||
const filesFromInput = Array.from(inputEl?.files || []);
|
||||
const filesToUpload = (pendingNoteAttachments && pendingNoteAttachments.length) ? pendingNoteAttachments : filesFromInput;
|
||||
if (filesToUpload && filesToUpload.length) {
|
||||
const fdFiles = new FormData();
|
||||
for (let i = 0; i < filesToUpload.length; i++) {
|
||||
const srcFile = filesToUpload[i];
|
||||
const file = new File([srcFile], srcFile.name, { type: srcFile.type || 'application/octet-stream' });
|
||||
fdFiles.append(ATTACHMENTS_FILE_FIELD, file);
|
||||
fileAttachmentCount += 1;
|
||||
}
|
||||
fdFiles.append(ATTACHMENTS_PBID_FIELD, noteRecord.id);
|
||||
try {
|
||||
const createdAttFiles = await pb.collection(ATTACHMENTS_COLLECTION).create(fdFiles);
|
||||
attachmentRecords.push(createdAttFiles);
|
||||
} catch (uploadErr) {
|
||||
console.error('Attachment batch upload failed:', uploadErr);
|
||||
}
|
||||
}
|
||||
const attachmentMsg = attachmentRecords.length ? ` with ${attachmentRecords.length} audio segment(s)` : '';
|
||||
const attachmentParts = [];
|
||||
if (audioAttachmentCount) attachmentParts.push(`${audioAttachmentCount} audio`);
|
||||
if (fileAttachmentCount) attachmentParts.push(`${fileAttachmentCount} file`);
|
||||
const attachmentMsg = attachmentParts.length ? ` with ${attachmentParts.join(' and ')} attachment(s)` : '';
|
||||
statusEl.textContent = `Saved note ${noteRecord.id}${attachmentMsg}`;
|
||||
await clearAudio();
|
||||
pendingNoteAttachments = [];
|
||||
document.getElementById('noteAttachmentsInput').value = '';
|
||||
renderNoteAttachmentsList();
|
||||
document.getElementById('noteText').value = '';
|
||||
document.getElementById('noteTitle').value = '';
|
||||
document.getElementById('jobNote').value = 'no';
|
||||
|
||||
Reference in New Issue
Block a user