Only zero is empty, and the last day is worth reading
This commit is contained in:
@@ -293,11 +293,32 @@ function barWidth(cartridge) {
|
||||
return Math.max(0, Math.min(100, level)) + '%'
|
||||
}
|
||||
|
||||
// daysleft is fractional, so the last day of a cartridge's life is readable
|
||||
// instead of collapsing to "empty". Only an actual zero is empty; anything above
|
||||
// it has time left and the row says how much, in whatever unit carries meaning.
|
||||
const HOURS_PER_DAY = 24
|
||||
const MINUTES_PER_HOUR = 60
|
||||
|
||||
function daysText(cartridge) {
|
||||
if (cartridge.daysleft == null) return '-'
|
||||
if (cartridge.daysleft === 0) return 'empty'
|
||||
if (cartridge.daysleft === 1) return '1 day'
|
||||
return cartridge.daysleft + ' days'
|
||||
const days = cartridge.daysleft
|
||||
if (days == null) return '-'
|
||||
if (days <= 0) return 'empty'
|
||||
|
||||
if (days < 1) {
|
||||
const hours = days * HOURS_PER_DAY
|
||||
// Under an hour, hours would round to 0 and read as empty again.
|
||||
if (hours < 1) {
|
||||
const minutes = Math.max(1, Math.round(hours * MINUTES_PER_HOUR))
|
||||
return `${minutes} min`
|
||||
}
|
||||
const rounded = Math.round(hours)
|
||||
return rounded === 1 ? '1 hour' : `${rounded} hours`
|
||||
}
|
||||
|
||||
// Whole days from here. The estimate is not precise enough for "3.7 days" to
|
||||
// mean more than "about 4", and a column of decimals is harder to scan.
|
||||
const rounded = Math.round(days)
|
||||
return rounded === 1 ? '1 day' : `${rounded} days`
|
||||
}
|
||||
|
||||
function orderKey(item) {
|
||||
|
||||
@@ -108,3 +108,65 @@ describe('what purchasing receives is unchanged', () => {
|
||||
expect(written[0]).not.toContain('414X Black')
|
||||
})
|
||||
})
|
||||
|
||||
// --- how long is left ------------------------------------------------------
|
||||
//
|
||||
// daysleft used to be int(level / rate), so anything under a full day
|
||||
// truncated to 0 and the view printed "empty". A cartridge with six hours in it
|
||||
// still prints, and the row exists to say how long. Only a real zero is empty.
|
||||
|
||||
describe('the countdown reads in whatever unit carries meaning', () => {
|
||||
async function daysCell(daysleft) {
|
||||
const band = daysleft === null ? 'soon' : daysleft <= 0 ? 'empty' : 'soon'
|
||||
const base = payload()
|
||||
base.data.data.cartridges[0].daysleft = daysleft
|
||||
base.data.data.cartridges[0].band = band
|
||||
printersApi.supplyForecast.mockResolvedValue(base)
|
||||
const wrapper = mount(TonerForecast, {
|
||||
global: { stubs: { 'router-link': { template: '<a><slot /></a>' } } },
|
||||
})
|
||||
await flushPromises()
|
||||
// Only the 'empty' band starts expanded - what is already out is what the
|
||||
// page opens on. Every band renders a header whether or not it holds
|
||||
// anything, so the right one has to be picked by its key rather than by
|
||||
// position; clicking the first would close 'empty' instead.
|
||||
if (band !== 'empty') {
|
||||
const head = wrapper.findAll('.band-head')
|
||||
.find(b => b.find(`.band-count.${band}`).exists())
|
||||
await head.trigger('click')
|
||||
await flushPromises()
|
||||
}
|
||||
return wrapper.find('tbody .days').text()
|
||||
}
|
||||
|
||||
it('says empty only for an actual zero', async () => {
|
||||
expect(await daysCell(0)).toBe('empty')
|
||||
})
|
||||
|
||||
it('reads in hours below a day', async () => {
|
||||
expect(await daysCell(0.25)).toBe('6 hours')
|
||||
})
|
||||
|
||||
it('does not pluralise a single hour', async () => {
|
||||
expect(await daysCell(1 / 24)).toBe('1 hour')
|
||||
})
|
||||
|
||||
it('reads in minutes below an hour, never as empty', async () => {
|
||||
const text = await daysCell(0.02)
|
||||
expect(text).toBe('29 min')
|
||||
expect(text).not.toBe('empty')
|
||||
})
|
||||
|
||||
it('never rounds a live cartridge down to empty', async () => {
|
||||
expect(await daysCell(0.0001)).toBe('1 min')
|
||||
})
|
||||
|
||||
it('reads in whole days above a day', async () => {
|
||||
expect(await daysCell(3.7)).toBe('4 days')
|
||||
expect(await daysCell(1.2)).toBe('1 day')
|
||||
})
|
||||
|
||||
it('still shows a dash when there is no estimate', async () => {
|
||||
expect(await daysCell(null)).toBe('-')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -74,12 +74,16 @@ MIN_DROP_FOR_ESTIMATE = 2
|
||||
# precise-looking figure invites more trust than it has earned.
|
||||
RATE_SPREAD_FACTOR = 5
|
||||
|
||||
# At or below this, the cartridge is done and the arithmetic stops being the
|
||||
# useful answer. A supply sitting at 1% that drains a tenth of a point a day
|
||||
# computes to ten days; a printer at 1% is out of toner as far as anyone
|
||||
# standing at it is concerned, and it is what should be ordered first. Rate is
|
||||
# still reported - only the days-left figure is floored.
|
||||
EMPTY_LEVEL = 5
|
||||
# Empty means empty. This was 5, on the reasoning that a printer at 1% is out
|
||||
# of toner as far as anyone standing at it is concerned - but flooring the
|
||||
# days-left of everything at or below 5% threw away the only number the row
|
||||
# exists to give. A cartridge at 2% draining a point a day has two days left,
|
||||
# and two days is worth knowing; reporting it as already gone puts it beside
|
||||
# cartridges that genuinely are, and there is no way back to the difference.
|
||||
#
|
||||
# Anything above zero gets its real estimate, in hours if that is what it comes
|
||||
# to. Only a reading of zero is empty.
|
||||
EMPTY_LEVEL = 0
|
||||
|
||||
|
||||
def _asfloat(value):
|
||||
@@ -345,8 +349,8 @@ def analyse(points, rise=REPLACEMENT_RISE, currentlevel=None):
|
||||
|
||||
rate = burn_rate(run)
|
||||
|
||||
# Empty is empty. Ordering by a rate below this level ranks a dead
|
||||
# cartridge behind a healthy one that happens to be draining faster.
|
||||
# Empty is empty, and only zero is empty. Ordering by a rate at this level
|
||||
# ranks a dead cartridge behind a healthy one that happens to drain faster.
|
||||
if level <= EMPTY_LEVEL:
|
||||
result['daysleft'] = 0
|
||||
result['burnrateperday'] = round(rate, 2) if rate is not None else None
|
||||
@@ -363,7 +367,13 @@ def analyse(points, rise=REPLACEMENT_RISE, currentlevel=None):
|
||||
return result
|
||||
|
||||
result['burnrateperday'] = round(rate, 2)
|
||||
result['daysleft'] = max(0, int(level / rate))
|
||||
# Fractional, NOT int(). Truncating meant every cartridge with less than a
|
||||
# full day left reported 0, which the bands read as empty and the view
|
||||
# printed as "empty" - a cartridge with six hours in it was indistinguishable
|
||||
# from one with nothing. Two decimal places is a quarter of an hour, which is
|
||||
# finer than the estimate deserves but costs nothing and keeps the ordering
|
||||
# of two nearly-spent cartridges meaningful.
|
||||
result['daysleft'] = round(max(0.0, level / rate), 2)
|
||||
# Say so when the intervals disagree wildly. The number is still the best
|
||||
# estimate available; the flag stops it reading as a measurement.
|
||||
result['rateunstable'] = rate_is_unstable(run)
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div class="code-generator">
|
||||
<div class="no-print">
|
||||
<div class="page-header">
|
||||
<h1>Barcode / QR Generator</h1>
|
||||
<router-link to="/tools" class="btn btn-secondary">Back to Tech Tools</router-link>
|
||||
</div>
|
||||
<div class="page-header no-print">
|
||||
<h1>Barcode / QR Generator</h1>
|
||||
<router-link to="/tools" class="btn btn-secondary">Back to Tech Tools</router-link>
|
||||
</div>
|
||||
|
||||
<div class="controls card">
|
||||
<div class="workspace">
|
||||
<div class="options no-print">
|
||||
<div class="controls card">
|
||||
<!-- What to encode -->
|
||||
<div class="control-row">
|
||||
<label>
|
||||
@@ -285,33 +286,52 @@
|
||||
{{ overlong.length }} row(s) could not be encoded as CODE128 or were empty:
|
||||
{{ overlong.slice(0, 3).join(', ') }}{{ overlong.length > 3 ? ' ...' : '' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview doubles as the print surface: what is on screen is what prints. -->
|
||||
<div class="sheet">
|
||||
<div
|
||||
v-for="item in visible"
|
||||
:key="item.index"
|
||||
class="label"
|
||||
:class="labelClasses(item.page)"
|
||||
>
|
||||
<img v-if="showPicture(item.page) && pictureposition === 'behind'"
|
||||
:src="pictureUrl" class="picture-behind" alt="" />
|
||||
<div class="content">
|
||||
<div v-if="showPicture(item.page) && pictureposition !== 'behind'" class="picturebox">
|
||||
<img :src="pictureUrl" class="picture-img" alt="" />
|
||||
</div>
|
||||
<div class="codegroup">
|
||||
<div v-if="layoutFor(item.page) !== 'textonly'" class="codebox">
|
||||
<img v-if="images[item.index]" :src="images[item.index]" class="code-img" alt="" />
|
||||
</div>
|
||||
<div v-if="layoutFor(item.page) !== 'codeonly' && item.page.label" class="label-text">
|
||||
{{ item.page.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="backenabled" class="side-flag">{{ item.page.side }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Preview doubles as the print surface: what is on screen is what
|
||||
prints, so everything around it is chrome that print must strip. -->
|
||||
<div class="preview">
|
||||
<div class="preview-head no-print">
|
||||
<h4 class="section-heading">Preview</h4>
|
||||
<span class="preview-count">
|
||||
{{ cardCount }} label{{ cardCount === 1 ? '' : 's' }}<span
|
||||
v-if="backenabled">, {{ pages.length }} pages</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="sheet">
|
||||
<div
|
||||
v-for="item in visible"
|
||||
:key="item.index"
|
||||
class="label"
|
||||
:class="labelClasses(item.page)"
|
||||
>
|
||||
<img v-if="showPicture(item.page) && pictureposition === 'behind'"
|
||||
:src="pictureUrl" class="picture-behind" alt="" />
|
||||
<div class="content">
|
||||
<div v-if="showPicture(item.page) && pictureposition !== 'behind'" class="picturebox">
|
||||
<img :src="pictureUrl" class="picture-img" alt="" />
|
||||
</div>
|
||||
<div class="codegroup">
|
||||
<div v-if="layoutFor(item.page) !== 'textonly'" class="codebox">
|
||||
<img v-if="images[item.index]" :src="images[item.index]" class="code-img" alt="" />
|
||||
<!-- An empty code box is indistinguishable from a label that
|
||||
simply has no code on it, which is how a failed render
|
||||
reads as "the barcode does not appear". Say so, on screen
|
||||
only - the printed label must never carry this. -->
|
||||
<span v-else class="code-missing">no code</span>
|
||||
</div>
|
||||
<div v-if="layoutFor(item.page) !== 'codeonly' && item.page.label" class="label-text">
|
||||
{{ item.page.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="backenabled" class="side-flag">{{ item.page.side }}</span>
|
||||
</div>
|
||||
<p v-if="!pages.length" class="preview-empty no-print">
|
||||
Nothing to print yet - enter content above.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -732,6 +752,47 @@ watch([pages, codetype, backcodetype, errorcorrection], renderAll)
|
||||
|
||||
.code-generator { width: 100%; }
|
||||
|
||||
/* Settings on the left, the labels themselves on the right, where they stay in
|
||||
view while the settings that change them are being worked. The preview
|
||||
column scrolls on its own so a 500-label run cannot push the controls off
|
||||
the screen. */
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.preview {
|
||||
position: sticky;
|
||||
top: 12px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px 16px;
|
||||
max-height: calc(100vh - var(--main-pad-top) - 24px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.preview-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.preview-head .section-heading { margin-top: 0.25rem; }
|
||||
|
||||
.preview-count { font-size: 0.8125rem; color: var(--text-light); }
|
||||
|
||||
.preview-empty { color: var(--text-light); font-size: 0.8125rem; margin: 0; }
|
||||
|
||||
/* One column once the two would be too narrow to work in. */
|
||||
@media (max-width: 1200px) {
|
||||
.workspace { grid-template-columns: minmax(0, 1fr); }
|
||||
.preview { position: static; max-height: none; }
|
||||
}
|
||||
|
||||
.controls {
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
@@ -905,18 +966,35 @@ watch([pages, codetype, backcodetype, errorcorrection], renderAll)
|
||||
.label.type-barcode .codebox {
|
||||
flex: 1 1 auto;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
/* Never below 40% of the label: past that a CODE128 is too few narrow bars
|
||||
to scan, so it is better for the caption to wrap or clip. */
|
||||
min-width: 40%;
|
||||
height: var(--tool-barh);
|
||||
}
|
||||
|
||||
.label.layout-stack.type-barcode .codebox { min-width: 100%; }
|
||||
|
||||
/* Screen-only, and deliberately loud: an empty box means the render failed. */
|
||||
.code-missing {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 6px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.code-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* The caption takes what it needs and no more. Both boxes used to grow, so a
|
||||
caption of any length halved the barcode and then kept going - at 1x0.5in
|
||||
with a couple of words it left a 36px stub that reads as "the code did not
|
||||
render". A code that cannot be scanned is not a label. */
|
||||
.label-text {
|
||||
flex: 1 1 auto;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
|
||||
@@ -943,7 +1021,20 @@ watch([pages, codetype, backcodetype, errorcorrection], renderAll)
|
||||
|
||||
@media print {
|
||||
.side-flag { display: none !important; }
|
||||
.code-missing { display: none !important; }
|
||||
.sheet { padding: 0; display: block; gap: 0; }
|
||||
/* The preview column is chrome. Its overflow matters most: a scrolling
|
||||
ancestor clips a multi-page print to whatever was on screen. */
|
||||
.workspace { display: block; }
|
||||
.preview {
|
||||
position: static;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
/* The back's dotted variant outspecifies a bare .label reset, so it printed
|
||||
a dashed rule down the edge of every second card. */
|
||||
.label,
|
||||
|
||||
Reference in New Issue
Block a user