Skip to content

Commit 928c28b

Browse files
MarkPieszakMarkPieszak
authored
Merge pull request TrilonIO#148 from LiverpoolOwen/master
Added REST API and example
2 parents c006ac3 + 149b764 commit 928c28b

File tree

14 files changed

+337
-80
lines changed

14 files changed

+337
-80
lines changed

‎Asp2017.csproj‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.2" />
1010
<PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="1.1.0" />
1111
<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.1" />
12+
<PackageReference Include="Microsoft.EntityFrameworkCore" Version="1.1.1" />
13+
<PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="1.1.1" />
1214
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.1" />
1315
</ItemGroup>
1416
<ItemGroup>

‎Client/app/app.module.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
22
import { RouterModule } from '@angular/router';
33
import { CommonModule } from '@angular/common';
44
import { HttpModule } from '@angular/http';
5+
import { FormsModule } from '@angular/forms';
56

67
import { AppComponent } from './app.component';
78
import { NavMenuComponent } from './containers/navmenu/navmenu.component';
89
import { HomeComponent } from './containers/home/home.component';
9-
import { FetchDataComponent } from './containers/fetchdata/fetchdata.component';
10+
import { UsersComponent } from './containers/users/users.component';
1011
import { CounterComponent } from './containers/counter/counter.component';
1112
import { ChatComponent } from './containers/chat/chat.component';
1213

