pt/pf_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: pt:d49aac70e4e37fc7dad839f201ea21e40c3cb6c4
Branches Tags
pt:master
pt:arrow
pt:light-dark-mode
pt:baseline-workbench
pt:incremental-grid-updates
..
compare: pt:5550a57f977dd0408b2a987d49086ac0fe9f34e9
Branches Tags
pt:arrow
pt:master
pt:light-dark-mode
pt:baseline-workbench
pt:incremental-grid-updates

No commits in common. "d49aac70e4e37fc7dad839f201ea21e40c3cb6c4" and "5550a57f977dd0408b2a987d49086ac0fe9f34e9" have entirely different histories.
d49aac70e4 ... 5550a57f97

3 changed files with 35 additions and 48 deletions
Show Stats Expand all files Collapse all files

46
public/app.js
View File

@ -557,8 +557,8 @@ async function openBaselineWorkbench() {
// reset form // reset form
document.getElementById('seg-description').value = ''; document.getElementById('seg-description').value = '';
document.getElementById('seg-offset-type').value = ''; document.getElementById('seg-offset-years').value = '0';
document.getElementById('seg-offset-value').value = '0'; document.getElementById('seg-offset-months').value = '0';
document.getElementById('seg-filter-rows').innerHTML = ''; document.getElementById('seg-filter-rows').innerHTML = '';
document.getElementById('seg-timeline').classList.add('hidden'); document.getElementById('seg-timeline').classList.add('hidden');
addFilterRow(); // start with one empty filter row addFilterRow(); // start with one empty filter row
@ -727,23 +727,11 @@ function updateTimelinePreview() {
const months = (to.getFullYear() - from.getFullYear()) * 12 + (to.getMonth() - from.getMonth()) + 1; const months = (to.getFullYear() - from.getFullYear()) * 12 + (to.getMonth() - from.getMonth()) + 1;
const fmt = new Intl.DateTimeFormat('en-US', { month: 'short', year: 'numeric' }); const fmt = new Intl.DateTimeFormat('en-US', { month: 'short', year: 'numeric' });
const offsetType = document.getElementById('seg-offset-type').value; const offsetYears = parseInt(document.getElementById('seg-offset-years').value) || 0;
const offsetValue = parseInt(document.getElementById('seg-offset-value').value) || 0; const offsetMonths = parseInt(document.getElementById('seg-offset-months').value) || 0;
function applyOffset(d) { const projFrom = new Date(from); projFrom.setFullYear(projFrom.getFullYear() + offsetYears); projFrom.setMonth(projFrom.getMonth() + offsetMonths);
const r = new Date(d); const projTo = new Date(to); projTo.setFullYear(projTo.getFullYear() + offsetYears); projTo.setMonth(projTo.getMonth() + offsetMonths);
if (!offsetType || !offsetValue) return r;
switch (offsetType) {
case 'year': r.setFullYear(r.getFullYear() + offsetValue); break;
case 'month': r.setMonth(r.getMonth() + offsetValue); break;
case 'week': r.setDate(r.getDate() + offsetValue * 7); break;
case 'day': r.setDate(r.getDate() + offsetValue); break;
}
return r;
}
const projFrom = applyOffset(from);
const projTo = applyOffset(to);
let html = ` let html = `
<div class="timeline-row"> <div class="timeline-row">
@ -758,9 +746,12 @@ function updateTimelinePreview() {
</div> </div>
</div>`; </div>`;
if (offsetType && offsetValue) { if (offsetYears || offsetMonths) {
const parts = [];
if (offsetYears) parts.push(`${offsetYears} yr`);
if (offsetMonths) parts.push(`${offsetMonths} mo`);
html += ` html += `
<div class="timeline-offset-indicator">+ ${offsetValue} ${offsetType}${offsetValue !== 1 ? 's' : ''} →</div> <div class="timeline-offset-indicator">+ ${parts.join(' ')} →</div>
<div class="timeline-row"> <div class="timeline-row">
<div class="timeline-row-label">Projected</div> <div class="timeline-row-label">Projected</div>
<div class="timeline-bar-wrap"> <div class="timeline-bar-wrap">
@ -783,11 +774,12 @@ async function submitBaselineSegment() {
const filters = getFilterRows(); const filters = getFilterRows();
if (filters.length === 0) { showStatus('Add at least one filter', 'error'); return; } if (filters.length === 0) { showStatus('Add at least one filter', 'error'); return; }
const offsetType = document.getElementById('seg-offset-type').value; const years = parseInt(document.getElementById('seg-offset-years').value) || 0;
const offsetValue = parseInt(document.getElementById('seg-offset-value').value) || 0; const months = parseInt(document.getElementById('seg-offset-months').value) || 0;
const date_offset = (offsetType && offsetValue) const parts = [];
? `${offsetValue} ${offsetType}${offsetValue !== 1 ? 's' : ''}` if (years) parts.push(`${years} year${years !== 1 ? 's' : ''}`);
: '0 days'; if (months) parts.push(`${months} month${months !== 1 ? 's' : ''}`);
const date_offset = parts.length ? parts.join(' ') : '0 days';
const body = { const body = {
filters, filters,
@ -1286,8 +1278,8 @@ document.addEventListener('DOMContentLoaded', () => {
document.getElementById('btn-add-filter-row').addEventListener('click', addFilterRow); document.getElementById('btn-add-filter-row').addEventListener('click', addFilterRow);
document.getElementById('btn-load-segment').addEventListener('click', submitBaselineSegment); document.getElementById('btn-load-segment').addEventListener('click', submitBaselineSegment);
document.getElementById('btn-clear-baseline').addEventListener('click', clearBaseline); document.getElementById('btn-clear-baseline').addEventListener('click', clearBaseline);
document.getElementById('seg-offset-type').addEventListener('change', updateTimelinePreview); document.getElementById('seg-offset-years').addEventListener('input', updateTimelinePreview);
document.getElementById('seg-offset-value').addEventListener('input', updateTimelinePreview); document.getElementById('seg-offset-months').addEventListener('input', updateTimelinePreview);
// undo in baseline segments list // undo in baseline segments list
document.getElementById('baseline-segments-list').addEventListener('click', async e => { document.getElementById('baseline-segments-list').addEventListener('click', async e => {

14
public/index.html
View File

@ -111,17 +111,11 @@
<input type="text" id="seg-description" placeholder="e.g. All orders FY2024" /> <input type="text" id="seg-description" placeholder="e.g. All orders FY2024" />
</label> </label>
<div class="offset-row"> <div class="offset-row">
<label class="baseline-field-label">Offset Type <label class="baseline-field-label">Offset Years
<select id="seg-offset-type"> <input type="number" id="seg-offset-years" min="0" value="0" />
<option value="">— none —</option>
<option value="year">Year</option>
<option value="month">Month</option>
<option value="week">Week</option>
<option value="day">Day</option>
</select>
</label> </label>
<label class="baseline-field-label">Offset Value <label class="baseline-field-label">Offset Months
<input type="number" id="seg-offset-value" min="0" value="0" /> <input type="number" id="seg-offset-months" min="0" value="0" />
</label> </label>
</div> </div>
<div class="filter-section"> <div class="filter-section">

23
public/styles.css
View File

@ -425,32 +425,36 @@ body {
.baseline-layout { .baseline-layout {
display: flex; display: flex;
flex-direction: column;
gap: 10px; gap: 10px;
flex: 1; flex: 1;
overflow-y: auto; overflow: hidden;
min-height: 0; min-height: 0;
} }
.baseline-form-panel { .baseline-form-panel {
width: 360px;
flex-shrink: 0;
background: white; background: white;
border-radius: 5px; border-radius: 5px;
padding: 14px 20px; padding: 14px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,.08); box-shadow: 0 1px 3px rgba(0,0,0,.08);
flex-shrink: 0; overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0;
} }
.baseline-segments-panel { .baseline-segments-panel {
flex: 1; flex: 1;
background: white; background: white;
border-radius: 5px; border-radius: 5px;
padding: 14px 20px; padding: 14px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,.08); box-shadow: 0 1px 3px rgba(0,0,0,.08);
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
min-height: 120px; min-width: 0;
} }
.panel-section-title { .panel-section-title {
@ -465,8 +469,7 @@ body {
.baseline-form { .baseline-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 10px;
max-width: 860px;
} }
.baseline-field-label { .baseline-field-label {
@ -478,14 +481,12 @@ body {
} }
.baseline-field-label input[type=text], .baseline-field-label input[type=text],
.baseline-field-label input[type=number], .baseline-field-label input[type=number] {
.baseline-field-label select {
border: 1px solid #dce1e7; border: 1px solid #dce1e7;
padding: 5px 8px; padding: 5px 8px;
border-radius: 3px; border-radius: 3px;
font-size: 12px; font-size: 12px;
color: #333; color: #333;
background: white;
} }
.offset-row { display: flex; gap: 10px; } .offset-row { display: flex; gap: 10px; }