TWA-AFS-202310 · yangyaxin-66 · Oct 26, 2023 · Oct 26, 2023 · Oct 26, 2023 · Oct 26, 2023
diff --git a/.vs/ExpenseRecord/DesignTimeBuild/.dtbcache.v2 b/.vs/ExpenseRecord/DesignTimeBuild/.dtbcache.v2
diff --git a/.vs/ExpenseRecord/FileContentIndex/339eda24-9029-409b-9eee-bc26f12495fe.vsidx b/.vs/ExpenseRecord/FileContentIndex/339eda24-9029-409b-9eee-bc26f12495fe.vsidx
diff --git a/.vs/ExpenseRecord/FileContentIndex/3e34afab-1d40-44d0-a90c-c24c8cd73546.vsidx b/.vs/ExpenseRecord/FileContentIndex/3e34afab-1d40-44d0-a90c-c24c8cd73546.vsidx
diff --git a/.vs/ExpenseRecord/FileContentIndex/5f049127-5cd8-4f62-81ce-14eff33f8f80.vsidx b/.vs/ExpenseRecord/FileContentIndex/5f049127-5cd8-4f62-81ce-14eff33f8f80.vsidx
diff --git a/.vs/ExpenseRecord/FileContentIndex/b74583b2-94c0-4531-b3d2-17ac1046c661.vsidx b/.vs/ExpenseRecord/FileContentIndex/b74583b2-94c0-4531-b3d2-17ac1046c661.vsidx
diff --git a/.vs/ExpenseRecord/FileContentIndex/bf66d6a7-17e7-405c-aa44-ae7ff7a5da67.vsidx b/.vs/ExpenseRecord/FileContentIndex/bf66d6a7-17e7-405c-aa44-ae7ff7a5da67.vsidx
diff --git a/.vs/ExpenseRecord/config/applicationhost.config b/.vs/ExpenseRecord/config/applicationhost.config
diff --git a/.vs/ExpenseRecord/v17/.futdcache.v2 b/.vs/ExpenseRecord/v17/.futdcache.v2
diff --git a/.vs/ExpenseRecord/v17/.suo b/.vs/ExpenseRecord/v17/.suo
diff --git a/.vs/ExpenseRecord/v17/fileList.bin b/.vs/ExpenseRecord/v17/fileList.bin
diff --git a/.vs/ProjectEvaluation/expenserecord.metadata.v7.bin b/.vs/ProjectEvaluation/expenserecord.metadata.v7.bin
diff --git a/.vs/ProjectEvaluation/expenserecord.projects.v7.bin b/.vs/ProjectEvaluation/expenserecord.projects.v7.bin
diff --git a/ExpenseRecord/ClientApp/src/app/app-routing.module.ts b/ExpenseRecord/ClientApp/src/app/app-routing.module.ts
@@ -0,0 +1,17 @@
+import { RouterModule, Routes } from "@angular/router";
+import { NgModel } from "@angular/forms";
+import { NgModule } from "@angular/core";
+
+import { ExpenseComponent } from "./expense/expense.component";
+import { ChildComponent } from "./expense/child/child.component";
+
+
+const route: Routes=[
+    {path:'',component:ExpenseComponent},
+    {path:'new',component:ChildComponent},
+];
+@NgModule({
+    imports: [RouterModule.forRoot(route)],
+    exports: [RouterModule]
+})
+export class AppRoutingModule{}
diff --git a/ExpenseRecord/ClientApp/src/app/app.component.html b/ExpenseRecord/ClientApp/src/app/app.component.html
@@ -1 +1,11 @@
-<app-greeting></app-greeting>
+
+<html>
+<head>
+  <title>Expense</title>
+</head>
+<body>
+  <div class='container'>
+    <router-outlet></router-outlet>
+  </div>
+</body>
+</html>
diff --git a/ExpenseRecord/ClientApp/src/app/app.module.ts b/ExpenseRecord/ClientApp/src/app/app.module.ts
@@ -7,19 +7,30 @@ import { RouterModule } from '@angular/router';
 import { AppComponent } from './app.component';
 import { CounterComponent } from './counter/counter.component';
 import {GreetingComponent} from "./greeting/greeting.component";
+import { ExpenseComponent } from './expense/expense.component';
+import { ExpenseService } from './expense/expense.service';
+import "@angular/compiler";
+import { ChildComponent } from './expense/child/child.component';
+import { ExpenseModule } from './expense/expense.module';
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
     declarations: [
         AppComponent,
         CounterComponent,
-        GreetingComponent
+        GreetingComponent,
+        ExpenseComponent,
+
     ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
     HttpClientModule,
     FormsModule,
+    RouterModule,
+    ExpenseModule,
+    AppRoutingModule
   ],
