Add formula template walkthrough and UX improvements
- 7-step guided walkthrough modal (concept, output modes, fields, formula, testing, box example, cylinder example); auto-shown first time the tab opens with no templates; always accessible via "How it works" button - Variable pill badges below formula input showing all valid field names + rate; update live as fields are added/renamed; clickable to insert at cursor - Fix: Add Field no longer shows validation error on blank new rows; validation only fires once the user has typed something - Help article: added Common Formula Patterns section with box, cylinder, and flat panel worked examples (fields table + formula + expected output) - HelpKnowledgeBase updated with pattern examples and walkthrough note Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1401,7 +1401,11 @@ public static class HelpKnowledgeBase
|
||||
Using in wizard: item wizard shows "Custom Formula Item" card if active templates exist → choose template → template diagram shown for reference → enter measurements → Calculate → verify result → continue to coatings/prep steps
|
||||
Formula variable names: snake_case, letters/digits/underscores only. Reserved variable: "rate" (pre-populated from Default Rate).
|
||||
NCalc syntax: +, -, *, /, %, Pow(b,e), Abs(x), Round(x,d), Max(a,b), Min(a,b), Sqrt(x)
|
||||
Example formula (box, inches): 2*(l*w + l*h + w*h) / 144 * rate
|
||||
Common formula patterns (all Fixed Rate, divide inches by 144 to get sqft):
|
||||
- 6-sided box: fields l_in/w_in/h_in → 2*(l_in*w_in + l_in*h_in + w_in*h_in) / 144 * rate
|
||||
- Cylinder: fields d_in/h_in → (3.14159 * d_in * h_in + 2 * 3.14159 * Pow(d_in/2, 2)) / 144 * rate
|
||||
- Flat panel: fields l_in/w_in → l_in * w_in / 144 * rate
|
||||
Walkthrough: first time opening Custom Formulas tab with no templates triggers a 7-step guided tour automatically; also accessible via "How it works" button
|
||||
Help article: Help → Custom Formula Item Templates
|
||||
""";
|
||||
|
||||
|
||||
@@ -2064,9 +2064,14 @@
|
||||
<div class="card shadow-sm mt-3">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0"><i class="bi bi-calculator me-2"></i>Custom Formula Item Templates</h5>
|
||||
<button type="button" class="btn btn-primary btn-sm" onclick="cfShowCreate()">
|
||||
<i class="bi bi-plus-circle me-1"></i>New Template
|
||||
</button>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="cfShowWalkthrough()">
|
||||
<i class="bi bi-question-circle me-1"></i>How it works
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-sm" onclick="cfShowCreate()">
|
||||
<i class="bi bi-plus-circle me-1"></i>New Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted small mb-3">
|
||||
@@ -2097,6 +2102,34 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Formula Walkthrough Modal -->
|
||||
<div class="modal fade" id="cfWalkthroughModal" tabindex="-1" aria-labelledby="cfWalkthroughLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0 pb-0">
|
||||
<h5 class="modal-title" id="cfWalkthroughLabel">
|
||||
<i class="bi bi-calculator text-info me-2"></i>Custom Formula Templates — How It Works
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body pt-2">
|
||||
<!-- Step progress dots -->
|
||||
<div class="d-flex justify-content-center gap-2 mb-4" id="cfWalkthroughDots"></div>
|
||||
<!-- Step content -->
|
||||
<div id="cfWalkthroughContent"></div>
|
||||
</div>
|
||||
<div class="modal-footer border-0">
|
||||
<button type="button" class="btn btn-outline-secondary" id="cfWtPrevBtn" onclick="cfWalkthroughNav(-1)">
|
||||
<i class="bi bi-arrow-left me-1"></i>Back
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="cfWtNextBtn" onclick="cfWalkthroughNav(1)">
|
||||
Next<i class="bi bi-arrow-right ms-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Formula Template Modal -->
|
||||
<div class="modal fade" id="cfModal" tabindex="-1" aria-labelledby="cfModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
||||
@@ -2138,7 +2171,10 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Formula <span class="text-danger">*</span></label>
|
||||
<input type="text" id="cfFormula" class="form-control font-monospace" placeholder="e.g. 2*(L*W + L*H + W*H)/144 * rate" />
|
||||
<div class="form-text">NCalc expression. Available variables: field names + <code>rate</code>.</div>
|
||||
<div class="form-text mt-1">
|
||||
<span class="me-1">Available variables for this formula:</span>
|
||||
<span id="cfVariablePills"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Notes</label>
|
||||
@@ -3438,9 +3474,16 @@
|
||||
</script>
|
||||
<script src="~/js/company-settings-custom-formulas.js" asp-append-version="true"></script>
|
||||
<script>
|
||||
// Load formula templates when the tab is first shown
|
||||
document.querySelector('[data-bs-target="#custom-formulas"]').addEventListener('shown.bs.tab', () => {
|
||||
if (!window._cfLoaded) { cfLoadTemplates(); window._cfLoaded = true; }
|
||||
// Load formula templates when the tab is first shown; auto-show walkthrough if no templates yet
|
||||
document.querySelector('[data-bs-target="#custom-formulas"]').addEventListener('shown.bs.tab', async () => {
|
||||
if (!window._cfLoaded) {
|
||||
await cfLoadTemplates();
|
||||
window._cfLoaded = true;
|
||||
if (!localStorage.getItem('cfWalkthroughSeen')) {
|
||||
const hasTemplates = document.querySelectorAll('#cfTemplatesBody tr[data-id]').length > 0;
|
||||
if (!hasTemplates) cfShowWalkthrough();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -91,6 +91,56 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h2 class="h5">Common formula patterns</h2>
|
||||
<p>These ready-to-use templates cover the most common fabricated item shapes. Copy the fields and formula exactly, then adjust the Default Rate for your shop.</p>
|
||||
|
||||
<h3 class="h6 mt-3 mb-2"><i class="bi bi-box me-1"></i>6-Sided Box (roof curbs, enclosures)</h3>
|
||||
<p class="text-muted small mb-2">Calculates the total outer surface area of all six faces.</p>
|
||||
<div class="table-responsive mb-2">
|
||||
<table class="table table-sm table-bordered">
|
||||
<thead class="table-light"><tr><th>Variable name</th><th>Label</th><th>Default</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><code>l_in</code></td><td>Length (inches)</td><td>24</td></tr>
|
||||
<tr><td><code>w_in</code></td><td>Width (inches)</td><td>24</td></tr>
|
||||
<tr><td><code>h_in</code></td><td>Height (inches)</td><td>12</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<pre class="bg-light p-2 rounded mb-1">2*(l_in*w_in + l_in*h_in + w_in*h_in) / 144 * rate</pre>
|
||||
<p class="text-muted small mb-3">Output mode: <strong>Fixed Rate</strong> — suggested rate: your $/sqft coating price. A 24×24×12 box at $3.50/sqft = $28.00.</p>
|
||||
|
||||
<h3 class="h6 mt-3 mb-2"><i class="bi bi-circle me-1"></i>Cylinder (pipe ends, round housings)</h3>
|
||||
<p class="text-muted small mb-2">Lateral surface plus two circular end caps.</p>
|
||||
<div class="table-responsive mb-2">
|
||||
<table class="table table-sm table-bordered">
|
||||
<thead class="table-light"><tr><th>Variable name</th><th>Label</th><th>Default</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><code>d_in</code></td><td>Diameter (inches)</td><td>12</td></tr>
|
||||
<tr><td><code>h_in</code></td><td>Height (inches)</td><td>18</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<pre class="bg-light p-2 rounded mb-1">(3.14159 * d_in * h_in + 2 * 3.14159 * Pow(d_in/2, 2)) / 144 * rate</pre>
|
||||
<p class="text-muted small mb-3">Output mode: <strong>Fixed Rate</strong> — a 12″ diameter × 18″ tall cylinder at $3.50/sqft ≈ $10.21.</p>
|
||||
|
||||
<h3 class="h6 mt-3 mb-2"><i class="bi bi-layout-text-window me-1"></i>Flat Panel</h3>
|
||||
<p class="text-muted small mb-2">Simple rectangular sheet — one face only.</p>
|
||||
<div class="table-responsive mb-2">
|
||||
<table class="table table-sm table-bordered">
|
||||
<thead class="table-light"><tr><th>Variable name</th><th>Label</th><th>Default</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><code>l_in</code></td><td>Length (inches)</td><td>24</td></tr>
|
||||
<tr><td><code>w_in</code></td><td>Width (inches)</td><td>12</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<pre class="bg-light p-2 rounded mb-1">l_in * w_in / 144 * rate</pre>
|
||||
<p class="text-muted small mb-0">Output mode: <strong>Fixed Rate</strong> — a 24″×12″ panel at $3.50/sqft = $7.00.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h2 class="h5">NCalc formula reference</h2>
|
||||
@@ -101,12 +151,6 @@
|
||||
<li>Variable names must start with a letter and contain only letters, digits, or underscores.</li>
|
||||
<li>The reserved variable <code>rate</code> is pre-populated from the template’s Default Rate.</li>
|
||||
</ul>
|
||||
<p class="mb-0">Examples:</p>
|
||||
<ul class="mb-0">
|
||||
<li><code>2*(l*w + l*h + w*h) / 144 * rate</code> — box surface area (inches → sqft → dollars)</li>
|
||||
<li><code>Pow(diameter_in / 2, 2) * 3.14159 / 144 * rate</code> — circular face area</li>
|
||||
<li><code>(l_ft * w_ft) * rate</code> — flat panel in feet</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -139,7 +139,7 @@
|
||||
|
||||
window.cfUpdateField = function (i, key, val, isNumber) {
|
||||
cfFields[i][key] = isNumber ? (parseFloat(val) || 0) : val;
|
||||
if (key === 'name') cfValidateFieldNameInput(i, val);
|
||||
if (key === 'name') { cfValidateFieldNameInput(i, val); cfRenderVariablePills(); }
|
||||
};
|
||||
|
||||
function cfValidateFieldName(name) {
|
||||
@@ -174,13 +174,14 @@
|
||||
el.innerHTML = '<p class="text-muted small">No fields yet.</p>';
|
||||
return;
|
||||
}
|
||||
cfRenderVariablePills();
|
||||
el.innerHTML = cfFields.map((f, i) => `
|
||||
<div class="border rounded p-2 mb-2 bg-light">
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col-3">
|
||||
<input type="text" class="form-control form-control-sm font-monospace field-name-input${cfValidateFieldName(f.name) ? ' is-invalid' : ''}"
|
||||
<input type="text" class="form-control form-control-sm font-monospace field-name-input${f.name && cfValidateFieldName(f.name) ? ' is-invalid' : ''}"
|
||||
placeholder="var_name" value="${escHtml(f.name)}"
|
||||
oninput="cfUpdateField(${i},'name',this.value)" />${cfValidateFieldName(f.name) ? `<div class="invalid-feedback">${escHtml(cfValidateFieldName(f.name))}</div>` : ''}
|
||||
oninput="cfUpdateField(${i},'name',this.value)" />${f.name && cfValidateFieldName(f.name) ? `<div class="invalid-feedback">${escHtml(cfValidateFieldName(f.name))}</div>` : ''}
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<input type="text" class="form-control form-control-sm"
|
||||
@@ -206,6 +207,32 @@
|
||||
</div>`).join('');
|
||||
}
|
||||
|
||||
function cfRenderVariablePills() {
|
||||
const container = document.getElementById('cfVariablePills');
|
||||
if (!container) return;
|
||||
const names = cfFields.map(f => f.name).filter(n => n && !cfValidateFieldName(n));
|
||||
const all = [...names, 'rate'];
|
||||
container.innerHTML = all.map(n =>
|
||||
`<span class="badge bg-secondary me-1 mb-1" style="cursor:pointer; font-size:.75rem;"
|
||||
title="Click to insert into formula" onclick="cfInsertVariable('${escHtml(n)}')">${escHtml(n)}</span>`
|
||||
).join('');
|
||||
}
|
||||
|
||||
window.cfInsertVariable = function (name) {
|
||||
const input = document.getElementById('cfFormula');
|
||||
if (!input) return;
|
||||
const start = input.selectionStart ?? input.value.length;
|
||||
const end = input.selectionEnd ?? input.value.length;
|
||||
const before = input.value.slice(0, start);
|
||||
const after = input.value.slice(end);
|
||||
const needsSpace = before.length > 0 && !/[\s(+\-*/]$/.test(before);
|
||||
const insert = (needsSpace ? ' ' : '') + name;
|
||||
input.value = before + insert + after;
|
||||
const cursor = start + insert.length;
|
||||
input.setSelectionRange(cursor, cursor);
|
||||
input.focus();
|
||||
};
|
||||
|
||||
// ── Formula Test ──────────────────────────────────────────────────────────
|
||||
|
||||
window.cfTestFormula = async function () {
|
||||
@@ -421,4 +448,284 @@
|
||||
function getAntiForgeryToken() {
|
||||
return document.querySelector('input[name="__RequestVerificationToken"]')?.value ?? '';
|
||||
}
|
||||
|
||||
// ── Walkthrough ───────────────────────────────────────────────────────────
|
||||
|
||||
let cfWtStep = 0;
|
||||
|
||||
const cfWtSteps = [
|
||||
{
|
||||
title: 'What are Formula Templates?',
|
||||
icon: 'bi-lightbulb text-warning',
|
||||
html: `
|
||||
<p>Some items — roof curbs, electrical enclosures, welded frames — have prices that depend on
|
||||
<strong>exact measurements</strong> rather than estimated surface area.</p>
|
||||
<p>A <strong>Formula Template</strong> lets you define a reusable calculation once in Company Settings.
|
||||
When a staff member adds that item to a quote or job, they just fill in the measurements and the price
|
||||
calculates automatically — no mental math, no spreadsheets.</p>
|
||||
<div class="alert alert-info mb-0">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
Templates appear as a <strong>"Custom Formula Item"</strong> option in the quote and job item wizard,
|
||||
but only when at least one active template exists.
|
||||
</div>`
|
||||
},
|
||||
{
|
||||
title: 'Output Modes',
|
||||
icon: 'bi-toggle2-on text-primary',
|
||||
html: `
|
||||
<p>When you create a template, you choose how the formula result is used:</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-sm mb-3">
|
||||
<thead class="table-light">
|
||||
<tr><th style="width:30%">Mode</th><th>Formula produces…</th><th>How it’s priced</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge bg-primary">Fixed Rate</span></td>
|
||||
<td>A <strong>dollar amount</strong></td>
|
||||
<td>Used directly as the item’s unit price. Best for items priced by a custom rate (e.g. $/sqft of surface).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge bg-success">Surface Area</span></td>
|
||||
<td><strong>Square footage</strong></td>
|
||||
<td>Fed into the standard coating engine and priced using your operating cost rates — just like any other coated item.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="alert alert-secondary mb-0">
|
||||
<i class="bi bi-star me-1"></i>
|
||||
<strong>Most shops start with Fixed Rate.</strong> It gives you full control over the per-unit price
|
||||
and is the easiest to reason about.
|
||||
</div>`
|
||||
},
|
||||
{
|
||||
title: 'Step 1 — Define Your Fields',
|
||||
icon: 'bi-input-cursor-text text-success',
|
||||
html: `
|
||||
<p>Fields are the <strong>measurements your staff will fill in</strong> when they use the template.
|
||||
Each field becomes an input box in the item wizard.</p>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="card border-success h-100">
|
||||
<div class="card-header bg-success text-white py-1 small fw-semibold">What you set up</div>
|
||||
<div class="card-body py-2 small">
|
||||
<table class="table table-sm mb-0">
|
||||
<tr><th>Variable name</th><td><code>length_in</code></td></tr>
|
||||
<tr><th>Label</th><td>Length (inches)</td></tr>
|
||||
<tr><th>Default</th><td>24</td></tr>
|
||||
</table>
|
||||
<table class="table table-sm mb-0 mt-2">
|
||||
<tr><th>Variable name</th><td><code>width_in</code></td></tr>
|
||||
<tr><th>Label</th><td>Width (inches)</td></tr>
|
||||
<tr><th>Default</th><td>12</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card border-primary h-100">
|
||||
<div class="card-header bg-primary text-white py-1 small fw-semibold">What staff sees in the wizard</div>
|
||||
<div class="card-body py-2">
|
||||
<label class="form-label small mb-1">Length (inches)</label>
|
||||
<input type="number" class="form-control form-control-sm mb-2" value="24" readonly>
|
||||
<label class="form-label small mb-1">Width (inches)</label>
|
||||
<input type="number" class="form-control form-control-sm" value="12" readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning mb-0 small">
|
||||
<i class="bi bi-exclamation-triangle me-1"></i>
|
||||
Variable names must <strong>start with a letter</strong> and contain only letters, digits, or underscores — no spaces.
|
||||
Good: <code>length_in</code> Bad: <code>length in</code> or <code>1length</code>
|
||||
</div>`
|
||||
},
|
||||
{
|
||||
title: 'Step 2 — Write the Formula',
|
||||
icon: 'bi-braces text-info',
|
||||
html: `
|
||||
<p>The formula is a math expression using your <strong>field variable names</strong> plus the reserved
|
||||
variable <code>rate</code> (pre-filled from the template’s Default Rate).</p>
|
||||
<p class="fw-semibold mb-1">Example — flat panel price (inches → sqft → dollars):</p>
|
||||
<pre class="bg-light border rounded p-3 mb-3" style="font-size:.9rem">length_in * width_in / 144 * rate</pre>
|
||||
<p class="fw-semibold mb-1">Supported operations:</p>
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-sm-6">
|
||||
<ul class="mb-0 small">
|
||||
<li><code>+ - * /</code> — basic math</li>
|
||||
<li><code>Pow(base, exp)</code> — exponents</li>
|
||||
<li><code>Sqrt(x)</code> — square root</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ul class="mb-0 small">
|
||||
<li><code>Round(x, digits)</code> — rounding</li>
|
||||
<li><code>Abs(x)</code> — absolute value</li>
|
||||
<li><code>Max(a,b) Min(a,b)</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info mb-0 small">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
<code>rate</code> is always available — you set it as the <strong>Default Rate</strong> on the template
|
||||
and staff can override it per-use. Don’t create a field called <code>rate</code>.
|
||||
</div>`
|
||||
},
|
||||
{
|
||||
title: 'Step 3 — Test Before Saving',
|
||||
icon: 'bi-play-circle text-success',
|
||||
html: `
|
||||
<p>Before saving, use the <strong>Run</strong> button to verify your formula evaluates correctly
|
||||
using each field’s default value.</p>
|
||||
<div class="card border-success mb-3">
|
||||
<div class="card-body py-2">
|
||||
<div class="row g-2 align-items-end">
|
||||
<div class="col">
|
||||
<label class="form-label small mb-1 fw-semibold">Formula</label>
|
||||
<input type="text" class="form-control form-control-sm font-monospace" value="length_in * width_in / 144 * rate" readonly>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-success btn-sm" disabled><i class="bi bi-play-fill me-1"></i>Run</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="fw-bold text-success"> = 7.0000</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-muted small mt-1">Using defaults: length_in=24, width_in=12, rate=3.50 → 24×12/144×3.50 = $7.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mb-0">If the formula has an error (typo, missing variable, bad syntax) the result will
|
||||
show in red with a description of the problem. Fix it before saving.</p>`
|
||||
},
|
||||
{
|
||||
title: 'Example — 6-Sided Box',
|
||||
icon: 'bi-box text-secondary',
|
||||
html: `
|
||||
<p>A roof curb or electrical enclosure can be priced by calculating its outer surface area.</p>
|
||||
<div class="card border mb-3">
|
||||
<div class="card-header py-2 fw-semibold small">Template Setup</div>
|
||||
<div class="card-body py-2 small">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-5">
|
||||
<strong>Fields</strong>
|
||||
<table class="table table-sm mb-0 mt-1">
|
||||
<thead class="table-light"><tr><th>Variable</th><th>Label</th><th>Default</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><code>l_in</code></td><td>Length (in)</td><td>24</td></tr>
|
||||
<tr><td><code>w_in</code></td><td>Width (in)</td><td>24</td></tr>
|
||||
<tr><td><code>h_in</code></td><td>Height (in)</td><td>12</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<strong>Formula</strong> <span class="text-muted">(Fixed Rate, rate = 3.50)</span>
|
||||
<pre class="bg-light border rounded p-2 mt-1 mb-2" style="font-size:.8rem">2*(l_in*w_in + l_in*h_in + w_in*h_in) / 144 * rate</pre>
|
||||
<strong>What it does:</strong> Calculates total outer surface area of all 6 faces
|
||||
in square inches, converts to square feet (÷144), multiplies by rate.
|
||||
<div class="mt-2 text-success fw-semibold">24×24×12 box at $3.50/sqft → $28.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mb-0 text-muted small">
|
||||
<i class="bi bi-lightbulb me-1"></i>
|
||||
You can add a diagram image to the template — staff will see it in the wizard as a reference
|
||||
while entering measurements.
|
||||
</p>`
|
||||
},
|
||||
{
|
||||
title: 'Example — Cylinder',
|
||||
icon: 'bi-vinyl text-secondary',
|
||||
html: `
|
||||
<p>Round parts like pipe ends or cylindrical housings use a slightly different formula.</p>
|
||||
<div class="card border mb-3">
|
||||
<div class="card-header py-2 fw-semibold small">Template Setup</div>
|
||||
<div class="card-body py-2 small">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-5">
|
||||
<strong>Fields</strong>
|
||||
<table class="table table-sm mb-0 mt-1">
|
||||
<thead class="table-light"><tr><th>Variable</th><th>Label</th><th>Default</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><code>d_in</code></td><td>Diameter (in)</td><td>12</td></tr>
|
||||
<tr><td><code>h_in</code></td><td>Height (in)</td><td>18</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<strong>Formula</strong> <span class="text-muted">(Fixed Rate, rate = 3.50)</span>
|
||||
<pre class="bg-light border rounded p-2 mt-1 mb-2" style="font-size:.75rem">(3.14159 * d_in * h_in + 2 * 3.14159 * Pow(d_in/2, 2)) / 144 * rate</pre>
|
||||
<strong>What it does:</strong> Lateral surface area (circumference × height)
|
||||
plus two circular end caps, converted to sqft, multiplied by rate.
|
||||
<div class="mt-2 text-success fw-semibold">12″ dia × 18″ tall at $3.50/sqft → ~$10.21</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-success mb-0">
|
||||
<i class="bi bi-check-circle me-2"></i>
|
||||
<strong>You’re ready to create your first template!</strong>
|
||||
Click <strong>Get Started</strong> below to open the template editor, or close this guide
|
||||
and click <strong>New Template</strong> any time.
|
||||
</div>`
|
||||
}
|
||||
];
|
||||
|
||||
window.cfShowWalkthrough = function () {
|
||||
cfWtStep = 0;
|
||||
cfRenderWtStep();
|
||||
new bootstrap.Modal(document.getElementById('cfWalkthroughModal')).show();
|
||||
localStorage.setItem('cfWalkthroughSeen', '1');
|
||||
};
|
||||
|
||||
window.cfWalkthroughNav = function (dir) {
|
||||
const next = cfWtStep + dir;
|
||||
if (next < 0) return;
|
||||
if (next >= cfWtSteps.length) {
|
||||
bootstrap.Modal.getInstance(document.getElementById('cfWalkthroughModal'))?.hide();
|
||||
cfShowCreate();
|
||||
return;
|
||||
}
|
||||
cfWtStep = next;
|
||||
cfRenderWtStep();
|
||||
};
|
||||
|
||||
function cfRenderWtStep() {
|
||||
const step = cfWtSteps[cfWtStep];
|
||||
const total = cfWtSteps.length;
|
||||
const isLast = cfWtStep === total - 1;
|
||||
|
||||
// Dots
|
||||
document.getElementById('cfWalkthroughDots').innerHTML = cfWtSteps.map((_, i) =>
|
||||
`<span style="width:10px;height:10px;border-radius:50%;display:inline-block;cursor:pointer;
|
||||
background:${i === cfWtStep ? '#0d6efd' : '#dee2e6'}"
|
||||
onclick="cfWtJump(${i})" title="Step ${i+1}"></span>`
|
||||
).join('');
|
||||
|
||||
// Content
|
||||
document.getElementById('cfWalkthroughContent').innerHTML = `
|
||||
<div class="d-flex align-items-center gap-2 mb-3">
|
||||
<i class="bi ${step.icon} fs-4"></i>
|
||||
<h6 class="mb-0 fw-semibold">${step.title}</h6>
|
||||
<span class="ms-auto text-muted small">${cfWtStep + 1} of ${total}</span>
|
||||
</div>
|
||||
${step.html}`;
|
||||
|
||||
// Buttons
|
||||
document.getElementById('cfWtPrevBtn').style.visibility = cfWtStep === 0 ? 'hidden' : 'visible';
|
||||
const nextBtn = document.getElementById('cfWtNextBtn');
|
||||
if (isLast) {
|
||||
nextBtn.innerHTML = '<i class="bi bi-rocket-takeoff me-1"></i>Get Started';
|
||||
nextBtn.className = 'btn btn-success';
|
||||
} else {
|
||||
nextBtn.innerHTML = 'Next<i class="bi bi-arrow-right ms-1"></i>';
|
||||
nextBtn.className = 'btn btn-primary';
|
||||
}
|
||||
}
|
||||
|
||||
window.cfWtJump = function (i) {
|
||||
cfWtStep = i;
|
||||
cfRenderWtStep();
|
||||
};
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user