Dodat frontend za test app

42 files changed, 883 insertions, 0 deletions

diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/app-routing.module.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app-routing.module.ts
new file mode 100755
index 00000000..6991b1d0
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app-routing.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomepageComponent } from './homepage/homepage.component';
+import { IzmeniLaptopComponent } from './izmeni-laptop/izmeni-laptop.component';
+import { LaptopComponent } from './laptop/laptop.component';
+import { NewLaptopComponent } from './new-laptop/new-laptop.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+
+const routes: Routes = [
+  {path:"", component:HomepageComponent},
+  {path:"homepage", component:HomepageComponent},
+  {path:"newLaptop", component:NewLaptopComponent},
+  {path:"izmeniLaptop/:id", component:IzmeniLaptopComponent},
+  {path:"laptop/:id", component:LaptopComponent},
+  {path:"**", component:PageNotFoundComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.css b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.css
new file mode 100755
index 00000000..56ebd4a2
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.css
@@ -0,0 +1,14 @@
+h1{
+    padding: 30px;
+    text-align: center;
+    color:rgb(42, 71, 165);
+}
+div{
+    width: 100%;
+    background-color:rgb(134, 186, 235);
+    color: blueviolet;
+}
+
+html{
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.html b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.html
new file mode 100755
index 00000000..39dcd1dd
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.html
@@ -0,0 +1,6 @@
+
+<div>
+  <h1>Dobrodošli u prvi online info servis laptopova</h1>
+  <app-navbar></app-navbar>
+</div>
+<router-outlet></router-outlet>
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.spec.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.spec.ts
new file mode 100755
index 00000000..74b5b3eb
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.spec.ts
@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'frontend'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('frontend');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('frontend app is running!');
+  });
+});
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.ts
new file mode 100755
index 00000000..9d6b2f11
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'frontend';
+}
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.module.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.module.ts
new file mode 100755
index 00000000..98295d39
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/app.module.ts
@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { HomepageComponent } from './homepage/homepage.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { LaptopComponent } from './laptop/laptop.component';
+import { FormsModule } from '@angular/forms';
+
+import { HttpClientModule } from '@angular/common/http';
+import { IzmeniLaptopComponent } from './izmeni-laptop/izmeni-laptop.component';
+import { NewLaptopComponent } from './new-laptop/new-laptop.component';
+import { NavbarComponent } from './navbar/navbar.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HomepageComponent,
+    PageNotFoundComponent,
+    LaptopComponent,
+    IzmeniLaptopComponent,
+    NewLaptopComponent,
+    NavbarComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    FormsModule,
+    HttpClientModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.css b/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.css
new file mode 100755
index 00000000..5f298325
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.css
@@ -0,0 +1,18 @@
+table {
+    border-collapse: collapse;
+    width: 100%;
+    border: 1px solid green;
+    margin-top:15px;
+  }
+
+th{
+    border:1px solid rgb(19, 0, 128);
+    height: 30px;
+    background-color:rgb(134, 186, 235);
+}
+
+td{
+    border:1px solid rgb(19, 0, 128);
+    height: 30px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.html b/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.html
new file mode 100755
index 00000000..406ff0ea
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.html
@@ -0,0 +1,29 @@
+<table *ngIf="laptops">
+    <tr>
+        <th colspan="11">SPISAK DOSTUPNIH LAPTOPOVA</th>
+    </tr>
+    <tr>
+        <th>BREND</th>
+        <th>MODEL</th>
+        <th>RAM</th>
+        <th>MEMORIJA</th>
+        <th>GRAFIKA</th>
+        <th>EKRAN</th>
+        <th>PROCESOR</th>
+        <th>CENA</th>
+        <th>UREDI</th>
+        <th>OBRIŠI</th>
+    </tr>
+    <tr *ngFor="let laptop of laptops" (click)="pogledaj(laptop.id)">
+        <td>{{laptop.brand}}</td>
+        <td>{{laptop.model}}</td>
+        <td>{{laptop.ram}} gb</td>
+        <td>{{laptop.hdd}} gb</td>
+        <td>{{laptop.graphics}}</td>
+        <td>{{laptop.display}}"</td>
+        <td>{{laptop.processor}}</td>
+        <td>{{laptop.price}} €</td>
+        <td ><button (click)="izmeni(laptop)">IZMENI</button></td>
+        <td ><button (click)="obrisi(laptop)">ORBIŠI</button></td>
+    </tr>
+</table>
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.spec.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.spec.ts
new file mode 100755
index 00000000..116588cc
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomepageComponent } from './homepage.component';
+
+describe('HomepageComponent', () => {
+  let component: HomepageComponent;
+  let fixture: ComponentFixture<HomepageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HomepageComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomepageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.ts
new file mode 100755
index 00000000..4ebea54d
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/homepage/homepage.component.ts
@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Laptop } from '../models/laptop';
+import { LibraryServiceService } from '../services/library.service';
+
+@Component({
+  selector: 'app-homepage',
+  templateUrl: './homepage.component.html',
+  styleUrls: ['./homepage.component.css']
+})
+export class HomepageComponent implements OnInit {
+  laptops?:Laptop[]
+  constructor(private library : LibraryServiceService, private router:Router) { }
+
+  ngOnInit(): void {
+    
+    this.library.dajLaptopove().subscribe(laptopovi =>{
+      this.laptops = laptopovi
+    })
+  }
+
+  pogledaj(id:String)
+  {
+    this.router.navigate(["/laptop/"+id])
+  }
+
+  izmeni(laptop:Laptop)
+  {
+    this.router.navigate(['/izmeniLaptop/'+laptop.id])
+  }
+
+  obrisi(laptop:Laptop)
+  {
+    this.library.obrisiLaptop(laptop.id).subscribe(req=>{
+      
+        this.library.dajLaptopove().subscribe(laptopovi =>{
+          this.laptops = laptopovi
+        })
+    })
+  }
+
+}
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.css b/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.css
new file mode 100755
index 00000000..ab085673
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.css
@@ -0,0 +1,10 @@
+input{
+    margin:5px;
+}
+button{
+    margin:5px;
+}
+#forma{
+    width: 250px;
+    margin: auto;
+}
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.html b/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.html
new file mode 100755
index 00000000..c49a700d
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.html
@@ -0,0 +1,25 @@
+<div *ngIf="laptop" id="forma">
+    <label>Brand:</label>
+    <input type="text" [(ngModel)]="laptop.brand" ><br>
+    <label>Model:</label> 
+    <input type="text"  [(ngModel)]="laptop.model"><br>
+    <label>Ram:</label> 
+    <input type="number"  [(ngModel)]="laptop.ram"> <br>
+    <label>Memorija:</label> 
+    <input type="number"  [(ngModel)]="laptop.hdd"> <br>
+    <label>Grafika:</label> 
+    <input type="text"  [(ngModel)]="laptop.graphics"> <br>
+    <label>Ekran:</label>
+    <input type="text"  [(ngModel)]="laptop.display"> <br>
+    <label>Procesor:</label>
+    <input type="text"  [(ngModel)]="laptop.processor"><br>
+    <label>Cena:</label> 
+    <input type="number"  [(ngModel)]="laptop.price"><br>
+
+    <button (click)="izmeni(laptop)">Sačuvaj izmene</button><br>
+    <button (click)="back()">Nazad na početnu</button> 
+</div>
+
+<div *ngIf="izmenio" id="forma">
+    <p style="color:green">Uspešno izmenjeni podaci!</p>
+</div>
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.spec.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.spec.ts
new file mode 100755
index 00000000..cd33375a
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IzmeniLaptopComponent } from './izmeni-laptop.component';
+
+describe('IzmeniLaptopComponent', () => {
+  let component: IzmeniLaptopComponent;
+  let fixture: ComponentFixture<IzmeniLaptopComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ IzmeniLaptopComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IzmeniLaptopComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.ts
new file mode 100755
index 00000000..7a4f44b4
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/izmeni-laptop/izmeni-laptop.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Laptop } from '../models/laptop';
+import { LibraryServiceService } from '../services/library.service';
+
+@Component({
+  selector: 'app-izmeni-laptop',
+  templateUrl: './izmeni-laptop.component.html',
+  styleUrls: ['./izmeni-laptop.component.css']
+})
+export class IzmeniLaptopComponent implements OnInit {
+  laptop?:Laptop
+  izmenio?:boolean
+  constructor(private router:Router,private library:LibraryServiceService, private route:ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.route.params.subscribe(url=>{
+      this.library.dajLaptop(url["id"]).subscribe(laptop =>{
+        this.laptop = laptop
+      })
+    })
+  }
+
+  izmeni(laptop?:Laptop)
+  {
+    this.library.izmeniLaptop(laptop).subscribe(laptop=>{
+      this.route.params.subscribe(url=>{
+        this.library.dajLaptop(url["id"]).subscribe(laptop =>{
+          this.laptop = laptop
+          this.izmenio = true;
+        })
+      })
+    })
+  }
+
+  back()
+  {
+    this.router.navigate(["/homepage"])
+  }
+
+
+
+}
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.css b/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.css
new file mode 100755
index 00000000..6d5e47ba
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.css
@@ -0,0 +1,22 @@
+table {
+    border-collapse: collapse;
+    width: 100%;
+    border: 1px solid green;
+    margin-top:15px;
+  }
+
+th{
+    border:1px solid green;
+    height: 30px;
+    background-color:springgreen;
+}
+
+td{
+    border:1px solid salmon;
+    height: 30px;
+    text-align: center;
+}
+#forma{
+    width: 250px;
+    margin: auto;
+}
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.html b/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.html
new file mode 100755
index 00000000..e1f90df3
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.html
@@ -0,0 +1,41 @@
+<div *ngIf="laptop" id="forma">
+    <h4>Karakteristike laptopa:</h4>
+  <b>Brend:</b> {{laptop.brand}}  <br>
+  <b>Model</b>: {{laptop.model}} <br>
+  <b>RAM</b>: {{laptop.ram}} GB<br>
+  <b>HDD</b>: {{laptop.hdd}} GB<br>
+  <b>Grafika</b>: {{laptop.graphics}} (GB)<br>
+  <b>Dijagonala ekrana</b>: {{laptop.display}} "<br>
+  <b>Procesor</b>: {{laptop.processor}} <br>
+  <b>Cena</b>: {{laptop.price}} €<br><br>
+
+
+  <table *ngIf="laptopoviM">
+    <tr>
+        <th colspan="9">LAPTOPOVI MARKE {{laptop.brand}}</th>
+    </tr>
+    <tr>
+        <th>Brend</th>
+        <th>MODEL</th>
+        <th>RAM</th>
+        <th>HDD</th>
+        <th>Grafika</th>
+        <th>Dijagonala ekrana</th>
+        
+        <th>Procesor</th>
+        <th>Cena</th>
+    </tr>
+    <tr *ngFor="let laptop of laptopoviM" (click)="pogledaj(laptop.id)">
+        <td>{{laptop.brand}}</td>
+        <td>{{laptop.model}}</td>
+        <td>{{laptop.ram}}</td>
+        <td>{{laptop.hdd}}</td>
+        <td>{{laptop.graphics}}</td>
+        <td>{{laptop.display}}</td>
+       
+        <td>{{laptop.processor}}</td>
+        <td>{{laptop.price}} €</td>
+    </tr>
+</table>
+</div>
+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.spec.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.spec.ts
new file mode 100755
index 00000000..a9ef8a05
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LaptopComponent } from './laptop.component';
+
+describe('LaptopComponent', () => {
+  let component: LaptopComponent;
+  let fixture: ComponentFixture<LaptopComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LaptopComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LaptopComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.ts
new file mode 100755
index 00000000..94d711bb
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/laptop/laptop.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Laptop } from '../models/laptop';
+import { LibraryServiceService } from '../services/library.service';
+
+@Component({
+  selector: 'app-laptop',
+  templateUrl: './laptop.component.html',
+  styleUrls: ['./laptop.component.css']
+})
+export class LaptopComponent implements OnInit {
+  laptop?:Laptop
+  laptopoviM?:Laptop[]
+  constructor(private library: LibraryServiceService, private route:ActivatedRoute, private router:Router) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(url =>{
+      this.library.dajLaptop(url["id"]).subscribe(laptop=>{
+        this.laptop = laptop;
+      })
+    })
+  }
+
+
+  pogledaj(id:String)
+  {
+    this.router.navigate(["/laptop/"+id])
+  }
+}
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/models/laptop.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/models/laptop.ts
new file mode 100755
index 00000000..d5747358
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/models/laptop.ts
@@ -0,0 +1,11 @@
+export interface Laptop{
+    brand: String;
+    model: String;
+    ram: Number;
+    hdd:Number;
+    graphics: String;
+    price: Number;
+    display : String;
+    processor: String;
+    id: String;
+}
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.css b/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.css
new file mode 100755
index 00000000..48a0e297
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.css
@@ -0,0 +1,17 @@
+button{
+    margin:5px;
+    padding:5px;
+    width: 150px;
+    color:  rgb(19, 0, 128);
+    font-weight: bold;
+}
+
+button:hover{
+    background-color: rgb(170, 165, 190);
+    color:black;
+}
+
+div{
+    margin: auto;
+    width: 26%;
+}
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.html b/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.html
new file mode 100755
index 00000000..928fc01e
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.html
@@ -0,0 +1,4 @@
+<div>
+    <button (click)="pocetna()">POČETNA</button>
+    <button (click)="dodaj()">DODAJ NOVI</button>
+</div>
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.spec.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.spec.ts
new file mode 100755
index 00000000..f8ccd6f4
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavbarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.ts
new file mode 100755
index 00000000..2cdf7ae3
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/navbar/navbar.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CookieService } from 'ngx-cookie-service';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.css']
+})
+export class NavbarComponent implements OnInit {
+
+  constructor(private router:Router, private cookie:CookieService) { }
+
+  ngOnInit(): void {
+  }
+
+  pocetna()
+  {
+    this.router.navigate(["/homepage"])
+  }
+
+  dodaj()
+  {
+    this.router.navigate(["/newLaptop"])
+  }
+
+}
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.css b/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.css
new file mode 100755
index 00000000..ab085673
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.css
@@ -0,0 +1,10 @@
+input{
+    margin:5px;
+}
+button{
+    margin:5px;
+}
+#forma{
+    width: 250px;
+    margin: auto;
+}
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.html b/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.html
new file mode 100755
index 00000000..0669929b
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.html
@@ -0,0 +1,24 @@
+<div id="forma">
+    <h2>DODAJ LAPTOP</h2>
+    <label>Brand:</label>
+    <input type="text" placeholder=" Lenovo" [(ngModel)]="laptop.brand"><br>
+    <label>Model:</label>
+    <input type="text" placeholder=" Ideapad" [(ngModel)]="laptop.model"><br>
+    <label>Ram:</label>  &nbsp;
+    <input type="number" placeholder=" 8" [(ngModel)]="laptop.ram"> <br>
+    <label>Memorija:</label>&nbsp;
+    <input type="number" placeholder=" 1000" [(ngModel)]="laptop.hdd"> <br>
+    <label>Grafika:</label>  &nbsp; &nbsp;
+    <input type="text" placeholder=" nVidia GeForce 1080" [(ngModel)]="laptop.graphics"> <br>
+    <label>Ekran:</label>
+    <input type="text" placeholder="  15.6" [(ngModel)]="laptop.display"> <br>
+    <label>Procesor:</label>
+    <input type="text" placeholder="  Intel i7 dualCore " [(ngModel)]="laptop.processor"><br>
+    <label>Cena:</label>  &nbsp; &nbsp; &nbsp; &nbsp;
+    <input type="number" placeholder=" 760 " [(ngModel)]="laptop.price"><br>
+    
+    <button (click)="dodaj(laptop)">Dodaj laptop</button> 
+
+    <button (click)="back()">Nazad na početnu</button> 
+</div>
+
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.spec.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.spec.ts
new file mode 100755
index 00000000..a2218fc7
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewLaptopComponent } from './new-laptop.component';
+
+describe('NewLaptopComponent', () => {
+  let component: NewLaptopComponent;
+  let fixture: ComponentFixture<NewLaptopComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NewLaptopComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewLaptopComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.ts
new file mode 100755
index 00000000..5211c4d3
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/new-laptop/new-laptop.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { LaptopComponent } from '../laptop/laptop.component';
+import { Laptop } from '../models/laptop';
+import { LibraryServiceService } from '../services/library.service';
+
+@Component({
+  selector: 'app-new-laptop',
+  templateUrl: './new-laptop.component.html',
+  styleUrls: ['./new-laptop.component.css']
+})
+export class NewLaptopComponent implements OnInit {
+
+  laptop:Laptop= {} as Laptop
+  constructor(private router:Router, private library: LibraryServiceService) { }
+
+  ngOnInit(): void {
+    
+  }
+
+
+  back()
+  {
+    this.router.navigate(["/homepage"])
+  }
+
+  dodaj(laptop:Laptop)
+  {
+    this.library.unesiLaptop(laptop).subscribe(laptop=>{
+      this.router.navigate(["/laptop/"+laptop.id])
+    })
+  }
+
+
+}
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.css b/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.css
new file mode 100755
index 00000000..f918ef97
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.css
@@ -0,0 +1,4 @@
+div{
+    width: 500px;
+    margin:auto;
+}
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.html b/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.html
new file mode 100755
index 00000000..d1e18002
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.html
@@ -0,0 +1,3 @@
+<div>
+    <h1>PAGE NOT FOUND ERROR 404</h1>
+</div>
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.spec.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.spec.ts
new file mode 100755
index 00000000..aa242a97
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageNotFoundComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.ts
new file mode 100755
index 00000000..8aeb7485
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/page-not-found/page-not-found.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.css']
+})
+export class PageNotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/services/library.service.spec.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/services/library.service.spec.ts
new file mode 100755
index 00000000..c64a4343
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/services/library.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LibraryServiceService } from './library.service';
+
+describe('LibraryService', () => {
+  let service: LibraryServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LibraryServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/app/services/library.service.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/app/services/library.service.ts
new file mode 100755
index 00000000..e16759d9
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/app/services/library.service.ts
@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
+import { Laptop } from '../models/laptop';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class LibraryServiceService    {
+  
+  constructor(private http:HttpClient) { }
+
+  //DAJ SVE LAPTOPOVE
+  dajLaptopove(): Observable<Laptop[]>
+  {
+      return this.http.get<Laptop[]>("http://localhost:5000/api/sviLaptopovi");
+  }
+
+  //DAJ ODREDJENI LAPTOP
+  dajLaptop(id:String): Observable<Laptop>
+  {
+    return this.http.get<Laptop>("http://localhost:5000/api/laptop/"+id);
+  }
+
+  //UNESI NOVI LAPTOP
+  unesiLaptop(reqBody:Laptop): Observable<Laptop>
+  {
+    return this.http.post<Laptop>("http://localhost:5000/api/add", 
+    {"brand": reqBody.brand,
+    "model": reqBody.model,
+    "ram": reqBody.ram,
+    "hdd": reqBody.hdd,
+    "graphics": reqBody.graphics,
+    "price":reqBody.price,
+    "display" : reqBody.display,
+    "id": "a873b90f-5fca-4c41-a00e-8ea497cce542",
+    "processor": reqBody.processor});
+  }
+
+  //IZMENI LAPTOP
+  izmeniLaptop(reqBody?:Laptop): Observable<Laptop>
+  {
+    return this.http.put<Laptop>("http://localhost:5000/api/update", 
+    {"brand": reqBody?.brand,
+    "model": reqBody?.model,
+    "ram": reqBody?.ram,
+    "hdd": reqBody?.hdd,
+    "graphics": reqBody?.graphics,
+    "price":reqBody?.price,
+    "display" : reqBody?.display,
+    "processor": reqBody?.processor,
+  "id":reqBody?.id});
+  }
+
+  //OBRISI LAPTOP
+  obrisiLaptop(id:String): Observable<Boolean>
+  {
+    return this.http.delete<Boolean>("http://localhost:5000/api/brisanje/"+id);
+  }
+}
\ No newline at end of file
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/assets/.gitkeep b/sandbox/TestIvanLjubisavljevic/frontend/src/assets/.gitkeep
new file mode 100755
index 00000000..e69de29b
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/assets/.gitkeep
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/environments/environment.prod.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/environments/environment.prod.ts
new file mode 100755
index 00000000..3612073b
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/environments/environment.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/environments/environment.ts
new file mode 100755
index 00000000..f56ff470
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/favicon.ico b/sandbox/TestIvanLjubisavljevic/frontend/src/favicon.ico
new file mode 100755
index 00000000..997406ad
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/favicon.ico
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/index.html b/sandbox/TestIvanLjubisavljevic/frontend/src/index.html
new file mode 100755
index 00000000..2c8fd5f4
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Prodavnica laptopova</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/main.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/main.ts
new file mode 100755
index 00000000..c7b673cf
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/polyfills.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/polyfills.ts
new file mode 100755
index 00000000..429bb9ef
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/polyfills.ts
@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/styles.css b/sandbox/TestIvanLjubisavljevic/frontend/src/styles.css
new file mode 100755
index 00000000..90d4ee00
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/sandbox/TestIvanLjubisavljevic/frontend/src/test.ts b/sandbox/TestIvanLjubisavljevic/frontend/src/test.ts
new file mode 100755
index 00000000..00025daf
--- /dev/null
+++ b/sandbox/TestIvanLjubisavljevic/frontend/src/test.ts
@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);