1249 lines
49 KiB
HTML
1249 lines
49 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Prism Notes</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3730a3',
|
|
secondary: '#4c1d95',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-gradient-to-br from-primary to-secondary p-4 sm:p-8 flex flex-col font-sans relative h-screen overflow-hidden">
|
|
<!-- Top-right display name -->
|
|
<div id="userDisplay" class="hidden fixed right-2 text-white text-xs font-semibold drop-shadow z-50 top-1">
|
|
<span id="userDisplayName"></span>
|
|
</div>
|
|
|
|
<!-- Bottom-left email -->
|
|
<div id="userEmail" class="hidden absolute bottom-2 left-2 text-white text-xs drop-shadow">
|
|
<span id="userEmailValue"></span>
|
|
</div>
|
|
|
|
<!-- Bottom-right version -->
|
|
<div class="fixed bottom-2 right-2 text-white/80 text-xs drop-shadow z-50">
|
|
v1.0.0-alpha3
|
|
</div>
|
|
|
|
<!-- Login Container -->
|
|
<div id="loginContainer" class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2">PB + Microsoft Graph</h1>
|
|
<p class="text-gray-600">Sign in with Microsoft</p>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<p class="text-gray-700 text-center">Sign in with your Microsoft account</p>
|
|
<button type="button" id="loginBtn" class="w-full py-3 px-4 bg-gradient-to-br from-primary to-secondary text-white font-semibold rounded-lg hover:opacity-95 transition-opacity shadow-lg hover:shadow-xl">
|
|
Login with Microsoft
|
|
</button>
|
|
</div>
|
|
|
|
<div id="loginError" class="hidden mt-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>
|
|
</div>
|
|
|
|
<!-- Notes List Container -->
|
|
<div id="notesListContainer" 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">Notes</h2>
|
|
<p class="text-sm text-gray-600">Browse all notes and open details.</p>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="w-full mt-3">
|
|
<div class="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 bg-gray-50">
|
|
<input id="notesSearch" type="text" class="flex-1 bg-transparent outline-none text-sm text-gray-800" placeholder="Search notes..." />
|
|
<button id="searchVoiceBtn" class="text-purple-600 hover:text-purple-700" title="Voice search">
|
|
<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="flex-1 overflow-y-auto">
|
|
<div id="notesListStatus" class="text-sm text-gray-600"></div>
|
|
<div id="notesEmpty" class="hidden text-sm text-gray-500">No notes yet. Click New Note to create one.</div>
|
|
<div id="notesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Note Detail Container -->
|
|
<div id="noteDetailContainer" class="hidden flex flex-col bg-white rounded-2xl shadow-2xl max-w-4xl w-full p-6 gap-3 overflow-hidden mt-2.5 max-h-[calc(100vh-140px)]">
|
|
<div class="flex-shrink-0 flex items-center justify-between">
|
|
<div>
|
|
<div class="text-xs text-gray-500" id="noteDetailMeta"></div>
|
|
<h2 id="noteDetailTitle" class="text-2xl font-bold text-gray-900">Note</h2>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button id="detailBackBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
|
|
<button id="detailNewNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Note</button>
|
|
</div>
|
|
</div>
|
|
<div class="min-h-0 overflow-y-auto">
|
|
<div class="text-gray-800 leading-relaxed whitespace-pre-wrap border border-gray-100 rounded-lg p-3 bg-gray-50 mb-3" id="noteDetailBody"></div>
|
|
<div class="space-y-2">
|
|
<div class="text-sm text-gray-600">Audio</div>
|
|
<audio id="noteDetailAudio" controls class="hidden w-full"></audio>
|
|
<div id="noteDetailAudioStatus" class="text-xs text-gray-500"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Note + Audio Container -->
|
|
<div id="noteContainer" 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="backToListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
|
|
<h2 class="text-2xl font-bold text-gray-800">New Note</h2>
|
|
</div>
|
|
<span id="graphStatus" 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="noteTitle" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
|
|
<div class="relative">
|
|
<input type="text" id="noteTitle" class="w-full rounded-lg border border-gray-300 p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Enter note title (optional)">
|
|
<button id="titleVoiceBtn" 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="jobNote" class="block text-sm font-medium text-gray-700 mb-1">Job Note</label>
|
|
<select id="jobNote" 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="noteType" class="block text-sm font-medium text-gray-700 mb-1">Note Type</label>
|
|
<select id="noteType" 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="jobNumberContainer" class="hidden">
|
|
<label for="jobNumber" class="block text-sm font-medium text-gray-700 mb-1">Job Number <span class="text-red-600">*</span></label>
|
|
<input type="text" id="jobNumber" 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="noteText" class="block text-sm font-medium text-gray-700 mb-1">Note Text</label>
|
|
<div class="relative">
|
|
<textarea id="noteText" 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 note or click speaker icon to dictate..."></textarea>
|
|
<button id="noteVoiceBtn" class="absolute right-3 top-3 text-purple-600 hover:text-purple-700 transition-colors" title="Click to speak note">
|
|
<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">
|
|
<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>
|
|
<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">
|
|
<div class="flex items-center gap-3">
|
|
<button id="playPauseBtn" 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="progressTrack">
|
|
<div id="progressFill" class="h-full bg-primary w-0"></div>
|
|
</div>
|
|
<div class="flex justify-between text-xs text-gray-600 mt-1">
|
|
<span id="currentTime">0:00</span>
|
|
<span id="durationTime">0:00</span>
|
|
</div>
|
|
</div>
|
|
<div id="audioMenuContainer" class="relative">
|
|
<button id="audioMenuBtn" 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="audioMenu" class="hidden absolute right-0 mt-1 w-36 rounded border border-gray-200 bg-white shadow-lg">
|
|
<button id="removeAudioBtn" 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="recordStatus" class="text-xs text-gray-500"></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>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
|
|
<script>
|
|
const APP_VERSION = '1.0.0-alpha3';
|
|
console.log(`App version: ${APP_VERSION}`);
|
|
// Initialize PocketBase client
|
|
const pb = new PocketBase('https://pocketbase.ccllc.pro');
|
|
pb.autoCancellation(false);
|
|
|
|
// Collections (from .env in scaffold)
|
|
const NOTES_COLLECTION = 'Notes';
|
|
const ATTACHMENTS_COLLECTION = 'Attachments';
|
|
const ATTACHMENTS_FILE_FIELD = 'file';
|
|
const ATTACHMENTS_PBID_FIELD = 'pb_id';
|
|
const NOTE_BODY_HTML_FIELD = 'body_html';
|
|
const NOTE_BODY_PLAIN_FIELD = 'body_plain';
|
|
const NOTE_USERNAME_FIELD = 'Username';
|
|
let mediaRecorder = null;
|
|
let recordedChunks = [];
|
|
let recordedBlob = null;
|
|
let titleRecognition = null;
|
|
let noteRecognition = null;
|
|
let isTitleRecognizing = false;
|
|
let isNoteRecognizing = false;
|
|
let silenceTimer = null;
|
|
let searchSilenceTimer = null;
|
|
|
|
// --- Voice Recognition Setup with auto-stop ---
|
|
function setupTitleVoiceRecognition() {
|
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
if (!SpeechRecognition) {
|
|
console.warn('Web Speech API not supported');
|
|
document.getElementById('titleVoiceBtn').disabled = true;
|
|
return null;
|
|
}
|
|
|
|
const recognition = new SpeechRecognition();
|
|
recognition.continuous = true;
|
|
recognition.interimResults = true;
|
|
recognition.lang = 'en-US';
|
|
|
|
recognition.onstart = () => {
|
|
isTitleRecognizing = true;
|
|
document.getElementById('titleVoiceBtn').classList.add('text-red-600');
|
|
document.getElementById('titleVoiceBtn').classList.remove('text-purple-600');
|
|
};
|
|
|
|
recognition.onresult = (event) => {
|
|
let finalTranscript = '';
|
|
for (let i = 0; i < event.results.length; i++) {
|
|
if (event.results[i].isFinal) {
|
|
finalTranscript += event.results[i][0].transcript + ' ';
|
|
}
|
|
}
|
|
|
|
if (finalTranscript) {
|
|
const titleInput = document.getElementById('noteTitle');
|
|
titleInput.value = (titleInput.value + finalTranscript).trim();
|
|
|
|
// Reset silence timer
|
|
clearTimeout(silenceTimer);
|
|
silenceTimer = setTimeout(() => {
|
|
stopTitleVoiceRecognition();
|
|
}, 2000);
|
|
}
|
|
};
|
|
|
|
recognition.onerror = (event) => {
|
|
console.error('Speech recognition error:', event.error);
|
|
stopTitleVoiceRecognition();
|
|
};
|
|
|
|
recognition.onend = () => {
|
|
if (isTitleRecognizing) {
|
|
isTitleRecognizing = false;
|
|
document.getElementById('titleVoiceBtn').classList.remove('text-red-600');
|
|
document.getElementById('titleVoiceBtn').classList.add('text-purple-600');
|
|
}
|
|
};
|
|
|
|
return recognition;
|
|
}
|
|
|
|
function setupNoteVoiceRecognition() {
|
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
if (!SpeechRecognition) {
|
|
console.warn('Web Speech API not supported');
|
|
document.getElementById('noteVoiceBtn').disabled = true;
|
|
return null;
|
|
}
|
|
|
|
const recognition = new SpeechRecognition();
|
|
recognition.continuous = true;
|
|
recognition.interimResults = true;
|
|
recognition.lang = 'en-US';
|
|
|
|
recognition.onstart = () => {
|
|
isNoteRecognizing = true;
|
|
document.getElementById('noteVoiceBtn').classList.add('text-red-600');
|
|
document.getElementById('noteVoiceBtn').classList.remove('text-purple-600');
|
|
};
|
|
|
|
recognition.onresult = (event) => {
|
|
let finalTranscript = '';
|
|
for (let i = 0; i < event.results.length; i++) {
|
|
if (event.results[i].isFinal) {
|
|
finalTranscript += event.results[i][0].transcript + ' ';
|
|
}
|
|
}
|
|
|
|
if (finalTranscript) {
|
|
const noteTextArea = document.getElementById('noteText');
|
|
noteTextArea.value = (noteTextArea.value + finalTranscript).trim() + ' ';
|
|
noteTextArea.scrollTop = noteTextArea.scrollHeight;
|
|
|
|
// Reset silence timer
|
|
clearTimeout(silenceTimer);
|
|
silenceTimer = setTimeout(() => {
|
|
stopNoteVoiceRecognition();
|
|
}, 2000);
|
|
}
|
|
};
|
|
|
|
recognition.onerror = (event) => {
|
|
console.error('Speech recognition error:', event.error);
|
|
stopNoteVoiceRecognition();
|
|
};
|
|
|
|
recognition.onend = () => {
|
|
if (isNoteRecognizing) {
|
|
isNoteRecognizing = false;
|
|
document.getElementById('noteVoiceBtn').classList.remove('text-red-600');
|
|
document.getElementById('noteVoiceBtn').classList.add('text-purple-600');
|
|
}
|
|
};
|
|
|
|
return recognition;
|
|
}
|
|
|
|
function startTitleVoiceRecognition() {
|
|
if (!titleRecognition) {
|
|
titleRecognition = setupTitleVoiceRecognition();
|
|
if (!titleRecognition) return;
|
|
}
|
|
try {
|
|
clearTimeout(silenceTimer);
|
|
titleRecognition.start();
|
|
} catch (e) {
|
|
console.log('Recognition error:', e);
|
|
}
|
|
}
|
|
|
|
function stopTitleVoiceRecognition() {
|
|
isTitleRecognizing = false;
|
|
clearTimeout(silenceTimer);
|
|
if (titleRecognition) {
|
|
try {
|
|
titleRecognition.stop();
|
|
} catch (e) {
|
|
console.log('Error stopping recognition:', e);
|
|
}
|
|
}
|
|
document.getElementById('titleVoiceBtn').classList.remove('text-red-600');
|
|
document.getElementById('titleVoiceBtn').classList.add('text-purple-600');
|
|
}
|
|
|
|
function startNoteVoiceRecognition() {
|
|
if (!noteRecognition) {
|
|
noteRecognition = setupNoteVoiceRecognition();
|
|
if (!noteRecognition) return;
|
|
}
|
|
try {
|
|
clearTimeout(silenceTimer);
|
|
noteRecognition.start();
|
|
} catch (e) {
|
|
console.log('Recognition error:', e);
|
|
}
|
|
}
|
|
|
|
function stopNoteVoiceRecognition() {
|
|
isNoteRecognizing = false;
|
|
clearTimeout(silenceTimer);
|
|
if (noteRecognition) {
|
|
try {
|
|
noteRecognition.stop();
|
|
} catch (e) {
|
|
console.log('Error stopping recognition:', e);
|
|
}
|
|
}
|
|
document.getElementById('noteVoiceBtn').classList.remove('text-red-600');
|
|
document.getElementById('noteVoiceBtn').classList.add('text-purple-600');
|
|
}
|
|
|
|
// Voice button click handlers
|
|
document.getElementById('titleVoiceBtn').addEventListener('click', () => {
|
|
if (isTitleRecognizing) {
|
|
stopTitleVoiceRecognition();
|
|
} else {
|
|
startTitleVoiceRecognition();
|
|
}
|
|
});
|
|
|
|
document.getElementById('noteVoiceBtn').addEventListener('click', () => {
|
|
if (isNoteRecognizing) {
|
|
stopNoteVoiceRecognition();
|
|
} else {
|
|
startNoteVoiceRecognition();
|
|
}
|
|
});
|
|
|
|
// Job Note selector change handler
|
|
document.getElementById('jobNote').addEventListener('change', (e) => {
|
|
const jobNumberContainer = document.getElementById('jobNumberContainer');
|
|
if (e.target.value === 'yes') {
|
|
jobNumberContainer.classList.remove('hidden');
|
|
} else {
|
|
jobNumberContainer.classList.add('hidden');
|
|
document.getElementById('jobNumber').value = '';
|
|
}
|
|
});
|
|
|
|
// --- Rich text helpers (TipTap-style JSON) ---
|
|
function tiptapDocFromText(text) {
|
|
const safe = (text || '').replace(/\r\n|\r|\n/g, '\n');
|
|
const lines = safe.split('\n');
|
|
const content = lines.map(line => ({
|
|
type: 'paragraph',
|
|
content: line ? [{ type: 'text', text: line }] : []
|
|
}));
|
|
return { type: 'doc', content };
|
|
}
|
|
|
|
function tiptapToPlainText(doc) {
|
|
if (!doc) return '';
|
|
try {
|
|
const parts = [];
|
|
const walk = (node) => {
|
|
if (!node) return;
|
|
if (Array.isArray(node)) {
|
|
node.forEach(walk);
|
|
return;
|
|
}
|
|
if (node.type === 'text' && node.text) {
|
|
parts.push(node.text);
|
|
return;
|
|
}
|
|
if (node.type === 'hardBreak') {
|
|
parts.push('\n');
|
|
return;
|
|
}
|
|
if (node.content) {
|
|
let beforeLen = parts.length;
|
|
walk(node.content);
|
|
// Add newline between block nodes
|
|
const blockTypes = ['paragraph', 'heading', 'blockquote', 'codeBlock'];
|
|
if (blockTypes.includes(node.type) && parts.length !== beforeLen) {
|
|
parts.push('\n');
|
|
}
|
|
}
|
|
};
|
|
walk(doc);
|
|
return parts.join('').replace(/\n{3,}/g, '\n\n').trim();
|
|
} catch (e) {
|
|
return typeof doc === 'string' ? doc : JSON.stringify(doc);
|
|
}
|
|
}
|
|
|
|
// --- HTML helpers for PocketBase editor fields ---
|
|
function plainTextToHTML(text) {
|
|
const safe = (text || '').replace(/\r\n|\r|\n/g, '\n');
|
|
const lines = safe.split('\n');
|
|
// Wrap each line in <p>, preserve blank lines
|
|
const html = lines.map(line => `<p>${escapeHtml(line)}</p>`).join('');
|
|
return html;
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
return String(str)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
function htmlToPlainText(html) {
|
|
try {
|
|
const div = document.createElement('div');
|
|
div.innerHTML = html || '';
|
|
return (div.innerText || '').trim();
|
|
} catch {
|
|
return html || '';
|
|
}
|
|
}
|
|
|
|
// Update auth UI based on login state
|
|
function updateAuthUI() {
|
|
const loginContainer = document.getElementById('loginContainer');
|
|
const userDisplay = document.getElementById('userDisplay');
|
|
const userEmail = document.getElementById('userEmail');
|
|
const notesListContainer = document.getElementById('notesListContainer');
|
|
const noteDetailContainer = document.getElementById('noteDetailContainer');
|
|
const noteContainer = document.getElementById('noteContainer');
|
|
if (pb.authStore.isValid) {
|
|
loginContainer.classList.add('hidden');
|
|
userDisplay.classList.remove('hidden');
|
|
userEmail.classList.remove('hidden');
|
|
notesListContainer.classList.remove('hidden');
|
|
noteDetailContainer.classList.add('hidden');
|
|
noteContainer.classList.add('hidden');
|
|
loadNotesList();
|
|
} else {
|
|
loginContainer.classList.remove('hidden');
|
|
userDisplay.classList.add('hidden');
|
|
userEmail.classList.add('hidden');
|
|
document.getElementById('loginError').classList.add('hidden');
|
|
notesListContainer.classList.add('hidden');
|
|
noteDetailContainer.classList.add('hidden');
|
|
noteContainer.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Check for tokens and log success
|
|
async function checkTokens() {
|
|
const pbToken = pb.authStore.token;
|
|
|
|
if (!pbToken) {
|
|
console.log('❌ No PocketBase token found');
|
|
return;
|
|
}
|
|
|
|
console.log('✓ PocketBase token:', pbToken ? '(present)' : '(missing)');
|
|
|
|
try {
|
|
const healthResp = await fetch('/health');
|
|
const health = await healthResp.json();
|
|
if (health.ok) {
|
|
console.log('✓ Backend health check passed');
|
|
}
|
|
const graphBadge = document.getElementById('graphStatus');
|
|
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';
|
|
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';
|
|
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';
|
|
}
|
|
}
|
|
|
|
async function ensureUserLogged() {
|
|
// If already have a valid token, just refresh to get model details
|
|
if (pb.authStore.isValid && pb.authStore.token) {
|
|
try {
|
|
const refresh = await pb.collection('Users').authRefresh();
|
|
const record = refresh?.record || pb.authStore.record || pb.authStore.model;
|
|
const meta = refresh?.meta || {};
|
|
const model = pb.authStore.model;
|
|
const displayName = record?.name || model?.name || meta?.name || record?.email || model?.email || meta?.email || 'Unknown User';
|
|
const email = record?.email || model?.email || meta?.email || '(no email)';
|
|
displayNameCache = displayName;
|
|
userEmailCache = email;
|
|
document.getElementById('userDisplayName').textContent = displayName;
|
|
document.getElementById('userEmailValue').textContent = email;
|
|
console.log('User record:', record);
|
|
console.log('User meta:', meta);
|
|
console.log('Auth store model:', model);
|
|
console.log(`User display name: ${displayName}`);
|
|
console.log(`User email: ${email}`);
|
|
console.log('PB token:', pb.authStore.token ? '(present)' : '(missing)');
|
|
updateAuthUI();
|
|
await checkTokens();
|
|
return true;
|
|
} catch (e) {
|
|
console.warn('Existing token invalid, clearing and reauth needed', e);
|
|
pb.authStore.clear();
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// Handle login button click
|
|
document.getElementById('loginBtn').addEventListener('click', async (e) => {
|
|
e.preventDefault();
|
|
const loginBtn = document.getElementById('loginBtn');
|
|
const loginError = document.getElementById('loginError');
|
|
|
|
loginBtn.disabled = true;
|
|
loginBtn.textContent = 'Checking session...';
|
|
loginError.classList.add('hidden');
|
|
|
|
// If we already have a valid token, just use it
|
|
const hadToken = await ensureUserLogged();
|
|
if (hadToken) {
|
|
loginBtn.disabled = false;
|
|
loginBtn.textContent = 'Login with Microsoft';
|
|
return;
|
|
}
|
|
|
|
// Otherwise perform OAuth
|
|
loginBtn.textContent = 'Logging in...';
|
|
try {
|
|
const authData = await pb.collection('Users').authWithOAuth2({ provider: 'microsoft' });
|
|
console.log('✓ Logged in with Microsoft');
|
|
const record = authData?.record || pb.authStore.record || pb.authStore.model;
|
|
const meta = authData?.meta || {};
|
|
const model = pb.authStore.model;
|
|
const displayName = record?.name || model?.name || meta?.name || record?.email || model?.email || meta?.email || 'Unknown User';
|
|
const email = record?.email || model?.email || meta?.email || '(no email)';
|
|
displayNameCache = displayName;
|
|
userEmailCache = email;
|
|
document.getElementById('userDisplayName').textContent = displayName;
|
|
document.getElementById('userEmailValue').textContent = email;
|
|
console.log('User record:', record);
|
|
console.log('User meta:', meta);
|
|
console.log('Auth store model:', model);
|
|
console.log(`User display name: ${displayName}`);
|
|
console.log(`User email: ${email}`);
|
|
console.log('PB token:', pb.authStore.token ? '(present)' : '(missing)');
|
|
updateAuthUI();
|
|
await checkTokens();
|
|
} catch (error) {
|
|
console.error(error);
|
|
loginError.textContent = `Login failed: ${error.message}`;
|
|
loginError.classList.remove('hidden');
|
|
} finally {
|
|
loginBtn.disabled = false;
|
|
loginBtn.textContent = 'Login with Microsoft';
|
|
}
|
|
});
|
|
|
|
// Initial auth UI update
|
|
updateAuthUI();
|
|
|
|
// If already logged in, use existing token
|
|
if (pb.authStore.isValid && pb.authStore.token) {
|
|
ensureUserLogged();
|
|
}
|
|
|
|
// --- Audio recording setup with auto-stop on silence ---
|
|
let audioContext = null;
|
|
let analyser = null;
|
|
let silenceStart = null;
|
|
let silenceCheckInterval = null;
|
|
const SILENCE_THRESHOLD = 0.01; // Volume threshold for silence
|
|
const SILENCE_DURATION = 3000; // 3 seconds
|
|
|
|
function checkSilence() {
|
|
if (!analyser) return;
|
|
|
|
const bufferLength = analyser.frequencyBinCount;
|
|
const dataArray = new Uint8Array(bufferLength);
|
|
analyser.getByteTimeDomainData(dataArray);
|
|
|
|
// Calculate average volume
|
|
let sum = 0;
|
|
for (let i = 0; i < bufferLength; i++) {
|
|
const normalized = (dataArray[i] - 128) / 128;
|
|
sum += normalized * normalized;
|
|
}
|
|
const rms = Math.sqrt(sum / bufferLength);
|
|
|
|
if (rms < SILENCE_THRESHOLD) {
|
|
if (!silenceStart) {
|
|
silenceStart = Date.now();
|
|
} else if (Date.now() - silenceStart >= SILENCE_DURATION) {
|
|
stopRecording();
|
|
}
|
|
} else {
|
|
silenceStart = null;
|
|
}
|
|
}
|
|
|
|
async function setupRecorder() {
|
|
let stream;
|
|
try {
|
|
stream = await navigator.mediaDevices.getUserMedia({
|
|
audio: {
|
|
autoGainControl: true
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.error('Microphone access failed:', err);
|
|
document.getElementById('recordStatus').textContent = 'Microphone access denied or unavailable.';
|
|
throw err;
|
|
}
|
|
recordedChunks = [];
|
|
recordedBlob = null;
|
|
|
|
// Setup audio context for silence detection
|
|
audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
analyser = audioContext.createAnalyser();
|
|
const source = audioContext.createMediaStreamSource(stream);
|
|
source.connect(analyser);
|
|
analyser.fftSize = 2048;
|
|
|
|
mediaRecorder = new MediaRecorder(stream);
|
|
mediaRecorder.ondataavailable = (e) => {
|
|
if (e.data && e.data.size > 0) recordedChunks.push(e.data);
|
|
};
|
|
mediaRecorder.onstop = () => {
|
|
if (silenceCheckInterval) {
|
|
clearInterval(silenceCheckInterval);
|
|
silenceCheckInterval = null;
|
|
}
|
|
silenceStart = null;
|
|
if (audioContext) {
|
|
audioContext.close();
|
|
audioContext = null;
|
|
}
|
|
stream.getTracks().forEach(track => track.stop());
|
|
recordedBlob = new Blob(recordedChunks, { type: mediaRecorder.mimeType });
|
|
const audioEl = document.getElementById('audioPreview');
|
|
audioEl.src = URL.createObjectURL(recordedBlob);
|
|
audioEl.volume = 1.0;
|
|
audioEl.classList.remove('hidden');
|
|
document.getElementById('audioPlayer').classList.remove('hidden');
|
|
document.getElementById('recordStatus').textContent = '';
|
|
mediaRecorder = null; // allow fresh recorder next start
|
|
};
|
|
}
|
|
|
|
async function startRecording() {
|
|
const recordBtn = document.getElementById('recordBtn');
|
|
const stopBtn = document.getElementById('stopBtn');
|
|
try {
|
|
if (!mediaRecorder) await setupRecorder();
|
|
silenceStart = null;
|
|
recordedChunks = [];
|
|
recordedBlob = null;
|
|
mediaRecorder.start();
|
|
document.getElementById('recordStatus').textContent = 'Recording…';
|
|
recordBtn.disabled = true;
|
|
stopBtn.disabled = false;
|
|
stopBtn.classList.remove('hidden');
|
|
|
|
// Start silence detection
|
|
silenceCheckInterval = setInterval(checkSilence, 100);
|
|
} catch (err) {
|
|
console.error('Failed to start recording:', err);
|
|
document.getElementById('recordStatus').textContent = 'Recording not available.';
|
|
recordBtn.disabled = false;
|
|
stopBtn.disabled = true;
|
|
stopBtn.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function stopRecording() {
|
|
if (mediaRecorder && mediaRecorder.state === 'recording') {
|
|
mediaRecorder.stop();
|
|
if (silenceCheckInterval) {
|
|
clearInterval(silenceCheckInterval);
|
|
silenceCheckInterval = null;
|
|
}
|
|
document.getElementById('recordBtn').disabled = false;
|
|
const stopBtn = document.getElementById('stopBtn');
|
|
stopBtn.disabled = true;
|
|
stopBtn.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function clearAudio() {
|
|
if (silenceCheckInterval) {
|
|
clearInterval(silenceCheckInterval);
|
|
silenceCheckInterval = null;
|
|
}
|
|
if (mediaRecorder && mediaRecorder.state === 'recording') {
|
|
mediaRecorder.stop();
|
|
}
|
|
recordedChunks = [];
|
|
recordedBlob = null;
|
|
const audioEl = document.getElementById('audioPreview');
|
|
audioEl.src = '';
|
|
audioEl.classList.add('hidden');
|
|
document.getElementById('audioPlayer').classList.add('hidden');
|
|
document.getElementById('audioMenu').classList.add('hidden');
|
|
document.getElementById('progressFill').style.width = '0%';
|
|
document.getElementById('currentTime').textContent = '0:00';
|
|
document.getElementById('durationTime').textContent = '0:00';
|
|
document.getElementById('playPauseBtn').textContent = '▶';
|
|
document.getElementById('recordBtn').disabled = false;
|
|
const stopBtn = document.getElementById('stopBtn');
|
|
stopBtn.disabled = true;
|
|
stopBtn.classList.add('hidden');
|
|
document.getElementById('recordStatus').textContent = '';
|
|
}
|
|
|
|
document.getElementById('recordBtn').addEventListener('click', startRecording);
|
|
document.getElementById('stopBtn').addEventListener('click', stopRecording);
|
|
// Audio options menu
|
|
const audioMenuContainer = document.getElementById('audioMenuContainer');
|
|
const audioMenuBtn = document.getElementById('audioMenuBtn');
|
|
const audioMenu = document.getElementById('audioMenu');
|
|
const removeAudioBtn = document.getElementById('removeAudioBtn');
|
|
const audioEl = document.getElementById('audioPreview');
|
|
const playPauseBtn = document.getElementById('playPauseBtn');
|
|
const progressTrack = document.getElementById('progressTrack');
|
|
const progressFill = document.getElementById('progressFill');
|
|
const currentTimeLabel = document.getElementById('currentTime');
|
|
const durationTimeLabel = document.getElementById('durationTime');
|
|
|
|
function formatTime(seconds) {
|
|
if (isNaN(seconds)) return '0:00';
|
|
const m = Math.floor(seconds / 60);
|
|
const s = Math.floor(seconds % 60).toString().padStart(2, '0');
|
|
return `${m}:${s}`;
|
|
}
|
|
|
|
function updateProgress() {
|
|
if (!audioEl.duration || isNaN(audioEl.duration)) return;
|
|
const pct = (audioEl.currentTime / audioEl.duration) * 100;
|
|
progressFill.style.width = `${pct}%`;
|
|
currentTimeLabel.textContent = formatTime(audioEl.currentTime);
|
|
durationTimeLabel.textContent = formatTime(audioEl.duration);
|
|
}
|
|
|
|
playPauseBtn.addEventListener('click', () => {
|
|
if (audioEl.paused) {
|
|
audioEl.play();
|
|
playPauseBtn.textContent = '⏸';
|
|
} else {
|
|
audioEl.pause();
|
|
playPauseBtn.textContent = '▶';
|
|
}
|
|
});
|
|
|
|
audioEl.addEventListener('timeupdate', updateProgress);
|
|
audioEl.addEventListener('loadedmetadata', updateProgress);
|
|
audioEl.addEventListener('ended', () => {
|
|
playPauseBtn.textContent = '▶';
|
|
updateProgress();
|
|
});
|
|
|
|
progressTrack.addEventListener('click', (e) => {
|
|
if (!audioEl.duration || isNaN(audioEl.duration)) return;
|
|
const rect = progressTrack.getBoundingClientRect();
|
|
const ratio = (e.clientX - rect.left) / rect.width;
|
|
audioEl.currentTime = Math.max(0, Math.min(audioEl.duration * ratio, audioEl.duration));
|
|
updateProgress();
|
|
});
|
|
if (audioMenuBtn && audioMenu && removeAudioBtn && audioMenuContainer) {
|
|
audioMenuBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
audioMenu.classList.toggle('hidden');
|
|
});
|
|
removeAudioBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
audioMenu.classList.add('hidden');
|
|
clearAudio();
|
|
});
|
|
document.addEventListener('click', (e) => {
|
|
if (!audioMenuContainer.contains(e.target)) {
|
|
audioMenu.classList.add('hidden');
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- Notes list + detail views ---
|
|
let notesCache = {};
|
|
let notesList = [];
|
|
let searchQuery = '';
|
|
let searchRecognition = null;
|
|
let isSearchRecognizing = false;
|
|
|
|
function formatDateShort(dt) {
|
|
try {
|
|
const d = new Date(dt);
|
|
const mm = String(d.getMonth() + 1).padStart(2, '0');
|
|
const dd = String(d.getDate()).padStart(2, '0');
|
|
const yyyy = d.getFullYear();
|
|
let hrs = d.getHours();
|
|
const mins = String(d.getMinutes()).padStart(2, '0');
|
|
const ampm = hrs >= 12 ? 'PM' : 'AM';
|
|
hrs = hrs % 12;
|
|
if (hrs === 0) hrs = 12;
|
|
const hh = String(hrs).padStart(2, '0');
|
|
return `${mm}/${dd}/${yyyy} ${hh}:${mins} ${ampm}`;
|
|
} catch { return ''; }
|
|
}
|
|
|
|
function showNotesList() {
|
|
document.getElementById('notesListContainer').classList.remove('hidden');
|
|
document.getElementById('noteDetailContainer').classList.add('hidden');
|
|
document.getElementById('noteContainer').classList.add('hidden');
|
|
}
|
|
|
|
function showNoteForm() {
|
|
document.getElementById('notesListContainer').classList.add('hidden');
|
|
document.getElementById('noteDetailContainer').classList.add('hidden');
|
|
document.getElementById('noteContainer').classList.remove('hidden');
|
|
}
|
|
|
|
function resetNoteForm() {
|
|
document.getElementById('noteTitle').value = '';
|
|
document.getElementById('noteText').value = '';
|
|
document.getElementById('jobNote').value = 'no';
|
|
document.getElementById('noteType').value = 'personal';
|
|
document.getElementById('jobNumber').value = '';
|
|
document.getElementById('jobNumberContainer').classList.add('hidden');
|
|
clearAudio();
|
|
}
|
|
|
|
function renderNotesList(items) {
|
|
const grid = document.getElementById('notesGrid');
|
|
const empty = document.getElementById('notesEmpty');
|
|
grid.innerHTML = '';
|
|
if (!items.length) {
|
|
empty.classList.remove('hidden');
|
|
return;
|
|
}
|
|
empty.classList.add('hidden');
|
|
const frag = document.createDocumentFragment();
|
|
items.forEach((note) => {
|
|
const card = document.createElement('button');
|
|
card.type = 'button';
|
|
card.dataset.noteId = note.id;
|
|
const type = (note.type || 'personal').toLowerCase();
|
|
const typeClasses = {
|
|
personal: 'bg-amber-100 border border-amber-300 hover:border-amber-400',
|
|
manager: 'bg-orange-200 border border-orange-400 hover:border-orange-500',
|
|
job: 'bg-pink-200 border border-pink-400 hover:border-pink-500',
|
|
}[type] || 'bg-gray-100 border border-gray-300 hover:border-primary/60';
|
|
card.className = `text-left ${typeClasses} hover:shadow-md transition rounded-xl p-5 sm:p-6 space-y-3 h-full flex flex-col`;
|
|
const title = note.title || 'Untitled';
|
|
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>
|
|
` : '';
|
|
card.innerHTML = `
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="font-semibold text-gray-900 truncate">${escapeHtml(title)}</div>
|
|
<div class="text-xs text-gray-500">${formatDateShort(note.created)}</div>
|
|
</div>
|
|
<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>
|
|
`;
|
|
frag.appendChild(card);
|
|
});
|
|
grid.appendChild(frag);
|
|
}
|
|
|
|
async function loadNotesList() {
|
|
const status = document.getElementById('notesListStatus');
|
|
if (!status) return;
|
|
status.textContent = 'Loading notes...';
|
|
try {
|
|
const res = await pb.collection(NOTES_COLLECTION).getList(1, 50, { sort: '-created' });
|
|
const items = res?.items || [];
|
|
|
|
// Fetch all attachments per note so we can display accurate indicators
|
|
const attachmentsByNote = {};
|
|
await Promise.all(items.map(async (n) => {
|
|
try {
|
|
const atts = await pb.collection(ATTACHMENTS_COLLECTION).getFullList({
|
|
sort: '-created',
|
|
filter: `${ATTACHMENTS_PBID_FIELD} = "${n.id}"`,
|
|
batch: 50,
|
|
});
|
|
attachmentsByNote[n.id] = atts || [];
|
|
} catch {
|
|
attachmentsByNote[n.id] = [];
|
|
}
|
|
}));
|
|
|
|
notesCache = {};
|
|
notesList = items.map((n) => ({
|
|
...n,
|
|
_attachments: attachmentsByNote[n.id] || [],
|
|
_hasAttachment: (attachmentsByNote[n.id] || []).length > 0,
|
|
}));
|
|
notesList.forEach((n) => { notesCache[n.id] = n; });
|
|
applySearch();
|
|
status.textContent = '';
|
|
} catch (e) {
|
|
console.error('Failed to load notes:', e);
|
|
status.textContent = `Error loading notes: ${e.message}`;
|
|
}
|
|
}
|
|
|
|
function applySearch() {
|
|
const q = (searchQuery || '').toLowerCase();
|
|
if (!q) {
|
|
renderNotesList(notesList);
|
|
return;
|
|
}
|
|
const filtered = notesList.filter((n) => {
|
|
const hay = [
|
|
n.title,
|
|
n[NOTE_BODY_PLAIN_FIELD],
|
|
n[NOTE_BODY_HTML_FIELD] ? htmlToPlainText(n[NOTE_BODY_HTML_FIELD]) : '',
|
|
n.Job_Number,
|
|
n.type,
|
|
].join(' ').toLowerCase();
|
|
return hay.includes(q);
|
|
});
|
|
renderNotesList(filtered);
|
|
}
|
|
|
|
async function openNoteDetail(note) {
|
|
if (!note) return;
|
|
document.getElementById('notesListContainer').classList.add('hidden');
|
|
document.getElementById('noteContainer').classList.add('hidden');
|
|
document.getElementById('noteDetailContainer').classList.remove('hidden');
|
|
|
|
document.getElementById('noteDetailTitle').textContent = note.title || 'Untitled';
|
|
document.getElementById('noteDetailMeta').textContent = note.created ? `Created ${new Date(note.created).toLocaleString()}` : '';
|
|
const body = note[NOTE_BODY_PLAIN_FIELD] || (note[NOTE_BODY_HTML_FIELD] ? htmlToPlainText(note[NOTE_BODY_HTML_FIELD]) : '');
|
|
document.getElementById('noteDetailBody').textContent = body || '(empty)';
|
|
|
|
const audioEl = document.getElementById('noteDetailAudio');
|
|
const audioStatus = document.getElementById('noteDetailAudioStatus');
|
|
audioEl.classList.add('hidden');
|
|
audioEl.src = '';
|
|
audioStatus.textContent = 'Loading audio...';
|
|
try {
|
|
const atts = await pb.collection(ATTACHMENTS_COLLECTION).getList(1, 1, {
|
|
sort: '-created',
|
|
filter: `${ATTACHMENTS_PBID_FIELD} = "${note.id}"`,
|
|
});
|
|
if (atts.items.length) {
|
|
const att = atts.items[0];
|
|
audioEl.src = pb.files.getURL(att, att[ATTACHMENTS_FILE_FIELD]);
|
|
audioEl.classList.remove('hidden');
|
|
audioStatus.textContent = '';
|
|
} else {
|
|
audioStatus.textContent = 'No audio attached.';
|
|
}
|
|
} catch (e) {
|
|
audioStatus.textContent = `Audio load failed: ${e.message}`;
|
|
}
|
|
}
|
|
|
|
document.getElementById('notesGrid').addEventListener('click', (e) => {
|
|
const card = e.target.closest('[data-note-id]');
|
|
if (!card) return;
|
|
const note = notesCache[card.dataset.noteId];
|
|
if (note) openNoteDetail(note);
|
|
});
|
|
|
|
document.getElementById('newNoteBtn').addEventListener('click', () => {
|
|
resetNoteForm();
|
|
showNoteForm();
|
|
});
|
|
|
|
document.getElementById('refreshNotesBtn').addEventListener('click', () => {
|
|
loadNotesList();
|
|
});
|
|
|
|
document.getElementById('backToListBtn').addEventListener('click', () => {
|
|
showNotesList();
|
|
});
|
|
|
|
document.getElementById('detailBackBtn').addEventListener('click', () => {
|
|
showNotesList();
|
|
});
|
|
|
|
document.getElementById('detailNewNoteBtn').addEventListener('click', () => {
|
|
resetNoteForm();
|
|
showNoteForm();
|
|
});
|
|
|
|
// Search input + voice
|
|
const notesSearchInput = document.getElementById('notesSearch');
|
|
const searchVoiceBtn = document.getElementById('searchVoiceBtn');
|
|
|
|
function startSearchVoice() {
|
|
if (!searchRecognition) {
|
|
const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
if (!SR) {
|
|
console.warn('Web Speech API not supported');
|
|
return;
|
|
}
|
|
searchRecognition = new SR();
|
|
searchRecognition.continuous = true;
|
|
searchRecognition.interimResults = true;
|
|
searchRecognition.lang = 'en-US';
|
|
|
|
searchRecognition.onresult = (event) => {
|
|
let finalTranscript = '';
|
|
for (let i = 0; i < event.results.length; i++) {
|
|
if (event.results[i].isFinal) {
|
|
finalTranscript += event.results[i][0].transcript + ' ';
|
|
}
|
|
}
|
|
if (finalTranscript) {
|
|
notesSearchInput.value = finalTranscript.trim();
|
|
searchQuery = notesSearchInput.value;
|
|
applySearch();
|
|
}
|
|
// auto-stop after 2s of silence
|
|
clearTimeout(searchSilenceTimer);
|
|
searchSilenceTimer = setTimeout(() => {
|
|
stopSearchVoice();
|
|
}, 2000);
|
|
};
|
|
|
|
searchRecognition.onend = () => {
|
|
isSearchRecognizing = false;
|
|
searchVoiceBtn.classList.remove('text-red-600');
|
|
searchVoiceBtn.classList.add('text-purple-600');
|
|
};
|
|
|
|
searchRecognition.onerror = () => {
|
|
stopSearchVoice();
|
|
};
|
|
}
|
|
|
|
try {
|
|
clearTimeout(searchSilenceTimer);
|
|
searchRecognition.start();
|
|
isSearchRecognizing = true;
|
|
searchVoiceBtn.classList.add('text-red-600');
|
|
searchVoiceBtn.classList.remove('text-purple-600');
|
|
} catch (e) {
|
|
console.warn('Search voice start error:', e);
|
|
}
|
|
}
|
|
|
|
function stopSearchVoice() {
|
|
isSearchRecognizing = false;
|
|
clearTimeout(searchSilenceTimer);
|
|
if (searchRecognition) {
|
|
try { searchRecognition.stop(); } catch {}
|
|
}
|
|
searchVoiceBtn.classList.remove('text-red-600');
|
|
searchVoiceBtn.classList.add('text-purple-600');
|
|
}
|
|
|
|
notesSearchInput.addEventListener('input', (e) => {
|
|
searchQuery = e.target.value;
|
|
applySearch();
|
|
});
|
|
|
|
searchVoiceBtn.addEventListener('click', () => {
|
|
if (isSearchRecognizing) {
|
|
stopSearchVoice();
|
|
} else {
|
|
startSearchVoice();
|
|
}
|
|
});
|
|
|
|
// --- Submit note ---
|
|
async function submitNote() {
|
|
const statusEl = document.getElementById('submitStatus');
|
|
statusEl.textContent = '';
|
|
const noteText = document.getElementById('noteText').value.trim();
|
|
let noteTitle = document.getElementById('noteTitle').value.trim();
|
|
const jobNoteValue = document.getElementById('jobNote').value;
|
|
const noteType = document.getElementById('noteType').value;
|
|
const jobNumber = document.getElementById('jobNumber').value.trim();
|
|
if (!pb.authStore.isValid) {
|
|
statusEl.textContent = 'Not authenticated.';
|
|
return;
|
|
}
|
|
if (!noteText) {
|
|
statusEl.textContent = 'Please enter note text.';
|
|
return;
|
|
}
|
|
if (jobNoteValue === 'yes' && !jobNumber) {
|
|
statusEl.textContent = 'Job number is required when Job Note is Yes.';
|
|
return;
|
|
}
|
|
|
|
// Generate title if empty: "Untitled: first 4 words..."
|
|
if (!noteTitle) {
|
|
const words = noteText.split(/\s+/).filter(w => w.length > 0);
|
|
const firstFour = words.slice(0, 4).join(' ');
|
|
noteTitle = 'Untitled: ' + (firstFour || 'note');
|
|
// Add ellipsis if note has more than 4 words
|
|
if (words.length > 4) {
|
|
noteTitle += '...';
|
|
}
|
|
}
|
|
|
|
// Truncate title if it exceeds 120 characters
|
|
if (noteTitle.length > 120) {
|
|
noteTitle = noteTitle.substring(0, 120) + '...';
|
|
}
|
|
|
|
try {
|
|
// Create note record with display name, email, and title
|
|
const payload = {
|
|
[NOTE_BODY_HTML_FIELD]: plainTextToHTML(noteText),
|
|
[NOTE_BODY_PLAIN_FIELD]: noteText,
|
|
[NOTE_USERNAME_FIELD]: displayNameCache,
|
|
email: userEmailCache,
|
|
title: noteTitle,
|
|
job_note: jobNoteValue === 'yes',
|
|
type: noteType,
|
|
userId: pb.authStore.model?.id || pb.authStore.record?.id,
|
|
};
|
|
|
|
// Only include job_number if it has a value
|
|
if (jobNumber) {
|
|
payload.Job_Number = jobNumber;
|
|
}
|
|
|
|
const noteRecord = await pb.collection(NOTES_COLLECTION).create(payload);
|
|
let attachmentRecord = null;
|
|
if (recordedBlob) {
|
|
const file = new File([recordedBlob], 'note-audio.webm', { type: recordedBlob.type || 'audio/webm' });
|
|
const fd = new FormData();
|
|
fd.append(ATTACHMENTS_FILE_FIELD, file);
|
|
fd.append(ATTACHMENTS_PBID_FIELD, noteRecord.id);
|
|
attachmentRecord = await pb.collection(ATTACHMENTS_COLLECTION).create(fd);
|
|
}
|
|
statusEl.textContent = `Saved note ${noteRecord.id}` + (attachmentRecord ? ` with audio ${attachmentRecord.id}` : '');
|
|
clearAudio();
|
|
document.getElementById('noteText').value = '';
|
|
document.getElementById('noteTitle').value = '';
|
|
document.getElementById('jobNote').value = 'no';
|
|
document.getElementById('jobNumber').value = '';
|
|
document.getElementById('jobNumberContainer').classList.add('hidden');
|
|
document.getElementById('noteType').value = 'personal';
|
|
loadNotesList();
|
|
showNotesList();
|
|
} catch (e) {
|
|
console.error(e);
|
|
statusEl.textContent = `Error saving: ${e.message}`;
|
|
}
|
|
}
|
|
|
|
document.getElementById('submitNoteBtn').addEventListener('click', submitNote);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|