Skip to content

Commit

Permalink
Sensors landing page updates (#52)
Browse files Browse the repository at this point in the history 
* Design change requests

* fix sorted by display bug

* Design change requests

* fix sorted by display bug
  • Loading branch information
@crystalgardner @Keneweab
crystalgardner authored and Keneweab committed Nov 12, 2023
1 parent e3b32d1 commit 386c6a9
Show file tree
Hide file tree
Showing 4 changed files with 230 additions and 127 deletions.
193 changes: 103 additions & 90 deletions liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,121 @@
<div class="search-section" [hidden]="!isSearchVisible">
<div class="search-input-wrapper">
<input type="text" [(ngModel)]="searchQuery" placeholder="Search sensors" (input)="onSearchInputChange()" />
<mat-icon matPrefix class="search-icon">search</mat-icon>
</div>
</div>
<div class="sensors-landing-page">
<div class="search-section" [hidden]="!isSearchVisible">
<input type="text" class="searchbox" [(ngModel)]="searchQuery" placeholder="Search sensors"
(input)="onSearchInputChange()" />
</div>

<div class="filter-section" [hidden]="!isFilterVisible">
<div class="filter-buttons">
<div class="filter-section" [hidden]="!isFilterVisible">
<div class="filter-buttons">

<!-- Connection Status -->
<div class="filter-button-group">
<ng-container *ngFor="let option of filterOptions.connectionStatusOptions; let isFirst = first">
<ng-container *ngIf="isFirst">
<h2 class="filter-heading">Status</h2>
</ng-container>
<button
class="filter-button"
(click)="toggleFilterOption(option)"
[class.active]="isSelectedFilterOption(option)"
>
{{ option }}
</button>
</ng-container>
</div>

<!-- Field Location -->
<div class="filter-button-group">
<ng-container *ngFor="let option of filterOptions.fieldLocationOptions; let isFirst = first">
<ng-container *ngIf="isFirst">
<h2 class="filter-heading">Field Location</h2>
</ng-container>
<button
class="filter-button"
(click)="toggleFilterOption(option)"
[class.active]="isSelectedFilterOption(option)"
>
{{ option }}
</button>
<!-- Connection Status -->
<div class="filter-button-group">
<ng-container *ngFor="let option of filterOptions.connectionStatusOptions; let isFirst = first">
<ng-container *ngIf="isFirst">
<h2 class="filter-heading">Status</h2>
</ng-container>
</div>
<button
class="clear-filters-button"
(click)="clearFilter()"
[class.active]="selectedFilterOptions.length === 0"
>
Clear Filter
</button>
<button class="filter-button" (click)="toggleFilterOption(option)"
[class.active]="isSelectedFilterOption(option)">
<span [class.no-field-selected]="option === null">
{{ option === null ? noFieldSelectedText : option }}
</span>
</button>
</ng-container>
</div>
</div>

<div class="filteredby-section" [hidden]="!isFilteredByVisible">
<span class="filter-label">Filtered by</span>
<!-- Field Location -->
<div class="filter-button-group">
<ng-container *ngFor="let option of selectedFilterOptions">
<button
class="filter-button"
(click)="toggleFilterOption(option)"
[class.active]="isSelectedFilterOption(option)"
>
{{ option }}
<ng-container *ngFor="let option of filterOptions.fieldLocationOptions; let isFirst = first">
<ng-container *ngIf="isFirst">
<h2 class="filter-heading">Field Location</h2>
</ng-container>
<button class="filter-button" (click)="toggleFilterOption(option)"
[class.active]="isSelectedFilterOption(option)">
<span [class.no-field-selected]="option === null">
{{ option === null ? noFieldSelectedText : option }}
</span>
</button>
</ng-container>
</div>
<button
class="clear-filters-button"
(click)="clearFilter()"
[class.active]="selectedFilterOptions.length === 0"
>
Clear Filter
</button>
<button class="clear-filters-button" (click)="clearFilter()" [class.active]="selectedFilterOptions.length === 0">
Clear Filters
</button>
</div>
</div>

<!-- Display the filtered and sorted items -->
<div class="sensor-results" [hidden]="isFilterVisible">
<mat-list>
<ng-container *ngIf="displayedItems.length > 0; else noItemsFound">
<mat-list-item *ngFor="let item of displayedItems">
<a mat-list-item class="sensorLink" [ngClass]="{'offline': item.connectionStatus === 'Not Connected'}">
<h4 mat-line class="lastUpdatedTime">{{ item.lastUpdated }}</h4>
<p mat-line class="menu-list-body">
<span class="sensorInfo">
{{ item.sensorName }} <span class="sensorSpacer">&#183;</span> {{ item.fieldLocation }}
<div class="filteredby-section" [hidden]="!isFilteredByVisible">
<span class="filter-label">Filtered by</span>
<div class="filter-button-group">
<ng-container *ngFor="let option of selectedFilterOptions">
<button class="filter-button" [class.active]="isSelectedFilterOption(option)" disabled>
<span [class.no-field-selected]="option === null">
{{ option === null ? noFieldSelectedText : option }}
</span>
</button>
</ng-container>
</div>
<button class="clear-filters-button" (click)="clearFilter()" [class.active]="selectedFilterOptions.length === 0">
Clear Filters
</button>
</div>

<div class="sortedby-section" [hidden]="!isSortedByVisible">
<span class="sort-label">Sorted by </span>
<span class="sort-option">
{{ selectedSortLabel }}
</span>
</div>


<!-- Display the filtered and sorted items -->
<div class="sensor-results" [hidden]="isFilterVisible">
<mat-list>
<ng-container *ngIf="displayedItems.length > 0; else noResults">
<mat-list-item *ngFor="let item of displayedItems">
<a mat-list-item class="sensorLink" [ngClass]="{'offline': item.connectionStatus === 'Not Connected'}">
<h4 mat-line class="lastUpdatedTime">{{ item.lastUpdated }}</h4>
<p mat-line class="menu-list-body">
<span class="sensor-info">
{{ item.sensorName }} <span class="sensorSpacer">&#183;</span>
<span [class.no-field-selected]="item.fieldLocation === null">
{{ item.fieldLocation === null ? noFieldSelectedText : item.fieldLocation }}
</span>
<span class="sensorMoisture">Moisture Level: {{ item.moistureLevel }}</span>
</p>
</a>
</mat-list-item>
</ng-container>
</mat-list>
<span class="sensor-moisture">
<span *ngIf="item.moistureLevel; else moistureLevelNotDetected">
Moisture Level: {{ item.moistureLevel }}
</span>
<ng-template #moistureLevelNotDetected>
Moisture levels not detected. Check connection.
</ng-template>
</span>
</span>
</p>
</a>
</mat-list-item>
</ng-container>
</mat-list>

<ng-template #noItemsFound>
<div class="no-sensors">
<mat-icon class="no-sensor-icon">sensors_off</mat-icon>
<ng-template #noResults>
<div class="no-results" *ngIf="originalDisplayedItemsLength !== 0 && displayedItems.length === 0 && selectedFilterOptions.length === 0">
<div class="no-sensors-text">
<p>No sensors found with these parameters.</p>
<p>{{clearSearchDisplayText}}</p>
</div>
</div>

<div class="no-sensors-title">
No sensors detected
</div>
<div class="no-sensors" *ngIf="originalDisplayedItemsLength === 0">
<mat-icon class="no-sensor-icon">sensors_off</mat-icon>

<div class="no-sensors-text">
<p>Check that wifi and bluetooth are enabled on your device and the sensors are turned on.</p>
<div class="no-sensors-title">
No sensors detected
</div>

<p>You may need to set up your gateways first. See the user manual for instructions.</p>
</div>
<div class="no-sensors-text">
<p>Check that wifi and bluetooth are enabled on your device and the sensors are turned on.</p>
<p>You may need to set up your gateways first. See the user manual for instructions.</p>
</div>
</div>
</ng-template>

</ng-template>
</div>

</div>
</div>
62 changes: 49 additions & 13 deletions liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.sensors-landing-page span {
font-family: 'IBM Plex Sans' !important;
}

.lastUpdatedTime {
color: #8D8D8D;
font-size: 10px !important;
Expand All @@ -23,7 +27,7 @@
border-left: solid 4px #FF2F2F;
}

.sensorInfo {
.sensor-info {
color: #262626;
font-size: 16px;
font-weight: 400;
Expand All @@ -32,20 +36,30 @@

.sensorSpacer {
font-size: 30px;
vertical-align: middle;
vertical-align: text-bottom;
margin-right: 4px;
}

.sensorMoisture,
.sensorInfo {
.sensor-moisture,
.sensor-info {
display: block;
}

.sensor-moisture {
font-size: 14px;
font-weight: 400;
letter-spacing: 0.25px;
}

.no-field-selected {
font-style: italic;
}

.sensorBody {
margin: 0;
padding: 0;
}


.filter-section,
.filteredby-section,
.search-section {
Expand All @@ -55,20 +69,27 @@
}
}

.search-section,
.sortedby-section {
padding: 11px 16px;
}

.filteredby-section,
.sortedby-section,
.search-section {
background-color: #F4F4F4;
border-bottom: 1px solid #E0E0E0;
}

.search-section {
input {
padding: 8px 26px 8px 8px;
font-size: 16px;
width: calc(100% - 32px);
&.searchbox:focus-visible {
outline: 1px solid #0f62fe;
}
}
.search-input-wrapper {
position: relative;
}

.mat-icon {
position: absolute;
top: 6px;
Expand Down Expand Up @@ -121,6 +142,16 @@
margin-bottom: 10px;
}

.sort-label {
font-size: 15px;
font-weight: 500;
}

.sort-option {
font-size: 14px;
font-weight: 400;
}

.filter-heading {
color: #262626;
font-size: 15px !important;
Expand All @@ -137,12 +168,11 @@
width: 100%;
}

.no-sensors {
.no-sensors,
.no-results {
padding: 36px 16px;
text-align: center;
p {
margin-bottom: 25px;
}

.no-sensor-icon {
width: 48px;
height: 48px;
Expand All @@ -167,6 +197,12 @@
}
}

.no-sensors {
p {
margin-bottom: 25px;
}
}

.sensor-results {
padding-bottom: 96px;
> .mat-list-base .mat-list-item .mat-list-item-content {
Expand Down
Loading

0 comments on commit 386c6a9

Please sign in to comment.