[Dashboard] Crop Probability Module

apps/picsa-apps/dashboard/src/app/app.component.ts

@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { SupabaseService } from '@picsa/shared/services/core/supabase';
 
 import { DashboardMaterialModule } from './material.module';
+import { CropInformationModule } from './modules/crop-information/crop-information.module';
 
 interface INavLink {
   label: string;
@@ -13,7 +14,7 @@ interface INavLink {
 
 @Component({
   standalone: true,
-  imports: [RouterModule, DashboardMaterialModule, CommonModule],
+  imports: [RouterModule, DashboardMaterialModule, CommonModule, CropInformationModule],
   selector: 'dashboard-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
@@ -46,6 +47,10 @@ export class AppComponent implements AfterViewInit {
       label: 'Translations',
       href: '/translations',
     },
+    {
+      label: 'Crop Probability',
+      href: '/crop-probability',
+    },
   ];
 
   globalLinks: INavLink[] = [

apps/picsa-apps/dashboard/src/app/app.routes.ts

@@ -18,4 +18,8 @@ export const appRoutes: Route[] = [
     redirectTo: 'resources',
     pathMatch: 'full',
   },
+  {
+    path: 'crop-probability',
+    loadChildren: () => import('./modules/crop-information/crop-information.module').then((m) => m.CropInformationModule),
+  },
 ];

apps/picsa-apps/dashboard/src/app/modules/crop-information/crop-information.component.html

@@ -0,0 +1,36 @@
+<div class="page-content">
+  <div style="display: flex; align-items: center">
+    <h2 style="flex: 1">Crop Probabilities</h2>
+    <button mat-raised-button color="primary" (click)="navigateToEntryPage()">Add New Entry</button>
+  </div>
+  @if(service.cropProbabilities){
+  <table mat-table [dataSource]="service.cropProbabilities">
+    <ng-container matColumnDef="station_name" clickable>
+      <th mat-header-cell *matHeaderCellDef>Station Name</th>
+      <td mat-cell *matCellDef="let element">{{ element.station_name }}</td>
+    </ng-container>
+    <ng-container matColumnDef="water_lower">
+      <th mat-header-cell *matHeaderCellDef>Water Lower</th>
+      <td mat-cell *matCellDef="let element">{{ element.water_lower }}</td>
+    </ng-container>
+    <ng-container matColumnDef="water_upper">
+      <th mat-header-cell *matHeaderCellDef>Water Upper</th>
+      <td mat-cell *matCellDef="let element">{{ element.water_upper }}</td>
+    </ng-container>
+    <ng-container matColumnDef="length_lower">
+      <th mat-header-cell *matHeaderCellDef>Length Lower</th>
+      <td mat-cell *matCellDef="let element">{{ element.length_lower }}</td>
+    </ng-container>
+    <ng-container matColumnDef="length_upper">
+      <th mat-header-cell *matHeaderCellDef>Length Upper</th>
+      <td mat-cell *matCellDef="let element">{{ element.length_upper }}</td>
+    </ng-container>
+    <ng-container matColumnDef="station_notes">
+      <th mat-header-cell *matHeaderCellDef>Station Notes</th>
+      <td mat-cell *matCellDef="let element">{{ element.station_notes }}</td>
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+  }
+</div>

apps/picsa-apps/dashboard/src/app/modules/crop-information/crop-information.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { CropInformationPageComponent } from './crop-information.page';
+import { NewEntryPageComponent } from './pages/new_entry/new_entry.page';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: CropInformationPageComponent,
+      },
+      {
+        path: 'entry',
+        component: NewEntryPageComponent,
+      },
+    ]),
+  ],
+})
+export class CropInformationModule {}

apps/picsa-apps/dashboard/src/app/modules/crop-information/crop-information.page.ts

