diff options
Diffstat (limited to 'sandbox/TestAppOgnjen/FrontEnd/src/app')
12 files changed, 254 insertions, 0 deletions
diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/app-routing.module.ts b/sandbox/TestAppOgnjen/FrontEnd/src/app/app-routing.module.ts new file mode 100644 index 00000000..6aeec2fd --- /dev/null +++ b/sandbox/TestAppOgnjen/FrontEnd/src/app/app-routing.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { ListaComponent } from './lista/lista.component'; + +const routes: Routes = [ + {path:'lista',component:ListaComponent} +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/app.component.css b/sandbox/TestAppOgnjen/FrontEnd/src/app/app.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/sandbox/TestAppOgnjen/FrontEnd/src/app/app.component.css diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/app.component.html b/sandbox/TestAppOgnjen/FrontEnd/src/app/app.component.html new file mode 100644 index 00000000..62466c4e --- /dev/null +++ b/sandbox/TestAppOgnjen/FrontEnd/src/app/app.component.html @@ -0,0 +1,3 @@ +<!-- <button routerLink="lista">Lista</button> --> +<app-lista></app-lista> +<router-outlet></router-outlet> diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/app.component.spec.ts b/sandbox/TestAppOgnjen/FrontEnd/src/app/app.component.spec.ts new file mode 100644 index 00000000..c7edcb57 --- /dev/null +++ b/sandbox/TestAppOgnjen/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 'ToDoFront'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('ToDoFront'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain('ToDoFront app is running!'); + }); +}); diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/app.component.ts b/sandbox/TestAppOgnjen/FrontEnd/src/app/app.component.ts new file mode 100644 index 00000000..42cc33bb --- /dev/null +++ b/sandbox/TestAppOgnjen/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 = 'ToDoFront'; +} diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/app.module.ts b/sandbox/TestAppOgnjen/FrontEnd/src/app/app.module.ts new file mode 100644 index 00000000..80bf0308 --- /dev/null +++ b/sandbox/TestAppOgnjen/FrontEnd/src/app/app.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { ListaComponent } from './lista/lista.component'; +import { SharedService } from './shared.service'; + + +import {HttpClientModule} from '@angular/common/http'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; + +@NgModule({ + declarations: [ + AppComponent, + ListaComponent + ], + imports: [ + BrowserModule, + AppRoutingModule, + HttpClientModule, + FormsModule, + ReactiveFormsModule + ], + providers: [SharedService], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.css b/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.css new file mode 100644 index 00000000..aa0f09c9 --- /dev/null +++ b/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.css @@ -0,0 +1,15 @@ +table{ + background-color: lightblue; + text-align: center; +} +td,tr,th{ + border:2px solid black; + padding: 3px; + +} +tr:nth-child(even) { + background-color: Lightgreen; +} +tr:nth-child(odd) { + background-color: lightblue; +}
\ No newline at end of file diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.html b/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.html new file mode 100644 index 00000000..2f182c15 --- /dev/null +++ b/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.html @@ -0,0 +1,23 @@ +<h1>ToDo Lista</h1> +<table style="border: 1px black solid;padding: 3px;"> +<tr> + <th>Id</th><th>Task</th><th>Done</th><th>Options</th> +</tr> +<tr *ngFor="let item of ToDoList"> +<th>{{item.id}}</th> +<td>{{item.task}}</td> +<td>{{item.done}}</td> +<td> + <button type="button" (click)="editToDo(item)">Do/Undo</button> + <button type="button" style="background-color:rgba(212, 10, 10, 0.459);" (click)="deleteToDo(item)">Delete</button> +</td> +</tr> + +</table> + +<br><br> +<form> +Task <input type='text'[(ngModel)]="TaskName" name="TaskName"><br><br> +Done <input type='checkbox' [(ngModel)]="isDone" name="isDone"><br><br> +<button type="button" (click)="addToDo()">Dodaj</button> +</form>
\ No newline at end of file diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.spec.ts b/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.spec.ts new file mode 100644 index 00000000..a85678b7 --- /dev/null +++ b/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ListaComponent } from './lista.component'; + +describe('ListaComponent', () => { + let component: ListaComponent; + let fixture: ComponentFixture<ListaComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ListaComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ListaComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.ts b/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.ts new file mode 100644 index 00000000..b98b9aed --- /dev/null +++ b/sandbox/TestAppOgnjen/FrontEnd/src/app/lista/lista.component.ts @@ -0,0 +1,60 @@ +import { Component, OnInit } from '@angular/core'; +import { SharedService } from '../shared.service'; +import { NgModule } from '@angular/core'; +@Component({ + selector: 'app-lista', + templateUrl: './lista.component.html', + styleUrls: ['./lista.component.css'] +}) +export class ListaComponent implements OnInit { + + constructor(private service:SharedService) { } + + ToDoList:any=[]; + TaskName:string="ime taska"; + isDone:boolean=false; + + + ngOnInit(): void { + this.refreshToDoList(); + } + + + + editToDo(item:any){ + var done=1; + if(item.done==1) + done=0; + var val={id:item.id, + task:item.task, + done:done}; + this.service.updateToDo(val,item.id).subscribe(data=>{ + this.refreshToDoList(); + }); + + } + deleteToDo(item:any){ + if(confirm("Da li stvarno zelite da obrisete "+item.task)) + this.service.deleteToDo(item.id).subscribe(data=>{ + this.refreshToDoList(); + }); + + } + addToDo(){ + var done=0; + if(this.isDone) + done=1; + var val={task:this.TaskName, + done:done}; + this.service.addToDo(val).subscribe(data=>{ + this.refreshToDoList(); + }) + + } + + refreshToDoList(){ + this.service.getToDoList().subscribe(data=>{ + this.ToDoList=data; + }); + } +} diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/shared.service.spec.ts b/sandbox/TestAppOgnjen/FrontEnd/src/app/shared.service.spec.ts new file mode 100644 index 00000000..3da5345f --- /dev/null +++ b/sandbox/TestAppOgnjen/FrontEnd/src/app/shared.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { SharedService } from './shared.service'; + +describe('SharedService', () => { + let service: SharedService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(SharedService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/sandbox/TestAppOgnjen/FrontEnd/src/app/shared.service.ts b/sandbox/TestAppOgnjen/FrontEnd/src/app/shared.service.ts new file mode 100644 index 00000000..501beda0 --- /dev/null +++ b/sandbox/TestAppOgnjen/FrontEnd/src/app/shared.service.ts @@ -0,0 +1,25 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpClientModule } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class SharedService { +readonly APIUrl="http://localhost:5000/api"; + constructor(private http:HttpClient) { } + + + getToDoList():Observable<any[]>{ + return this.http.get<any>(this.APIUrl+'/ToDo'); + } + addToDo(val:any){ + return this.http.post(this.APIUrl+'/ToDo',val); + } + updateToDo(val:any,id:any){ + return this.http.put(this.APIUrl+'/ToDo/'+id,val); + } + deleteToDo(val:any){ + return this.http.delete(this.APIUrl+'/ToDo/'+val); + } +} |