Skip to content

Commit 4bbc9ff

Browse files
dangowansdangowans
committed
rework capacity tags
1 parent a7ca15b commit 4bbc9ff

File tree

2 files changed

+134
-68
lines changed

2 files changed

+134
-68
lines changed

‎public/javascripts/burialSiteTypes.admin.js‎

Lines changed: 61 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -322,57 +322,88 @@ Object.defineProperty(exports, "__esModule", { value: true });
322322
burialSiteTypeContainer.className = 'panel container--burialSiteType';
323323
burialSiteTypeContainer.dataset.burialSiteTypeId =
324324
burialSiteType.burialSiteTypeId.toString();
325+
/*
326+
* Body Capacity Tag
327+
*/
328+
let bodyCapacityMax = burialSiteType.bodyCapacityMax?.toString() ?? 'unlimited';
329+
if (bodyCapacityMax === '0') {
330+
bodyCapacityMax = 'none';
331+
}
332+
let bodyCapacityTagClass = 'is-info';
333+
if (bodyCapacityMax === 'none') {
334+
bodyCapacityTagClass = 'is-danger';
335+
}
336+
else if (bodyCapacityMax === 'unlimited') {
337+
bodyCapacityTagClass = 'is-success';
338+
}
339+
const bodiesTagHtml = `<div class="control">
340+
<div class="tags has-addons">
341+
<span class="tag is-dark">Bodies</span>
342+
<span class="tag ${bodyCapacityTagClass}">
343+
${cityssm.escapeHTML(bodyCapacityMax)}
344+
</span>
345+
</div>
346+
</div>`;
347+
/*
348+
* Cremains Capacity Tag
349+
*/
350+
let crematedCapacityMax = burialSiteType.crematedCapacityMax?.toString() ?? 'unlimited';
351+
if (crematedCapacityMax === '0') {
352+
crematedCapacityMax = 'none';
353+
}
354+
let crematedCapacityTagClass = 'is-info';
355+
if (crematedCapacityMax === 'none') {
356+
crematedCapacityTagClass = 'is-danger';
357+
}
358+
else if (crematedCapacityMax === 'unlimited') {
359+
crematedCapacityTagClass = 'is-success';
360+
}
361+
const crematedTagHtml = `<div class="control">
362+
<div class="tags has-addons">
363+
<span class="tag is-dark">Cremains</span>
364+
<span class="tag ${crematedCapacityTagClass}">
365+
${cityssm.escapeHTML(crematedCapacityMax)}
366+
</span>
367+
</div>
368+
</div>`;
325369
// eslint-disable-next-line no-unsanitized/property
326370
burialSiteTypeContainer.innerHTML = `<div class="panel-heading">
327-
<div class="level is-mobile">
328-
<div class="level-left">
329-
<div class="level-item">
330-
<button class="button is-small button--toggleBurialSiteTypeFields" data-tooltip="Toggle Fields" type="button" aria-label="Toggle Fields">
371+
<div class="columns">
372+
<div class="column is-narrow">
373+
<button class="button is-small button--toggleBurialSiteTypeFields" data-tooltip="Toggle Fields" type="button" aria-label="Toggle Fields">
331374
<span class="icon">
332375
${expandedBurialSiteTypes.has(burialSiteType.burialSiteTypeId)
333376
? '<i class="fa-solid fa-minus"></i>'
334377
: '<i class="fa-solid fa-plus"></i>'}
335378
</span>
336-
</button>
337-
</div>
338-
<div class="level-item">
339-
<h2 class="title is-5 has-text-white">${cityssm.escapeHTML(burialSiteType.burialSiteType)}</h2>
340-
</div>
341-
<div class="level-item">
342-
<div class="tags">
343-
${burialSiteType.bodyCapacityMax === null
344-
? ''
345-
: `<span class="tag is-info">
346-
Bodies: ${cityssm.escapeHTML(burialSiteType.bodyCapacityMax.toString())}
347-
</span>`}
348-
${burialSiteType.crematedCapacityMax === null
349-
? ''
350-
: `<span class="tag is-info">
351-
Cremains: ${cityssm.escapeHTML(burialSiteType.crematedCapacityMax.toString())}
352-
</span>`}
353-
</div>
379+
</button>
380+
</div>
381+
<div class="column is-narrow">
382+
<h2 class="title is-5 has-text-white">${cityssm.escapeHTML(burialSiteType.burialSiteType)}</h2>
383+
</div>
384+
<div class="column">
385+
<div class="field is-grouped is-grouped-multiline">
386+
${bodiesTagHtml}
387+
${crematedTagHtml}
354388
</div>
355389
</div>
356-
<div class="level-right is-hidden-print">
357-
<div class="level-item">
390+
<div class="column is-narrow is-hidden-print">
391+
<div class="buttons">
358392
<button class="button is-danger is-small button--deleteBurialSiteType" type="button">
359393
<span class="icon is-small"><i class="fa-solid fa-trash"></i></span>
360394
<span>Delete</span>
361395
</button>
362-
</div>
363-
<div class="level-item">
396+
364397
<button class="button is-primary is-small button--editBurialSiteType" type="button">
365398
<span class="icon is-small"><i class="fa-solid fa-pencil-alt"></i></span>
366399
<span>Edit <span class="is-hidden-desktop-only is-hidden-tablet-only">Burial Site Type</span></span>
367400
</button>
368-
</div>
369-
<div class="level-item">
401+
370402
<button class="button is-success is-small button--addBurialSiteTypeField" type="button">
371403
<span class="icon is-small"><i class="fa-solid fa-plus"></i></span>
372404
<span>Add Field</span>
373405
</button>
374-
</div>
375-
<div class="level-item">
406+
376407
${sunrise.getMoveUpDownButtonFieldHTML('button--moveBurialSiteTypeUp', 'button--moveBurialSiteTypeDown')}
377408
</div>
378409
</div>

‎public/javascripts/burialSiteTypes.admin.ts‎

Lines changed: 73 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -610,67 +610,102 @@ type ResponseJSON =
610610
burialSiteTypeContainer.dataset.burialSiteTypeId =
611611
burialSiteType.burialSiteTypeId.toString()
612612

613+
/*
614+
* Body Capacity Tag
615+
*/
616+
617+
let bodyCapacityMax =
618+
burialSiteType.bodyCapacityMax?.toString() ?? 'unlimited'
619+
620+
if (bodyCapacityMax === '0') {
621+
bodyCapacityMax = 'none'
622+
}
623+
624+
let bodyCapacityTagClass = 'is-info'
625+
626+
if (bodyCapacityMax === 'none') {
627+
bodyCapacityTagClass = 'is-danger'
628+
} else if (bodyCapacityMax === 'unlimited') {
629+
bodyCapacityTagClass = 'is-success'
630+
}
631+
632+
const bodiesTagHtml = `<div class="control">
633+
<div class="tags has-addons">
634+
<span class="tag is-dark">Bodies</span>
635+
<span class="tag ${bodyCapacityTagClass}">
636+
${cityssm.escapeHTML(bodyCapacityMax)}
637+
</span>
638+
</div>
639+
</div>`
640+
641+
/*
642+
* Cremains Capacity Tag
643+
*/
644+
645+
let crematedCapacityMax =
646+
burialSiteType.crematedCapacityMax?.toString() ?? 'unlimited'
647+
648+
if (crematedCapacityMax === '0') {
649+
crematedCapacityMax = 'none'
650+
}
651+
652+
let crematedCapacityTagClass = 'is-info'
653+
654+
if (crematedCapacityMax === 'none') {
655+
crematedCapacityTagClass = 'is-danger'
656+
} else if (crematedCapacityMax === 'unlimited') {
657+
crematedCapacityTagClass = 'is-success'
658+
}
659+
660+
const crematedTagHtml = `<div class="control">
661+
<div class="tags has-addons">
662+
<span class="tag is-dark">Cremains</span>
663+
<span class="tag ${crematedCapacityTagClass}">
664+
${cityssm.escapeHTML(crematedCapacityMax)}
665+
</span>
666+
</div>
667+
</div>`
668+
613669
// eslint-disable-next-line no-unsanitized/property
614670
burialSiteTypeContainer.innerHTML = `<div class="panel-heading">
615-
<div class="level is-mobile">
616-
<div class="level-left">
617-
<div class="level-item">
618-
<button class="button is-small button--toggleBurialSiteTypeFields" data-tooltip="Toggle Fields" type="button" aria-label="Toggle Fields">
671+
<div class="columns">
672+
<div class="column is-narrow">
673+
<button class="button is-small button--toggleBurialSiteTypeFields" data-tooltip="Toggle Fields" type="button" aria-label="Toggle Fields">
619674
<span class="icon">
620675
${
621676
expandedBurialSiteTypes.has(burialSiteType.burialSiteTypeId)
622677
? '<i class="fa-solid fa-minus"></i>'
623678
: '<i class="fa-solid fa-plus"></i>'
624679
}
625680
</span>
626-
</button>
627-
</div>
628-
<div class="level-item">
629-
<h2 class="title is-5 has-text-white">${cityssm.escapeHTML(burialSiteType.burialSiteType)}</h2>
630-
</div>
631-
<div class="level-item">
632-
<div class="tags">
633-
${
634-
burialSiteType.bodyCapacityMax === null
635-
? ''
636-
: `<span class="tag is-info">
637-
Bodies: ${cityssm.escapeHTML(
638-
burialSiteType.bodyCapacityMax.toString()
639-
)}
640-
</span>`
641-
}
642-
${
643-
burialSiteType.crematedCapacityMax === null
644-
? ''
645-
: `<span class="tag is-info">
646-
Cremains: ${cityssm.escapeHTML(
647-
burialSiteType.crematedCapacityMax.toString()
648-
)}
649-
</span>`
650-
}
651-
</div>
681+
</button>
682+
</div>
683+
<div class="column is-narrow">
684+
<h2 class="title is-5 has-text-white">${cityssm.escapeHTML(burialSiteType.burialSiteType)}</h2>
685+
</div>
686+
<div class="column">
687+
<div class="field is-grouped is-grouped-multiline">
688+
${bodiesTagHtml}
689+
${crematedTagHtml}
652690
</div>
653691
</div>
654-
<div class="level-right is-hidden-print">
655-
<div class="level-item">
692+
<div class="column is-narrow is-hidden-print">
693+
<div class="buttons">
656694
<button class="button is-danger is-small button--deleteBurialSiteType" type="button">
657695
<span class="icon is-small"><i class="fa-solid fa-trash"></i></span>
658696
<span>Delete</span>
659697
</button>
660-
</div>
661-
<div class="level-item">
698+
662699
<button class="button is-primary is-small button--editBurialSiteType" type="button">
663700
<span class="icon is-small"><i class="fa-solid fa-pencil-alt"></i></span>
664701
<span>Edit <span class="is-hidden-desktop-only is-hidden-tablet-only">Burial Site Type</span></span>
665702
</button>
666-
</div>
667-
<div class="level-item">
703+
668704
<button class="button is-success is-small button--addBurialSiteTypeField" type="button">
669705
<span class="icon is-small"><i class="fa-solid fa-plus"></i></span>
670706
<span>Add Field</span>
671707
</button>
672-
</div>
673-
<div class="level-item">
708+
674709
${sunrise.getMoveUpDownButtonFieldHTML(
675710
'button--moveBurialSiteTypeUp',
676711
'button--moveBurialSiteTypeDown'

0 commit comments

Comments
 (0)