Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sensors detail backup #55

Closed
wants to merge 9 commits into from
Closed

Sensors detail backup #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
60aa0a7
Design change requests
crystalgardner Oct 12, 2023
8bf381d
fix sorted by display bug
crystalgardner Oct 12, 2023
0039065
Sensors Detail Page
crystalgardner Oct 12, 2023
1c8a1d7
Add sensor detail components/functionality
crystalgardner Oct 13, 2023
01814ef
Add sensor storage service for storing sensor data to local storage
crystalgardner Oct 16, 2023
8af3c0d
Fix bugs related to edit sensors page
crystalgardner Oct 17, 2023
2cc2f94
removed unnecessary code
crystalgardner Oct 17, 2023
000ed5b
Add geolocator modal error message
crystalgardner Oct 17, 2023
3052092
Add null checks to details template
crystalgardner Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions liquid-prep-app/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import { CropStaticInfoResolver } from './resolve/CropStaticInfoResolver';
import { HomeComponent } from './components/dashboard/home/home.component';
import { FieldsComponent } from './components/dashboard/fields/fields.component';
import { SensorsComponent } from './components/dashboard/sensors/sensors.component';
import { SensorDetailsComponent } from './components/dashboard/sensors/sensor-details/sensor-details.component';
import { EditSensorComponent } from './components/dashboard/sensors/edit-sensor/edit-sensor.component';



const routes: Routes = [
Expand Down Expand Up @@ -62,8 +65,12 @@ const routes: Routes = [
component: PastReadingsComponent
},
{
path: 'sensors',
component: SensorsComponent
path: 'dashboard/sensors/:sensorId',
component: SensorDetailsComponent,
},
{
path: 'dashboard/sensors/edit/:sensorId',
component: EditSensorComponent,
},
];

Expand Down
12 changes: 10 additions & 2 deletions liquid-prep-app/src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,11 @@ import { HamburgerMenuComponent } from './components/hamburger-menu/hamburger-me
import { HomeComponent } from './components/dashboard/home/home.component';
import { FieldsComponent } from './components/dashboard/fields/fields.component';
import { SensorsComponent } from './components/dashboard/sensors/sensors.component';
import { SortModalComponent } from './components/sort-modal/sort-modal.component';
import { SelectModalComponent } from './components/select-modal/select-modal.component';
import { SensorDetailsComponent } from './components/dashboard/sensors/sensor-details/sensor-details.component';
import { EditSensorComponent } from './components/dashboard/sensors/edit-sensor/edit-sensor.component';
import { SensorLocatorModalComponent } from './components/sensor-locator-modal/sensor-locator-modal.component';
import { UnsavedChangesModalComponent } from './components/unsaved-changes-modal/unsaved-changes-modal.component';