@@ -0,0 +1,44 @@
+import '@uppy/core/dist/style.min.css';
+import '@uppy/dashboard/dist/style.min.css';
+
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { DashboardMaterialModule } from '../../material.module';
+import { CropProbabilityDashboardService } from './crop-information.service';
+
+@Component({
+  selector: 'dashboard-resources-page',
+  standalone: true,
+  imports: [CommonModule, DashboardMaterialModule],
+  templateUrl: '../crop-information/crop-information.component.html',
+  styleUrls: ['../crop-information/crop-information.component.scss'],
+})
+export class CropInformationPageComponent implements OnInit {
+  constructor(public service: CropProbabilityDashboardService, private router: Router) {}
+
+  displayedColumns: string[] = [
+    'station_name',
+    'water_lower',
+    'water_upper',
+    'length_lower',
+    'length_upper',
+    'station_notes',
+  ];
+
+  ngOnInit(): void {
+    this.service.ready();
+    this.refreshCropInformation();
+  }
+
+  refreshCropInformation() {
+    this.service.listCropProbabilities().catch((error) => {
+      console.error('Error fetching crop probabilities:', error);
+    });
+  }
+
+  navigateToEntryPage(){
+    this.router.navigate(['/crop-probability/entry'])
+  }
+}

apps/picsa-apps/dashboard/src/app/modules/crop-information/crop-information.service.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { Database } from '@picsa/server-types';
+import { PicsaAsyncService } from '@picsa/shared/services/asyncService.service';
+import { SupabaseService } from '@picsa/shared/services/core/supabase';
+import { IStorageEntry } from '@picsa/shared/services/core/supabase/services/supabase-storage.service';
+
+export type ICropInformationRow = Database['public']['Tables']['station_crop_information']['Row'];
+
+export interface IResourceStorageEntry extends IStorageEntry {
+  /** Url generated when upload to public bucket (will always be populated, even if bucket not public) */
+  publicUrl: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class CropProbabilityDashboardService extends PicsaAsyncService {
+  public cropProbabilities: ICropInformationRow[] = [];
+
+  public get table() {
+    return this.supabaseService.db.table('station_crop_information');
+  }
+
+  constructor(private supabaseService: SupabaseService) {
+    super();
+  }
+
+  public override async init() {
+    await this.supabaseService.ready();
+    await this.listCropProbabilities();
+  }
+
+  public async listCropProbabilities() {
+    const { data, error } = await this.supabaseService.db
+      .table('station_crop_information')
+      .select<'*', ICropInformationRow>('*');
+    if (error) {
+      throw error;
+    }
+    this.cropProbabilities = data || [];
+  }
+
+  public async addCropProbability(cropProbability: Partial<ICropInformationRow>): Promise<string> {
+    const { data, error } = await this.supabaseService.db.table('station_crop_information').insert([cropProbability]);
+    if (error) {
+      throw error;
+    }
+    return 'Added successfully';
+  }
+}

apps/picsa-apps/dashboard/src/app/modules/crop-information/pages/new_entry/new_entry.component.html

@@ -0,0 +1,35 @@
+<div class="page-content">
+  <button mat-stroked-button color="primary" (click)="routeBack()"><mat-icon> Back </mat-icon></button>
+  <h2>New Crop Probability Entry</h2>
+
+  <form class="form-content">
+    <div class="form-data">
+      <label>Station Name</label>
+      <input matInput [(ngModel)]="station_name" name="station_name" />
+    </div>
+    <div class="form-data">
+      <label>Water Upper</label>
+      <input matInput [(ngModel)]="water_upper" name="water_upper" />
+    </div>
+    <div class="form-data">
+      <label>Water Lower</label>
+      <input matInput [(ngModel)]="water_lower" name="water_lower" />
+    </div>
+    <div class="form-data">
+      <label>Length Upper</label>
+      <input matInput [(ngModel)]="length_upper" name="length_upper" />
+    </div>
+    <div class="form-data">
+      <label>Length Lower</label>
+      <input matInput [(ngModel)]="length_lower" name="length_lower" />
+    </div>
+    <div class="form-data">
+      <label>Station Notes</label>
+      <input matInput [(ngModel)]="station_notes" name="station_notes" />
+    </div>
+    <button mat-raised-button color="primary" class="submitButton" (click)="submitForm()">Submit</button>
+  </form>
+  @if(ActionFeedbackMessage){
+  <div>{{ ActionFeedbackMessage }}</div>
+  }
+</div>

apps/picsa-apps/dashboard/src/app/modules/crop-information/pages/new_entry/new_entry.component.scss

@@ -0,0 +1,31 @@
+.form-content{
+    border: 0.6px solid #eeeeee;
+    display: flex;
+    flex-direction: column;
+    .form-data{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-evenly;
+        flex-wrap: wrap;
+        padding: 12px 0;
+        border:0.6px solid #eeeeee ;
+        label{
+            font-weight: 500;
+        }
+        input{
+            border: 1px solid rgb(119, 127, 122);
+            height:30px;
+            border-radius: 6px;
+            width: 180px;
+            padding: 0 12px;
+        }
+    }
+    button{
+        margin: 20px 0;
+        display: flex;
+        align-self: center;
+        border: 0px;
+        width: 180px;
+    }
+}

apps/picsa-apps/dashboard/src/app/modules/crop-information/pages/new_entry/new_entry.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewEntryPageComponent } from './new_entry.page';
+
+describe('NewEntryComponent', () => {
+  let component: NewEntryPageComponent;
+  let fixture: ComponentFixture<NewEntryPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NewEntryPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewEntryPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/picsa-apps/dashboard/src/app/modules/crop-information/pages/new_entry/new_entry.page.ts

@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { Router } from '@angular/router';
+
+import { DashboardMaterialModule } from '../../../../material.module';
+import { CropProbabilityDashboardService } from '../../crop-information.service';
+
+@Component({
+  selector: 'dashboard-new-entry',
+  standalone: true,
+  imports: [CommonModule, DashboardMaterialModule, RouterModule, FormsModule, ReactiveFormsModule],
+  templateUrl: './new_entry.component.html',
+  styleUrls: ['./new_entry.component.scss'],
+})
+export class NewEntryPageComponent implements OnInit {
+  station_name: string;
+  water_lower: number;
+  water_upper: number;
+  length_lower: number;
+  length_upper: number;
+  station_notes: string[];
+  ActionFeedbackMessage: string;
+  constructor(private service: CropProbabilityDashboardService, private router: Router) {
+    this.service.ready();
+  }
+  ngOnInit(): void {
+    this.service.ready();
+  }
+  submitForm() {
+    const data = {
+      station_name: this.station_name,
+      water_lower: this.water_lower,
+      water_upper: this.water_upper,
+      length_lower: this.length_lower,
+      length_upper: this.length_upper,
+      station_notes: this.station_notes,
+    };
+    this.service
+      .addCropProbability(data)
+      .then((data) => {
+        if (data === 'Added successfully') {
+          this.ActionFeedbackMessage = 'Added successfully';
+        }
+      })
+      .catch((error) => {
+        console.error('Error adding translation:', error);
+        this.ActionFeedbackMessage = 'Failed to add a translation.';
+      });
+  }
+  routeBack(){
+    this.router.navigate(['/crop-probability'])
+  }
+}

apps/picsa-server/supabase/migrations/20240212163747_station_crop_information_table.sql

@@ -0,0 +1,12 @@
+create table
+  public.station_crop_information (
+    id bigint generated by default as identity,
+    created_at timestamp with time zone not null default now(),
+    station_name text null,
+    water_lower double precision null,
+    water_upper double precision null,
+    length_lower double precision null,
+    length_upper double precision null,
+    station_notes text[] null,
+    constraint station_crop_information_pkey primary key (id)
+  ) tablespace pg_default;

apps/picsa-server/supabase/migrations/20240212164116_station_data_table.sql

@@ -0,0 +1,9 @@
+create table
+  public.station_data (
+    id bigint generated by default as identity,
+    created_at timestamp with time zone not null default now(),
+    crop_name text null,
+    station bigint null,
+    constraint station_data_pkey primary key (id),
+    constraint station_data_station_fkey foreign key (station) references station_crop_information (id)
+  ) tablespace pg_default;

apps/picsa-server/supabase/migrations/20240212164643_crop_data_table.sql

@@ -0,0 +1,14 @@
+create table
+  public.crop_data (
+    id bigint generated by default as identity,
+    created_at timestamp with time zone not null default now(),
+    variety text null,
+    days text null,
+    water _upper double precision null,
+    water _lower double precision null,
+    length_lower double precision null,
+    length_upper double precision null,
+    station_data bigint null,
+    constraint crop_data_pkey primary key (id),
+    constraint crop_data_station_data_fkey foreign key (station_data) references station_data (id)
+  ) tablespace pg_default;