martin/BrainWare-test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Angular client

Browse Source
This commit is contained in:
Christopher J. Walker 2024-02-22 17:33:44 -05:00
parent 7be749bea2
commit a3edc97584
5 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web-app/proxy.conf.json
View File

@ -1,10 +1,10 @@
{ {
"/api": { "/api": {
"target": "http://localhost:5242", "target": "http://localhost:54730",
"secure": false "secure": false
}, },
"/swagger": { "/swagger": {
"target": "http://localhost:5242", "target": "http://localhost:54730",
"secure": false "secure": false
} }
} }

40
web-app/src/app/app.component.html
View File

@ -1,20 +1,26 @@
<div class="jumbotron"> <div class="container body-content">
<h1>BrainWare Orders</h1> <div class="jumbotron">
<p class="lead">This is the BrainWare orders page! Welcome</p> <h1>BrainWare Orders</h1>
</div> <p class="lead">This is the BrainWare orders page! Welcome</p>
<div class="row"> </div>
<div class="col-md-12"> <div class="row">
<div class="col-md-12">
<h2>Your Orders</h2> <h2>Your Orders</h2>
<div id="orders"></div> <div id="orders"></div>
</div>
</div> </div>
</div> <ul>
<ul> <li *ngFor="let order of orders">
<li *ngFor="let order of orders"> {{order.Description}} (Total: ${{order.OrderTotal}})
{{order.description}} (Total: ${{order.orderTotal}}) <ul>
<ul> <li *ngFor="let orderProduct of order.OrderProducts">
<li *ngFor="let orderProduct of order.orderProducts"> {{orderProduct.Product.Name}} ({{orderProduct.Quantity}} &#64; ${{orderProduct.Price}}/ea)
{{orderProduct.product.name}} ({{orderProduct.quantity}} &#64;&#64; ${{orderProduct.price}}/ea) </li>
</li> </ul>
</ul> </li>
</li> </ul>
</ul> <hr />
<footer>
<p>&copy; {{year}} - BrainWare, Inc</p>
</footer>
</div>

11
web-app/src/app/app.component.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { Component } from '@angular/core';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
@Component({ @Component({
@ -11,15 +11,12 @@ import { RouterModule } from '@angular/router';
styleUrl: './app.component.scss', styleUrl: './app.component.scss',
}) })
export class AppComponent { export class AppComponent {
private http = inject(HttpClient);
private cd = inject(ChangeDetectorRef);
orders: any[] = []; orders: any[] = [];
year = new Date().getFullYear();
constructor() { constructor(http: HttpClient) {
this.http.get<any>('/api/order/1').subscribe((orders) => { http.get<any>('/api/order/1').subscribe((orders) => {
this.orders = orders; this.orders = orders;
this.cd.detectChanges();
}); });
} }
} }

1
web-app/src/index.html
View File

@ -6,6 +6,7 @@
<base href="/" /> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" />
</head> </head>
<body> <body>
<web-app-root></web-app-root> <web-app-root></web-app-root>

18
web-app/src/styles.scss
View File

@ -1 +1,19 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}