_______
|       |
|  API: |
|_______|
dotnet new web -f net6.0
dotnet add package Microsoft.EntityFrameworkCore --version 6.0.10
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 6.0.10
dotnet add package Microsoft.EntityFrameworkCore.Design --version 6.0.10
dotnet tool install --global dotnet-ef --version 6.0.10 - można pominąć
--------------------------------------------------------------------------------------------------------------------
appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "Default": "Server=(localdb)\\mssqllocaldb;Database=KurekBase;Trusted_Connection=True;MultipleActiveResultSets=True"
  }
}
--------------------------------------------------------------------------------------------------------------------
Program.cs

using System.Data.Common;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddDbContext<MyDbContext>(options => options.UseSqlServer(builder.Configuration.GetConnectionString("default")));
builder.Services.AddCors();

var app = builder.Build();
app.UseCors(options=>{
    options.WithOrigins("*")
    .WithMethods("*")
    .WithHeaders("content-type");
});
app.MapGet("/games", async(MyDbContext dbc) => {
    try{
        var list = await dbc.Games.ToListAsync();
        return Results.Ok(list);
    }
    catch(Exception e){
        return Results.Problem(
            detail:e.Message
        );
    }
});

app.MapPost("/games", async(MyDbContext dbc, Game game) => {
    try{
        dbc.Games.Add(game);
        await dbc.SaveChangesAsync();
        return Results.Ok(game);
    }
    catch(Exception e){
        return Results.Problem(
            detail:e.Message
        );
    }
});

app.MapDelete("/games/delete/{id}", async(MyDbContext dbc, int id) => {
    try{
        var gameDelete = await dbc.Games.FindAsync(id);
        if(gameDelete==null){
            return Results.NotFound();
        }
        dbc.Remove(gameDelete);
        await dbc.SaveChangesAsync();
        return Results.Ok(gameDelete);
    }
    catch(Exception e){
        return Results.Problem(
            detail:e.Message
        );
    }
});

app.Run();

public class MyDbContext:DbContext{
    public DbSet<Game>Games => Set<Game>();
    public MyDbContext(DbContextOptions<MyDbContext>options):base(options){

    }
}
public class Game{
    public int Id {get; set;}
    public string Name {get; set;}
    public int Price {get; set;}

    public Game(){
    }

    public Game(int id, string name, int price){
        Id = id;
        Name = name;
        Price = price;
    }
}
--------------------------------------------------------------------------------------------------------------------
dotnet ef migrations add migrancja1
dotnet ef database update
 ________
|        |
| REACT: |
|________|
npm create vite
nazwa
react
typescript
wejść do folderu i npm install
npm run dev
--------------------------------------------------------------------------------------------------------------------
main.tsx

import { StrictMode, useEffect, useState } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'

const App = () => {
  const [games,setGames]=useState<{id:number;name:string;price:number}[]>([]);
  useEffect(() => {
    fetch('http://localhost:5075/games')
      .then((res) => res.json())
      .then(data => setGames(data));
  },[]);

  const deleteGame = (id:number)=>{
    fetch(`http://localhost:5075/games/delete/${id}`,{
      method:'DELETE',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify(id)
    })
    .then((res) => res.json())
    .then((deletedGame)=>{
      setGames(games.filter((games)=>games.id!==deletedGame.id))})
  }

  const addNewGame = (Game:{name:string;price:number}) => {
    fetch('http://localhost:5075/games',{
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify(Game)
    })
    .then(res => res.json())
    .then(newGame => setGames([...games,newGame]))
  }
  return(
    <>
      <ListComponent games={games} onDelete={deleteGame}/>
      <AddComponent onAdd={addNewGame}/>
    </>
  )
}
export const ListComponent = ({games,onDelete}:{games:{id:number;name:string;price:number}[],onDelete:(id:number)=>void}) => {
  return(
    <>
      <h1>Lista gier</h1>
      <ul>
        {games.map((game) => (
          <li key={game.id}>{game.name} {game.price} <button onClick={()=>{onDelete(game.id)}}>Usun</button></li>
        ))}
      </ul>
    </>
  )
}
export const AddComponent = ({onAdd}:{onAdd:(Game:{name:string;price:number})=>void}) => {
  const [name,setName] = useState("");
  const [price,setPrice] = useState(0);
  const save = (e:React.FormEvent) => {
    e.preventDefault();
    const newGame = {name,price};
    onAdd(newGame);
    setName("");
    setPrice(0);
  };
  return(
    <>
      <form onSubmit={save}>
        <input type="text" onChange={(e)=>{setName(e.target.value)}} value={name}/>
        <input type="number" value={price} onChange={(e)=>{
          var v  = 0;
          try{
            v = parseInt(e.target.value);
          }
          catch(e){
            v = 0;
          }
          setPrice(v);
        }}/>
        <button type="submit">Dodaj</button>
      </form>
    </>
  )
}
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App/>
  </StrictMode>,
)
 ___________
|           |
|  ANGULAR: |
|___________|

npm install -g @angular/cli
ng new AngularZPI --minimal=true --standalone=false
no
css
no
wejść do folderu
ng serve --open
ng g c List --standalone=false
ng g s Games
--------------------------------------------------------------------------------------------------------------------
app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ListComponent } from './list/list.component';
import { HttpClientModule } from '@angular/common/http';
import { AddComponent } from './add/add.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    ListComponent,
    AddComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
--------------------------------------------------------------------------------------------------------------------
games.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

type Game={
  id:number;
  name:string;
  price:number;
}

@Injectable({
  providedIn: 'root'
})
export class GamesService {

  constructor(private http:HttpClient) { }
  getGames():Observable<Game[]>{
    return this.http.get<Game[]>("http://localhost:5075/games");
  }
  addGames(game:{name:string,price:number}):Observable<Game>{
    return this.http.post<Game>("http://localhost:5075/games",game);
  }
  deleteGame(id:number){
    return this.http.delete(`http://localhost:5075/games/delete/${id}`)
  }
}
--------------------------------------------------------------------------------------------------------------------
list.component.ts

import { Component } from '@angular/core';
import { GamesService } from '../games.service';

@Component({
  selector: 'app-list',
  standalone: false,
  
  template: `
      <h1>Lista gier:</h1>
      <ul>
        <li *ngFor="let g of games">
          {{g.name}} {{g.price}} <button (click)="remove(g.id)">Usun</button>
        </li>
      </ul>
  `,
  styles: ``
})
export class ListComponent {
  games:{id:number,name:string,price:number}[]=[];
  constructor(private gamesService:GamesService){
  }
  ngOnInit():void{
    this.gamesService.getGames().subscribe(data => this.games = data);
  }
  remove(id:number):void{
    this.gamesService.deleteGame(id).subscribe();
  }
}
--------------------------------------------------------------------------------------------------------------------
add.component.ts

import { Component } from '@angular/core';
import { GamesService } from '../games.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-add',
  standalone: false,
  
  template: `
  <form #gameForm="ngForm" (ngSubmit)="onSubmit(gameForm)">
    <div>
      <label for="name">Nazwa</label>
      <input id="name" name="name" ngModel required>
    </div>
    <div>
      <label for="price">Cena</label>
      <input id="price" name="price" ngModel required>
    </div>
    <button type="submit" [disabled]="gameForm.invalid">Dodaj</button>
  </form>
`,
  styles: ``
})
export class AddComponent {
  constructor(private gamesService:GamesService){
  }
  onSubmit(form:NgForm){
    if(form.valid){
      const newGame = {
        name:form.value.name,
        price:form.value.price
      }
      this.gamesService.addGames(newGame).subscribe();
    }
  }
}