Remove old client and add new
This commit is contained in:
programmingPug
@@ -1,27 +0,0 @@
|
||||
# HousePlantClient
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.1.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||
@@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "house-plant-client",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^19.0.5",
|
||||
"@angular/common": "^19.0.5",
|
||||
"@angular/compiler": "^19.0.5",
|
||||
"@angular/core": "^19.0.5",
|
||||
"@angular/forms": "^19.0.5",
|
||||
"@angular/platform-browser": "^19.0.5",
|
||||
"@angular/platform-browser-dynamic": "^19.0.5",
|
||||
"@angular/router": "^19.0.5",
|
||||
"chart.js": "^4.4.7",
|
||||
"ng2-charts": "^7.0.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^19.0.6",
|
||||
"@angular/cli": "~19.0.6",
|
||||
"@angular/compiler-cli": "^19.0.5",
|
||||
"@types/jasmine": "~4.3.0",
|
||||
"jasmine-core": "~4.5.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.0.0",
|
||||
"typescript": "~5.6.3"
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
const routes: Routes = [];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
@@ -1,4 +0,0 @@
|
||||
<div class="container">
|
||||
<h1>Soil Moisture Monitor</h1>
|
||||
<app-moisture-chart></app-moisture-chart>
|
||||
</div>
|
||||
@@ -1,10 +0,0 @@
|
||||
.container {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss'],
|
||||
standalone: false
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'soil-moisture-monitor';
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { MoistureChartComponent } from './features/moisture-chart/moisture-chart.component';
|
||||
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
MoistureChartComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
BaseChartDirective
|
||||
],
|
||||
providers: [provideHttpClient()],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
@@ -1,7 +0,0 @@
|
||||
<div class="chart-container">
|
||||
<canvas baseChart
|
||||
[data]="lineChartData"
|
||||
[options]="lineChartOptions"
|
||||
[type]="'line'">
|
||||
</canvas>
|
||||
</div>
|
||||
@@ -1,9 +0,0 @@
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { SoilDataService } from '../../services/soil-data.service';
|
||||
import { ChartConfiguration } from 'chart.js';
|
||||
|
||||
import { Chart, registerables } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
Chart.register(...registerables);
|
||||
|
||||
@Component({
|
||||
selector: 'app-moisture-chart',
|
||||
templateUrl: './moisture-chart.component.html',
|
||||
styleUrls: ['./moisture-chart.component.scss'],
|
||||
standalone: false
|
||||
})
|
||||
export class MoistureChartComponent implements OnInit, OnDestroy {
|
||||
@ViewChild(BaseChartDirective) chart?: BaseChartDirective;
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
public lineChartData: ChartConfiguration['data'] = {
|
||||
datasets: [
|
||||
{
|
||||
data: [],
|
||||
label: 'Soil Moisture',
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
fill: true,
|
||||
}
|
||||
],
|
||||
labels: []
|
||||
};
|
||||
|
||||
public lineChartOptions: ChartConfiguration['options'] = {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
constructor(private soilDataService: SoilDataService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.soilDataService.getSoilMoistureStream()
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(data => {
|
||||
this.updateChart(data);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
private updateChart(data: any): void {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
|
||||
if (this.lineChartData.datasets[0].data.length > 10) {
|
||||
this.lineChartData.datasets[0].data.shift();
|
||||
this.lineChartData.labels?.shift();
|
||||
}
|
||||
|
||||
this.lineChartData.datasets[0].data.push(data.moisturePercentage);
|
||||
this.lineChartData.labels?.push(timestamp);
|
||||
this.chart?.update();
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export interface SoilData {
|
||||
timestamp: Date;
|
||||
moisturePercentage: number;
|
||||
location: string;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, interval } from 'rxjs';
|
||||
import { map, switchMap } from 'rxjs/operators';
|
||||
import { SoilData } from '../models/soil-data.model';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class SoilDataService {
|
||||
private apiUrl = 'http://localhost:5284/api/soilMoisture/Moisture'; // Replace with your actual API endpoint
|
||||
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
getSoilMoistureStream(): Observable<SoilData> {
|
||||
// Poll the API every 5 seconds
|
||||
return interval(1000).pipe(
|
||||
switchMap(() => this.http.get<SoilData>(this.apiUrl))
|
||||
);
|
||||
}
|
||||
|
||||
getSoilMoistureStreamTest(): Observable<SoilData> {
|
||||
// Simulate data for testing
|
||||
return interval(50000).pipe(
|
||||
map(() => ({
|
||||
timestamp: new Date(),
|
||||
moisturePercentage: Math.floor(Math.random() * 100),
|
||||
location: 'Garden Sensor 1'
|
||||
}))
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 948 B |
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>HousePlantClient</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +0,0 @@
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.error(err));
|
||||
@@ -1 +0,0 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@@ -1,14 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
ij_typescript_use_double_quotes = false
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
@@ -1,4 +1,4 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
@@ -4,7 +4,7 @@
|
||||
"configurations": [
|
||||
{
|
||||
"name": "ng serve",
|
||||
"type": "pwa-chrome",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: start",
|
||||
"url": "http://localhost:4200/"
|
||||
59
plant-browser/README.md
Normal file
59
plant-browser/README.md
Normal file
@@ -0,0 +1,59 @@
|
||||
# PlantBrowser
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.6.
|
||||
|
||||
## Development server
|
||||
|
||||
To start a local development server, run:
|
||||
|
||||
```bash
|
||||
ng serve
|
||||
```
|
||||
|
||||
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the project run:
|
||||
|
||||
```bash
|
||||
ng build
|
||||
```
|
||||
|
||||
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
@@ -3,7 +3,7 @@
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"house-plant-client": {
|
||||
"plant-browser": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
@@ -17,37 +17,39 @@
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:application",
|
||||
"options": {
|
||||
"outputPath": {
|
||||
"base": "dist/house-plant-client"
|
||||
},
|
||||
"outputPath": "dist/plant-browser",
|
||||
"index": "src/index.html",
|
||||
"browser": "src/main.ts",
|
||||
"polyfills": [
|
||||
"zone.js"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
},
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"@angular/material/prebuilt-themes/azure-blue.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"browser": "src/main.ts"
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
"maximumWarning": "500kB",
|
||||
"maximumError": "1MB"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
"maximumWarning": "4kB",
|
||||
"maximumError": "8kB"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
@@ -55,8 +57,7 @@
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
@@ -65,19 +66,16 @@
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "house-plant-client:build:production"
|
||||
"buildTarget": "plant-browser:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "house-plant-client:build:development"
|
||||
"buildTarget": "plant-browser:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "house-plant-client:build"
|
||||
}
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
@@ -89,10 +87,14 @@
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
},
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"@angular/material/prebuilt-themes/azure-blue.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
@@ -102,6 +104,6 @@
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": "71536d45-371c-4b7d-b576-cce0a0dc9d18"
|
||||
"analytics": "2f66f6d5-a013-454e-b4c4-03f39742aa12"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
40
plant-browser/package.json
Normal file
40
plant-browser/package.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "plant-browser",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^19.0.0",
|
||||
"@angular/cdk": "^19.0.4",
|
||||
"@angular/common": "^19.0.0",
|
||||
"@angular/compiler": "^19.0.0",
|
||||
"@angular/core": "^19.0.0",
|
||||
"@angular/forms": "^19.0.0",
|
||||
"@angular/material": "^19.0.4",
|
||||
"@angular/platform-browser": "^19.0.0",
|
||||
"@angular/platform-browser-dynamic": "^19.0.0",
|
||||
"@angular/router": "^19.0.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^19.0.6",
|
||||
"@angular/cli": "^19.0.6",
|
||||
"@angular/compiler-cli": "^19.0.0",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"jasmine-core": "~5.4.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"typescript": "~5.6.2"
|
||||
}
|
||||
}
|
||||
BIN
plant-browser/public/favicon.ico
Normal file
BIN
plant-browser/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
2
plant-browser/src/app/app.component.html
Normal file
2
plant-browser/src/app/app.component.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<app-header></app-header>
|
||||
<router-outlet></router-outlet>
|
||||
@@ -1,16 +1,10 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [
|
||||
RouterTestingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports: [AppComponent],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
@@ -20,16 +14,16 @@ describe('AppComponent', () => {
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'house-plant-client'`, () => {
|
||||
it(`should have the 'plant-browser' title`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('house-plant-client');
|
||||
expect(app.title).toEqual('plant-browser');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('.content span')?.textContent).toContain('house-plant-client app is running!');
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, plant-browser');
|
||||
});
|
||||
});
|
||||
13
plant-browser/src/app/app.component.ts
Normal file
13
plant-browser/src/app/app.component.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { HeaderComponent } from './header/header.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [RouterOutlet, HeaderComponent],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.scss'
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'plant-browser';
|
||||
}
|
||||
15
plant-browser/src/app/app.config.ts
Normal file
15
plant-browser/src/app/app.config.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||
provideRouter(routes),
|
||||
provideAnimationsAsync(),
|
||||
provideHttpClient(),
|
||||
]
|
||||
};
|
||||
6
plant-browser/src/app/app.routes.ts
Normal file
6
plant-browser/src/app/app.routes.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { PlantListComponent } from './plant-list/plant-list.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{ path: '', component: PlantListComponent }
|
||||
];
|
||||
@@ -0,0 +1,17 @@
|
||||
<!-- update-nickname-dialog.component.html -->
|
||||
<h2 mat-dialog-title>Update Plant Nickname</h2>
|
||||
<mat-dialog-content>
|
||||
<form [formGroup]="nicknameForm">
|
||||
<mat-form-field appearance="fill" style="width: 100%;">
|
||||
<mat-label>Nickname</mat-label>
|
||||
<input matInput formControlName="nickname" placeholder="Enter new nickname">
|
||||
<mat-error *ngIf="nicknameForm.get('nickname')?.hasError('required')">
|
||||
Nickname is required
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button (click)="onCancel()">Cancel</button>
|
||||
<button mat-button color="primary" [disabled]="!nicknameForm.valid" (click)="onSave()">Save</button>
|
||||
</mat-dialog-actions>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UpdateNicknameDialogComponent } from './update-nickname-dialog.component';
|
||||
|
||||
describe('UpdateNicknameDialogComponent', () => {
|
||||
let component: UpdateNicknameDialogComponent;
|
||||
let fixture: ComponentFixture<UpdateNicknameDialogComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UpdateNicknameDialogComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(UpdateNicknameDialogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
// update-nickname-dialog.component.ts
|
||||
import { Component, Inject } from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
|
||||
export interface UpdateNicknameData {
|
||||
name: string;
|
||||
nickname?: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-update-nickname-dialog',
|
||||
templateUrl: './update-nickname-dialog.component.html',
|
||||
styleUrls: ['./update-nickname-dialog.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatButtonModule,
|
||||
MatDialogModule
|
||||
]
|
||||
})
|
||||
export class UpdateNicknameDialogComponent {
|
||||
nicknameForm: FormGroup;
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<UpdateNicknameDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: UpdateNicknameData,
|
||||
private fb: FormBuilder
|
||||
) {
|
||||
this.nicknameForm = this.fb.group({
|
||||
nickname: [
|
||||
data.nickname || '',
|
||||
[
|
||||
Validators.required,
|
||||
Validators.minLength(3),
|
||||
Validators.maxLength(20),
|
||||
Validators.pattern('^[a-zA-Z0-9 _-]+$') // Allows letters, numbers, spaces, underscores, hyphens
|
||||
]
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
onSave(): void {
|
||||
if (this.nicknameForm.valid) {
|
||||
this.dialogRef.close({ nickname: this.nicknameForm.value.nickname });
|
||||
}
|
||||
}
|
||||
|
||||
onCancel(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
8
plant-browser/src/app/header/header.component.html
Normal file
8
plant-browser/src/app/header/header.component.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<header class="app-header">
|
||||
<div class="header-content">
|
||||
<i class="fa-solid fa-leaf logo-icon"></i> <!-- Font Awesome Icon -->
|
||||
<h1 class="app-title">
|
||||
<span class="highlight">Plant</span>Pal
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
35
plant-browser/src/app/header/header.component.scss
Normal file
35
plant-browser/src/app/header/header.component.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
.app-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px 0px; /* Increased padding for a thicker appearance */
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
height: 40px; /* Increased height */
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 32px; /* Icon size */
|
||||
color: white; /* Matches the text color */
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-family: 'Poppins', sans-serif; /* Friendly and modern font */
|
||||
font-size: 24px; /* Slightly larger for emphasis */
|
||||
font-weight: 500; /* Medium weight for balance */
|
||||
color: white;
|
||||
margin: 0;
|
||||
letter-spacing: 0.5px; /* Subtle spacing */
|
||||
}
|
||||
|
||||
.app-title .highlight {
|
||||
font-weight: 700; /* Bolder weight for the highlighted part */
|
||||
color: #c8e6c9; /* Soft green for the highlight */
|
||||
}
|
||||
@@ -1,18 +1,18 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MoistureChartComponent } from './moisture-chart.component';
|
||||
import { HeaderComponent } from './header.component';
|
||||
|
||||
describe('MoistureChartComponent', () => {
|
||||
let component: MoistureChartComponent;
|
||||
let fixture: ComponentFixture<MoistureChartComponent>;
|
||||
describe('HeaderComponent', () => {
|
||||
let component: HeaderComponent;
|
||||
let fixture: ComponentFixture<HeaderComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ MoistureChartComponent ]
|
||||
imports: [HeaderComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(MoistureChartComponent);
|
||||
fixture = TestBed.createComponent(HeaderComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
14
plant-browser/src/app/header/header.component.ts
Normal file
14
plant-browser/src/app/header/header.component.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
imports: [MatToolbarModule, MatButtonModule, MatIconModule],
|
||||
templateUrl: './header.component.html',
|
||||
styleUrl: './header.component.scss'
|
||||
})
|
||||
export class HeaderComponent {
|
||||
|
||||
}
|
||||
6
plant-browser/src/app/models/soil-data.model.ts
Normal file
6
plant-browser/src/app/models/soil-data.model.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export interface SoilData {
|
||||
timestamp: Date;
|
||||
moisture: number;
|
||||
name: string;
|
||||
nickname: string;
|
||||
}
|
||||
10
plant-browser/src/app/plant-list/plant-list.component.html
Normal file
10
plant-browser/src/app/plant-list/plant-list.component.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<div class="plant-container">
|
||||
<div class="plant-grid">
|
||||
<div class="plant-card-container" *ngFor="let plant of plants">
|
||||
<div class="plant-card">
|
||||
<p class="moisture-level">{{ plant.moisture }}</p>
|
||||
</div>
|
||||
<h3 class="plant-name" (click)="openUpdateDialog(plant)">{{ plant.nickname }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
69
plant-browser/src/app/plant-list/plant-list.component.scss
Normal file
69
plant-browser/src/app/plant-list/plant-list.component.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
.plant-container{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plant-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Responsive grid layout */
|
||||
gap: 16px; /* Space between cards */
|
||||
padding: 32px 16px; /* Padding for top and bottom */
|
||||
max-width: 100%; /* Prevents overflow */
|
||||
margin: 0 auto; /* Centers the grid horizontally */
|
||||
box-sizing: border-box; /* Ensures padding is included in total width */
|
||||
background-color: #D0D7C5; /* Muted green background */
|
||||
border-radius: 35px 35px 0px 0px;
|
||||
height: calc(100vh - 80px);
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.plant-grid::-webkit-scrollbar {
|
||||
display: none; /* Safari and Chrome */
|
||||
}
|
||||
|
||||
.plant-card-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* Centers the card and name */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.plant-card {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%; /* Circular card */
|
||||
background-color: #FCFFED; /* Soft cream background color */
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Strong shadow for depth */
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: flex-end; /* Align moisture level at the bottom */
|
||||
justify-content: center; /* Center horizontally */
|
||||
background-image: url("../../assets/plant-placeholder.jpg");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.moisture-level {
|
||||
font-size: 18px; /* Larger font for emphasis */
|
||||
font-weight: bold;
|
||||
color: #7C8A78; /* Updated darker green color for the moisture percentage */
|
||||
margin-bottom: 12px; /* Space from the bottom edge */
|
||||
}
|
||||
|
||||
.plant-name {
|
||||
margin-top: 8px; /* Space between the card and the name */
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #4a4a4a; /* Dark text */
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
.plant-name {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.plant-name:hover {
|
||||
text-decoration: underline;
|
||||
color: #3f51b5; /* Adjust to match your theme */
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PlantListComponent } from './plant-list.component';
|
||||
|
||||
describe('PlantListComponent', () => {
|
||||
let component: PlantListComponent;
|
||||
let fixture: ComponentFixture<PlantListComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [PlantListComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PlantListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
74
plant-browser/src/app/plant-list/plant-list.component.ts
Normal file
74
plant-browser/src/app/plant-list/plant-list.component.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { SoilData } from '../models/soil-data.model';
|
||||
import { SoilDataService } from '../services/soil-data.service';
|
||||
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { UpdateNicknameDialogComponent, UpdateNicknameData } from '../dialogs/update-nickname-dialog/update-nickname-dialog.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-plant-list',
|
||||
templateUrl: './plant-list.component.html',
|
||||
styleUrls: ['./plant-list.component.scss'],
|
||||
imports:[
|
||||
CommonModule
|
||||
]
|
||||
})
|
||||
|
||||
export class PlantListComponent {
|
||||
|
||||
plants: SoilData[] = [];
|
||||
isLoading = true;
|
||||
|
||||
constructor(
|
||||
private plantService: SoilDataService,
|
||||
private dialog: MatDialog,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.fetchPlants();
|
||||
}
|
||||
|
||||
fetchPlants(): void {
|
||||
this.plantService.getPlants().subscribe({
|
||||
next: (data) => {
|
||||
this.plants = data;
|
||||
this.isLoading = false;
|
||||
},
|
||||
error: (err) => {
|
||||
console.error('Error fetching plants:', err);
|
||||
this.isLoading = false;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
openUpdateDialog(device: SoilData): void {
|
||||
const dialogRef = this.dialog.open(UpdateNicknameDialogComponent, {
|
||||
width: '300px',
|
||||
data: { name: device.name, nickname: device.nickname }
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
if (result) {
|
||||
this.updateNickname(device.name, result.nickname);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateNickname(name: string, nickname: string): void {
|
||||
this.plantService.updateNickname(name, nickname).subscribe(
|
||||
(response: any) => {
|
||||
console.log(response.message);
|
||||
// Update the local device list
|
||||
const device = this.plants.find(d => d.name === name);
|
||||
if (device) {
|
||||
device.nickname = nickname;
|
||||
}
|
||||
},
|
||||
(error: any) => {
|
||||
console.error('Error updating nickname:', error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
24
plant-browser/src/app/services/soil-data.service.ts
Normal file
24
plant-browser/src/app/services/soil-data.service.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import { SoilData } from '../models/soil-data.model';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class SoilDataService {
|
||||
private apiUrl = 'http://localhost:5284/api/'; // Replace with your actual API endpoint
|
||||
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
getPlants(): Observable<SoilData[]> {
|
||||
return this.http.get<SoilData[]>(this.apiUrl + 'devices');
|
||||
}
|
||||
|
||||
// Update device nickname
|
||||
updateNickname(name: string, nickname: string): Observable<any> {
|
||||
const url = `${this.apiUrl}devices/${encodeURIComponent(name)}/nickname`;
|
||||
return this.http.put(url, { nickname: nickname });
|
||||
}
|
||||
|
||||
}
|
||||
BIN
plant-browser/src/assets/plant-placeholder.jpg
Normal file
BIN
plant-browser/src/assets/plant-placeholder.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
17
plant-browser/src/index.html
Normal file
17
plant-browser/src/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>PlantBrowser</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
6
plant-browser/src/main.ts
Normal file
6
plant-browser/src/main.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
||||
bootstrapApplication(AppComponent, appConfig)
|
||||
.catch((err) => console.error(err));
|
||||
8
plant-browser/src/styles.scss
Normal file
8
plant-browser/src/styles.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh; /* Ensures the body stretches to the full viewport height */
|
||||
overflow-x: hidden; /* Prevent horizontal scrolling */
|
||||
background: linear-gradient(90deg, rgb(70, 104, 77), rgb(62, 97, 72)); /* Gradient background */
|
||||
}
|
||||
15
plant-browser/tsconfig.app.json
Normal file
15
plant-browser/tsconfig.app.json
Normal file
@@ -0,0 +1,15 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,28 +1,22 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"esModuleInterop": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"skipLibCheck": true,
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"moduleResolution": "bundler",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"useDefineForClassFields": false,
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"dom"
|
||||
]
|
||||
"module": "ES2022"
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
15
plant-browser/tsconfig.spec.json
Normal file
15
plant-browser/tsconfig.spec.json
Normal file
@@ -0,0 +1,15 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user