const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
observer: true,
Expand Down Expand Up @@ -83,7 +87,11 @@ const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
HomeComponent,
FieldsComponent,
SensorsComponent,
SortModalComponent,
SelectModalComponent,
SensorDetailsComponent,
EditSensorComponent,
SensorLocatorModalComponent,
UnsavedChangesModalComponent,
],
imports: [
BrowserModule,
Expand Down
108 changes: 108 additions & 0 deletions liquid-prep-app/src/app/components/dashboard/sensors/edit-sensor/edit-sensor.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<app-header-title fxFlexFill></app-header-title>

<div class="edit-details">
<div class="sensor-name-input">
<span class="sensor-input-label">Sensor Name</span>
<mat-form-field appearance="outline">
<input matInput [(ngModel)]="sensorName">
</mat-form-field>

</div>
<mat-card class="sensor-details-card">
<mat-card-header>
<mat-card-title class="edit-sensor-group-title">Location</mat-card-title>
</mat-card-header>

<mat-card-content>
<mat-list>

<div *ngIf="!showDeviceLocatorButton" class="device-locator-static">
<div class="input-box">
<mat-form-field>
<input matInput [disabled]="true" [(ngModel)]="geocode" name="geocode"> </mat-form-field>
</div>

<button class="device-locator-reset-button" (click)="showDeviceLocatorButton = !showDeviceLocatorButton">Reset
Location</button>
</div>

<mat-list-item class="sensor-detail-group" *ngIf="showDeviceLocatorButton">
<span class="sensor-input-label">Sensor GPS location</span>
<button mat-flat-button color="primary-customise" class="primary-btn" (click)="openLocatorModal()">
Use Device Location
</button>
</mat-list-item>

<div class="select-box-large">
<mat-list-item>
<span class="sensor-detail-label">Field</span>
<button class="fake-select-box" (click)="openFieldSelectorModal()">
{{selectedFieldName}}
<mat-icon class="select-box-icon">arrow_drop_down</mat-icon>
</button>

</mat-list-item>
</div>

</mat-list>
</mat-card-content>
</mat-card>

<mat-card class="sensor-details-card">
<mat-card-header>
<mat-card-title class="edit-sensor-group-title">Broadcast Intervals</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-list>
<span class="sensor-detail-description">How often you would like this sensor to deliver a reading</span>
<mat-list-item>
<div fxLayout="column" fxLayoutGap="11px">
<div fxLayout="row" fxLayoutGap="11px">

<div class="select-box">
<mat-form-field>
<span class="sensor-input-label">Times per day</span>
<mat-select [(ngModel)]="selectedTimesPerDay">
<mat-option *ngFor="let option of timesPerDayOptions" [value]="option.value">
{{ option.label }}
</mat-option>
</mat-select>
</mat-form-field>
</div>

<div class="select-box">
<mat-form-field>
<span class="sensor-input-label">Time of first reading</span>
<mat-select [(ngModel)]="selectedReadingTime">
<mat-option *ngFor="let hour of hours" [value]="hour">{{ formatHourLabel(hour) }}</mat-option>
</mat-select>
</mat-form-field>
</div>

</div>

<div class="select-box">
<mat-form-field>
<span class="sensor-input-label">Time between readings</span>
<mat-select [(ngModel)]="selectedTimeBetween">
<mat-option *ngFor="let option of timeBetweenOptions" [value]="option.value">
{{ option.label }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>

</mat-list-item>
</mat-list>

<div class="toggle-container">
<span class="toggle-text">Disable sensor after 10 days of inactivity</span>
<mat-slide-toggle [(ngModel)]="disableOnInactivity" class="toggle"></mat-slide-toggle>
</div>

</mat-card-content>
</mat-card>


</div>
196 changes: 196 additions & 0 deletions liquid-prep-app/src/app/components/dashboard/sensors/edit-sensor/edit-sensor.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@


.sensor-name-input {
margin: 16px;
.mat-form-field {
width: 100%;
font-size: 18px;
}
.mat-form-field-appearance-outline .mat-form-field-infix {
padding: 10px 0;
}
}

.sensor-input-label {
color: #262626;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.15px;
margin-bottom: 3px;
display: block;
}

.edit-sensor-group-title {
color: #262626;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.15px;
margin-bottom: 16px;
}

.sensor-details-card {
margin-bottom: 30px;
padding: 0 16px 16px;
border-bottom: 1px solid rgba(33, 33, 33, 0.12);
box-shadow: none;
}

.sensor-detail-group {
margin-bottom: 30px;
}

.primary-btn {
font-size: 14px;
font-weight: 500;
letter-spacing: 1.25px;
text-transform: uppercase;
}

.toggle-container {
display: flex;
align-items: center;
gap: 16px;


.toggle .mat-slide-toggle-bar {
background-color: rgba(#212121, 0.08);
color: white;
border-radius: 20px;
padding: 0;
transition: background-color 0.3s;
}

.toggle.mat-checked .mat-slide-toggle-bar {
background-color: #2F4FFE;
}

.mat-slide-toggle-thumb {
width: 37px;
height: 26px;
border: 1px solid rgba(0, 0, 0, 0.12);
background-color: #FFF;
box-shadow: 0px 1px 1.5px rgba(0, 0, 0, 0.2),
0px 2px 0.5px rgba(0, 0, 0, 0.12),
0px 1px 0.5px rgba(0, 0, 0, 0.14);
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-bar {
height: 20px;
width: 45px;
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-thumb-container {
top: -3px;
left: 0;
}
}

.toggle-text {
max-width: 265px;
display: inline-block;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.15000000596046448px;
}

.select-box,
.select-box-large {
height: 100px;
.mat-select-value {
padding: 20px 10px;
}
.mat-form-field {
height: 58px;
width: 100%;
.sensor-input-label {
white-space: nowrap;
}
}

.mat-select {
border: 1px solid rgba(0, 0, 0, 0.12);
height: 58px;
}

.mat-form-field-underline {
display: none;
}
}

.select-box {
max-width: 122px;
.mat-select {
max-width: 122px;
}
}

.select-box-large {
width: 100%;
.mat-select {
width: 100%;
}
}

.input-box {
.mat-form-field {
width: 100%;
}

.mat-form-field-appearance-legacy .mat-form-field-wrapper {
padding: 0;
}

.mat-form-field-wrapper {
align-items: center;
border-radius: 4px;
border: 1px solid #E0E0E0;
background: #E0E0E0;
color: #262626;
font-size: 18px;
font-weight: 400;
margin-bottom: 8px;
}

.mat-form-field-appearance-legacy .mat-form-field-underline {
display: none;
}

.mat-form-field-appearance-legacy .mat-form-field-infix {
padding: 0 10px 10px;
}
}

.device-locator-static {
margin-bottom: 20px;
}

.device-locator-reset-button {
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.12);
color: #2F4FFE;
font-size: 14px;
font-weight: 500;
line-height: 16px;
letter-spacing: 1.25px;
text-transform: uppercase;
padding: 9px 8px;
}

.fake-select-box {
width: 100%;
padding: 10px;
border: 1px solid #DADADA;
font-size: 18px;
font-weight: 400;
line-height: 36px;
text-align: left;
height: 56px;
background-color: #FFF;
.select-box-icon {
float: right;
line-height: 24px;
}
}
12 changes: 6 additions & 6 deletions ...s/sort-modal/sort-modal.component.spec.ts → ...edit-sensor/edit-sensor.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { DeleteCropComponent } from './delete-crop.component';
import { EditSensorComponent } from './edit-sensor.component';

describe('DeleteCropComponent', () => {
let component: DeleteCropComponent;
let fixture: ComponentFixture<DeleteCropComponent>;
describe('EditSensorComponent', () => {
let component: EditSensorComponent;
let fixture: ComponentFixture<EditSensorComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ DeleteCropComponent ]
declarations: [ EditSensorComponent ]
})
.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(DeleteCropComponent);
fixture = TestBed.createComponent(EditSensorComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
Expand Down
Loading
Loading