Skip to content

Commit

Permalink
Merge pull request #261 from NREL/issue-237-mark
Browse files Browse the repository at this point in the history 
update utility types selection in pre-assessment UI
  • Loading branch information
@RLiNREL
RLiNREL authored Oct 4, 2024
2 parents 598b725 + 740e6a1 commit 9fe7e54
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 58 deletions.
2 changes: 1 addition & 1 deletion src/app/models/company.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function getNewIdbCompany(userId: string): IdbCompany {
userId: userId,
generalInformation: generalInformation,
displayFacilities: true,
companyEnergyUnit: 'kWh',
companyEnergyUnit: 'MMBtu',
}
}

4 changes: 4 additions & 0 deletions src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,8 @@
}
.nav-underline .nav-item .nav-link.active{
font-weight: normal;
}

.badge.small{
font-size: small;
}
19 changes: 10 additions & 9 deletions src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,26 @@
<nav class="navbar top-nav">
<div>
<h5>
<fa-icon [icon]="faScrewdriverWrench"></fa-icon> {{assessment.name}} @if (assessment.assessmentType) {- {{assessment.assessmentType}}}
<fa-icon [icon]="faScrewdriverWrench"></fa-icon> {{assessment.name}} <span
class="badge bg-dark small ps-1"
*ngIf="assessment.assessmentType">{{assessment.assessmentType}}</span>
</h5>
</div>
<ul class="nav nav-underline">
<li class="nav-item">
<a class="nav-link pt-0" [routerLink]="'details'"
[routerLinkActive]="['active']">Details</a>
[routerLinkActive]="['active']">Details</a>
</li>
<li class="nav-item">
<a class="nav-link pt-0" [routerLink]="'energy-opportunities'"
[routerLinkActive]="['active']">Energy Efficiency Opportunities</a>
[routerLinkActive]="['active']">Energy Efficiency Opportunities</a>
</li>
<li class="nav-item">
<a class="nav-link pt-0" [routerLink]="'nebs'"
[routerLinkActive]="['active']">NEBs</a>
<a class="nav-link pt-0" [routerLink]="'nebs'" [routerLinkActive]="['active']">NEBs</a>
</li>
<li class="nav-item">
<a class="nav-link pt-0" [routerLink]="'results'"
[routerLinkActive]="['active']">Results</a>
[routerLinkActive]="['active']">Results</a>
</li>
</ul>
</nav>
Expand Down Expand Up @@ -71,8 +72,8 @@ <h5>
</div>
</nav>

<app-contact-modal *ngIf="displayContactModal" (emitCancelContact)="closeContactModal()" [contextGuid]="displayContactModal.contextGuid"
[contactContext]="displayContactModal.context" [selectedContact]="displayContactModal.viewContact"
[companyGuid]="assessment.companyId"></app-contact-modal>
<app-contact-modal *ngIf="displayContactModal" (emitCancelContact)="closeContactModal()"
[contextGuid]="displayContactModal.contextGuid" [contactContext]="displayContactModal.context"
[selectedContact]="displayContactModal.viewContact" [companyGuid]="assessment.companyId"></app-contact-modal>

<app-add-nebs-modal *ngIf="displayAddNebsModal"></app-add-nebs-modal>
5 changes: 3 additions & 2 deletions src/app/setup-wizard/pre-visit/company-setup/company-setup.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,10 @@ <h5>
Company Name Required
</div>
<!-- Set Energy Unit Field -->
<app-label-with-tooltip [field]="'energyUnit'" [label]="'Set Energy Unit'" [isRequired]="false"
<app-label-with-tooltip [field]="'energyUnit'" [label]="'Energy Results Unit'" [isRequired]="false"
[labelId]="'energyUnit'" [isFloatRight]="true"></app-label-with-tooltip>
<select name="energyUnit" class="form-control" [formControl]="energyUnit" (change)="saveUnitChanges()">
<select name="energyUnit" class="form-select" [formControl]="energyUnit"
(change)="saveUnitChanges()">
<option value="kWh">kWh</option>
<option value="MMBtu">MMBtu</option>
</select>
Expand Down
16 changes: 9 additions & 7 deletions src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
.card {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
font-weight: bold;
}
.disabled-input-label{
background-color: white;
border: none;
border-left: var(--bs-border-width) solid var(--bs-border-color);
}

