Skip to content

Commit

Permalink
Merge pull request #21 from devdanielsun/developer
Browse files Browse the repository at this point in the history
Update Angular style and bootstrap
  • Loading branch information
devdanielsun authored Jan 5, 2024
2 parents 958c9ed + 1d26bd9 commit 7be7fb6
Show file tree
Hide file tree
Showing 30 changed files with 415 additions and 92 deletions.
3 changes: 1 addition & 2 deletions pollor.client/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": []
Expand Down Expand Up @@ -90,7 +90,6 @@
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
Expand Down
105 changes: 105 additions & 0 deletions pollor.client/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions pollor.client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,14 @@
"@angular/platform-browser": "^17.0.7",
"@angular/platform-browser-dynamic": "^17.0.7",
"@angular/router": "^17.0.7",
"@fortawesome/angular-fontawesome": "^0.14.1",
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@ng-bootstrap/ng-bootstrap": "^16.0.0",
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.2",
"jest-editor-support": "*",
"run-script-os": "*",
"rxjs": "~7.8.0",
Expand All @@ -34,6 +42,7 @@
"@angular-devkit/build-angular": "^17.0.7",
"@angular/cli": "^17.0.7",
"@angular/compiler-cli": "^17.0.7",
"@angular/localize": "^17.0.7",
"@types/jasmine": "~5.1.0",
"dotenv": "^16.3.1",
"eslint": "^8.56.0",
Expand Down
7 changes: 6 additions & 1 deletion pollor.client/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [];
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent }, // route for 404 page
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
Expand Down
6 changes: 1 addition & 5 deletions pollor.client/src/app/app.component.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
:host {
:host {
max-width: 1280px;
padding: 2rem;
text-align: center;
Expand All @@ -16,7 +16,3 @@ th, td {
padding-left: 1rem;
padding-right: 1rem;
}

table {
margin: 0 auto;
}
30 changes: 3 additions & 27 deletions pollor.client/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,29 +1,5 @@
<h1 id="tableLabel">Weather forecast</h1>
<app-header></app-header>

<p>This component demonstrates fetching data from the server.</p>
<router-outlet></router-outlet>

<p *ngIf="baseApiUrl">App version = {{ appVersion }}</p>

<p *ngIf="baseApiUrl">The api url = {{ baseApiUrl }}</p>


<p *ngIf="!forecasts"><em>Loading... Please refresh once the ASP.NET backend has started. See <a href="https://aka.ms/jspsintegrationangular">https://aka.ms/jspsintegrationangular</a> for more details.</em></p>

<table *ngIf="forecasts">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let forecast of forecasts">
<td>{{ forecast.date }}</td>
<td>{{ forecast.temperatureC }}</td>
<td>{{ forecast.temperatureF }}</td>
<td>{{ forecast.summary }}</td>
</tr>
</tbody>
</table>
<app-footer></app-footer>
27 changes: 2 additions & 25 deletions pollor.client/src/app/app.component.spec.ts
Original file line number Diff line number Diff line change
@@ -1,45 +1,22 @@
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
let component: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let httpMock: HttpTestingController;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [AppComponent],
imports: [HttpClientTestingModule]
declarations: [AppComponent]
}).compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
httpMock = TestBed.inject(HttpTestingController);
});

afterEach(() => {
httpMock.verify();
});

it('should create the app', () => {
expect(component).toBeTruthy();
});

it('should retrieve weather forecasts from the server', () => {
const mockForecasts = [
{ date: '2021-10-01', temperatureC: 20, temperatureF: 68, summary: 'Mild' },
{ date: '2021-10-02', temperatureC: 25, temperatureF: 77, summary: 'Warm' }
];

component.ngOnInit();

const req = httpMock.expectOne('/weatherforecast');
expect(req.request.method).toEqual('GET');
req.flush(mockForecasts);

expect(component.forecasts).toEqual(mockForecasts);
});
});
});
33 changes: 7 additions & 26 deletions pollor.client/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,38 +1,19 @@
import { Component, OnInit } from '@angular/core';
import { ApiService } from './services/api.service';
import { environment } from '../environments/environment';

interface WeatherForecast {
date: string;
temperatureC: number;
temperatureF: number;
summary: string;
}
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
public appVersion: String = environment.appVersion;
public baseApiUrl: String = this.apiService.getBaseUrl();
public forecasts: WeatherForecast[] = [];

constructor(private apiService: ApiService) {}
export class AppComponent {
title = 'pollor.client';

ngOnInit() {
this.getForecasts();
constructor(private modalService: NgbModal) {
}

getForecasts() {
this.apiService.get<WeatherForecast[]>('weatherforecast')
.subscribe({
next: (response) => this.forecasts = response,
error: (error) => console.error(error),
//complete: () => { }
});
public open(modal: any): void {
this.modalService.open(modal);
}

title = 'pollor.client';
}
20 changes: 18 additions & 2 deletions pollor.client/src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,33 @@
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
declarations: [
AppComponent
AppComponent,
HeaderComponent,
HomeComponent,
PageNotFoundComponent
],
imports: [
BrowserModule, HttpClientModule,
AppRoutingModule
AppRoutingModule,
NgbModule,
RouterOutlet,
RouterLink,
RouterLinkActive,
FontAwesomeModule,
FooterComponent
],
providers: [],
bootstrap: [AppComponent]
Expand Down
7 changes: 7 additions & 0 deletions pollor.client/src/app/footer/footer.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
background-color: #f5f5f5;
}
Loading

0 comments on commit 7be7fb6

Please sign in to comment.