@@ -18,13 +19,14 @@ import { ConnectionResolver } from './shared/route.resolver';
1819
AppComponent,
1920
NavMenuComponent,
2021
CounterComponent,
21-
FetchDataComponent,
22+
UsersComponent,
2223
HomeComponent,
2324
ChatComponent
2425
],
2526
imports: [
2627
CommonModule,
2728
HttpModule,
29+
FormsModule,
2830
// App Routing
2931
RouterModule.forRoot([
3032
{
@@ -61,13 +63,13 @@ import { ConnectionResolver } from './shared/route.resolver';
6163
}
6264
},
6365
{
64-
path: 'fetch-data', component: FetchDataComponent,
66+
path: 'users', component: UsersComponent,
6567
data: {
66-
title: 'REST demo',
67-
meta: [{ name: 'description', content: `We're hitting REST in this Demo!` }],
68+
title: 'Users REST example',
69+
meta: [{ name: 'description', content: 'This is User REST API example page Description!' }],
6870
links: [
69-
{ rel: 'canonical', href: 'http://blogs.example.com/%3Cspan%20class="x x-first x-last">fetch-data/canonicaldemo' },
70-
{ rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/%3Cspan%20class="x x-first x-last">fetchstuff' }
71+
{ rel: 'canonical', href: 'http://blogs.example.com/%3Cspan%20class="x x-first x-last">chat/something' },
72+
{ rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/%3Cspan%20class="x x-first x-last">users' }
7173
]
7274
}
7375
},

‎Client/app/containers/fetchdata/fetchdata.component.html‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎Client/app/containers/fetchdata/fetchdata.component.ts‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎Client/app/containers/navmenu/navmenu.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
</a>
2424
</li>
2525
<li [routerLinkActive]="['link-active']">
26-
<a [routerLink]="['/fetch-data']">
27-
<span class='glyphicon glyphicon-th-list'></span> Fetch data
26+
<a [routerLink]="['/users']">
27+
<span class='glyphicon glyphicon-user'></span> Users
2828
</a>
2929
</li>
3030
<li [routerLinkActive]="['link-active']">

‎Client/app/containers/users/users.component.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<h1>This is a RestAPI Example (hitting WebAPI in our case)</h1>
2+
3+
<blockquote>
4+
Let's get some fake users from Rest:<br>
5+
You can find the Web API Routes in <code>{{ "/Server/RestAPI/ ... "}}</code>
6+
</blockquote>
7+
8+
<p *ngIf="!users"><em>Loading...</em></p>
9+
10+
<table class="table" *ngIf="users">
11+
<thead>
12+
<tr>
13+
<th>User ID</th>
14+
<th>Name</th>
15+
<th></th>
16+
<th></th>
17+
</tr>
18+
</thead>
19+
<tbody>
20+
<tr *ngFor="let user of users" [@flyInOut]>
21+
<td>{{ user.id }}</td>
22+
<td>
23+
<input class="form-control" [(ngModel)]="user.name" #name="ngModel" />
24+
</td>
25+
<td>
26+
<button *ngIf="name.dirty" class="btn btn-success" (click)="editUser(user)">Save</button>
27+
</td>
28+
<td>
29+
<button class="btn btn-danger" (click)="deleteUser(user)">Delete</button>
30+
</td>
31+
</tr>
32+
<tr>
33+
<td><b>Add new user</b></td>
34+
<td>
35+
<input class="form-control" [(ngModel)]="newUserName" #newUser="ngModel" />
36+
</td>
37+
<td></td>
38+
<td>
39+
<button *ngIf="newUser.dirty" class="btn glyphicon-plus" (click)="addUser(newUserName)"></button>
40+
</td>
41+
</tr>
42+
</tbody>
43+
</table>

‎Client/app/containers/users/users.component.ts‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import {
2+
Component, OnInit,
3+
// animation imports
4+
trigger, state, style, transition, animate
5+
} from '@angular/core';
6+
7+
import { Http, URLSearchParams } from '@angular/http';
8+
9+
@Component({
10+
selector: 'fetchdata',
11+
templateUrl: './users.component.html',
12+
animations: [
13+
// Animation example
14+
// Triggered in the ngFor with [@flyInOut]
15+
trigger('flyInOut', [
16+
state('in', style({ transform: 'translateY(0)' })),
17+
transition('void => *', [
18+
style({ transform: 'translateY(-100%)' }),
19+
animate(1000)
20+
]),
21+
transition('* => void', [
22+
animate(1000, style({ transform: 'translateY(100%)' }))
23+
])
24+
])
25+
]
26+
})
27+
export class UsersComponent implements OnInit {
28+
29+
public newUserName: string;
30+
public users: IUser[];
31+
32+
// Use "constructor"s only for dependency injection
33+
constructor(private http: Http) { }
34+
35+
// Here you want to handle anything with @Input()'s @Output()'s
36+
// Data retrieval / etc - this is when the Component is "ready" and wired up
37+
ngOnInit() {
38+
this.newUserName = "";
39+
this.http.get('http://localhost:5000/api/user/all').map(res => res.json()).subscribe(result => {
40+
console.log(result);
41+
this.users = result as IUser[];
42+
});
43+
}
44+
45+
deleteUser(user) {
46+
this.http.delete("http://localhost:5000/api/user/delete/" + user.id).subscribe(result => {
47+
if (result.ok) {
48+
let position = this.users.indexOf(user);
49+
this.users.splice(position, 1);
50+
}
51+
else {
52+
alert("There was an issue, Could not delete user");
53+
}
54+
});
55+
}
56+
57+
editUser(user) {
58+
let urlSearchParams = new URLSearchParams();
59+
urlSearchParams.append('id', user.id);
60+
urlSearchParams.append('name', user.name);
61+
this.http.put('http://localhost:5000/api/user/update', urlSearchParams).subscribe(result => {
62+
if (!result.ok) {
63+
alert("There was an issue, Could not edit user");
64+
}
65+
});
66+
}
67+
68+
addUser(newUserName) {
69+
let urlSearchParams = new URLSearchParams();
70+
urlSearchParams.append('name', newUserName);
71+
this.http.post('http://localhost:5000/api/user/insert', urlSearchParams).subscribe(result => {
72+
if (result.ok) {
73+
this.users.push(result.json());
74+
this.newUserName = "";
75+
}
76+
else {
77+
alert("There was an issue, Could not edit user");
78+
}
79+
});
80+
}
81+
}
82+
83+
interface IUser {
84+
id: number;
85+
name: string;
86+
}

‎Server/Data/DbInitializer.cs‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
using System;
2+
using System.Linq;
3+
using Microsoft.EntityFrameworkCore;
4+
using Microsoft.Extensions.DependencyInjection;
5+
using AspCoreServer.Models;
6+
using AspCoreServer;
7+
8+
namespace AspCoreServer.Data
9+
{
10+
public static class DbInitializer
11+
{
12+
public static void Initialize(SpaDbContext context)
13+
{
14+
context.Database.EnsureCreated();
15+
16+
if (context.User.Any())
17+
{
18+
return; // DB has been seeded
19+
}
20+
var users = new Users[]
21+
{
22+
new Users(){Name = "Mark Pieszak"},
23+
new Users(){Name = "Abrar Jahin"},
24+
new Users(){Name = "hakonamatata"},
25+
new Users(){Name = "LiverpoolOwen"},
26+
new Users(){Name = "Ketrex"},
27+
new Users(){Name = "markwhitfeld"},
28+
new Users(){Name = "daveo1001"},
29+
new Users(){Name = "paonath"},
30+
new Users(){Name = "nalex095"},
31+
new Users(){Name = "ORuban"},
32+
new Users(){Name = "Gaulomatic"}
33+
};
34+
35+
foreach (Users s in users)
36+
{
37+
context.User.Add(s);
38+
}
39+
context.SaveChanges();
40+
}
41+
}
42+
}

‎Server/Data/SpaDbContext.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using AspCoreServer.Models;
2+
using Microsoft.EntityFrameworkCore;
3+
4+
namespace AspCoreServer.Data
5+
{
6+
public class SpaDbContext : DbContext
7+
{
8+
public SpaDbContext(DbContextOptions<SpaDbContext> options)
9+
: base(options)
10+
{
11+
Database.EnsureCreated();
12+
}
13+
14+
//List of DB Models - Add your DB models here
15+
public DbSet<Users> User { get; set; }
16+
}
17+
}

‎Server/Models/Users.cs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
using System;
2+
using System.ComponentModel.DataAnnotations;
3+
4+
namespace AspCoreServer.Models
5+
{
6+
public class Users
7+
{
8+
public int ID { get; set; }
9+
public string Name { get; set; }
10+
11+
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
12+
[DataType(DataType.Date)]
13+
public DateTime EntryTime { get; set; }
14+
15+
//Setting Default value
16+
public Users()
17+
{
18+
EntryTime = DateTime.Now;
19+
}
20+
}
21+
}

0 commit comments

Comments
 (0)