-  providers: [],
+  providers: [ExpenseService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/ExpenseRecord/ClientApp/src/app/app.server.module.ts b/ExpenseRecord/ClientApp/src/app/app.server.module.ts
diff --git a/ExpenseRecord/ClientApp/src/app/expense/child/child.component.css b/ExpenseRecord/ClientApp/src/app/expense/child/child.component.css
@@ -0,0 +1,70 @@
+.centered-box {
+    position: fixed;
+    top: 50%; /* 将框顶部垂直居中 */
+    left: 50%; /* 将框左侧水平居中 */
+    transform: translate(-50%, -50%); /* 使用transform属性来微调位置 */
+    background-color: #fff;
+    width: 80%; /* 调整框的宽度和高度 */
+    height: 85%;
+    border: 2px solid rgba(3, 41, 81, 0.5);
+    border-radius: 5px;
+    padding: 20px;
+}
+.input{
+    border: 2px, solid rgba(3, 41, 81, 0.5);
+    font-size: large;
+    text-align: center;
+    width: 100%;
+}
+.goback{
+    height: 50px;
+    width: 100%;
+    align-content: left;
+    align-self: flex-start;
+    background-color: rgba(17, 64, 108, 0.5);
+    font-size: large;
+    color: #fff;
+    margin-top: 5px;
+    font-family: 'Montserrat', sans-serif;
+}
+.title{
+    color: rgba(3, 41, 81, 0.8);
+    width: 100%;
+    text-align: center;
+    font-size: 30px;;
+    /* font-family: 'Montserrat', serif; */
+    height:10%;
+    margin-bottom: 0%;
+}
+.table{
+    width: 100%;
+    height: 18%;
+    text-align: center;
+    color:rgba(3, 41, 81, 1);
+}
+.label{
+    border: 2px, solid rgba(3, 41, 81, 0.5);
+    font-size: large;
+    text-align: center;
+}
+
+
+.container{
+    height: 80%;
+    line-height: 3;
+    overflow-y: auto;
+    font-size: large;
+    font-family: 'Montserrat', sans-serif;
+}
+.save{
+    height: 50px;
+    width: 100%;
+    align-content: center;
+    align-self: flex-start;
+    background-color: rgba(17, 64, 108, 0.5);
+    font-size: large;
+    color: #fff;
+    margin-top: 5px;
+    font-family: 'Montserrat', sans-serif;
+
+}
diff --git a/ExpenseRecord/ClientApp/src/app/expense/child/child.component.html b/ExpenseRecord/ClientApp/src/app/expense/child/child.component.html
@@ -0,0 +1,26 @@
+<div class="centered-box">
+    <button class="goback" (click)="onBack()">Go Back</button>
+    <div class="container">
+        <table class="table"></table>
+        <tr>
+            <th><label class="label">Description</label></th>
+            <th><input class="input" [(ngModel)]='Description' [ngModelOptions]="{standalone: true}"></th>
+        </tr>
+        <tr>
+            <th><label class="label" for="expenseType">Expense Type:</label></th>
+            <th>
+                <div> <select style="width: 100%;" id="expenseType" [(ngModel)]="selectedExpenseType">
+                        <option value="meals">Meals</option>
+                        <option value="travel">Travel</option>
+                        <option value="accommodation">Accommodation</option>
+                    </select></div>
+            </th>
+        </tr>
+        <tr>
+            <th><label class="label">Amount</label></th>
+            <th><input class="input" [(ngModel)]='Amount' [ngModelOptions]="{standalone: true}"></th>
+        </tr>
+    </div>
+
+    <div><button (click)="save()" class="save" id="saveItem">SAVE</button></div>
+</div>
diff --git a/ExpenseRecord/ClientApp/src/app/expense/child/child.component.spec.ts b/ExpenseRecord/ClientApp/src/app/expense/child/child.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChildComponent } from './child.component';
+
+describe('ChildComponent', () => {
+  let component: ChildComponent;
+  let fixture: ComponentFixture<ChildComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChildComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ChildComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ExpenseRecord/ClientApp/src/app/expense/child/child.component.ts b/ExpenseRecord/ClientApp/src/app/expense/child/child.component.ts
@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { INewExpenseItem } from '../newexpense';
+import { ExpenseService } from '../expense.service';
+
+@Component({
+  selector: 'app-child',
+  templateUrl: './child.component.html',
+  styleUrls: ['./child.component.css']
+})
+export class ChildComponent implements OnInit {
+  selectedExpenseType: string ='';
+
+
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private expenseService:ExpenseService) { }
+  public Description:string='';
+
+  public Amount :number  =0;
+  ngOnInit(): void {
+  }
+  onBack(): void {
+    this.router.navigateByUrl('/');
+    //navigate(['items']);
+  }
+  save() {
+    // if (!this.content) {
+      const newItem: INewExpenseItem = {
+        description: this.Description,
+        type: this.selectedExpenseType,
+        amount:this.Amount
+
+      }
+      console.log(newItem)
+       this.expenseService.addItems(newItem).subscribe()
+    }
+}
diff --git a/ExpenseRecord/ClientApp/src/app/expense/expense-service.service.spec.ts b/ExpenseRecord/ClientApp/src/app/expense/expense-service.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { ExpenseService } from './expense.service';
+
+
+describe('ExpenseServiceService', () => {
+  let service: ExpenseService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ExpenseService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/ExpenseRecord/ClientApp/src/app/expense/expense.component.css b/ExpenseRecord/ClientApp/src/app/expense/expense.component.css
@@ -0,0 +1,59 @@
+.centered-box {
+    position: fixed;
+    top: 50%; /* 将框顶部垂直居中 */
+    left: 50%; /* 将框左侧水平居中 */
+    transform: translate(-50%, -50%); /* 使用transform属性来微调位置 */
+    background-color: #fff;
+    width: 80%; /* 调整框的宽度和高度 */
+    height: 85%;
+    border: 2px solid rgba(3, 41, 81, 0.5);
+    border-radius: 5px;
+    padding: 20px;
+}
+.title{
+    color: rgba(3, 41, 81, 0.8);
+    width: 100%;
+    text-align: center;
+    font-size: 30px;;
+    /* font-family: 'Montserrat', serif; */
+    height:10%;
+    margin-bottom: 0%;
+}
+.table{
+    width: 100%;
+    height: 18%;
+    text-align: center;
+    color:rgba(3, 41, 81, 1);
+}
+.container{
+    height: 80%;
+    line-height: 3;
+    overflow-y: auto;
+    font-size: large;
+    font-family: 'Montserrat', sans-serif;
+}
+.Created{
+    height: 50px;
+    width: 100%;
+    align-content: center;
+    align-self: flex-end;
+    background-color: rgba(17, 64, 108, 0.5);
+    font-size: large;
+    color: #fff;
+    margin-top: 5px;
+    font-family: 'Montserrat', sans-serif;
+
+}
+.deletebutton{
+    background-color: #fff;
+    border-color: #fff;
+    border-radius: 10%;
+    align-content: center;
+    font-size: large;
+    color: rgba(17, 64, 108, 1);
+    margin-top: 5px;
+    font-family: 'Montserrat', sans-serif;
+
+
+
+}
diff --git a/ExpenseRecord/ClientApp/src/app/expense/expense.component.html b/ExpenseRecord/ClientApp/src/app/expense/expense.component.html
@@ -0,0 +1,27 @@
+<div class="centered-box">
+    <h1 class="title">{{title}}</h1>
+    <div class="container">
+        <table class='table' *ngIf='existingRecords.length'>
+            <thead>
+                <tr>
+                    <th>Description</th>
+                    <th>Type</th>
+                    <th>Amount</th>
+                    <th>CreateTime</th>
+                    <th>Delete?</th>
+                </tr>
+            </thead>
+            <tbody class="itemlist" *ngFor='let item of existingRecords'>
+                <tr>
+                    <th>{{item.description}}</th>
+                    <th>{{item.type}}</th>
+                    <th>{{item.amount}}</th>
+                    <th>{{item.createTime}}</th>
+                    <th><button class = "deletebutton" (click)="deleteItems(item.id)">remove</button></th>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <button class="Created"><a routerLinkActive='active' routerLink='new' href="#">CREAT</a></button>
+
+</div>
diff --git a/ExpenseRecord/ClientApp/src/app/expense/expense.component.spec.ts b/ExpenseRecord/ClientApp/src/app/expense/expense.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExpenseComponent } from './expense.component';
+
+describe('ExpenseComponent', () => {
+  let component: ExpenseComponent;
+  let fixture: ComponentFixture<ExpenseComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExpenseComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ExpenseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});