INIT frontend
This commit is contained in:
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Rich Text Editor - Free for Business</title>
|
||||
|
||||
<!-- Quill CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background: #f4f6f9;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #1a73e8;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
border: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
#editor {
|
||||
height: 400px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 16px;
|
||||
background: #1a73e8;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #1557b0;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #5f6368;
|
||||
}
|
||||
|
||||
button.secondary:hover {
|
||||
background: #484c50;
|
||||
}
|
||||
|
||||
#output {
|
||||
margin-top: 30px;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Rich Text Editor (Quill.js - MIT License)</h1>
|
||||
</header>
|
||||
|
||||
<div class="editor-wrapper">
|
||||
<!-- Toolbar will be injected here by Quill -->
|
||||
<div id="toolbar"></div>
|
||||
|
||||
<!-- Editor -->
|
||||
<div id="editor">
|
||||
<p>Start typing your content here...</p>
|
||||
<p>Use the toolbar to <strong>bold</strong>, <em>italicize</em>, add <u>underline</u>, or insert lists and links.</p>
|
||||
</div>
|
||||
|
||||
<!-- Custom Controls -->
|
||||
<div class="controls">
|
||||
<button id="save-html">Save as HTML</button>
|
||||
<button id="get-json">Get JSON</button>
|
||||
<button class="secondary" id="clear">Clear Editor</button>
|
||||
<button class="secondary" id="load-sample">Load Sample</button>
|
||||
</div>
|
||||
|
||||
<!-- Output Display -->
|
||||
<pre id="output"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quill JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
|
||||
|
||||
<script>
|
||||
// Initialize Quill editor
|
||||
const quill = new Quill('#editor', {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: [
|
||||
[{ 'header': [1, 2, 3, false] }],
|
||||
['bold', 'italic', 'underline'],
|
||||
['link', 'image'],
|
||||
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||||
[{ 'align': [] }],
|
||||
['clean']
|
||||
]
|
||||
},
|
||||
placeholder: 'Compose an epic...'
|
||||
});
|
||||
|
||||
// Custom Buttons
|
||||
document.getElementById('save-html').addEventListener('click', () => {
|
||||
const html = quill.root.innerHTML;
|
||||
const output = document.getElementById('output');
|
||||
output.textContent = html;
|
||||
output.style.display = 'block';
|
||||
alert('HTML copied to output below!');
|
||||
});
|
||||
|
||||
document.getElementById('get-json').addEventListener('click', () => {
|
||||
const delta = quill.getContents();
|
||||
const output = document.getElementById('output');
|
||||
output.textContent = JSON.stringify(delta, null, 2);
|
||||
output.style.display = 'block';
|
||||
alert('Delta JSON copied to output!');
|
||||
});
|
||||
|
||||
document.getElementById('clear').addEventListener('click', () => {
|
||||
if (confirm('Clear all content?')) {
|
||||
quill.setContents([]);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('load-sample').addEventListener('click', () => {
|
||||
quill.setContents({
|
||||
ops: [
|
||||
{ insert: 'Welcome to Your Rich Text Editor!\n', attributes: { header: 1 } },
|
||||
{ insert: 'This is ' },
|
||||
{ insert: 'bold', attributes: { bold: true } },
|
||||
{ insert: ', this is ' },
|
||||
{ insert: 'italic', attributes: { italic: true } },
|
||||
{ insert: ', and this is a ' },
|
||||
{ insert: 'link', attributes: { link: 'https://quilljs.com' } },
|
||||
{ insert: '.\n\n' },
|
||||
{ insert: 'Features include:\n', attributes: { list: 'bullet' } },
|
||||
{ insert: 'Images & embeds\n', attributes: { list: 'bullet' } },
|
||||
{ insert: 'Custom styles & output\n', attributes: { list: 'bullet' } },
|
||||
{ insert: '100% free for business use\n', attributes: { list: 'bullet' } }
|
||||
]
|
||||
});
|
||||
});
|
||||
/*
|
||||
* Rich Text Editor powered by Quill.js v2.0.2
|
||||
* © 2015–2025 Slab, Inc. and contributors
|
||||
* MIT License – https://quilljs.com
|
||||
* Thank you to the Quill team for this excellent open-source editor.
|
||||
*/
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Rich Text Editor - Free for Business</title>
|
||||
|
||||
<!-- Quill CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background: #f4f6f9;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #1a73e8;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
border: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
#editor {
|
||||
height: 400px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 16px;
|
||||
background: #1a73e8;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #1557b0;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #5f6368;
|
||||
}
|
||||
|
||||
button.secondary:hover {
|
||||
background: #484c50;
|
||||
}
|
||||
|
||||
#output {
|
||||
margin-top: 30px;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Rich Text Editor (Quill.js - MIT License)</h1>
|
||||
</header>
|
||||
|
||||
<div class="editor-wrapper">
|
||||
<!-- Toolbar will be injected here by Quill -->
|
||||
<div id="toolbar"></div>
|
||||
|
||||
<!-- Editor -->
|
||||
<div id="editor">
|
||||
<p>Start typing your content here...</p>
|
||||
<p>Use the toolbar to <strong>bold</strong>, <em>italicize</em>, add <u>underline</u>, or insert lists and links.</p>
|
||||
</div>
|
||||
|
||||
<!-- Custom Controls -->
|
||||
<div class="controls">
|
||||
<button id="save-html">Save as HTML</button>
|
||||
<button id="get-json">Get JSON</button>
|
||||
<button class="secondary" id="clear">Clear Editor</button>
|
||||
<button class="secondary" id="load-sample">Load Sample</button>
|
||||
</div>
|
||||
|
||||
<!-- Output Display -->
|
||||
<pre id="output"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quill JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
|
||||
|
||||
<script>
|
||||
// Initialize Quill editor
|
||||
const quill = new Quill('#editor', {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: [
|
||||
[{ 'header': [1, 2, 3, false] }],
|
||||
['bold', 'italic', 'underline'],
|
||||
['link', 'image'],
|
||||
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||||
[{ 'align': [] }],
|
||||
['clean']
|
||||
]
|
||||
},
|
||||
placeholder: 'Compose an epic...'
|
||||
});
|
||||
|
||||
// Custom Buttons
|
||||
document.getElementById('save-html').addEventListener('click', () => {
|
||||
const html = quill.root.innerHTML;
|
||||
const output = document.getElementById('output');
|
||||
output.textContent = html;
|
||||
output.style.display = 'block';
|
||||
alert('HTML copied to output below!');
|
||||
});
|
||||
|
||||
document.getElementById('get-json').addEventListener('click', () => {
|
||||
const delta = quill.getContents();
|
||||
const output = document.getElementById('output');
|
||||
output.textContent = JSON.stringify(delta, null, 2);
|
||||
output.style.display = 'block';
|
||||
alert('Delta JSON copied to output!');
|
||||
});
|
||||
|
||||
document.getElementById('clear').addEventListener('click', () => {
|
||||
if (confirm('Clear all content?')) {
|
||||
quill.setContents([]);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('load-sample').addEventListener('click', () => {
|
||||
quill.setContents({
|
||||
ops: [
|
||||
{ insert: 'Welcome to Your Rich Text Editor!\n', attributes: { header: 1 } },
|
||||
{ insert: 'This is ' },
|
||||
{ insert: 'bold', attributes: { bold: true } },
|
||||
{ insert: ', this is ' },
|
||||
{ insert: 'italic', attributes: { italic: true } },
|
||||
{ insert: ', and this is a ' },
|
||||
{ insert: 'link', attributes: { link: 'https://quilljs.com' } },
|
||||
{ insert: '.\n\n' },
|
||||
{ insert: 'Features include:\n', attributes: { list: 'bullet' } },
|
||||
{ insert: 'Images & embeds\n', attributes: { list: 'bullet' } },
|
||||
{ insert: 'Custom styles & output\n', attributes: { list: 'bullet' } },
|
||||
{ insert: '100% free for business use\n', attributes: { list: 'bullet' } }
|
||||
]
|
||||
});
|
||||
});
|
||||
/*
|
||||
* Rich Text Editor powered by Quill.js v2.0.2
|
||||
* © 2015–2025 Slab, Inc. and contributors
|
||||
* MIT License – https://quilljs.com
|
||||
* Thank you to the Quill team for this excellent open-source editor.
|
||||
*/
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Job List</title>
|
||||
|
||||
<!-- AG-Grid CSS (CDN) -->
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-grid.css">
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-theme-alpine.css">
|
||||
|
||||
<style>
|
||||
body {font-family:Arial,sans-serif;margin:20px;background:#f8f9fa;}
|
||||
.searchContainer{max-width:1600px;}
|
||||
.searchBox{background-color:#ccc;width:15%;padding:10px;border-radius:8px;border:1px solid#d1d5db;box-sizing:border-box;font-size: 18px;}
|
||||
.searchBoxInput {width:100%;outline:none;background:transparent;font-size:inherit;border:none;}
|
||||
.searchBoxInput::placeholder {color:#9ca3af;}
|
||||
.container {max-width:1600px;margin:auto;background:#fff;padding:20px;
|
||||
border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);}
|
||||
#myGrid {height:750px;width:100%;}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="searchContainer">
|
||||
<div class="searchBox"style="text-align: right;">
|
||||
<input id="searchBoxInput" placeholder="Search jobs (just start typing)">
|
||||
</div>
|
||||
<div class="container">
|
||||
|
||||
<div id="myGrid" class="ag-theme-alpine"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- AG-Grid JS (CDN) -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/dist/ag-grid-community.min.js"></script>
|
||||
|
||||
<script>
|
||||
/* ---------- 100 rows of sample data ---------- */
|
||||
const rowData = Array.from({length:100},(_,i)=>({
|
||||
job_number: 1000+i,
|
||||
job_name: `Project ${String.fromCharCode(65+(i%26))}${i+1}`,
|
||||
city: `City ${i+1}`,
|
||||
country: 'USA',
|
||||
email: `job${i+1}@corp.com`,
|
||||
phone: `555-${String(100+i).padStart(3,'0')}`,
|
||||
dept: ['Eng','Mkt','Sales','HR','Fin','IT'][i%6],
|
||||
salary: `$${(90+i%20)*1000}`,
|
||||
join: `2024-${String((i%12)+1).padStart(2,'0')}-01`,
|
||||
status: i%8===0?'Review':'Active',
|
||||
projA: `${65+i%35}%`, projB: `${70+i%30}%`, projC: `${73+i%27}%`,
|
||||
rating: (4.0+(i%10)/10).toFixed(1),
|
||||
notes: 'On track',
|
||||
manager: `M${i%5+1}`,
|
||||
team: `T${String.fromCharCode(65+i%8)}`,
|
||||
region: ['N','S','E','W'][i%4],
|
||||
bonus: `$${i*400}`,
|
||||
review: 'Good'
|
||||
}));
|
||||
|
||||
/* ---------- Column definitions ---------- */
|
||||
const columnDefs = [
|
||||
{field:'job_number',headerName:'Job_Number',pinned:'left',width:120,hide:false},
|
||||
{field:'job_name', headerName:'Job_Name', pinned:'left',width:160},
|
||||
{field:'city', headerName:'City'},
|
||||
{field:'country', headerName:'Country'},
|
||||
{field:'email', headerName:'Email'},
|
||||
{field:'phone', headerName:'Phone'},
|
||||
{field:'dept', headerName:'Dept'},
|
||||
{field:'salary', headerName:'Salary'},
|
||||
{field:'join', headerName:'Join'},
|
||||
{field:'status', headerName:'Status'},
|
||||
{field:'projA', headerName:'Proj A'},
|
||||
{field:'projB', headerName:'Proj B'},
|
||||
{field:'projC', headerName:'Proj C'},
|
||||
{field:'rating', headerName:'Rating'},
|
||||
{field:'notes', headerName:'Notes'},
|
||||
{field:'manager', headerName:'Manager'},
|
||||
{field:'team', headerName:'Team'},
|
||||
{field:'region', headerName:'Region'},
|
||||
{field:'bonus', headerName:'Bonus'},
|
||||
{field:'review', headerName:'Review'}
|
||||
];
|
||||
|
||||
/* ---------- Grid options ---------- */
|
||||
const gridOptions = {
|
||||
columnDefs,
|
||||
rowData,
|
||||
defaultColDef:{resizable:true,sortable:true,filter:true},
|
||||
onGridReady: params => {
|
||||
window.gridApi = params.api;
|
||||
window.columnApi = params.columnApi;
|
||||
}
|
||||
};
|
||||
|
||||
/* ---------- Create the grid ---------- */
|
||||
new agGrid.Grid(document.querySelector('#myGrid'), gridOptions);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
body {font-family:system-ui;max-width:600px;margin:40px auto;padding:20px;}
|
||||
input, button {width:100%;padding:12px;margin:8px 0;font-size:16px;border:1px solid #ccc;border-radius:6px;}
|
||||
button {background:#0d6efd;color:#fff;border:none;cursor:pointer;font-weight:bold;}
|
||||
button:disabled {background:#6c757d;cursor:not-allowed;}
|
||||
.out {margin-top:16px;padding:12px;border-radius:6px;font-weight:bold;}
|
||||
.success {background:#d1e7dd;color:#0f5132;}
|
||||
.error {background:#f8d7da;color:#842029;}
|
||||
</style>
|
||||
<title>PB Export - Component Ready</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<input type="email" id="email" placeholder="admin@example.com">
|
||||
<input type="password" id="pass" placeholder="password">
|
||||
<input type="text" id="token" readonly style="background:#f4f4f4;">
|
||||
<button id="login">Log In</button>
|
||||
<button id="exportB" disabled>Export Job_Info CSV</button>
|
||||
<div id="status"></div>
|
||||
|
||||
<script type="module">
|
||||
import PocketBase from "https://cdn.jsdelivr.net/npm/pocketbase@latest/dist/pocketbase.es.mjs";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// --- Initialize PocketBase ---
|
||||
const pb = new PocketBase('http://10.10.1.109:8080');
|
||||
pb.authStore.clear();
|
||||
|
||||
// --- Select DOM elements ---
|
||||
const email = document.getElementById('email');
|
||||
const pass = document.getElementById('pass');
|
||||
const token = document.getElementById('token');
|
||||
const loginB = document.getElementById('login');
|
||||
const exportB = document.getElementById('exportB');
|
||||
const status = document.getElementById('status');
|
||||
|
||||
// --- Helper functions ---
|
||||
function showSuccess(msg) {
|
||||
status.className = 'out success';
|
||||
status.textContent = msg;
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
status.className = 'out error';
|
||||
status.textContent = msg;
|
||||
}
|
||||
|
||||
function downloadCSV(content, filename) {
|
||||
const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
|
||||
const a = document.createElement('a');
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = filename;
|
||||
a.click();
|
||||
}
|
||||
|
||||
// --- Login handler ---
|
||||
async function getToken() {
|
||||
try {
|
||||
loginB.disabled = true;
|
||||
exportB.disabled = true;
|
||||
|
||||
if (!email.value || !pass.value) throw new Error("Email and password are required.");
|
||||
|
||||
await pb.collection('_superusers').authWithPassword(email.value, pass.value);
|
||||
|
||||
if (!pb.authStore.isValid) throw new Error("Login failed.");
|
||||
|
||||
token.value = pb.authStore.token;
|
||||
showSuccess("Logged in successfully.");
|
||||
exportB.disabled = false; // enable export after successful login
|
||||
|
||||
} catch(err) {
|
||||
showError("Login failed: " + err.message);
|
||||
} finally {
|
||||
loginB.disabled = false;
|
||||
}
|
||||
}
|
||||
loginB.addEventListener("click", getToken);
|
||||
|
||||
// --- Export handler ---
|
||||
exportB.onclick = async () => {
|
||||
try {
|
||||
exportB.disabled = true;
|
||||
const records = await pb.collection('Job_Info').getFullList({ sort: 'Job_Number' });
|
||||
|
||||
if (!records.length) throw new Error('No records found.');
|
||||
|
||||
// --- Generate CSV ---
|
||||
const sample = records[0];
|
||||
const fields = ['pb_id', ...Object.keys(sample).filter(f => f !== 'id')];
|
||||
|
||||
const csv = [
|
||||
fields.join(','),
|
||||
...records.map(r => {
|
||||
const row = { pb_id: r.id }; // use record ID
|
||||
fields.slice(1).forEach(f => row[f] = r[f] ?? '');
|
||||
return fields.map(f => `"${String(row[f]).replace(/"/g, '""')}"`).join(',');
|
||||
})
|
||||
].join('\n');
|
||||
|
||||
downloadCSV(csv, `Job_Info_Export_${new Date().toISOString().slice(0,10)}.csv`);
|
||||
showSuccess(`Exported ${records.length} records successfully.`);
|
||||
|
||||
} catch(err) {
|
||||
showError("Export failed: " + err.message);
|
||||
} finally {
|
||||
exportB.disabled = false;
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,467 @@
|
||||
|
||||
<!--Notes-->
|
||||
<!--11/26/2025 Updated Sync Section to avoid duplicate creation and update existing records even if pb_id isn't present
|
||||
// Updated header map-->
|
||||
<!--Prod Ready as of 11/17/2025-->
|
||||
<!--Use Google Chrome-->
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Job Sheet → PocketBase Sync (Final Forever Version)</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
max-width: 560px;
|
||||
margin: 30px auto;
|
||||
padding: 20px;
|
||||
background: #f4f6f9;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.5;
|
||||
}
|
||||
h1 { font-size: 1.6rem; color: #0d6efd; margin-bottom: 8px; }
|
||||
p { margin: 8px 0; font-size: 0.95rem; color: #444; }
|
||||
input, button {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
margin: 10px 0;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
/* Button States */
|
||||
#loginBtn { background: #0d6efd; color: white; }
|
||||
#loginBtn.logged-in { background: #198754; } /* Green = logged in */
|
||||
#syncBtn { background: #6c757d; }
|
||||
#syncBtn.ready { background: #198754; } /* Green = ready to sync */
|
||||
#syncBtn.syncing { background: #0d6efd; }
|
||||
#syncBtn.done { background: #198754; } /* Same green as login */
|
||||
#deleteAllBtn { background: #dc3545; }
|
||||
|
||||
.file-drop {
|
||||
border: 3px dashed #0d6efd;
|
||||
padding: 50px;
|
||||
text-align: center;
|
||||
border-radius: 12px;
|
||||
background: #f0f8ff;
|
||||
font-size: 18px;
|
||||
color: #0d6efd;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.file-drop.dragover { background: #cce5ff; border-color: #0069d9; }
|
||||
|
||||
.progress { margin: 12px 0; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; }
|
||||
.progress-bar { height: 100%; background: #0d6efd; width: 0%; transition: width 0.4s; }
|
||||
|
||||
.out { padding: 14px; border-radius: 8px; font-weight: bold; margin-top: 16px; }
|
||||
.success { background: #d1e7dd; color: #0f5132; }
|
||||
.error { background: #f8d7da; color: #842029; }
|
||||
|
||||
.info {
|
||||
background: #0a0a0a;
|
||||
color: #0ff;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
margin-top: 16px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.section {
|
||||
background: white;
|
||||
padding: 16px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
margin: 16px 0;
|
||||
}
|
||||
.note {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
margin-top: 20px;
|
||||
padding: 12px;
|
||||
background: #fffbe6;
|
||||
border-left: 4px solid #ffe58f;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="section">
|
||||
<h1>Job Sheet → PocketBase Sync</h1>
|
||||
<p>Headers = Excel Row 3 • Data starts = Row 4 • Zero violations • Fully documented</p>
|
||||
</div>
|
||||
|
||||
<form autocomplete="on">
|
||||
<input type="text" id="pbUrl" placeholder="PocketBase URL" value="http://10.10.1.109:8080" autocomplete="url">
|
||||
<input type="email" id="email" placeholder="Admin email" autocomplete="username email">
|
||||
<input type="password" id="pass" placeholder="Password" autocomplete="current-password">
|
||||
|
||||
<div class="file-drop" id="dropZone">
|
||||
Drag & drop your Job Sheet here<br>or click to select
|
||||
<input type="file" id="excelFile" accept=".xlsx,.xls" style="display:none;">
|
||||
</div>
|
||||
<div class="progress"><div class="progress-bar" id="progressBar"></div></div>
|
||||
|
||||
<button type="button" id="loginBtn">1. Login to PocketBase</button>
|
||||
<button type="button" id="syncBtn" disabled>2. SYNC to Job_Info</button>
|
||||
<button type="button" id="deleteAllBtn" disabled>DELETE ALL RECORDS (DANGER)</button>
|
||||
</form>
|
||||
|
||||
<div id="status" class="out"></div>
|
||||
<pre id="debug" class="info"></pre>
|
||||
|
||||
<div class="note">
|
||||
<strong>Future-Proof Notes:</strong><br>
|
||||
• If the Excel layout ever changes (e.g. headers move to Row 4), change only the two numbers in the "ROW CONFIG" section.<br>
|
||||
• If PocketBase field names change, update only the HEADER_MAP below.<br>
|
||||
• If CDN links break in 5+ years, replace the two <script> imports with newer ones from cdn.jsdelivr.net.
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
// ================================================
|
||||
// 1. IMPORTS — These load the libraries from the internet
|
||||
// If they ever break, go to https://cdn.jsdelivr.net and get new links
|
||||
// ================================================
|
||||
import PocketBase from "https://cdn.jsdelivr.net/npm/pocketbase@latest/dist/pocketbase.es.mjs";
|
||||
import * as XLSX from "https://cdn.jsdelivr.net/npm/xlsx@0.18.5/xlsx.mjs";
|
||||
|
||||
// ================================================
|
||||
// 2. DOM ELEMENTS — Getting buttons and inputs
|
||||
// ================================================
|
||||
const $ = id => document.getElementById(id);
|
||||
const pbUrl = $('pbUrl');
|
||||
const emailInput = $('email');
|
||||
const pass = $('pass');
|
||||
const fileInput = $('excelFile');
|
||||
const dropZone = $('dropZone');
|
||||
const loginBtn = $('loginBtn');
|
||||
const syncBtn = $('syncBtn');
|
||||
const deleteAllBtn = $('deleteAllBtn');
|
||||
const status = $('status');
|
||||
const debug = $('debug');
|
||||
const progressBar = $('progressBar');
|
||||
|
||||
let pb = null; // Will hold PocketBase connection
|
||||
let tableData = []; // Will hold parsed Excel rows
|
||||
const COLLECTION = 'Job_Info';
|
||||
|
||||
// ================================================
|
||||
// 3. ROW CONFIG — Only change these if Excel layout changes!
|
||||
// Your current file:
|
||||
// Row 1 (index 0) → big title
|
||||
// Row 2 (index 1) → group labels
|
||||
// Row 3 (index 2) → REAL headers ← we use this
|
||||
// Row 4 (index 3) → first real data
|
||||
// ================================================
|
||||
const HEADER_ROW_INDEX = 2; // ← Row 3 in Excel
|
||||
const DATA_START_ROW_INDEX = 3; // ← Row 4 in Excel
|
||||
|
||||
// ================================================
|
||||
// 4. HEADER MAPPING — Excel column name → PocketBase field name
|
||||
// Only edit the right side if your PocketBase fields change
|
||||
// ================================================
|
||||
const HEADER_MAP = {
|
||||
"Job_Number": "Job_Number",
|
||||
"Job_Full_Name": "Job_Full_Name",
|
||||
"Job_Name": "Job_Name",
|
||||
"Job Address": "Job_Address",
|
||||
"Job Type": "Job_Type",
|
||||
"Flag": "Flag",
|
||||
"Job Status": "Job_Status",
|
||||
"Job Division": "Job_Division",
|
||||
"Estimator": "Estimator",
|
||||
"Office Rep": "Office_Rep",
|
||||
"Manager": "Manager",
|
||||
"Company/Client": "Company_Client",
|
||||
"Contact Person": "Contact_Person",
|
||||
"Phone Number": "Phone_Number",
|
||||
"Email": "Email",
|
||||
"Due Date": "Due_Date",
|
||||
"Due Date Source": "Due_Date_Source",
|
||||
"Due Date Counter": "Due_Date_Counter",
|
||||
"Due Time": "Due_Time",
|
||||
"Docs Uploaded": "Docs_Uploaded",
|
||||
"QB Created": "QB_Created",
|
||||
"Added to Calendar": "Added to Calendar",
|
||||
"PSwift Uploaded": "PSwift_Uploaded",
|
||||
"Voxer Created": "Voxer_Created",
|
||||
"Estimate Reviewed": "Estimate_Reviewed",
|
||||
"Estimate Draft": "Estimate_Draft",
|
||||
"Estimate Approved": "Estimate_Approved",
|
||||
"Start Date": "Start_Date",
|
||||
"Schedule\nConfidence": "Schedule_Confidence", // handles newline in header
|
||||
"Notes": "Notes",
|
||||
"Job QB Link": "Job_QB_Link",
|
||||
"Voxer Link": "Voxer_Link",
|
||||
"Job_Codes": "Job_Codes",
|
||||
"Submission Date": "Submission_Date",
|
||||
"Active": "Active",
|
||||
"Job Folder Link": "Job_Folder_Link",
|
||||
"Tax Exempt": "Tax_Exempt",
|
||||
"pb_id": "id"
|
||||
};
|
||||
|
||||
// ================================================
|
||||
// 5. DRAG & DROP + FILE SELECTION
|
||||
// ================================================
|
||||
dropZone.addEventListener('click', () => fileInput.click());
|
||||
['dragenter','dragover','dragleave','drop'].forEach(ev =>
|
||||
dropZone.addEventListener(ev, e => { e.preventDefault(); e.stopPropagation(); })
|
||||
);
|
||||
dropZone.addEventListener('dragover', () => dropZone.classList.add('dragover'));
|
||||
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
|
||||
dropZone.addEventListener('drop', e => {
|
||||
dropZone.classList.remove('dragover');
|
||||
if (e.dataTransfer.files[0]) loadFile(e.dataTransfer.files[0]);
|
||||
});
|
||||
fileInput.addEventListener('change', () => {
|
||||
if (fileInput.files[0]) loadFile(fileInput.files[0]);
|
||||
});
|
||||
|
||||
// ================================================
|
||||
// 6. EXCEL PARSING — With progress + no freezing
|
||||
// Uses async yielding to avoid "long task" warnings
|
||||
// ================================================
|
||||
function loadFile(file) {
|
||||
debug.textContent = `File: ${file.name} (${(file.size/1024/1024).toFixed(2)} MB)\nReading...\n`;
|
||||
progressBar.style.width = '0%';
|
||||
const reader = new FileReader();
|
||||
reader.onload = async e => {
|
||||
const data = e.target.result;
|
||||
await parseExcelWithYield(data);
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
}
|
||||
|
||||
async function parseExcelWithYield(data) {
|
||||
const workbook = XLSX.read(data, { type: 'array', cellDates: true });
|
||||
const sheet = workbook.Sheets[workbook.SheetNames[0]];
|
||||
const range = XLSX.utils.decode_range(sheet['!ref']);
|
||||
const merges = sheet['!merges'] || [];
|
||||
|
||||
const getValue = (r, c) => {
|
||||
const addr = XLSX.utils.encode_cell({ r, c });
|
||||
const cell = sheet[addr];
|
||||
if (cell) return cell.v ?? cell.w ?? null;
|
||||
for (const m of merges) {
|
||||
if (m.s.r <= r && r <= m.e.r && m.s.c <= c && c <= m.e.c) {
|
||||
const master = sheet[XLSX.utils.encode_cell({ r: m.s.r, c: m.s.c })];
|
||||
return master ? (master.v ?? master.w ?? null) : null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// Read headers
|
||||
const rawHeaders = [];
|
||||
for (let c = range.s.c; c <= range.e.c; c++) {
|
||||
let h = getValue(HEADER_ROW_INDEX, c);
|
||||
rawHeaders.push(h ? String(h).trim() : '');
|
||||
}
|
||||
|
||||
debug.textContent += `\nFound ${rawHeaders.length} columns in Row 3\n`;
|
||||
debug.textContent += `Headers: ${rawHeaders.slice(0, 20).join(' | ')}${rawHeaders.length > 20 ? ' ...' : ''}\n\n`;
|
||||
|
||||
// Parse data rows
|
||||
const total = range.e.r - DATA_START_ROW_INDEX + 1;
|
||||
let processed = 0;
|
||||
const rows = [];
|
||||
|
||||
for (let r = DATA_START_ROW_INDEX; r <= range.e.r; r++) {
|
||||
const row = {};
|
||||
let hasData = false;
|
||||
|
||||
for (let c = range.s.c; c <= range.e.c; c++) {
|
||||
const excelHeader = rawHeaders[c - range.s.c];
|
||||
const pbField = HEADER_MAP[excelHeader];
|
||||
if (!pbField) continue;
|
||||
|
||||
let val = getValue(r, c);
|
||||
if (val !== null && val !== undefined) {
|
||||
const s = String(val).trim();
|
||||
if (s === '' || /^n\/?a$/i.test(s) || s === '#N/A') val = null;
|
||||
}
|
||||
row[pbField] = val;
|
||||
if (val !== null && val !== '') hasData = true;
|
||||
}
|
||||
|
||||
if (hasData) rows.push(row);
|
||||
processed++;
|
||||
|
||||
// Show progress + yield control every 40 rows → no violations
|
||||
if (processed % 40 === 0) {
|
||||
progressBar.style.width = (processed / total * 100) + '%';
|
||||
await new Promise(res => setTimeout(res, 0));
|
||||
}
|
||||
}
|
||||
|
||||
tableData = rows;
|
||||
progressBar.style.width = '100%';
|
||||
setTimeout(() => progressBar.style.width = '0%', 1200);
|
||||
|
||||
showSuccess(`Loaded ${rows.length} real jobs – Ready to sync`);
|
||||
debug.textContent += `First job preview:\n`;
|
||||
if (rows[0]) {
|
||||
debug.textContent += `Job_Number: ${rows[0].Job_Number}\n`;
|
||||
debug.textContent += `Job_Full_Name: ${rows[0].Job_Full_Name}\n`;
|
||||
debug.textContent += `Active: ${rows[0].Active}\n`;
|
||||
debug.textContent += `pb_id (for updates): ${rows[0].id}\n`;
|
||||
}
|
||||
syncBtn.classList.add('ready');
|
||||
syncBtn.disabled = false;
|
||||
}
|
||||
|
||||
// ================================================
|
||||
// 7. LOGIN — Turns green when successful
|
||||
// ================================================
|
||||
loginBtn.onclick = async () => {
|
||||
const url = pbUrl.value.trim();
|
||||
if (!url || !emailInput.value || !pass.value) return showError('Fill all fields');
|
||||
loginBtn.disabled = true;
|
||||
loginBtn.textContent = 'Logging in...';
|
||||
try {
|
||||
pb = new PocketBase(url);
|
||||
await pb.collection('_superusers').authWithPassword(emailInput.value, pass.value);
|
||||
loginBtn.classList.add('logged-in');
|
||||
loginBtn.textContent = 'Logged In';
|
||||
showSuccess('Logged in successfully');
|
||||
syncBtn.disabled = false;
|
||||
deleteAllBtn.disabled = false;
|
||||
} catch (e) {
|
||||
showError('Login failed: ' + e.message);
|
||||
loginBtn.textContent = '1. Login to PocketBase';
|
||||
} finally {
|
||||
loginBtn.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
// ================================================
|
||||
// 8. SYNC — Green when ready, stays green when done
|
||||
// ================================================
|
||||
|
||||
syncBtn.onclick = async () => {
|
||||
if (!tableData.length) return showError('Load Excel first');
|
||||
|
||||
syncBtn.classList.remove('ready');
|
||||
syncBtn.classList.add('syncing');
|
||||
syncBtn.textContent = 'Syncing...';
|
||||
showStatus('Syncing jobs...');
|
||||
|
||||
let created = 0, updated = 0;
|
||||
|
||||
try {
|
||||
// ------------------------------
|
||||
// ORIGINAL: Get all existing PB records
|
||||
// ------------------------------
|
||||
const existing = await pb.collection(COLLECTION).getFullList();
|
||||
const idMap = new Map(existing.map(r => [r.id, r]));
|
||||
|
||||
// Additional: Also map PocketBase by Job_Number
|
||||
// This prevents duplicates when Excel has no pb_id
|
||||
const jobMap = new Map(
|
||||
existing
|
||||
.filter(r => r.Job_Number != null && String(r.Job_Number).trim() !== "")
|
||||
.map(r => [String(r.Job_Number).trim(), r])
|
||||
);
|
||||
|
||||
// ------------------------------
|
||||
// Process each Excel row
|
||||
// ------------------------------
|
||||
for (const row of tableData) {
|
||||
const pbId = row.id; // Excel pb_id, may be null
|
||||
const excelJob = row.Job_Number ? String(row.Job_Number).trim() : null;
|
||||
|
||||
delete row.id; // Remove id from payload
|
||||
|
||||
// Skip truly empty rows
|
||||
if (Object.values(row).every(v => v === null || v === '')) continue;
|
||||
|
||||
try {
|
||||
// ------------------------------------------------------------
|
||||
// PRIORITY 1: Update by pb_id
|
||||
// ------------------------------------------------------------
|
||||
if (pbId && idMap.has(pbId)) {
|
||||
await pb.collection(COLLECTION).update(pbId, row);
|
||||
updated++;
|
||||
continue;
|
||||
}
|
||||
// ------------------------------------------------------------
|
||||
// PRIORITY 2: Update by Job_Number
|
||||
// Only used when pb_id is missing
|
||||
// Prevents duplicate creation
|
||||
// ------------------------------------------------------------
|
||||
if (excelJob && jobMap.has(excelJob)) {
|
||||
const match = jobMap.get(excelJob);
|
||||
await pb.collection(COLLECTION).update(match.id, row);
|
||||
updated++;
|
||||
continue;
|
||||
}
|
||||
// ------------------------------------------------------------
|
||||
// PRIORITY 3 → Otherwise create a new record
|
||||
// ------------------------------------------------------------
|
||||
await pb.collection(COLLECTION).create(row);
|
||||
created++;
|
||||
|
||||
} catch (e) {
|
||||
debug.textContent += `Row error: ${e.message}\n`;
|
||||
}
|
||||
}
|
||||
|
||||
showSuccess(`Sync complete — ${created} created, ${updated} updated`);
|
||||
syncBtn.classList.add('done');
|
||||
syncBtn.textContent = 'Sync Complete';
|
||||
|
||||
} catch (e) {
|
||||
showError('Sync failed: ' + e.message);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// ================================================
|
||||
// 9. DELETE ALL — Danger button
|
||||
// ================================================
|
||||
deleteAllBtn.onclick = async () => {
|
||||
if (!confirm('Delete EVERY record in Job_Info')) return;
|
||||
if (prompt('Type DELETE to confirm permanent deletion:') !== 'DELETE') {
|
||||
showError('Cancelled');
|
||||
return;
|
||||
}
|
||||
deleteAllBtn.disabled = true;
|
||||
deleteAllBtn.textContent = 'Deleting...';
|
||||
try {
|
||||
const list = await pb.collection(COLLECTION).getFullList();
|
||||
for (let i = 0; i < list.length; i += 50) {
|
||||
await Promise.all(list.slice(i, i + 50).map(r => pb.collection(COLLECTION).delete(r.id)));
|
||||
}
|
||||
showSuccess(`Deleted all ${list.length} records`);
|
||||
} catch (e) {
|
||||
showError('Delete failed: ' + e.message);
|
||||
} finally {
|
||||
deleteAllBtn.disabled = false;
|
||||
deleteAllBtn.textContent = 'DELETE ALL RECORDS (DANGER)';
|
||||
}
|
||||
};
|
||||
|
||||
// ================================================
|
||||
// 10. UI HELPERS
|
||||
// ================================================
|
||||
function showStatus(m) { status.className = 'out'; status.textContent = m; }
|
||||
function showSuccess(m) { status.className = 'out success'; status.textContent = m; }
|
||||
function showError(m) { status.className = 'out error'; status.textContent = m; }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Auth Response</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Processing login...</p>
|
||||
|
||||
<script src="https://alcdn.msauth.net/browser/2.36.1/js/msal-browser.min.js"></script>
|
||||
<script type="module">
|
||||
import { initializeAuth } from "/src/auth.js";
|
||||
import { log } from "/src/logger.js";
|
||||
log("AUTH-RESPONSE page loaded.");
|
||||
initializeAuth().then(() => {
|
||||
log("Redirect handling complete. Returning to app...");
|
||||
// After MSAL processes tokens, return to the main app
|
||||
window.location.href = "/";
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Job Info — Vanilla JS</title>
|
||||
<style>
|
||||
/* Integrated CSS for layout, cards, notes, impersonation banner as in your working version */
|
||||
body { font-family: sans-serif; margin:0; background:#f3f4f6; }
|
||||
#impersonationBanner { display:none; position:fixed; top:0; left:0; right:0; background:#ffcc00; color:#000; padding:10px; font-weight:bold; text-align:center; z-index:9999; }
|
||||
#impersonationBanner button { margin-left:10px; padding:4px 8px; cursor:pointer; }
|
||||
/* other CSS omitted for brevity, keep integrated as in your working file */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="impersonationBanner">
|
||||
⚠️ Impersonation Mode Active — All actions are logged as the impersonated user
|
||||
<button id="exitImpersonation">Return to Admin</button>
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
<h1>Job Info</h1>
|
||||
<div class="progress-wrap"><div id="progressBar" class="progress-bar"></div></div>
|
||||
<input id="searchBox" placeholder="Search jobs">
|
||||
<button id="filterToggle">Show Filters</button>
|
||||
<div id="filtersPanel">
|
||||
<!-- Filters as in working version -->
|
||||
</div>
|
||||
<div id="results"></div>
|
||||
</div>
|
||||
|
||||
<div id="detailModal" role="dialog" aria-modal="true">
|
||||
<div id="detailBox">
|
||||
<h2 style="margin-top:0;color:#0d6efd">Job Detail</h2>
|
||||
<table class="detail-table" id="detailTable"></table>
|
||||
<div id="jobFolderLink"><strong>Job Folder Link</strong><div><span id="jobFolderAnchor">No Link Available</span></div></div>
|
||||
<h3>Notes</h3>
|
||||
<div id="jobNotes"></div>
|
||||
<div class="toolbar" id="toolbar">
|
||||
<!-- Toolbar buttons -->
|
||||
</div>
|
||||
<div id="newNote" contenteditable="true" aria-label="New note"></div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn green" id="btnSubmit">Submit</button>
|
||||
<button class="btn gray" id="btnClearNote">Clear</button>
|
||||
<button class="btn red" id="btnClose">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(async function() {
|
||||
// --- Tokens & impersonation ---
|
||||
const impersonationToken = localStorage.getItem('pb_token');
|
||||
const originalToken = localStorage.getItem('pb_original_token');
|
||||
const banner = document.getElementById('impersonationBanner');
|
||||
|
||||
if (impersonationToken) {
|
||||
if (window.pb) window.pb.authStore.save(impersonationToken, null);
|
||||
banner.style.display = 'block';
|
||||
}
|
||||
|
||||
document.getElementById('exitImpersonation')?.addEventListener('click', () => {
|
||||
if (originalToken) {
|
||||
localStorage.setItem('pb_token', originalToken);
|
||||
localStorage.removeItem('pb_original_token');
|
||||
} else {
|
||||
localStorage.removeItem('pb_token');
|
||||
}
|
||||
banner.style.display = 'none';
|
||||
location.reload();
|
||||
});
|
||||
|
||||
// --- Fetch jobs, render, filters, notes, toolbar logic ---
|
||||
// Use the same logic from your working index.html
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,401 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" maximum-scale="1" />
|
||||
<title>Job Info — Vanilla JS</title>
|
||||
<style>
|
||||
/*impersonate styling*/
|
||||
body { font-family: sans-serif; margin: 0; }
|
||||
#impersonationBanner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #ffcc00;
|
||||
color: #000;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
}
|
||||
#impersonationBanner button {
|
||||
margin-left: 10px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Basic layout */
|
||||
:root { --accent:#0d6efd; --muted:#6b7280; --card-bg:#ffffff; --card-border:#d1e7ff; }
|
||||
body{font-family:Inter,Arial,Helvetica,sans-serif;background:#f3f4f6;margin:0;color:#111; overflow-x: hidden; touch-action: pan-y;}
|
||||
.wrap{max-width:100%-5px;box-sizing:border-box;margin:18px auto;padding:16px;font-size:17px;}
|
||||
h1{margin:0 0 12px;text-align:center;color:var(--accent);font-size:33px;font-weight:700;}
|
||||
|
||||
/* Progress */
|
||||
.progress-wrap{width:100%;background:#e6edf7;height:6px;border-radius:4px;overflow:hidden;margin-bottom:12px;}
|
||||
.progress-bar{height:100%;width:0;background:var(--accent);transition:width .18s linear;}
|
||||
|
||||
/* Search + filter toggle */
|
||||
#searchBox{width:100%;padding:10px;border-radius:8px;border:1px solid #d1d5db;margin-bottom:8px;box-sizing:border-box;font-size: 18px;}
|
||||
#searchBox::placeholder{color:#9ca3af;}
|
||||
#filterToggle{background:var(--accent);color:#fff;padding:8px 10px;border-radius:8px;border:none;cursor:pointer;margin-bottom:8px;display:inline-block;}
|
||||
|
||||
/* Filters panel */
|
||||
#filtersPanel{display:none;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:10px;margin-bottom:10px;}
|
||||
.filter-group{margin-bottom:8px;font-size:14px;}
|
||||
.filter-group label{margin-right:8px;cursor:pointer;color:var(--muted);}
|
||||
|
||||
/* Results/cards */
|
||||
#results{display:flex;flex-direction:column;gap:12px;max-height:56vh;overflow:auto;padding:4px;}
|
||||
.card{background:var(--card-bg);border-radius:10px;padding:10px;border:1px solid #e6f0ff;box-shadow:0 6px 14px rgba(14,30,37,0.04);cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;gap:4px;}
|
||||
.card-row{display:flex;align-items:center;gap:8px;font-size:18px;line-height:1.2;margin-bottom:2px;}
|
||||
.card-label{font-weight:700;color:#374151;min-width:72px;white-space:nowrap;}
|
||||
.card-info{color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
|
||||
.active-dot{position:absolute;top:10px;right:10px;width:14px;height:14px;border-radius:999px;border:2px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,0.12);}
|
||||
|
||||
/* Modal */
|
||||
#detailModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);align-items:flex-start;justify-content:center;padding-top:2vh;z-index:999;}
|
||||
#detailBox{margin-block-start:0;margin-block-end:0;background:#fff;border-radius:10px;padding:2px 12px 6px 10px;max-width:380px;width:92%;max-height:84vh;overflow:auto;box-sizing:border-box;}
|
||||
.h2{margin-top:0; margin-bottom:2px;margin-block-end:0;}
|
||||
.detail-table{margin-top: 0;width:100%;border-collapse:collapse;margin-bottom:4px;}
|
||||
.detail-table td{border:1px solid #eef2ff;padding:0px 6px 6px 6px;font-size:13px;vertical-align:top;}
|
||||
.detail-table td.label{width:40%;background:#fbfdff;font-weight:700;color:#374151;}
|
||||
#jobFolderLink{margin-bottom:10px;font-size:13px;}
|
||||
#jobFolderLink a, #jobFolderLink span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
|
||||
/* Notes */
|
||||
#jobNotes{min-height:120px;max-height:200px;overflow:auto;padding:4px;border:1px solid #e6e9ef;border-radius:4px;font-size:11px;background:transparent;}
|
||||
#newNote{min-height:56px;max-height:120px;overflow:auto;padding:8px;border:1px solid #d7dbe3;border-radius:8px;font-size:16px;background:transparent;margin-top:6px;}
|
||||
.toolbar{display:flex;flex-wrap:wrap;margin-bottom:3px;margin-top:5px} /* small space below toolbar */
|
||||
.toolbar button{
|
||||
height:28px;
|
||||
width:32px;
|
||||
font-size:12px;
|
||||
padding:0 4px;
|
||||
border-radius:6px;
|
||||
border:1px solid #ccc;
|
||||
background:#ccc;
|
||||
color:#111;
|
||||
cursor:pointer;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
margin: 1px;
|
||||
}
|
||||
.toolbar button#tbClear{
|
||||
width:auto;
|
||||
padding:4px 8px;
|
||||
background:#9ca3af; /* slightly darker gray */
|
||||
color:#fff;
|
||||
}
|
||||
.toolbar button.active{
|
||||
background:#d1e7ff;
|
||||
color:#111;
|
||||
border-color:#0d6efd;
|
||||
}
|
||||
|
||||
.modal-actions{display:flex;gap:8px;margin-top:6px;margin-bottom:50px;}
|
||||
.btn{padding:8px 10px;border-radius:8px;border:none;color:#fff;cursor:pointer;}
|
||||
.btn.green{background:#16a34a;} .btn.gray{background:#6b7280;} .btn.red{background:#dc2626;}
|
||||
|
||||
/* responsive small */
|
||||
@media (max-width:380px){ .wrap{padding:12px;} .card{height:98px;} }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Load MSAL from CDN (required for vanilla) -->
|
||||
<script src="https://alcdn.msauth.net/browser/2.36.1/js/msal-browser.min.js"></script>
|
||||
<script type="module" src="/src/app.js"></script>
|
||||
|
||||
<!-- Banner UI for impersonation mode -->
|
||||
<div id="impersonationBanner">
|
||||
⚠️ Impersonation Mode Active – Actions are logged as the impersonated user
|
||||
<button id="exitImpersonation">Return to Admin</button>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<h1>Job Info</h1>
|
||||
|
||||
<div class="progress-wrap">
|
||||
<div id="progressBar" class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<input id="searchBox" placeholder="Search jobs (just start typing)">
|
||||
|
||||
<button id="filterToggle">Show Filters</button>
|
||||
|
||||
<div id="filtersPanel">
|
||||
<div class="filter-group">
|
||||
<strong>Division</strong><br/>
|
||||
<label><input type="checkbox" class="filter-division" value="C#"> Commercial</label>
|
||||
<label><input type="checkbox" class="filter-division" value="R#"> Residential</label>
|
||||
<label><input type="checkbox" class="filter-division" value="S#"> Small Jobs</label>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<strong>Active</strong><br/>
|
||||
<label><input type="checkbox" class="filter-active" value="Yes"> Yes</label>
|
||||
<label><input type="checkbox" class="filter-active" value="No"> No</label>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<strong>Status</strong><br/>
|
||||
<label><input type="checkbox" class="filter-status" value="Estimating"> Estimating</label>
|
||||
<label><input type="checkbox" class="filter-status" value="In Progress"> In Progress</label>
|
||||
<label><input type="checkbox" class="filter-status" value="Awarded"> Awarded</label>
|
||||
<label><input type="checkbox" class="filter-status" value="Billed (In Progress)"> Billed (In Progress)</label>
|
||||
<label><input type="checkbox" class="filter-status" value="Not Bidding"> Not Bidding</label>
|
||||
<label><input type="checkbox" class="filter-status" value="Est Sent"> Est Sent</label>
|
||||
<label><input type="checkbox" class="filter-status" value="Not Awarded"> Not Awarded</label>
|
||||
</div>
|
||||
<button id="clearFilters" style="background:#6b7280;color:white;padding:8px;border-radius:8px;border:none;">Clear Filters</button>
|
||||
</div>
|
||||
|
||||
<div id="results" aria-live="polite"></div>
|
||||
</div>
|
||||
|
||||
<!-- Detail Modal -->
|
||||
<div id="detailModal" role="dialog" aria-modal="true">
|
||||
<div id="detailBox">
|
||||
<h2 style="margin-top:0;color:var(--accent)">Job Detail</h2>
|
||||
|
||||
<table class="detail-table" id="detailTable"></table>
|
||||
|
||||
<div id="jobFolderLink"><strong>Job Folder Link</strong><div><span id="jobFolderAnchor">No Link Available</span></div></div>
|
||||
|
||||
<h3 style="margin:8px 0 6px 0">Notes</h3>
|
||||
<div id="jobNotes"></div>
|
||||
|
||||
<div class="toolbar" id="toolbar">
|
||||
<button data-cmd="bold" id="tbBold"><strong>B</strong></button>
|
||||
<button data-cmd="italic" id="tbItalic"><em>I</em></button>
|
||||
<button data-cmd="underline" id="tbUnderline"><u>U</u></button>
|
||||
<button data-cmd="foreColor" data-val="#ff0000" id="tbRed" style="color:#ef4444">A</button>
|
||||
<button data-cmd="foreColor" data-val="#0000ff" id="tbBlue" style="color:#2563eb">A</button>
|
||||
<button data-cmd="foreColor" data-val="#000000" id="tbBlack" style="color:#000">A</button>
|
||||
<button data-cmd="removeFormat" id="tbClear">Reset</button>
|
||||
</div>
|
||||
|
||||
<div id="newNote" contenteditable="true" aria-label="New note"></div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn green" id="btnSubmit">Submit</button>
|
||||
<button class="btn gray" id="btnClearNote">Clear</button>
|
||||
<button class="btn red" id="btnClose">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="impersonationBanner" style="
|
||||
display:none; position:fixed; top:0; left:0; right:0;
|
||||
background:#ffcc00; color:#000; padding:10px; font-weight:bold;
|
||||
text-align:center; z-index:9999;">
|
||||
⚠️ Impersonation Mode Active — All actions are logged as the impersonated user
|
||||
<button id="exitImpersonation"
|
||||
style="margin-left:10px; padding:4px 8px; cursor:pointer;">Return to Admin</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(async function() {
|
||||
// --- Tokens & impersonation ---
|
||||
const impersonationToken = localStorage.getItem('pb_token');
|
||||
const originalToken = localStorage.getItem('pb_original_token');
|
||||
const banner = document.getElementById('impersonationBanner');
|
||||
|
||||
if (impersonationToken) {
|
||||
if (window.pb) window.pb.authStore.save(impersonationToken, null);
|
||||
banner.style.display = 'block';
|
||||
}
|
||||
|
||||
// Exit impersonation button
|
||||
document.getElementById('exitImpersonation')?.addEventListener('click', () => {
|
||||
if (originalToken) {
|
||||
localStorage.setItem('pb_token', originalToken);
|
||||
localStorage.removeItem('pb_original_token');
|
||||
} else {
|
||||
localStorage.removeItem('pb_token');
|
||||
}
|
||||
banner.style.display = 'none';
|
||||
location.reload();
|
||||
});
|
||||
|
||||
window.addEventListener('keydown', e => {
|
||||
if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'i') {
|
||||
document.getElementById('exitImpersonation')?.click();
|
||||
}
|
||||
});
|
||||
|
||||
// --- Utility ---
|
||||
const fetchNoCache = (url, options={}) => fetch(url + `&_ts=${Date.now()}`, options);
|
||||
const PB_COLLECTION_URL = "http://10.10.1.109:8080/api/collections/pbc_1431294567/records";
|
||||
const perPage = 50;
|
||||
|
||||
let jobsCache = [], visibleJobs = [], currentJob = null;
|
||||
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
const searchBox = document.getElementById('searchBox');
|
||||
const resultsEl = document.getElementById('results');
|
||||
const filtersPanel = document.getElementById('filtersPanel');
|
||||
const filterToggle = document.getElementById('filterToggle');
|
||||
|
||||
const detailModal = document.getElementById('detailModal');
|
||||
const detailTable = document.getElementById('detailTable');
|
||||
const jobFolderAnchor = document.getElementById('jobFolderAnchor');
|
||||
const jobNotes = document.getElementById('jobNotes');
|
||||
const newNote = document.getElementById('newNote');
|
||||
|
||||
const toolbar = document.getElementById('toolbar');
|
||||
const tbButtons = Array.from(toolbar.querySelectorAll('button'));
|
||||
|
||||
const safeLower = v => (v||'').toString().trim().toLowerCase();
|
||||
|
||||
let prog=0, progTimer=null;
|
||||
function startProgress(){
|
||||
prog=0; progressBar.style.width='0%';
|
||||
if(progTimer) clearInterval(progTimer);
|
||||
progTimer=setInterval(()=>{
|
||||
if(prog<85){ prog+=Math.random()*6; progressBar.style.width=Math.min(85,prog).toFixed(2)+'%'; }
|
||||
else clearInterval(progTimer);
|
||||
},180);
|
||||
}
|
||||
function finishProgress(){ if(progTimer) clearInterval(progTimer); progressBar.style.width='100%'; setTimeout(()=>{progressBar.parentElement.style.display='none';},260); }
|
||||
|
||||
// --- Fetch all jobs ---
|
||||
async function fetchAllJobs(){
|
||||
startProgress(); jobsCache=[]; let page=1, totalItems=0;
|
||||
try{
|
||||
while(true){
|
||||
const url = `${PB_COLLECTION_URL}?page=${page}&perPage=${perPage}`;
|
||||
const res = await fetchNoCache(url);
|
||||
if(!res.ok) throw new Error(`Fetch failed: ${res.status}`);
|
||||
const data = await res.json();
|
||||
const items = data.items || [];
|
||||
jobsCache.push(...items);
|
||||
totalItems = data.totalItems || (items.length + ((page-1)*perPage));
|
||||
progressBar.style.width = Math.min(95, Math.floor((jobsCache.length / Math.max(1,totalItems)) * 95)) + '%';
|
||||
if(jobsCache.length >= totalItems || items.length===0) break;
|
||||
page++;
|
||||
}
|
||||
finishProgress();
|
||||
applyFiltersAndRender();
|
||||
}catch(err){ finishProgress(); alert('Failed to fetch jobs: '+err.message); console.error(err);}
|
||||
}
|
||||
|
||||
function applyFiltersAndRender(){
|
||||
const q = safeLower(searchBox.value||'');
|
||||
const divisionVals = Array.from(document.querySelectorAll('.filter-division:checked')).map(i=>i.value);
|
||||
const activeVals = Array.from(document.querySelectorAll('.filter-active:checked')).map(i=>i.value);
|
||||
const statusVals = Array.from(document.querySelectorAll('.filter-status:checked')).map(i=>i.value);
|
||||
|
||||
visibleJobs = jobsCache.filter(job=>{
|
||||
const searchable = [job.Job_Number, job.Job_Full_Name, job.Job_Address, job.Contact_Person, job.Company_Client, job.Notes].join(' ').toLowerCase();
|
||||
if(q && !searchable.includes(q)) return false;
|
||||
if(divisionVals.length && !divisionVals.includes(job.Job_Division)) return false;
|
||||
if(activeVals.length && !activeVals.includes(job.Active)) return false;
|
||||
if(statusVals.length && !statusVals.includes(job.Job_Status||'')) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
renderCards(visibleJobs);
|
||||
}
|
||||
|
||||
function renderCards(list){
|
||||
resultsEl.innerHTML='';
|
||||
if(!list.length){ resultsEl.innerHTML = `<div style="padding:8px;color:#475569;background:#fff;border-radius:8px;border:1px solid #e6eefc">No results</div>`; return; }
|
||||
for(const job of list){
|
||||
const card=document.createElement('div'); card.className='card';
|
||||
card.innerHTML=`
|
||||
<div class="card-row"><div class="card-label">Job #:</div><div class="card-info">${escapeHtml(job.Job_Number||'')}</div></div>
|
||||
<div class="card-row"><div class="card-label">Job Name:</div><div class="card-info">${escapeHtml(job.Job_Full_Name||'')}</div></div>
|
||||
<div class="card-row"><div class="card-label">Contact:</div><div class="card-info">${escapeHtml(job.Contact_Person||'')}</div></div>
|
||||
`;
|
||||
const dot=document.createElement('div'); dot.className='active-dot';
|
||||
dot.style.background=(String(job.Active||'').toLowerCase()==='yes')?'green':((String(job.Active||'').toLowerCase()==='no')?'red':'#cbd5e1');
|
||||
card.appendChild(dot);
|
||||
card.addEventListener('click',()=>openDetail(job));
|
||||
resultsEl.appendChild(card);
|
||||
}
|
||||
}
|
||||
function escapeHtml(str){ return String(str).replaceAll('&','&').replaceAll('<','<').replaceAll('>','>'); }
|
||||
|
||||
// --- Filters ---
|
||||
filterToggle.addEventListener('click',()=>{ filtersPanel.style.display = filtersPanel.style.display==='block'?'none':'block'; filterToggle.textContent = filtersPanel.style.display==='block'?'Hide Filters':'Show Filters'; });
|
||||
searchBox.addEventListener('input',()=>applyFiltersAndRender());
|
||||
document.querySelectorAll('.filter-division').forEach(cb=>cb.addEventListener('change',()=>applyFiltersAndRender()));
|
||||
document.querySelectorAll('.filter-active').forEach(cb=>{ cb.addEventListener('change',()=>{
|
||||
if(cb.checked) document.querySelectorAll('.filter-active').forEach(o=>{if(o!==cb)o.checked=false;}); applyFiltersAndRender();
|
||||
});});
|
||||
document.querySelectorAll('.filter-status').forEach(cb=>cb.addEventListener('change',()=>applyFiltersAndRender()));
|
||||
document.getElementById('clearFilters').addEventListener('click',()=>{
|
||||
document.querySelectorAll('.filter-division, .filter-active, .filter-status').forEach(cb=>cb.checked=false);
|
||||
applyFiltersAndRender();
|
||||
});
|
||||
|
||||
// --- Modal & Notes ---
|
||||
function openDetail(job){
|
||||
currentJob = job;
|
||||
detailTable.innerHTML = '';
|
||||
const fields = ["Job_Full_Name","Job_Number","Company_Client","Manager","Contact_Person","Phone_Number","Job_Address","Start_Date","Tax_Exempt","Job_Status"];
|
||||
for(const f of fields){
|
||||
const tr = document.createElement('tr');
|
||||
const tdLabel = document.createElement('td'); tdLabel.className='label'; tdLabel.textContent=f.replace(/_/g,' ');
|
||||
const tdVal = document.createElement('td'); tdVal.textContent=job[f]||'';
|
||||
tr.appendChild(tdLabel); tr.appendChild(tdVal); detailTable.appendChild(tr);
|
||||
}
|
||||
|
||||
// Job folder link
|
||||
jobFolderAnchor.innerHTML = '';
|
||||
if(job.Job_Folder_Link && String(job.Job_Folder_Link).trim()!==''){
|
||||
try{ const url=new URL(job.Job_Folder_Link); const a=document.createElement('a'); a.href=url.href; a.target='_blank'; a.rel='noopener noreferrer'; a.textContent=url.href; a.style.color='#0d6efd'; a.style.textDecoration='underline'; jobFolderAnchor.appendChild(a);
|
||||
}catch(e){ jobFolderAnchor.textContent='No Link Available'; jobFolderAnchor.style.color='#374151'; jobFolderAnchor.style.textDecoration='none'; }
|
||||
} else { jobFolderAnchor.textContent='No Link Available'; jobFolderAnchor.style.color='#374151'; jobFolderAnchor.style.textDecoration='none'; }
|
||||
|
||||
jobNotes.innerHTML = job.Notes || '';
|
||||
newNote.innerHTML = '';
|
||||
tbButtons.forEach(b=>b.classList.remove('active'));
|
||||
detailModal.style.display='flex';
|
||||
}
|
||||
document.getElementById('btnClose').addEventListener('click',()=>{detailModal.style.display='none';});
|
||||
|
||||
// --- Toolbar ---
|
||||
let savedSelection = null;
|
||||
function saveSelection(){ const sel=window.getSelection(); if(sel.rangeCount>0)savedSelection=sel.getRangeAt(0);}
|
||||
function restoreSelection(){ const sel=window.getSelection(); if(savedSelection){ sel.removeAllRanges(); sel.addRange(savedSelection);}}
|
||||
newNote.addEventListener('mouseup',saveSelection); newNote.addEventListener('keyup',saveSelection); newNote.addEventListener('focus',saveSelection);
|
||||
tbButtons.forEach(btn=>{
|
||||
btn.addEventListener('mousedown', e=>{
|
||||
e.preventDefault();
|
||||
restoreSelection();
|
||||
const cmd = btn.dataset.cmd;
|
||||
if(!cmd) return;
|
||||
if(cmd==='foreColor'){ const val=btn.dataset.val; document.execCommand(cmd,false,val); tbButtons.forEach(b=>{if(b.dataset.cmd==='foreColor'&&b!==btn)b.classList.remove('active');}); btn.classList.toggle('active'); }
|
||||
else if(cmd==='removeFormat'){ restoreSelection(); const sel=window.getSelection(); if(sel.rangeCount>0){ const range=sel.getRangeAt(0); let content=range.toString(); range.deleteContents(); range.insertNode(document.createTextNode(content)); range.setStartAfter(range.startContainer); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } tbButtons.forEach(b=>b.classList.remove('active')); }
|
||||
else{ document.execCommand(cmd,false,null); btn.classList.toggle('active'); }
|
||||
newNote.focus(); saveSelection();
|
||||
});
|
||||
});
|
||||
|
||||
// --- Submit Note ---
|
||||
document.getElementById('btnSubmit').addEventListener('click', async()=>{
|
||||
const html=newNote.innerHTML.trim(); if(!html){alert('Enter note text'); return;}
|
||||
const timestamp=new Date().toLocaleString();
|
||||
const currentUserName = window.pb?.authStore?.model?.display_name || 'Unknown';
|
||||
const formatted=`<p><strong>[${currentUserName} ${timestamp}]</strong> ${html}</p>`;
|
||||
const updatedNotes = formatted + (currentJob.Notes||'');
|
||||
try{
|
||||
const res = await fetch(`${PB_COLLECTION_URL}/${currentJob.id}`,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({Notes:updatedNotes})});
|
||||
if(!res.ok) throw new Error('Update failed: '+res.status);
|
||||
const updated=await res.json();
|
||||
const idx=jobsCache.findIndex(j=>j.id===currentJob.id); if(idx>=0) jobsCache[idx].Notes=updated.Notes; currentJob.Notes=updated.Notes;
|
||||
jobNotes.innerHTML=updated.Notes; newNote.innerHTML='';
|
||||
applyFiltersAndRender();
|
||||
}catch(err){alert('Error saving note: '+err.message); console.error(err);}
|
||||
});
|
||||
document.getElementById('btnClearNote').addEventListener('click',()=>newNote.innerHTML='');
|
||||
|
||||
// --- Init ---
|
||||
fetchAllJobs();
|
||||
})();
|
||||
</script>
|
||||
v1.0.2
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,404 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" maximum-scale="1" />
|
||||
<title>Job Info — Vanilla JS</title>
|
||||
<style>
|
||||
/* Basic layout */
|
||||
:root { --accent:#0d6efd; --muted:#6b7280; --card-bg:#ffffff; --card-border:#d1e7ff; }
|
||||
body{font-family:Inter,Arial,Helvetica,sans-serif;background:#f3f4f6;margin:0;color:#111; overflow-x: hidden; touch-action: pan-y;}
|
||||
.wrap{max-width:100%-5px;box-sizing:border-box;margin:18px auto;padding:16px;font-size:17px;}
|
||||
h1{margin:0 0 12px;text-align:center;color:var(--accent);font-size:33px;font-weight:700;}
|
||||
|
||||
/* Progress */
|
||||
.progress-wrap{width:100%;background:#e6edf7;height:6px;border-radius:4px;overflow:hidden;margin-bottom:12px;}
|
||||
.progress-bar{height:100%;width:0;background:var(--accent);transition:width .18s linear;}
|
||||
|
||||
/* Search + filter toggle */
|
||||
#searchBox{width:100%;padding:10px;border-radius:8px;border:1px solid #d1d5db;margin-bottom:8px;box-sizing:border-box;font-size: 18px;}
|
||||
#searchBox::placeholder{color:#9ca3af;}
|
||||
#filterToggle{background:var(--accent);color:#fff;padding:8px 10px;border-radius:8px;border:none;cursor:pointer;margin-bottom:8px;display:inline-block;}
|
||||
|
||||
/* Filters panel */
|
||||
#filtersPanel{display:none;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:10px;margin-bottom:10px;}
|
||||
.filter-group{margin-bottom:8px;font-size:14px;}
|
||||
.filter-group label{margin-right:8px;cursor:pointer;color:var(--muted);}
|
||||
|
||||
/* Results/cards */
|
||||
#results{display:flex;flex-direction:column;gap:12px;max-height:56vh;overflow:auto;padding:4px;}
|
||||
.card{background:var(--card-bg);border-radius:10px;padding:10px;border:1px solid #e6f0ff;box-shadow:0 6px 14px rgba(14,30,37,0.04);cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;gap:4px;}
|
||||
.card-row{display:flex;align-items:center;gap:8px;font-size:18px;line-height:1.2;margin-bottom:2px;}
|
||||
.card-label{font-weight:700;color:#374151;min-width:72px;white-space:nowrap;}
|
||||
.card-info{color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
|
||||
.active-dot{position:absolute;top:10px;right:10px;width:14px;height:14px;border-radius:999px;border:2px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,0.12);}
|
||||
|
||||
/* Modal */
|
||||
#detailModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);align-items:flex-start;justify-content:center;padding-top:2vh;z-index:999;}
|
||||
#detailBox{margin-block-start:0;margin-block-end:0;background:#fff;border-radius:10px;padding:2px 12px 6px 10px;max-width:380px;width:92%;max-height:84vh;overflow:auto;box-sizing:border-box;}
|
||||
.h2{margin-top:0; margin-bottom:2px;margin-block-end:0;}
|
||||
.detail-table{margin-top: 0;width:100%;border-collapse:collapse;margin-bottom:4px;}
|
||||
.detail-table td{border:1px solid #eef2ff;padding:0px 6px 6px 6px;font-size:13px;vertical-align:top;}
|
||||
.detail-table td.label{width:40%;background:#fbfdff;font-weight:700;color:#374151;}
|
||||
#jobFolderLink{margin-bottom:10px;font-size:13px;}
|
||||
#jobFolderLink a, #jobFolderLink span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
|
||||
/* Notes */
|
||||
#jobNotes{min-height:120px;max-height:200px;overflow:auto;padding:4px;border:1px solid #e6e9ef;border-radius:4px;font-size:11px;background:transparent;}
|
||||
#newNote{min-height:56px;max-height:120px;overflow:auto;padding:8px;border:1px solid #d7dbe3;border-radius:8px;font-size:16px;background:transparent;margin-top:6px;}
|
||||
.toolbar{display:flex;flex-wrap:wrap;margin-bottom:3px;margin-top:5px} /* small space below toolbar */
|
||||
.toolbar button{
|
||||
height:28px;
|
||||
width:32px;
|
||||
font-size:12px;
|
||||
padding:0 4px;
|
||||
border-radius:6px;
|
||||
border:1px solid #ccc;
|
||||
background:#ccc;
|
||||
color:#111;
|
||||
cursor:pointer;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
margin: 1px;
|
||||
}
|
||||
.toolbar button#tbClear{
|
||||
width:auto;
|
||||
padding:4px 8px;
|
||||
background:#9ca3af; /* slightly darker gray */
|
||||
color:#fff;
|
||||
}
|
||||
.toolbar button.active{
|
||||
background:#d1e7ff;
|
||||
color:#111;
|
||||
border-color:#0d6efd;
|
||||
}
|
||||
|
||||
.modal-actions{display:flex;gap:8px;margin-top:6px;margin-bottom:50px;}
|
||||
.btn{padding:8px 10px;border-radius:8px;border:none;color:#fff;cursor:pointer;}
|
||||
.btn.green{background:#16a34a;} .btn.gray{background:#6b7280;} .btn.red{background:#dc2626;}
|
||||
|
||||
/* responsive small */
|
||||
@media (max-width:380px){ .wrap{padding:12px;} .card{height:98px;} }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<h1>Job Info</h1>
|
||||
|
||||
<div class="progress-wrap">
|
||||
<div id="progressBar" class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<input id="searchBox" placeholder="Search jobs (just start typing)">
|
||||
|
||||
<button id="filterToggle">Show Filters</button>
|
||||
|
||||
<div id="filtersPanel">
|
||||
<div class="filter-group">
|
||||
<strong>Division</strong><br/>
|
||||
<label><input type="checkbox" class="filter-division" value="C#"> Commercial</label>
|
||||
<label><input type="checkbox" class="filter-division" value="R#"> Residential</label>
|
||||
<label><input type="checkbox" class="filter-division" value="S#"> Small Jobs</label>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<strong>Active</strong><br/>
|
||||
<label><input type="checkbox" class="filter-active" value="Yes"> Yes</label>
|
||||
<label><input type="checkbox" class="filter-active" value="No"> No</label>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<strong>Status</strong><br/>
|
||||
<label><input type="checkbox" class="filter-status" value="Estimating"> Estimating</label>
|
||||
<label><input type="checkbox" class="filter-status" value="In Progress"> In Progress</label>
|
||||
<label><input type="checkbox" class="filter-status" value="Awarded"> Awarded</label>
|
||||
<label><input type="checkbox" class="filter-status" value="Billed (In Progress)"> Billed (In Progress)</label>
|
||||
<label><input type="checkbox" class="filter-status" value="Not Bidding"> Not Bidding</label>
|
||||
<label><input type="checkbox" class="filter-status" value="Est Sent"> Est Sent</label>
|
||||
<label><input type="checkbox" class="filter-status" value="Not Awarded"> Not Awarded</label>
|
||||
</div>
|
||||
<button id="clearFilters" style="background:#6b7280;color:white;padding:8px;border-radius:8px;border:none;">Clear Filters</button>
|
||||
</div>
|
||||
|
||||
<div id="results" aria-live="polite"></div>
|
||||
</div>
|
||||
|
||||
<!-- Detail Modal -->
|
||||
<div id="detailModal" role="dialog" aria-modal="true">
|
||||
<div id="detailBox">
|
||||
<h2 style="margin-top:0;color:var(--accent)">Job Detail</h2>
|
||||
|
||||
<table class="detail-table" id="detailTable"></table>
|
||||
|
||||
<div id="jobFolderLink"><strong>Job Folder Link</strong><div><span id="jobFolderAnchor">No Link Available</span></div></div>
|
||||
|
||||
<h3 style="margin:8px 0 6px 0">Notes</h3>
|
||||
<div id="jobNotes"></div>
|
||||
|
||||
<div class="toolbar" id="toolbar">
|
||||
<button data-cmd="bold" id="tbBold"><strong>B</strong></button>
|
||||
<button data-cmd="italic" id="tbItalic"><em>I</em></button>
|
||||
<button data-cmd="underline" id="tbUnderline"><u>U</u></button>
|
||||
<button data-cmd="foreColor" data-val="#ff0000" id="tbRed" style="color:#ef4444">A</button>
|
||||
<button data-cmd="foreColor" data-val="#0000ff" id="tbBlue" style="color:#2563eb">A</button>
|
||||
<button data-cmd="foreColor" data-val="#000000" id="tbBlack" style="color:#000">A</button>
|
||||
<button data-cmd="removeFormat" id="tbClear">Reset</button>
|
||||
</div>
|
||||
|
||||
<div id="newNote" contenteditable="true" aria-label="New note"></div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn green" id="btnSubmit">Submit</button>
|
||||
<button class="btn gray" id="btnClearNote">Clear</button>
|
||||
<button class="btn red" id="btnClose">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* Force Refresh so jobs aren't stuck in local storage cache */
|
||||
const fetchNoCache = (url, options={}) => fetch(url + `&_ts=${Date.now()}`, options);
|
||||
/* Set location where the pocketbase tables are */
|
||||
const PB_COLLECTION_URL = "http://10.10.1.47:8080/api/collections/pbc_1431294567/records";
|
||||
const perPage = 50;
|
||||
|
||||
let jobsCache = [], visibleJobs = [], currentJob = null;
|
||||
|
||||
/* DOM refs */
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
const searchBox = document.getElementById('searchBox');
|
||||
const resultsEl = document.getElementById('results');
|
||||
const filtersPanel = document.getElementById('filtersPanel');
|
||||
const filterToggle = document.getElementById('filterToggle');
|
||||
|
||||
const detailModal = document.getElementById('detailModal');
|
||||
const detailTable = document.getElementById('detailTable');
|
||||
const jobFolderAnchor = document.getElementById('jobFolderAnchor');
|
||||
const jobNotes = document.getElementById('jobNotes');
|
||||
const newNote = document.getElementById('newNote');
|
||||
|
||||
const toolbar = document.getElementById('toolbar');
|
||||
const tbButtons = Array.from(toolbar.querySelectorAll('button'));
|
||||
|
||||
function safeLower(v){ return (v||'').toString().trim().toLowerCase(); }
|
||||
|
||||
let prog=0, progTimer=null;
|
||||
function startProgress(){
|
||||
prog=0; progressBar.style.width='0%';
|
||||
if(progTimer) clearInterval(progTimer);
|
||||
progTimer=setInterval(()=>{
|
||||
if(prog<85){ prog+=Math.random()*6; progressBar.style.width=Math.min(85,prog).toFixed(2)+'%'; }
|
||||
else clearInterval(progTimer);
|
||||
},180);
|
||||
}
|
||||
function finishProgress(){ if(progTimer) clearInterval(progTimer); progressBar.style.width='100%'; setTimeout(()=>{progressBar.parentElement.style.display='none';},260); }
|
||||
|
||||
async function fetchAllJobs(){
|
||||
startProgress(); jobsCache=[]; let page=1, totalItems=0;
|
||||
try{
|
||||
while(true){
|
||||
const url = `${PB_COLLECTION_URL}?page=${page}&perPage=${perPage}`;
|
||||
const res = await fetchNoCache(url);
|
||||
if(!res.ok) throw new Error(`Fetch failed: ${res.status}`);
|
||||
const data = await res.json();
|
||||
const items = data.items || [];
|
||||
jobsCache.push(...items);
|
||||
totalItems = data.totalItems || (items.length + ((page-1)*perPage));
|
||||
progressBar.style.width = Math.min(95, Math.floor((jobsCache.length / Math.max(1,totalItems)) * 95)) + '%';
|
||||
if(jobsCache.length >= totalItems || items.length===0) break;
|
||||
page++;
|
||||
}
|
||||
finishProgress();
|
||||
applyFiltersAndRender();
|
||||
}catch(err){ finishProgress(); alert('Failed to fetch jobs: '+err.message); console.error(err);}
|
||||
}
|
||||
|
||||
function applyFiltersAndRender(){
|
||||
const q = safeLower(searchBox.value||'');
|
||||
const divisionVals = Array.from(document.querySelectorAll('.filter-division:checked')).map(i=>i.value);
|
||||
const activeVals = Array.from(document.querySelectorAll('.filter-active:checked')).map(i=>i.value);
|
||||
const statusVals = Array.from(document.querySelectorAll('.filter-status:checked')).map(i=>i.value);
|
||||
|
||||
visibleJobs = jobsCache.filter(job=>{
|
||||
const searchable = [job.Job_Number, job.Job_Full_Name, job.Job_Address, job.Contact_Person, job.Company_Client, job.Notes].join(' ').toLowerCase();
|
||||
if(q && !searchable.includes(q)) return false;
|
||||
if(divisionVals.length && !divisionVals.includes(job.Job_Division)) return false;
|
||||
if(activeVals.length && !activeVals.includes(job.Active)) return false;
|
||||
if(statusVals.length && !statusVals.includes(job.Job_Status||'')) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
renderCards(visibleJobs);
|
||||
}
|
||||
|
||||
function renderCards(list){
|
||||
resultsEl.innerHTML='';
|
||||
if(!list.length){ resultsEl.innerHTML = `<div style="padding:8px;color:#475569;background:#fff;border-radius:8px;border:1px solid #e6eefc">No results</div>`; return; }
|
||||
for(const job of list){
|
||||
const card=document.createElement('div'); card.className='card';
|
||||
card.innerHTML=`
|
||||
<div class="card-row"><div class="card-label">Job #:</div><div class="card-info">${escapeHtml(job.Job_Number||'')}</div></div>
|
||||
<div class="card-row"><div class="card-label">Job Name:</div><div class="card-info">${escapeHtml(job.Job_Full_Name||'')}</div></div>
|
||||
<div class="card-row"><div class="card-label">Contact:</div><div class="card-info">${escapeHtml(job.Contact_Person||'')}</div></div>
|
||||
`;
|
||||
const dot=document.createElement('div'); dot.className='active-dot';
|
||||
dot.style.background=(String(job.Active||'').toLowerCase()==='yes')?'green':((String(job.Active||'').toLowerCase()==='no')?'red':'#cbd5e1');
|
||||
card.appendChild(dot);
|
||||
card.addEventListener('click',()=>openDetail(job));
|
||||
resultsEl.appendChild(card);
|
||||
}
|
||||
}
|
||||
function escapeHtml(str){ return String(str).replaceAll('&','&').replaceAll('<','<').replaceAll('>','>'); }
|
||||
|
||||
/* Filters */
|
||||
filterToggle.addEventListener('click',()=>{
|
||||
filtersPanel.style.display = filtersPanel.style.display==='block'?'none':'block';
|
||||
filterToggle.textContent = filtersPanel.style.display==='block'?'Hide Filters':'Show Filters';
|
||||
});
|
||||
searchBox.addEventListener('input',()=>applyFiltersAndRender());
|
||||
document.querySelectorAll('.filter-division').forEach(cb=>cb.addEventListener('change',()=>applyFiltersAndRender()));
|
||||
document.querySelectorAll('.filter-active').forEach(cb=>{ cb.addEventListener('change',()=>{
|
||||
if(cb.checked) document.querySelectorAll('.filter-active').forEach(o=>{if(o!==cb)o.checked=false;}); applyFiltersAndRender();
|
||||
});});
|
||||
document.querySelectorAll('.filter-status').forEach(cb=>cb.addEventListener('change',()=>applyFiltersAndRender()));
|
||||
document.getElementById('clearFilters').addEventListener('click',()=>{
|
||||
document.querySelectorAll('.filter-division, .filter-active, .filter-status').forEach(cb=>cb.checked=false);
|
||||
applyFiltersAndRender();
|
||||
});
|
||||
|
||||
/* Modal & Notes */
|
||||
function openDetail(job){
|
||||
currentJob = job;
|
||||
detailTable.innerHTML = '';
|
||||
|
||||
const fields = ["Job_Full_Name","Job_Number","Company_Client","Manager","Contact_Person","Phone_Number","Job_Address","Start_Date","Tax_Exempt","Job_Status"];
|
||||
for(const f of fields){
|
||||
const tr = document.createElement('tr');
|
||||
const tdLabel = document.createElement('td');
|
||||
tdLabel.className = 'label';
|
||||
tdLabel.textContent = f.replace(/_/g,' ');
|
||||
const tdVal = document.createElement('td');
|
||||
tdVal.textContent = job[f] || '';
|
||||
tr.appendChild(tdLabel);
|
||||
tr.appendChild(tdVal);
|
||||
detailTable.appendChild(tr);
|
||||
}
|
||||
|
||||
// Handle Job Folder Link
|
||||
jobFolderAnchor.innerHTML = ''; // clear previous content
|
||||
if(job.Job_Folder_Link && String(job.Job_Folder_Link).trim() !== ''){
|
||||
try {
|
||||
const url = new URL(job.Job_Folder_Link);
|
||||
const a = document.createElement('a');
|
||||
a.href = url.href;
|
||||
a.target = '_blank';
|
||||
a.rel = 'noopener noreferrer';
|
||||
a.textContent = url.href;
|
||||
a.style.color = '#0d6efd';
|
||||
a.style.textDecoration = 'underline';
|
||||
jobFolderAnchor.appendChild(a);
|
||||
} catch(e){
|
||||
// Invalid URL
|
||||
jobFolderAnchor.textContent = 'No Link Available';
|
||||
jobFolderAnchor.style.color = '#374151';
|
||||
jobFolderAnchor.style.textDecoration = 'none';
|
||||
}
|
||||
} else {
|
||||
jobFolderAnchor.textContent = 'No Link Available';
|
||||
jobFolderAnchor.style.color = '#374151';
|
||||
jobFolderAnchor.style.textDecoration = 'none';
|
||||
}
|
||||
|
||||
jobNotes.innerHTML = job.Notes || '';
|
||||
newNote.innerHTML = '';
|
||||
|
||||
tbButtons.forEach(b => b.classList.remove('active'));
|
||||
detailModal.style.display = 'flex';
|
||||
}
|
||||
document.getElementById('btnClose').addEventListener('click',()=>{detailModal.style.display='none';});
|
||||
|
||||
/* Toolbar */
|
||||
let savedSelection = null;
|
||||
|
||||
// Save selection on user actions
|
||||
function saveSelection() {
|
||||
const sel = window.getSelection();
|
||||
if (sel.rangeCount > 0) savedSelection = sel.getRangeAt(0);
|
||||
}
|
||||
|
||||
function restoreSelection() {
|
||||
const sel = window.getSelection();
|
||||
if (savedSelection) {
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(savedSelection);
|
||||
}
|
||||
}
|
||||
|
||||
newNote.addEventListener('mouseup', saveSelection);
|
||||
newNote.addEventListener('keyup', saveSelection);
|
||||
newNote.addEventListener('focus', saveSelection);
|
||||
|
||||
// Toolbar buttons
|
||||
tbButtons.forEach(btn => {
|
||||
btn.addEventListener('mousedown', e => {
|
||||
e.preventDefault(); // prevent button click stealing focus
|
||||
|
||||
restoreSelection(); // restore selection before executing command
|
||||
const cmd = btn.dataset.cmd;
|
||||
|
||||
if (!cmd) return;
|
||||
|
||||
if (cmd === 'foreColor') {
|
||||
const val = btn.dataset.val;
|
||||
document.execCommand(cmd, false, val);
|
||||
tbButtons.forEach(b => { if (b.dataset.cmd === 'foreColor' && b !== btn) b.classList.remove('active'); });
|
||||
btn.classList.toggle('active');
|
||||
} else if (cmd === 'removeFormat') {
|
||||
restoreSelection();
|
||||
const sel = window.getSelection();
|
||||
if (sel.rangeCount > 0) {
|
||||
const range = sel.getRangeAt(0);
|
||||
let content = range.toString();
|
||||
// Replace selection or caret with plain text
|
||||
range.deleteContents();
|
||||
const plainNode = document.createTextNode(content);
|
||||
range.insertNode(plainNode);
|
||||
// Place caret after inserted text
|
||||
range.setStartAfter(plainNode);
|
||||
range.collapse(true);
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(range);
|
||||
}
|
||||
tbButtons.forEach(b => b.classList.remove('active'));
|
||||
} else {
|
||||
document.execCommand(cmd, false, null);
|
||||
btn.classList.toggle('active');
|
||||
}
|
||||
|
||||
newNote.focus();
|
||||
saveSelection();
|
||||
});
|
||||
});
|
||||
|
||||
/* Submit note */
|
||||
document.getElementById('btnSubmit').addEventListener('click', async()=>{
|
||||
const html=newNote.innerHTML.trim(); if(!html){alert('Enter note text'); return;}
|
||||
const timestamp=new Date().toLocaleString();
|
||||
const formatted=`<p><strong>[CurrentUser ${timestamp}]</strong> ${html}</p>`;
|
||||
const updatedNotes=formatted+(currentJob.Notes||'');
|
||||
try{
|
||||
const res=await fetch(`${PB_COLLECTION_URL}/${currentJob.id}`,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({Notes:updatedNotes})});
|
||||
if(!res.ok) throw new Error('Update failed: '+res.status);
|
||||
const updated=await res.json();
|
||||
const idx=jobsCache.findIndex(j=>j.id===currentJob.id); if(idx>=0) jobsCache[idx].Notes=updated.Notes; currentJob.Notes=updated.Notes;
|
||||
jobNotes.innerHTML=updated.Notes; newNote.innerHTML='';
|
||||
applyFiltersAndRender();
|
||||
}catch(err){alert('Error saving note: '+err.message); console.error(err);}
|
||||
});
|
||||
document.getElementById('btnClearNote').addEventListener('click',()=>newNote.innerHTML='');
|
||||
|
||||
fetchAllJobs();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Test Impersonation</title>
|
||||
<style>
|
||||
body { font-family: sans-serif; margin: 2rem; }
|
||||
#banner { display:none; background:#ffcc00; padding:1rem; margin-bottom:1rem; font-weight:bold; }
|
||||
#form { display:flex; flex-direction:column; max-width:400px; }
|
||||
label { margin:0.5rem 0 0.2rem; }
|
||||
input { padding:0.5rem; font-size:1rem; }
|
||||
button { margin-top:1rem; padding:0.5rem; font-size:1rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">⚠️ Impersonation Mode Active</div>
|
||||
|
||||
<h1>Test Impersonation</h1>
|
||||
<div id="form">
|
||||
<label for="targetInput">User ID or Email:</label>
|
||||
<input type="text" id="targetInput" placeholder="Enter user ID or email">
|
||||
<button id="impersonateBtn">Impersonate</button>
|
||||
<button id="returnBtn" style="display:none;">Return to Admin</button>
|
||||
<button id="goMainBtn" style="display:none;">Go to Main App</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const banner = document.getElementById('banner');
|
||||
const targetInput = document.getElementById('targetInput');
|
||||
const impersonateBtn = document.getElementById('impersonateBtn');
|
||||
const returnBtn = document.getElementById('returnBtn');
|
||||
const goMainBtn = document.getElementById('goMainBtn');
|
||||
|
||||
let originalToken = localStorage.getItem('pb_original_token') || localStorage.getItem('pb_token') || '';
|
||||
|
||||
impersonateBtn.addEventListener('click', async () => {
|
||||
const identifier = targetInput.value.trim();
|
||||
if (!identifier) return alert('Enter a user ID or email');
|
||||
if (!originalToken) return alert('You must be logged in as Admin/Superuser');
|
||||
|
||||
try {
|
||||
const res = await fetch('http://localhost:8081/api/impersonate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + originalToken,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ targetUserIdentifier: identifier })
|
||||
});
|
||||
|
||||
if (!res.ok) return alert('Failed: ' + await res.text());
|
||||
|
||||
const data = await res.json();
|
||||
localStorage.setItem('pb_token', data.token);
|
||||
if (!localStorage.getItem('pb_original_token')) {
|
||||
localStorage.setItem('pb_original_token', originalToken);
|
||||
}
|
||||
|
||||
banner.style.display = 'block';
|
||||
returnBtn.style.display = 'inline-block';
|
||||
goMainBtn.style.display = 'inline-block';
|
||||
impersonateBtn.disabled = true;
|
||||
alert('Now impersonating ' + identifier);
|
||||
|
||||
} catch (err) { alert('Error: ' + err.message); }
|
||||
});
|
||||
|
||||
returnBtn.addEventListener('click', () => {
|
||||
const orig = localStorage.getItem('pb_original_token');
|
||||
if (!orig) return alert('Original token not found');
|
||||
localStorage.setItem('pb_token', orig);
|
||||
localStorage.removeItem('pb_original_token');
|
||||
banner.style.display = 'none';
|
||||
returnBtn.style.display = 'none';
|
||||
goMainBtn.style.display = 'none';
|
||||
impersonateBtn.disabled = false;
|
||||
alert('Returned to Admin session');
|
||||
});
|
||||
|
||||
goMainBtn.addEventListener('click', () => window.location.href = '/index.html');
|
||||
|
||||
if (localStorage.getItem('pb_original_token') && localStorage.getItem('pb_token') !== localStorage.getItem('pb_original_token')) {
|
||||
banner.style.display = 'block';
|
||||
returnBtn.style.display = 'inline-block';
|
||||
goMainBtn.style.display = 'inline-block';
|
||||
impersonateBtn.disabled = true;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user