.utility-row:hover, .utility-row:hover .disabled-input-label {
background-color: #efefef;
}
83 changes: 44 additions & 39 deletions src/app/setup-wizard/pre-visit/pre-assessment-setup/pre-assessment-setup.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,48 +80,54 @@ <h2 class="accordion-header">
</div>

<hr>
<div class="row">
<h6>Utility Types</h6>
<p class="fw-light">Select the utility types that are
applicable to this assessment and enter the annual energy use for each type.</p>
<ng-container *ngFor="let use of assessment.utilityEnergyUses">
<div class="col-md-4 col-lg-3 mb-3" *ngIf="assessment.utilityTypes.includes(use.utilityType)">
<div class="card h-100">
<div class="card-header">
<input class="form-check-input" type="checkbox"
name="{{'include_utilityType_' + use.utilityType + assessment.guid}}"
id="{{'include_utilityType_' + use.utilityType + assessment.guid}}"
[(ngModel)]="use.include"
(change)="calculateEnergyUseCost(assessment)">
{{ use.utilityType }}
</div>
<div class="card-body">
<div class="form-group row align-items-center">
<h6>Utility Types</h6>
<p class="fw-light">Select the utility types that are
applicable to this assessment and enter the annual energy
use for each type.</p>
<ng-container *ngFor="let use of assessment.utilityEnergyUses">
<div class="row mb-1 utility-row"
*ngIf="assessment.utilityTypes.includes(use.utilityType)">
<div class="col-5">
<div class="input-group">
<input type="number" class="form-control"
name="{{'energyUse_' + use.utilityType + assessment.guid}}"
id="{{'energyUse_' + use.utilityType + assessment.guid}}"
[(ngModel)]="use.energyUse"
(input)="calculateEnergyUseCost(assessment)">
<select class="input-group-text"
name="{{'energyUnit_' + use.utilityType + assessment.guid}}"
id="{{'energyUnit_' + use.utilityType + assessment.guid}}"
[(ngModel)]="use.unit"
<div class="input-group-text">
<input class="form-check-input" type="checkbox"
name="{{'include_utilityType_' + use.utilityType + assessment.guid}}"
id="{{'include_utilityType_' + use.utilityType + assessment.guid}}"
[(ngModel)]="use.include"
(change)="calculateEnergyUseCost(assessment)">
<option
*ngFor="let unitOption of (use.utilityType | linkedUnitOptions: 'Energy')"
[ngValue]="unitOption.value">
<span
[innerHTML]="unitOption.value | unitsDisplay"></span>
</option>
</select>
</div>
<input type="text"
class="form-control disabled-input-label"
[value]="use.utilityType" [disabled]="true">
</div>
</div>
</div>
</div>
<ng-container *ngIf="use.include">
<div class="col-7">
<div class="form-group row align-items-center">
<div class="input-group">
<input type="number" class="form-control"
name="{{'energyUse_' + use.utilityType + assessment.guid}}"
id="{{'energyUse_' + use.utilityType + assessment.guid}}"
[(ngModel)]="use.energyUse"
(input)="calculateEnergyUseCost(assessment)">
<select class="input-group-text"
name="{{'energyUnit_' + use.utilityType + assessment.guid}}"
id="{{'energyUnit_' + use.utilityType + assessment.guid}}"
[(ngModel)]="use.unit"
(change)="calculateEnergyUseCost(assessment)">
<option
*ngFor="let unitOption of (use.utilityType | linkedUnitOptions: 'Energy')"
[ngValue]="unitOption.value">
<span
[innerHTML]="unitOption.value | unitsDisplay"></span>
</option>
</select>
</div>
</div>
</div>
</ng-container>
</div>
</ng-container>
</div>
</ng-container>
<hr>
<div class="row">
<label class="col-sm-5 col-form-label"
Expand All @@ -130,8 +136,7 @@ <h6>Utility Types</h6>
Use</label>
<div class="col-sm-7" id="{{'energyUse_'+assessment.guid}}">
{{assessment.energyUse | number:'1.0-2'}}&nbsp;
<span
[innerHTML]="companyEnergyUnit | unitsDisplay">
<span [innerHTML]="companyEnergyUnit | unitsDisplay">
</span>
</div>
</div>
Expand Down

0 comments on commit 9fe7e54

Please sign in to comment.