diff --git a/public/print.css b/public/print.css
index 37f08c59..3abe9eb1 100644
--- a/public/print.css
+++ b/public/print.css
@@ -1,443 +1,464 @@
+.test-label-section {
+ background-color: pink;
+ margin: 10px;
+ padding: 20px;
+}
+
+.test-label-section > h1,
+.test-label-section > h2 {
+ text-align: left;
+ justify-self: unset;
+}
+
+.test-label-section .label-value-container {
+ border: 1px solid black;
+ padding: 10px;
+}
.App {
- text-align: center;
+ text-align: center;
}
.App-logo {
- height: 40vmin;
- pointer-events: none;
+ height: 40vmin;
+ pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
+ .App-logo {
+ animation: App-logo-spin infinite 20s linear;
+ }
}
-.align-right{
- text-align: right;
+.align-right {
+ text-align: right;
}
.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
+ background-color: #282c34;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: calc(10px + 2vmin);
+ color: white;
}
.App-link {
- color: #61dafb;
+ color: #61dafb;
}
@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
}
/* Code below are added by PNNL */
/*Headings*/
h1 {
- font-size: 1.5rem;
- text-align: center;
- break-after: avoid-page;
- justify-self: center;
+ font-size: 1.5rem;
+ text-align: center;
+ break-after: avoid-page;
+ justify-self: center;
}
h2 {
- break-after: avoid-page;
- font-size: 1.25rem;
+ break-after: avoid-page;
+ font-size: 1.25rem;
}
-h2:not(.accordion-header, h1+h2) {
- margin-top: 30px;
+h2:not(.accordion-header, h1 + h2) {
+ margin-top: 30px;
}
h3 {
- font-size: 1rem;
- break-after: avoid-page;
+ font-size: 1rem;
+ break-after: avoid-page;
}
/* used in all templates - for report title */
h1 + h2 {
- text-align: center;
+ text-align: center;
}
/* used in mdx_project_details_view.tsx */
h1 + h3 {
- text-align: center;
+ text-align: center;
}
/* used in workflows_view.tsx, mdx_template_view.tsx, job_view.tsx */
-.address
-{
- text-align: center;
+.address {
+ text-align: center;
}
/* used in home.tsx */
.flex-container {
- display: flex;
- flex-direction: row;
- gap: 10px;
- align-items: flex-start;
- align-content: center;
- justify-content: space-around;
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+ align-items: flex-start;
+ align-content: center;
+ justify-content: space-around;
}
.flex-child {
- flex: 1;
- align-self: top;
+ flex: 1;
+ align-self: top;
}
/* used in jobs_view.tsx */
.icon-container {
- float: right;
- vertical-align: top;
+ float: right;
+ vertical-align: top;
}
.button-container-right {
- padding-left: 0.75rem;
- padding-right: 0.75rem;
- float: right;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ float: right;
}
.button-container-center {
- float: center;
- padding-left: 0.75rem;
- padding-right: 0.75rem;
+ float: center;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
}
-
-
.menu-container {
- float: right;
- vertical-align: top;
+ float: right;
+ vertical-align: top;
}
-
.img-thumbnail {
- object-fit: contain;
- max-height: 500px;
+ object-fit: contain;
+ max-height: 500px;
}
/* jobs_view.tsx & collapsible.tsx */
.bottom-margin {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
+.string-input-modal {
+ .error {
+ color: red;
+ font-style: italic;
+ }
+}
-.string-input-modal{
- .error{
+.error {
color: red;
font-style: italic;
- }
}
-.error{
- color: red;
- font-style: italic;
-}
-
-
/* root_layout.tsx */
#root-flex-layout {
- display: flex;
- align-items: center;
- justify-content: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
#root-background {
- margin-left: auto;
- margin-right: auto;
- max-width: 800px;
- background-color: rgba(231, 231, 231);
- min-height: 100vh;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 800px;
+ background-color: rgba(231, 231, 231);
+ min-height: 100vh;
}
#root-banner {
- background-color: #006100;
+ background-color: #006100;
}
#root-title {
- color: gold;
- font-size: 2rem;
+ color: gold;
+ font-size: 2rem;
}
#root-body {
- padding-top: 1rem;
- padding-bottom: 1rem;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
}
#back-button-logo {
- color: white;
- height: 100%;
+ color: white;
+ height: 100%;
}
#back-button {
- padding: 1rem;
- background-color: #006100;
+ padding: 1rem;
+ background-color: #006100;
}
#back-button-link {
- text-decoration: none;
+ text-decoration: none;
}
#back-button-container {
- margin-left: 0.5rem;
- margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ margin-right: 0.5rem;
}
/* editor-flexbox.tsx */
-.editor-textarea{
- height: auto;
- min-height: 700px;
- resize: none;
+.editor-textarea {
+ height: auto;
+ min-height: 700px;
+ resize: none;
}
/* photo_input.tsx */
.input-card {
- page-break-before: always;
- margin-bottom: 1rem;
+ page-break-before: always;
+ margin-bottom: 1rem;
} /*also in radio.tsx*/
/* stylizes the hidden input for photo upload*/
.photo-upload-input {
- display: none;
+ display: none;
}
/* photo.tsx */
.photo-card {
- break-inside: avoid;
- margin-bottom: 1rem;
- margin-top: 1rem;
+ break-inside: avoid;
+ margin-bottom: 1rem;
+ margin-top: 1rem;
+}
+
+.photo-card > .card-body > div {
+ margin-bottom: 1rem;
}
.photo-row {
- display: grid;
- grid-template-columns: 1fr 1fr; /* Forces two columns */
- gap: 1rem;
+ display: grid;
+ grid-template-columns: 1fr 1fr; /* Forces two columns */
+ gap: 1rem;
+}
+
+.photo-notes h3 {
+ font-weight: bold;
+}
+
+.photo-notes .photo-note-string {
+ margin-bottom: unset;
}
/* stylizes tab component here to avoid putting styles in editor*/
.tab-content {
- margin-top: 1rem;
+ margin-top: 1rem;
}
/* styling for PDFRenderer component */
-.react-pdf__Page__textContent{
+.react-pdf__Page__textContent {
display: none;
- }
+}
/* 'hint' styling - the input components */
-.form-text{
- margin-left:.50rem;
- margin-top:.25rem;
- font-size:.875rem;
- color:var(--bs-secondary-color);
- font-style: italic;
+.form-text {
+ margin-left: 0.5rem;
+ margin-top: 0.25rem;
+ font-size: 0.875rem;
+ color: var(--bs-secondary-color);
+ font-style: italic;
}
/* label styling for the Radio component */
.custom-label {
- color: gray;
- font-size: .9rem;
+ color: gray;
+ font-size: 0.9rem;
}
-
/* BETA version text - styling for new templates - temperary */
.beta-text {
- color: red;
- padding-left: .75rem;
- font-size: 0.9rem;
+ color: red;
+ padding-left: 0.75rem;
+ font-size: 0.9rem;
}
/* used in home.tsx */
.padding {
- padding: 5px 10px 5px 10px; /* top right bottom left*/
+ padding: 5px 10px 5px 10px; /* top right bottom left*/
}
-.top-bottom-padding
-{
- padding: 5px 0 5px 0;
+.top-bottom-padding {
+ padding: 5px 0 5px 0;
}
/* disclaimer text */
.disclaimer-text {
- padding-left: .75rem;
- padding-right: .75rem;
- font-size: 0.9rem;
- font-weight: bold;
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ font-size: 0.9rem;
+ font-weight: bold;
}
.combustion_tests {
- padding: 5px 10px 5px 10px;
- background-color: white;
+ padding: 5px 10px 5px 10px;
+ background-color: white;
}
.align_justify {
- justify-content: center;
- text-align: justify;
+ justify-content: center;
+ text-align: justify;
}
.margin-left {
- margin-left: 2em
+ margin-left: 2em;
}
-
/* Primary Button - with background color */
.btn-primary {
- color: #fff; /* Text color */
- background-color: #006100; /* Base background color */
- border: 2px solid #006100;
- cursor: pointer;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- transition: background-color 0.3s ease, border-color 0.3s ease;
- outline: none;
-}
-
-.btn-primary:hover,
-.btn-primary:active,
-.btn-primary:focus,
-.btn-primary:focus-visible,
+ color: #fff; /* Text color */
+ background-color: #006100; /* Base background color */
+ border: 2px solid #006100;
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ transition:
+ background-color 0.3s ease,
+ border-color 0.3s ease;
+ outline: none;
+}
+
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary:focus,
+.btn-primary:focus-visible,
.btn-primary:focus-within {
- background-color: #004d00;
- border-color: #004d00;
+ background-color: #004d00;
+ border-color: #004d00;
}
.btn-primary:disabled {
- background-color: #4caf50;
- border-color: #4caf50;
- cursor: not-allowed; /* Not-allowed cursor on disabled */
- opacity: 0.6;
+ background-color: #4caf50;
+ border-color: #4caf50;
+ cursor: not-allowed; /* Not-allowed cursor on disabled */
+ opacity: 0.6;
}
/* Outline Primary Button - only outline */
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
- color: #fff;
- background-color: #005f00;
- border-color: #005f00;
+ color: #fff;
+ background-color: #005f00;
+ border-color: #005f00;
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
- box-shadow: none
+ box-shadow: none;
}
-.btn-outline-primary{
- background-color: transparent;
- cursor: pointer;
- border: 2px solid #006100;
- color: #006100;
-
+.btn-outline-primary {
+ background-color: transparent;
+ cursor: pointer;
+ border: 2px solid #006100;
+ color: #006100;
}
-.btn-outline-primary:hover{
- background-color: transparent;
- color: #006100;
- border-color: #006100;
+.btn-outline-primary:hover {
+ background-color: transparent;
+ color: #006100;
+ border-color: #006100;
}
-
/* Light Button - for Icons */
.btn-light {
- background-color: transparent;
- border-color: transparent;
- color: #000000;
+ background-color: transparent;
+ border-color: transparent;
+ color: #000000;
}
btn-light:active,
btn-light:hover {
- box-shadow: none;
+ box-shadow: none;
}
.welcome-header {
- padding-left: 1rem;
- padding-right: 1rem;
- color: #006100;
- font-size: 28px;
- font-weight: bold;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ color: #006100;
+ font-size: 28px;
+ font-weight: bold;
}
.welcome-content {
- padding-left: 1.5rem;
- padding-right: 1.5rem;
- color: #000000;
- font-size: 14px;
- font-weight: bold;
-}
-
-@media (max-width: 480px) {
- .welcome-content {
padding-left: 1.5rem;
padding-right: 1.5rem;
color: #000000;
- font-size: 12px;
+ font-size: 14px;
font-weight: bold;
- }
}
+@media (max-width: 480px) {
+ .welcome-content {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ color: #000000;
+ font-size: 12px;
+ font-weight: bold;
+ }
+}
.loader {
- border: 8px solid #f3f3f3; /* Light gray */
- border-top: 8px solid #3498db; /* Blue */
- border-radius: 50%;
- width: 30px; /* Size of the loader */
- height: 30px; /* Size of the loader */
- animation: spin 1s linear infinite; /* Animation */
- background-color: white;
+ border: 8px solid #f3f3f3; /* Light gray */
+ border-top: 8px solid #3498db; /* Blue */
+ border-radius: 50%;
+ width: 30px; /* Size of the loader */
+ height: 30px; /* Size of the loader */
+ animation: spin 1s linear infinite; /* Animation */
+ background-color: white;
}
@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
}
-
/* used in photo-input and photo component */
.photo-container {
- width: auto; /* Allow width to adjust based on content */
- max-width: 500px; /* Maximum width */
- overflow: visible; /* Hide overflow */
- height: auto; /* Allow height to adjust based on content */
- max-height: 600px; /* Maximum height */
- margin-bottom: 5px; /* Margin at the bottom */
- position: relative; /* Relative positioning for overlay elements */
- display: inline-block; /* Display inline-block to shrink to content size */
+ width: auto; /* Allow width to adjust based on content */
+ max-width: 500px; /* Maximum width */
+ overflow: visible; /* Hide overflow */
+ height: auto; /* Allow height to adjust based on content */
+ max-height: 600px; /* Maximum height */
+ margin-bottom: 5px; /* Margin at the bottom */
+ position: relative; /* Relative positioning for overlay elements */
+ display: inline-block; /* Display inline-block to shrink to content size */
}
.photo-report-container {
- width: auto; /* Allow width to adjust based on content */
- max-width: 500px; /* Maximum width */
- overflow: hidden; /* Hide overflow */
- height: auto; /* Allow height to adjust based on content */
- max-height: 600px; /* Maximum height */
- position: relative; /* Relative positioning for overlay elements */
- display: inline-block; /* Display inline-block to shrink to content size */
+ width: auto; /* Allow width to adjust based on content */
+ max-width: 500px; /* Maximum width */
+ overflow: hidden; /* Hide overflow */
+ height: auto; /* Allow height to adjust based on content */
+ max-height: 600px; /* Maximum height */
+ position: relative; /* Relative positioning for overlay elements */
+ display: inline-block; /* Display inline-block to shrink to content size */
}
/* used in photo-input component */
.photo-delete-button {
- position: absolute;
- top: 15px;
- right: 15px;
- border-radius: 50%;
- padding: 5px;
- z-index: 5; /* Ensures the button stays on top */
- cursor: pointer;
- transform: scale(1.2); /* Increase icon size */
- stroke-width: 2;
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ border-radius: 50%;
+ padding: 5px;
+ z-index: 5; /* Ensures the button stays on top */
+ cursor: pointer;
+ transform: scale(1.2); /* Increase icon size */
+ stroke-width: 2;
}
/* used in photo-input component */
-.image-tag {
- width: '400px'; /* Fixed width */
- height: '400px'; /* Fixed height */
- object-fit: 'cover'; /* Ensure the image covers the area (cropped if necessary) */
- border-radius: '8px'; /*Optional: adds rounded corners to the image */
+.image-tag {
+ width: '400px'; /* Fixed width */
+ height: '400px'; /* Fixed height */
+ object-fit: 'cover'; /* Ensure the image covers the area (cropped if necessary) */
+ border-radius: '8px'; /*Optional: adds rounded corners to the image */
}
/* used in photo-input component */
@@ -451,41 +472,53 @@ btn-light:hover {
/* used in photo-input component */
.custom-modal {
- max-width: 300px;
- margin: auto;
+ max-width: 300px;
+ margin: auto;
+}
+
+/* Used in text_input component */
+.label-hidden.form-floating > label {
+ visibility: hidden;
+}
+
+.label-hidden.form-floating > textarea {
+ padding: 1rem 0.75rem !important;
+}
+
+.text-area-expanded.form-floating > textarea {
+ height: 100px;
}
/* Default font size */
.modal-body-text {
- font-size: 18px; /* Adjust the default font size */
+ font-size: 18px; /* Adjust the default font size */
}
/* Common font size for medium, small, and extra small devices */
@media (max-width: 991.98px) {
- .modal-body-text {
- font-size: 14px; /* Adjust font size for all specified devices */
- }
+ .modal-body-text {
+ font-size: 14px; /* Adjust font size for all specified devices */
+ }
}
.safari-print-header {
-visibility: hidden;}
+ visibility: hidden;
+}
@media print {
- /* Adjusts the margin for printing */
- @page {
- margin-top: 4rem;
- margin-bottom: 4rem;
- }
-
-
- .safari-print-header {
- text-align: center;
- font-size: 10px;
- font-weight: bold;
- visibility: visible;
- margin-bottom: 10px;
- display: block;
- page-break-before: always;
- }
-
+ /* Adjusts the margin for printing */
+ @page {
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+ }
+
+ .safari-print-header {
+ text-align: center;
+ font-size: 10px;
+ font-weight: bold;
+ visibility: visible;
+ margin-bottom: 10px;
+ display: block;
+ page-break-before: always;
+ }
}
diff --git a/src/App.css b/src/App.css
index eb08d787..87bfdef5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,19 @@
+.playground-section {
+ background-color: lightgrey;
+ margin: 10px;
+ padding: 20px;
+}
+
+.playground-section > h1,
+.playground-section > h2 {
+ text-align: left;
+ justify-self: unset;
+}
+
+.playground-section .label-value-container {
+ border: 1px solid black;
+ padding: 10px;
+}
.App {
text-align: center;
}
diff --git a/src/__tests__/labelValue.test.tsx b/src/__tests__/labelValue.test.tsx
new file mode 100644
index 00000000..d8a65937
--- /dev/null
+++ b/src/__tests__/labelValue.test.tsx
@@ -0,0 +1,116 @@
+//to run this test: npm test -- src/__tests__/labelValue.test.tsx
+
+import { render, screen } from '@testing-library/react'
+import { StoreContext } from '../components/store'
+import LabelValue, { LabelValueProps } from '../components/label_value'
+
+// Mock StoreContext data
+const mockStoreContext = {
+ docId: 'TestDocID123',
+ attachments: {},
+ data: { location: { state: 'WA', zip_code: '99354' } },
+ metadata: {},
+}
+
+describe('LabelValue Component', () => {
+ // Helper function to render the component with StoreContext provider
+ const renderWithContext = ({
+ label,
+ value,
+ required = false,
+ prefix = '',
+ suffix = '',
+ decimalPlaces = 1,
+ type = 'string',
+ }: LabelValueProps) => {
+ return render(
+ Enter a date value to be retrieved by the LabelValues below Enter a number value to be retrieved by the LabelValues below Default is to round to 1 decimal place. Enter a text value to be retrieved by the LabelValue components below
+ Enter a number value to be retrieved by the LabelValues below
+ Enter a text value to be retrieved by the LabelValue components below: The default type is "string" so it does not need to be provided. This heat pump will: {props.data?.heat_pump_purpose} Cooling appliance exists: {props.data?.no_cooling_appliance?.length === 0 ? "Yes" : "No"} Ductwork Comments: {props.data.comment_ductwork} Pre-Upgrade Static Pressure Test Notes: {props.data.comment_pre_upgrade_static_pressure_test} Pre-Upgrade Airflow Test Notes: {props.data.comment_pre_upgrade_air_flow_test} Test method used: {props.data?.duct_leakage_test_method} Type Of Duct Leakage Test Performed: {props.data.type_of_duct_leakage_radio} CFM25 ={props.data.cfm25_calculator?.cfm25 ? props.data.cfm25_calculator.cfm25 : null} Conditioned Floor Area (ft2) = {props.data.cfm25_calculator?.conditioned_floor_area ? props.data.cfm25_calculator.conditioned_floor_area : null} Duct CFM25 per 100 per ft2 = { props.data.cfm25_calculator?.cfm25 && props.data.cfm25_calculator?.conditioned_floor_area ? ((props.data.cfm25_calculator.cfm25 / props.data.cfm25_calculator.conditioned_floor_area) * 100).toFixed(2) : null } ODU Mounting Style: {props.data.outdoor_unit.odu_mounting_style} ODU Inches Above The Ground (elevated above the snow): {props.data.outdoor_unit.odu_inches_above_ground} Overhead Snow & Ice Protection: {props.data.outdoor_unit.snow_ice_protection} Manual J Notes or Comments: {props.data.comment_manual_j} Aux Heat Lockout Above This Temperature (°F): {props.data.aux_heat_lockout_temperature} Compresser Lockout Below This Temperature (°F): {props.data.compresser_lockout_temperature} Dual Fuel Switch Over Temperature (°F): {props.data.dual_fuel_switch_over_temperature} Pre-Installation Comments: {props.data.comment_ductwork_concluding_summary} Circuit Breaker Notes: {props.data.comment_circuit_breaker_notes} Notes About Refrigerant Quantity Adjustments Or Weigh In: {props.data.comment_refrigerant_quantity_adjustments_or_weigh_in} Post-Installation Notes About Thermostat Settings: {props.data.comment_about_thermostat_settings} This heat pump will: {props.data?.heat_pump_purpose} Notes: {props.data.comment_odu_install_location} Notes: {props.data.comment_idu_install_location} Notes About Refridgerant Adjustment: {props.data.comment_refridgerant_adjustment} Air Volume of the Space: {props.data.space_air_volume} ft3 ACH50: {!isNaN(props?.data?.air_leakage_cfm50) && !isNaN(props?.data?.conditioned_volume_ft3) ? ((props?.data?.air_leakage_cfm50 * 60) / props?.data?.conditioned_volume_ft3).toFixed(1): 'N/A'} Conditioned Volume (ft3): {props?.data?.conditioned_volume_ft3} ACH50: {!isNaN(props?.data?.postinstall_air_leakage_cfm50) && !isNaN(props?.data?.conditioned_volume_ft3) ? ((props?.data?.postinstall_air_leakage_cfm50 * 60) / props?.data?.conditioned_volume_ft3).toFixed(1): 'N/A'} Cubic feet per minute (CFM) per 100 sq. ft. of conditioned floor area when the air handler is present: {!isNaN(props.data?.duct_leakage_cfm25) && !isNaN(props.data?.conditioned_floor_area_ft2) ? (props.data.duct_leakage_cfm25 / props.data.conditioned_floor_area_ft2 * 100).toFixed(1) : 'N/A'} Conditioned Floor Area (ft2): {props.data?.conditioned_floor_area_ft2} Cubic feet per minute (CFM) per 100 sq. ft. of conditioned floor area when the air handler is present: {!isNaN(props.data?.post_install_duct_leakage_cfm25) && !isNaN(props.data?.conditioned_floor_area_ft2) ? (props.data.post_install_duct_leakage_cfm25 / props.data.conditioned_floor_area_ft2 * 100).toFixed(1) : 'N/A'} What is the fuel type of the new stovetop/oven/range? ACH50: {!isNaN(props?.data?.air_leakage_cfm50) && !isNaN(props?.data?.conditioned_volume_ft3) ? ((props?.data?.air_leakage_cfm50 * 60) / props?.data?.conditioned_volume_ft3).toFixed(1): 'N/A'} Conditioned Volume (ft3): {props.data?.conditioned_volume_ft3} ACH50: {!isNaN(props?.data?.air_leakage_cfm50) && !isNaN(props?.data?.conditioned_volume_ft3) ? ((props?.data?.air_leakage_cfm50 * 60) / props?.data?.conditioned_volume_ft3).toFixed(1) : 'N/A'} ACH50: {!isNaN(props?.data?.air_leakage_cfm50) && !isNaN(props?.data?.conditioned_volume_ft3) ? ((props?.data?.air_leakage_cfm50 * 60) / props?.data?.conditioned_volume_ft3).toFixed(1): 'N/A'} Conditioned Volume (ft3): {props.data?.conditioned_volume_ft3} ACH50: {!isNaN(props?.data?.air_leakage_cfm50) && !isNaN(props?.data?.conditioned_volume_ft3) ? ((props?.data?.air_leakage_cfm50 * 60) / props?.data?.conditioned_volume_ft3).toFixed(1): 'N/A'} Conditioned Volume (ft3): {props.data?.conditioned_volume_ft3}
{props.data.assessment_for === 'Whole multifamily building'
- ? Multifamily Building Conditioned Area (ft2): {props.data.mf_conditioned_floor_area_sq_ft}
- : Single-family/unit Conditioned Area (ft2): {props.data.sf_conditioned_floor_area_sq_ft}
+ ? Fuel and System Type: {props.data.heating_systems[0].fuel_and_system_type} Heating Efficiency (HSPF): {props.data.heating_systems[0].is_efficiency_known === 'YES' ? props.data.heating_systems[0].efficiency_hspf : "NOT_KNOWN"} Heating Efficiency (AFUE): {props.data.heating_systems[0].is_efficiency_known === 'YES' ? props.data.heating_systems[0].efficiency_afue : "NOT_KNOWN"} Percent Conditioned Area Served: {props.data.heating_systems[0].is_percent_conditioned_floor_area_served_known === 'YES' ? props.data.heating_systems[0].percent_conditioned_floor_area_served : "NOT_KNOWN"} Fuel and System Type: {props.data.heating_systems[1].fuel_and_system_type} Heating Efficiency (HSPF): {props.data.heating_systems[1].is_efficiency_known === 'YES' ? props.data.heating_systems[1].efficiency_hspf : "NOT_KNOWN"} Heating Efficiency (AFUE): {props.data.heating_systems[1].is_efficiency_known === 'YES' ? props.data.heating_systems[1].efficiency_afue : "NOT_KNOWN"} Percent Conditioned Area Served: {props.data.heating_systems[1].is_percent_conditioned_floor_area_served_known === 'YES' ? props.data.heating_systems[1].percent_conditioned_floor_area_served : "NOT_KNOWN"} Fuel and System Type: {props.data.heating_systems[2].fuel_and_system_type} Heating Efficiency (HSPF): {props.data.heating_systems[2].is_efficiency_known === 'YES' ? props.data.heating_systems[2].efficiency_hspf : "NOT_KNOWN"} Heating Efficiency (AFUE): {props.data.heating_systems[2].is_efficiency_known === 'YES' ? props.data.heating_systems[2].efficiency_afue : "NOT_KNOWN"} Percent Conditioned Area Served: {props.data.heating_systems[2].is_percent_conditioned_floor_area_served_known === 'YES' ? props.data.heating_systems[2].percent_conditioned_floor_area_served : "NOT_KNOWN"} Cooling Efficiency (SEER): {props.data.cooling_systems[0].is_efficiency_known === 'YES' ? props.data.cooling_systems[0].efficiency_seer : "NOT_KNOWN"} Percent Conditioned Area Served: {props.data.cooling_systems[0].is_percent_conditioned_floor_area_served_known === 'YES' ? props.data.cooling_systems[0].percent_conditioned_floor_area_served : "NOT_KNOWN"} Cooling Efficiency (SEER): {props.data.cooling_systems[1].is_efficiency_known === 'YES' ? props.data.cooling_systems[1].efficiency_seer : "NOT_KNOWN"} Percent Conditioned Area Served: {props.data.cooling_systems[1].is_percent_conditioned_floor_area_served_known === 'YES' ? props.data.cooling_systems[1].percent_conditioned_floor_area_served : "NOT_KNOWN"} Cooling Efficiency (SEER): {props.data.cooling_systems[2].is_efficiency_known === 'YES' ? props.data.cooling_systems[2].efficiency_seer : "NOT_KNOWN"} Percent Conditioned Area Served: {props.data.cooling_systems[2].is_percent_conditioned_floor_area_served_known === 'YES' ? props.data.cooling_systems[2].percent_conditioned_floor_area_served : "NOT_KNOWN"} ACH50: {!isNaN(props?.data?.air_leakage_cfm50) && !isNaN(props?.data?.conditioned_volume_ft3) ? ((props?.data?.air_leakage_cfm50 * 60) / props?.data?.conditioned_volume_ft3).toFixed(1): 'N/A'} What is the starting air leakage rate for the home before modification? { props.data?.air_leakage_rate == 'CFM at 50Pa' ? ":" + props.data?.air_leakage_cfm50+ " " : null }{ props.data?.air_leakage_rate} Conditioned Volume (ft3): {props.data?.conditioned_volume_ft3} ACH50: {!isNaN(props?.data?.air_leakage_cfm50) && !isNaN(props?.data?.conditioned_volume_ft3) ? ((props?.data?.air_leakage_cfm50 * 60) / props?.data?.conditioned_volume_ft3).toFixed(1): 'N/A'} ACH50: {!isNaN(props?.data?.air_leakage_cfm50) && !isNaN(props?.data?.conditioned_volume_ft3) ? ((props?.data?.air_leakage_cfm50 * 60) / props?.data?.conditioned_volume_ft3).toFixed(1): 'N/A'} What is the starting air leakage rate for the home before modification? { props.data?.wall_air_leakage_rate == 'CFM at 50Pa' ? props.data?.air_leakage_cfm50 +" " : null } { props.data?.wall_air_leakage_rate} Conditioned Volume (ft3): {props.data?.conditioned_volume_ft3} ACH50: {!isNaN(props?.data?.air_leakage_cfm50) && !isNaN(props?.data?.conditioned_volume_ft3) ? ((props?.data?.air_leakage_cfm50 * 60) / props?.data?.conditioned_volume_ft3).toFixed(1): 'N/A'}Date Value Examples
+ Date LabelValue with date type prop:
+
+ `
+ Date LabelValue without date type:
+
+ `
+ Number Value Examples
+ LabelValue with number type prop:
+
+ `
+ LabelValue with number type prop + decimal places + prefix + suffix:
+
+ `
+ Other Examples
+
+ LabelValue with no props:
+
+ `
+
+ LabelValue with number type prop and string value (Will console.log an error
+ message)
+
+
+ `
+
+ LabelValue with string type prop and number value (Will show the string value of number with no rounding)
+
+
+ `
+ Text Value Examples
+ Text LabelValue:
+
+ `
+
: null}
{props.project.data_.installer?.company_name ? {props.project.data_.installer?.company_name} : null}{props.project.data_.installer?.company_name ?
: null}
- **Assessment Date:** Heating System 1
- Heating System 2
-
- Heating System 3
- Cooling System 1
-
- Cooling System 2
-
- Cooling System 3
-
-