inventory dashboard setup
This commit is contained in:
Zach Harding
@@ -338,157 +338,265 @@ const altSearchUrl = (card: any) => {
|
||||
})}
|
||||
|
||||
<div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
|
||||
<style>
|
||||
:root {
|
||||
--c-nm: 156, 204, 102;
|
||||
--c-lp: 211, 225, 86;
|
||||
--c-mp: 255, 238, 87;
|
||||
--c-hp: 255, 201, 41;
|
||||
--c-dmg: 255, 167, 36;
|
||||
}
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-md-6">
|
||||
<h5 class="my-3">Add {card?.productName} to inventory</h5>
|
||||
|
||||
.btn-check:checked + .btn-cond-nm { background: rgba(var(--c-nm), 1); border-color: rgba(var(--c-nm), 1); color: #2d4a10; }
|
||||
.btn-check:checked + .btn-cond-lp { background: rgba(var(--c-lp), 1); border-color: rgba(var(--c-lp), 1); color: #3a4310; }
|
||||
.btn-check:checked + .btn-cond-mp { background: rgba(var(--c-mp), 1); border-color: rgba(var(--c-mp), 1); color: #44420a; }
|
||||
.btn-check:checked + .btn-cond-hp { background: rgba(var(--c-hp), 1); border-color: rgba(var(--c-hp), 1); color: #4a3608; }
|
||||
.btn-check:checked + .btn-cond-dmg { background: rgba(var(--c-dmg), 1); border-color: rgba(var(--c-dmg), 1); color: #4a2c08; }
|
||||
<form id="inventoryForm" data-inventory-form novalidate>
|
||||
<div class="row g-3">
|
||||
<div class="col-4">
|
||||
<label for="quantity" class="form-label fw-medium">Quantity</label>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control mt-1"
|
||||
id="quantity"
|
||||
name="quantity"
|
||||
min="1"
|
||||
step="1"
|
||||
value="1"
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">Required.</div>
|
||||
</div>
|
||||
|
||||
.btn-cond-nm, .btn-cond-lp, .btn-cond-mp, .btn-cond-hp, .btn-cond-dmg {
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
color: var(--bs-body-color);
|
||||
background: transparent;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
transition: background 0.1s, border-color 0.1s;
|
||||
}
|
||||
.btn-cond-nm:hover { background: rgba(var(--c-nm), 0.2); border-color: rgba(var(--c-nm), 0.6); }
|
||||
.btn-cond-lp:hover { background: rgba(var(--c-lp), 0.2); border-color: rgba(var(--c-lp), 0.6); }
|
||||
.btn-cond-mp:hover { background: rgba(var(--c-mp), 0.2); border-color: rgba(var(--c-mp), 0.6); }
|
||||
.btn-cond-hp:hover { background: rgba(var(--c-hp), 0.2); border-color: rgba(var(--c-hp), 0.6); }
|
||||
.btn-cond-dmg:hover { background: rgba(var(--c-dmg), 0.2); border-color: rgba(var(--c-dmg), 0.6); }
|
||||
<div class="col-8">
|
||||
<div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
|
||||
<label for="purchasePrice" class="form-label fw-medium mb-0 mt-1">
|
||||
Purchase price
|
||||
</label>
|
||||
|
||||
.price-toggle .btn { font-size: 0.75rem; padding: 0.25rem 0.6rem; line-height: 1; }
|
||||
</style>
|
||||
<div class="btn-group btn-group-sm price-toggle" role="group" aria-label="Price mode">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="priceMode"
|
||||
id="mode-dollar"
|
||||
value="dollar"
|
||||
autocomplete="off"
|
||||
checked
|
||||
/>
|
||||
<label class="btn btn-outline-secondary" for="mode-dollar">$</label>
|
||||
|
||||
<form id="inventoryForm" novalidate>
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="priceMode"
|
||||
id="mode-percent"
|
||||
value="percent"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-outline-secondary" for="mode-percent">%</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-4">
|
||||
<label for="quantity" class="form-label fw-medium">Quantity</label>
|
||||
<input type="number" class="form-control" id="quantity" name="quantity"
|
||||
min="1" step="1" value="1" required>
|
||||
<div class="invalid-feedback">Required.</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text mt-1" id="pricePrefix">$</span>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control mt-1 rounded-end"
|
||||
id="purchasePrice"
|
||||
name="purchasePrice"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
aria-describedby="pricePrefix priceSuffix priceHint"
|
||||
required
|
||||
/>
|
||||
<span class="input-group-text d-none mt-1" id="priceSuffix">%</span>
|
||||
</div>
|
||||
|
||||
<div class="col-8">
|
||||
<label class="form-label fw-medium">Condition</label>
|
||||
<div class="btn-group w-100" role="group" aria-label="Condition">
|
||||
<input type="radio" class="btn-check" name="condition" id="cond-nm" value="Near Mint" autocomplete="off" checked>
|
||||
<label class="btn btn-cond-nm" for="cond-nm">NM</label>
|
||||
<div class="form-text" id="priceHint">Enter the purchase price.</div>
|
||||
<div class="invalid-feedback">Enter a purchase price.</div>
|
||||
</div>
|
||||
|
||||
<input type="radio" class="btn-check" name="condition" id="cond-lp" value="Lightly Played" autocomplete="off">
|
||||
<label class="btn btn-cond-lp" for="cond-lp">LP</label>
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-medium">Condition</label>
|
||||
<div class="btn-group condition-input w-100" role="group" aria-label="Condition">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-nm"
|
||||
value="Near Mint"
|
||||
autocomplete="off"
|
||||
checked
|
||||
/>
|
||||
<label class="btn btn-cond-nm" for="cond-nm">NM</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="condition" id="cond-mp" value="Moderately Played" autocomplete="off">
|
||||
<label class="btn btn-cond-mp" for="cond-mp">MP</label>
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-lp"
|
||||
value="Lightly Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-lp" for="cond-lp">LP</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="condition" id="cond-hp" value="Heavily Played" autocomplete="off">
|
||||
<label class="btn btn-cond-hp" for="cond-hp">HP</label>
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-mp"
|
||||
value="Moderately Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-mp" for="cond-mp">MP</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="condition" id="cond-dmg" value="Damaged" autocomplete="off">
|
||||
<label class="btn btn-cond-dmg" for="cond-dmg">DMG</label>
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-hp"
|
||||
value="Heavily Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-hp" for="cond-hp">HP</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-dmg"
|
||||
value="Damaged"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-dmg" for="cond-dmg">DMG</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label for="note" class="form-label fw-medium">
|
||||
Note
|
||||
<span class="text-body-tertiary fw-normal ms-1 small">optional</span>
|
||||
</label>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="note"
|
||||
name="note"
|
||||
rows="2"
|
||||
maxlength="255"
|
||||
placeholder="e.g. bought at local shop, gift, graded copy…"
|
||||
></textarea>
|
||||
<div class="form-text text-end" id="noteCount">0 / 255</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 d-flex gap-3 pt-2">
|
||||
<button type="reset" class="btn btn-outline-danger flex-fill">Reset</button>
|
||||
<button type="submit" class="btn btn-success flex-fill">Save to inventory</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
<h5 class="my-3">Inventory entries for {card?.productName}</h5>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div class="alert alert-dark border-0 rounded-4 d-none" id="inventoryEmptyState">
|
||||
<div class="fw-medium mb-1">No inventory entries yet</div>
|
||||
<div class="text-secondary small">
|
||||
Once you add copies of this card, they’ll show up here.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label for="purchasePrice" class="form-label fw-medium mb-0">Purchase price</label>
|
||||
<div class="btn-group btn-group-sm price-toggle" role="group" aria-label="Price mode">
|
||||
<input type="radio" class="btn-check" name="priceMode" id="mode-dollar" value="dollar" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-secondary" for="mode-dollar">$ amount</label>
|
||||
<input type="radio" class="btn-check" name="priceMode" id="mode-percent" value="percent" autocomplete="off">
|
||||
<label class="btn btn-outline-secondary" for="mode-percent">% of market</label>
|
||||
</div>
|
||||
<!-- Inventory list -->
|
||||
<div class="d-flex flex-column gap-3" id="inventoryEntryList">
|
||||
|
||||
<!-- Inventory card -->
|
||||
<article class="border rounded-4 p-2 bg-body-tertiary inventory-entry-card">
|
||||
<div class="d-flex flex-column gap-2">
|
||||
|
||||
<!-- Top row -->
|
||||
<div class="d-flex justify-content-between align-items-start gap-3">
|
||||
<div class="min-w-0 flex-grow-1">
|
||||
<div class="fw-semibold fs-5 text-body mb-1">Near Mint</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Middle row -->
|
||||
<div class="row g-2">
|
||||
<div class="col-4">
|
||||
<div class="small text-secondary">Purchase price</div>
|
||||
<div class="fs-5 fw-semibold">$8.50</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="small text-secondary">Market price</div>
|
||||
<div class="fs-5 text-success">$10.25</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="small text-secondary">Gain / loss</div>
|
||||
<div class="fs-5 fw-semibold text-success">+$1.75</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom row -->
|
||||
<div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="small text-secondary">Qty</span>
|
||||
|
||||
<div class="btn-group" role="group" aria-label="Quantity controls">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm">−</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1">2</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-danger">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Inventory card -->
|
||||
<article class="border rounded-4 p-2 bg-body-tertiary inventory-entry-card">
|
||||
<div class="d-flex flex-column gap-2">
|
||||
|
||||
<!-- Top row -->
|
||||
<div class="d-flex justify-content-between align-items-start gap-3">
|
||||
<div class="min-w-0 flex-grow-1">
|
||||
<div class="fw-semibold fs-5 text-body mb-1">Lightly Played</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-2">
|
||||
<div class="col-4">
|
||||
<div class="small text-secondary">Purchase price</div>
|
||||
<div class="fs-5 fw-semibold">$6.00</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="small text-secondary">Market price</div>
|
||||
<div class="fs-5 text-success">$8.00</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="small text-secondary">Gain / loss</div>
|
||||
<div class="fs-5 fw-semibold text-success">+$4.00</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="small text-secondary">Qty</span>
|
||||
<div class="btn-group" role="group" aria-label="Quantity controls">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm">−</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1">2</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-danger">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="pricePrefix">$</span>
|
||||
<input type="number" class="form-control" id="purchasePrice" name="purchasePrice"
|
||||
min="0" step="0.01" placeholder="0.00"
|
||||
aria-describedby="pricePrefix priceSuffix priceHint" required>
|
||||
<span class="input-group-text d-none" id="priceSuffix">%</span>
|
||||
</div>
|
||||
<div class="form-text" id="priceHint">Enter the amount you paid.</div>
|
||||
<div class="invalid-feedback">Enter a purchase price.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="note" class="form-label fw-medium">
|
||||
Note
|
||||
<span class="text-body-tertiary fw-normal ms-1 small">optional</span>
|
||||
</label>
|
||||
<textarea class="form-control" id="note" name="note"
|
||||
rows="2" maxlength="255"
|
||||
placeholder="e.g. bought at local shop, gift, graded copy…"></textarea>
|
||||
<div class="form-text text-end" id="noteCount">0 / 255</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-success flex-fill">Save to inventory</button>
|
||||
<button type="reset" class="btn btn-outline-secondary">Reset</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const priceInput = document.getElementById('purchasePrice');
|
||||
const pricePrefix = document.getElementById('pricePrefix');
|
||||
const priceSuffix = document.getElementById('priceSuffix');
|
||||
const priceHint = document.getElementById('priceHint');
|
||||
const note = document.getElementById('note');
|
||||
const noteCount = document.getElementById('noteCount');
|
||||
|
||||
document.querySelectorAll('input[name="priceMode"]').forEach(radio => {
|
||||
radio.addEventListener('change', () => {
|
||||
const isPct = radio.value === 'percent';
|
||||
pricePrefix.classList.toggle('d-none', isPct);
|
||||
priceSuffix.classList.toggle('d-none', !isPct);
|
||||
priceInput.step = isPct ? '1' : '0.01';
|
||||
priceInput.max = isPct ? '100' : '';
|
||||
priceInput.placeholder = isPct ? '100' : '0.00';
|
||||
priceInput.value = '';
|
||||
priceHint.textContent = isPct
|
||||
? 'Percentage of the current market price you paid (e.g. 80 = 80%).'
|
||||
: 'Enter the amount you paid.';
|
||||
});
|
||||
});
|
||||
|
||||
note.addEventListener('input', () => {
|
||||
noteCount.textContent = `${note.value.length} / 255`;
|
||||
});
|
||||
|
||||
document.getElementById('inventoryForm').addEventListener('submit', e => {
|
||||
e.preventDefault();
|
||||
const form = e.currentTarget;
|
||||
if (!form.checkValidity()) { form.classList.add('was-validated'); return; }
|
||||
form.classList.remove('was-validated');
|
||||
// your save logic here — form data available via new FormData(form)
|
||||
});
|
||||
|
||||
document.getElementById('inventoryForm').addEventListener('reset', () => {
|
||||
document.getElementById('inventoryForm').classList.remove('was-validated');
|
||||
noteCount.textContent = '0 / 255';
|
||||
pricePrefix.classList.remove('d-none');
|
||||
priceSuffix.classList.add('d-none');
|
||||
priceInput.step = '0.01';
|
||||
priceInput.max = '';
|
||||
priceInput.placeholder = '0.00';
|
||||
priceHint.textContent = 'Enter the amount you paid.';
|
||||
document.getElementById('mode-dollar').checked = true;
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user