From 386c6a9ec4e97ed635f0f8de1540abde9c5d102f Mon Sep 17 00:00:00 2001 From: Crystal Reyes Date: Tue, 24 Oct 2023 21:16:14 -0400 Subject: [PATCH] Sensors landing page updates (#52) * Design change requests * fix sorted by display bug * Design change requests * fix sorted by display bug --- .../dashboard/sensors/sensors.component.html | 193 ++++++++++-------- .../dashboard/sensors/sensors.component.scss | 62 ++++-- .../dashboard/sensors/sensors.component.ts | 79 ++++--- .../sort-modal/sort-modal.component.ts | 23 ++- 4 files changed, 230 insertions(+), 127 deletions(-) diff --git a/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.html b/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.html index 7fe62d6..f7eaf03 100644 --- a/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.html +++ b/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.html @@ -1,108 +1,121 @@ -
-
- - search -
-
+
+
+ +
-
-
+
+
- -
- - -

Status

- - - -
- - -
- - -

Field Location

- - + +
+ + +

Status

 -
- + +
-
-
- Filtered by +
- -
- +
+
- -
- - - - -

{{ item.lastUpdated }}

-

- - {{ item.sensorName }} · {{ item.fieldLocation }} +

+ Filtered by +
+ + + +
+ +
+ +
+ Sorted by + + {{ selectedSortLabel }} + +
+ + + +
+ + + + +

{{ item.lastUpdated }}

+

+ + {{ item.sensorName }} · + + {{ item.fieldLocation === null ? noFieldSelectedText : item.fieldLocation }} - Moisture Level: {{ item.moistureLevel }} -

- - - - + + + Moisture Level: {{ item.moistureLevel }} + + + Moisture levels not detected. Check connection. + + + +

+ + + + - -
- sensors_off + +
+
+

No sensors found with these parameters.

+

{{clearSearchDisplayText}}

+
+
-
- No sensors detected -
+
+ sensors_off -
-

Check that wifi and bluetooth are enabled on your device and the sensors are turned on.

+
+ No sensors detected +
-

You may need to set up your gateways first. See the user manual for instructions.

-
+
+

Check that wifi and bluetooth are enabled on your device and the sensors are turned on.

+

You may need to set up your gateways first. See the user manual for instructions.

+
+ - -
+ +
+
diff --git a/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.scss b/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.scss index 52e3daf..e517422 100644 --- a/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.scss +++ b/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.scss @@ -1,3 +1,7 @@ +.sensors-landing-page span { + font-family: 'IBM Plex Sans' !important; +} + .lastUpdatedTime { color: #8D8D8D; font-size: 10px !important; @@ -23,7 +27,7 @@ border-left: solid 4px #FF2F2F; } -.sensorInfo { +.sensor-info { color: #262626; font-size: 16px; font-weight: 400; @@ -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 { @@ -55,9 +69,15 @@ } } -.search-section, +.sortedby-section { + padding: 11px 16px; +} + +.filteredby-section, +.sortedby-section, .search-section { background-color: #F4F4F4; + border-bottom: 1px solid #E0E0E0; } .search-section { @@ -65,10 +85,11 @@ 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; @@ -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; @@ -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; @@ -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 { diff --git a/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.ts b/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.ts index 19cfec4..6c928bd 100644 --- a/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.ts +++ b/liquid-prep-app/src/app/components/dashboard/sensors/sensors.component.ts @@ -14,7 +14,9 @@ import { DatePipe } from '@angular/common'; }) export class SensorsComponent implements OnInit { - selectedSortOption: string = ''; + selectedSortOption: string = 'lastUpdated'; + selectedSortLabel: string = 'last updated time'; + noFieldSelectedText: string = 'No field selected'; selectedFilterOption: string = ''; selectedFilterOptions: string[] = []; filterOptions: { @@ -26,8 +28,11 @@ export class SensorsComponent implements OnInit { isFilterVisible: boolean = false; isFilteredByVisible: boolean = false; isSearchVisible: boolean = false; + isSortedByVisible: boolean = true; displayedItems: any[] = []; searchQuery: string = ''; + clearSearchDisplayText: string = 'Clear search to see all sensors.'; + originalDisplayedItemsLength: number; headerConfig: HeaderConfig = { headerTitle: 'Sensors', @@ -59,7 +64,7 @@ export class SensorsComponent implements OnInit { { lastUpdated: '1632215520', sensorName: 'A3', - fieldLocation: 'Field 2', + fieldLocation: null, moistureLevel: 42, connectionStatus: 'Connected', }, @@ -81,7 +86,7 @@ export class SensorsComponent implements OnInit { lastUpdated: '1691813700', sensorName: 'A1', fieldLocation: 'Field 5', - moistureLevel: 44, + moistureLevel: null, connectionStatus: 'Not Connected', }, ]; @@ -119,10 +124,21 @@ export class SensorsComponent implements OnInit { this.filterOptions = this.getSelectedFilterOptions(); this.filterOptions.connectionStatusOptions.sort(); this.filterOptions.fieldLocationOptions.sort(); + + + this.lastSelectedSortOption = this.selectedSortOption; // Initialize displayedItems with the original sensor data this.displayedItems = [...this.items]; + this.originalDisplayedItemsLength = this.displayedItems.length; + + if (this.displayedItems.length === 0) { + this.isFilterVisible = false; + this.isSearchVisible = false; + this.isFilteredByVisible = false; + this.isSortedByVisible = false; + } // Convert Date format this.items.forEach((item) => { @@ -156,12 +172,16 @@ export class SensorsComponent implements OnInit { openSortModal() { const dialogRef = this.dialog.open(SortModalComponent, { width: '80%', - data: { selectedSortOption: this.lastSelectedSortOption }, + data: { + selectedSortOption: this.selectedSortOption, + selectedSortLabel: this.selectedSortLabel + }, }); - dialogRef.afterClosed().subscribe((result) => { - if (result) { - this.selectedSortOption = result; + dialogRef.afterClosed().subscribe((selection) => { + if (selection) { + this.selectedSortOption = selection.selectedSortOption; + this.selectedSortLabel = selection.selectedSortLabel.toLowerCase(); this.lastSelectedSortOption = this.selectedSortOption; this.sortItems(); } @@ -223,6 +243,7 @@ toggleConnectionStatusSort(statusA: string, statusB: string): number { // Update the displayedItems with the filtered and sorted items this.displayedItems = filteredItems; this.toggleFilter(); + this.isSortedByVisible = true; } clearFilter() { @@ -236,22 +257,33 @@ toggleConnectionStatusSort(statusA: string, statusB: string): number { this.toggleFilter(); } - // Get filter sellections - getSelectedFilterOptions() { - const selectedConnectionStatus = new Set(); - const selectedFieldLocation = new Set(); +// Get filter selections +getSelectedFilterOptions() { + const selectedConnectionStatus = new Set(); + const fieldLocationOptions = new Set(); // Use a Set to deduplicate options - this.items.forEach((item) => { - selectedConnectionStatus.add(item.connectionStatus); - selectedFieldLocation.add(item.fieldLocation); - }); + this.items.forEach((item) => { + selectedConnectionStatus.add(item.connectionStatus); + if (item.fieldLocation !== null) { + fieldLocationOptions.add(item.fieldLocation); + } + }); - return { - connectionStatusOptions: Array.from(selectedConnectionStatus), - fieldLocationOptions: Array.from(selectedFieldLocation), - }; + // Convert the Sets back to arrays + const connectionStatusOptions = Array.from(selectedConnectionStatus); + const fieldLocationArray = Array.from(fieldLocationOptions); + + // Add "No field selected" at the top if it exists + if (this.items.some((item) => item.fieldLocation === null)) { + fieldLocationArray.unshift(null); } + return { + connectionStatusOptions, + fieldLocationOptions: fieldLocationArray, + }; +} + isSelectedFilterOption(option: string): boolean { return this.selectedFilterOptions.includes(option); } @@ -262,6 +294,7 @@ toggleConnectionStatusSort(statusA: string, statusB: string): number { if (this.isFilterVisible) { this.isSearchVisible = false; this.isFilteredByVisible = false; + this.isSortedByVisible = false; this.headerService.updateHeader({ headerTitle: null, @@ -287,6 +320,7 @@ toggleConnectionStatusSort(statusA: string, statusB: string): number { if (this.selectedFilterOptions.length > 0) { this.isFilteredByVisible = true; } + this.isSortedByVisible = true; } } @@ -298,6 +332,7 @@ toggleConnectionStatusSort(statusA: string, statusB: string): number { if (this.isSearchVisible) { this.isFilterVisible = false; this.isFilteredByVisible = false; + this.isSortedByVisible = false; } } @@ -308,13 +343,11 @@ toggleConnectionStatusSort(statusA: string, statusB: string): number { applySearchFilter() { this.displayedItems = this.items.filter((item) => { - return ( item.sensorName.toLowerCase().includes(this.searchQuery.toLowerCase()) || - item.fieldLocation.toLowerCase().includes(this.searchQuery.toLowerCase()) || - item.moistureLevel.toString().toLowerCase().includes(this.searchQuery.toLowerCase()) + (item.fieldLocation && item.fieldLocation.toLowerCase().includes(this.searchQuery.toLowerCase())) || // Check if fieldLocation is not null + (item.moistureLevel && item.moistureLevel.toString().toLowerCase().includes(this.searchQuery.toLowerCase())) // Check if moistureLevel is not null ); }); } - } diff --git a/liquid-prep-app/src/app/components/sort-modal/sort-modal.component.ts b/liquid-prep-app/src/app/components/sort-modal/sort-modal.component.ts index e3802fd..b8c0c58 100644 --- a/liquid-prep-app/src/app/components/sort-modal/sort-modal.component.ts +++ b/liquid-prep-app/src/app/components/sort-modal/sort-modal.component.ts @@ -10,12 +10,14 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; export class SortModalComponent implements OnInit { title: string; selectedSortOption: string = 'lastUpdated'; + selectedSortLabel: string = 'Last Updated'; constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any ) { this.selectedSortOption = data.selectedSortOption || 'lastUpdated'; + this.selectedSortLabel = this.getLabelForSortOption(this.selectedSortOption); } ngOnInit(): void {} @@ -25,6 +27,25 @@ export class SortModalComponent implements OnInit { } saveSelection() { - this.dialogRef.close(this.selectedSortOption); + const selection = { + selectedSortOption: this.selectedSortOption, + selectedSortLabel: this.getLabelForSortOption(this.selectedSortOption) + }; + this.dialogRef.close(selection); + } + + getLabelForSortOption(option: string): string { + switch (option) { + case 'lastUpdated': + return 'Last Updated Time'; + case 'sensorName': + return 'Sensor Name (A-Z)'; + case 'fieldLocation': + return 'Field Location (A-Z)'; + case 'connectionStatus': + return 'Connection Status'; + default: + return ''; + } } }