diff options
Diffstat (limited to 'sandbox/testAppSonja/frontend/front/src/app')
21 files changed, 583 insertions, 0 deletions
diff --git a/sandbox/testAppSonja/frontend/front/src/app/Student.ts b/sandbox/testAppSonja/frontend/front/src/app/Student.ts new file mode 100644 index 00000000..6cc9842f --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/Student.ts @@ -0,0 +1,20 @@ +/*export interface IStudent { + id: number; + firstName: string; + lastName: string; + regNum: number; + address: string; + phoneNum: string; + gpa: number; + } + */ + + export class Student { + id!: number; + firstName!: string; + lastName!: string; + regNum!: string; + address!: string; + phoneNum!: string; + gpa!: number; + }
\ No newline at end of file diff --git a/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.css b/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.css diff --git a/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.html b/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.html new file mode 100644 index 00000000..094a8d0b --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.html @@ -0,0 +1,70 @@ +<div> + <form #f="ngForm" (ngSubmit)="handleSave(f)"> + + <input type="hidden" id="id" name="id" [value]="" ngModel> + <input type="hidden" id="gpa" name="gpa" [value]="" ngModel> + + <label for="fname">Ime</label><br> + <input type="text" id="fname" name="firstname" [value]="" ngModel> + <br> + + <label for="lname">Prezime</label><br> + <input type="text" id="lname" name="lastname" [value]="" ngModel> + <br> + + <label for="regNum">Broj indeksa</label><br> + <input type="text" id="regNum" name="regNum" [value]="" ngModel> + <br> + + <label for="address">Adresa</label><br> + <input type="text" id="address" name="address" [value]="" ngModel> + <br> + + <label for="phone">Broj telefona</label><br> + <input type="text" id="phone" name="phone" [value]="" ngModel> + <br> + + <input type="submit" value="Dodaj studenta"> + </form> + + <br><br> + <a routerLink="">Povratak na spisak studenata</a> + +</div> + +<style> + +input[type=text], select { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + } + +input[type=submit] { + width: 100%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; + } + + input[type=submit]:hover { + background-color: #45a049; + } + + div { + border-radius: 5px; + background-color: #f2f2f2; + padding: 20px; + width: 50%; + margin: 50px auto; + } + +</style>
\ No newline at end of file diff --git a/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.spec.ts b/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.spec.ts new file mode 100644 index 00000000..41105e6e --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddPageComponent } from './add-page.component'; + +describe('AddPageComponent', () => { + let component: AddPageComponent; + let fixture: ComponentFixture<AddPageComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddPageComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.ts b/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.ts new file mode 100644 index 00000000..b8b6cefa --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/add-page/add-page.component.ts @@ -0,0 +1,43 @@ +import { Component, OnInit } from '@angular/core'; +import { StudentService } from '../services/student.service'; +import { Router } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; +import { NgForm } from '@angular/forms'; +import { Student } from '../Student'; + +@Component({ + selector: 'app-add-page', + templateUrl: './add-page.component.html', + styleUrls: ['./add-page.component.css'] +}) +export class AddPageComponent implements OnInit { + + submitted = false; + + constructor(private studentService: StudentService, private route: ActivatedRoute, private router: Router) { } + + ngOnInit(): void { + } + + handleSave(f: NgForm) { + let newStudent : Student = { + id : -1, + firstName: f.value.firstname, //znaci ovo je name iz forme + lastName: f.value.lastname, + regNum: f.value.regNum, + address: f.value.address, + phoneNum: f.value.phone, + gpa: 0.0 + } + console.log(newStudent); + + this.studentService.addStudent(newStudent) + .subscribe( + data => { + this.submitted = true; + this.router.navigate(['']); + } + ); + } + +} diff --git a/sandbox/testAppSonja/frontend/front/src/app/app-routing.module.ts b/sandbox/testAppSonja/frontend/front/src/app/app-routing.module.ts new file mode 100644 index 00000000..da2d6f67 --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/app-routing.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { EditPageComponent } from './edit-page/edit-page.component'; +import { MainPageComponent } from './main-page/main-page.component'; +import { Router } from '@angular/router'; +import { AddPageComponent } from './add-page/add-page.component'; + +const routes: Routes = [ + { path: '', component: MainPageComponent }, + { path: 'edit/:id', component: EditPageComponent }, + { path: 'add', component: AddPageComponent } +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { + constructor(private router: Router){} + } diff --git a/sandbox/testAppSonja/frontend/front/src/app/app.component.css b/sandbox/testAppSonja/frontend/front/src/app/app.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/app.component.css diff --git a/sandbox/testAppSonja/frontend/front/src/app/app.component.html b/sandbox/testAppSonja/frontend/front/src/app/app.component.html new file mode 100644 index 00000000..cd1aafc8 --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/app.component.html @@ -0,0 +1,2 @@ +<router-outlet> +</router-outlet>
\ No newline at end of file diff --git a/sandbox/testAppSonja/frontend/front/src/app/app.component.spec.ts b/sandbox/testAppSonja/frontend/front/src/app/app.component.spec.ts new file mode 100644 index 00000000..db0e438c --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/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 'front'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('front'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain('front app is running!'); + }); +}); diff --git a/sandbox/testAppSonja/frontend/front/src/app/app.component.ts b/sandbox/testAppSonja/frontend/front/src/app/app.component.ts new file mode 100644 index 00000000..fd34373c --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/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 = 'front'; +} diff --git a/sandbox/testAppSonja/frontend/front/src/app/app.module.ts b/sandbox/testAppSonja/frontend/front/src/app/app.module.ts new file mode 100644 index 00000000..3ee24751 --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/app.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpClientModule } from '@angular/common/http'; +import { FormsModule } from '@angular/forms'; + +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { MainPageComponent } from './main-page/main-page.component'; +import { EditPageComponent } from './edit-page/edit-page.component'; +import { AddPageComponent } from './add-page/add-page.component'; + +@NgModule({ + declarations: [ + AppComponent, + MainPageComponent, + EditPageComponent, + AddPageComponent, + ], + imports: [ + BrowserModule, + HttpClientModule, + AppRoutingModule, + FormsModule, + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.css b/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.css diff --git a/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.html b/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.html new file mode 100644 index 00000000..3faaca85 --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.html @@ -0,0 +1,70 @@ +<div> + <form #f="ngForm" (ngSubmit)="handleSubmit(f)"> + + <input type="hidden" id="id" name="id" [(ngModel)]="student.id"> + <input type="hidden" id="regNum" name="regNum" [(ngModel)]="student.regNum"> + + <label for="fname">Ime</label><br> + <input type="text" id="fname" name="firstname" [(ngModel)]="student.firstName"> + <br> + + <label for="lname">Prezime</label><br> + <input type="text" id="lname" name="lastname" [(ngModel)]="student.lastName"> + <br> + + <label for="gpa">Prosecna ocena</label><br> + <input type="text" id="gpa" name="gpa" [(ngModel)]="student.gpa"> + <br> + + <label for="address">Adresa</label><br> + <input type="text" id="address" name="address" [(ngModel)]="student.address"> + <br> + + <label for="phone">Broj telefona</label><br> + <input type="text" id="phone" name="phone" [(ngModel)]="student.phoneNum"> + <br> + + <input type="submit" value="Sacuvaj izmenu"> + </form> + + <br><br> + <a routerLink="">Povratak na spisak studenata</a> + +</div> + +<style> + +input[type=text], select { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + } + +input[type=submit] { + width: 100%; + background-color: #4CAF50; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; + } + + input[type=submit]:hover { + background-color: #45a049; + } + + div { + border-radius: 5px; + background-color: #f2f2f2; + padding: 20px; + width: 50%; + margin: 50px auto; + } + +</style>
\ No newline at end of file diff --git a/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.spec.ts b/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.spec.ts new file mode 100644 index 00000000..898e7568 --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditPageComponent } from './edit-page.component'; + +describe('EditPageComponent', () => { + let component: EditPageComponent; + let fixture: ComponentFixture<EditPageComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EditPageComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EditPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.ts b/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.ts new file mode 100644 index 00000000..e86c1f39 --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/edit-page/edit-page.component.ts @@ -0,0 +1,56 @@ +import { Component, OnInit } from '@angular/core'; +import { NgForm } from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { StudentService } from '../services/student.service'; +import { Student } from '../Student'; + +@Component({ + selector: 'app-edit-page', + templateUrl: './edit-page.component.html', + styleUrls: ['./edit-page.component.css'] +}) +export class EditPageComponent implements OnInit { + + submitted = false; + id: number = -1; + student = new Student(); + + constructor(private studentService: StudentService, private route: ActivatedRoute, private router: Router) { } + + ngOnInit(): void { + this.route.paramMap.subscribe( + params => this.id = parseInt(params.get('id')!) + ); + + this.loadOneStudent(); + } + + loadOneStudent() { + this.studentService.getOneStudent(this.id) + .subscribe( + data => this.student = data + ) + } + + handleSubmit(f: NgForm) { //f.value su name-ovi pokupljeni iz forme pa njihove vrednosti + let editedStudent : Student = { + id: f.value.id, + firstName: f.value.firstname, //znaci ovo je name iz forme + lastName: f.value.lastname, + regNum: f.value.regNum, + address: f.value.address, + phoneNum: f.value.phone, + gpa: f.value.gpa + } + + this.studentService.updateStudent(this.id, editedStudent) + .subscribe( + data => { + this.submitted = true; + //console.log("Form:", f.value); + this.router.navigate(['']); + } + ) + } + +} diff --git a/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.css b/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.css diff --git a/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.html b/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.html new file mode 100644 index 00000000..d731a5bd --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.html @@ -0,0 +1,72 @@ +<h2>Spisak studenata</h2> + +<table *ngIf="students && students.length > 0"> + <thead> + <tr> + <th>Ime i prezime</th> + <th>Broj indeksa</th> + <th>Prosecna ocena</th> + <th>Adresa</th> + <th>Broj telefona</th> + <th></th> + <th></th> + </tr> + </thead> + <tbody> + <tr *ngFor="let student of students"> + <td>{{student.firstName}} {{student.lastName}}</td> + <td>{{student.regNum}}</td> + <td>{{student.gpa}}</td> + <td>{{student.address}}</td> + <td>{{student.phoneNum}}</td> + <td> + <button><a routerLink="../edit/{{student.id}}" type="button" class="btn btn-primary">Izmeni podatke</a></button> + </td> + <td> + <button type="button" class="btn btn-primary" (click)="pickStudentForDelete(student.id)">Obrisi studenta</button> + </td> + </tr> + </tbody> +</table> + +<div> + <button id="btnDodaj" type="button" class="btn btn-primary"><a routerLink="../add">Dodaj novog studenta</a></button> +</div> + +<!-- +<p *ngIf="!students || !students.length"> + Nema studenata! +</p> +--> + +<style> + + h2 { + text-align: center; + margin-bottom: 50px; + } + + table { + border-collapse: collapse; + width: 60%; + margin: auto; + } + + th, td { + text-align: left; + padding: 8px; + } + + tr:nth-child(even){background-color: #f2f2f2} + + th { + background-color: #04AA6D; + color: white; + } + + div { + text-align: center; + padding-top: 70px; + } + +</style>
\ No newline at end of file diff --git a/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.spec.ts b/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.spec.ts new file mode 100644 index 00000000..c2d5899c --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MainPageComponent } from './main-page.component'; + +describe('MainPageComponent', () => { + let component: MainPageComponent; + let fixture: ComponentFixture<MainPageComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MainPageComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MainPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.ts b/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.ts new file mode 100644 index 00000000..cf749fc3 --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/main-page/main-page.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; +import { StudentService } from '../services/student.service'; +import { Student } from '../Student'; + +@Component({ + selector: 'app-main-page', + templateUrl: './main-page.component.html', + styleUrls: ['./main-page.component.css'] +}) +export class MainPageComponent implements OnInit { + + public students: Student[] = []; + submitted = false; + count: number = 0; + + constructor(private studentService: StudentService) { } + + ngOnInit(): void { + this.studentService + .getStudents() + .subscribe((students : Student[]) => this.students = students); + } + + pickStudentForDelete(id: number) { + this.studentService.deleteStudent(id) + .subscribe( + data => { + this.submitted = true; + this.ngOnInit(); + //console.log("Data: " + data); + } + ); + } + +} diff --git a/sandbox/testAppSonja/frontend/front/src/app/services/student.service.spec.ts b/sandbox/testAppSonja/frontend/front/src/app/services/student.service.spec.ts new file mode 100644 index 00000000..85cfc63f --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/services/student.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { StudentService } from './student.service'; + +describe('StudentService', () => { + let service: StudentService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(StudentService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/sandbox/testAppSonja/frontend/front/src/app/services/student.service.ts b/sandbox/testAppSonja/frontend/front/src/app/services/student.service.ts new file mode 100644 index 00000000..b0eb60cc --- /dev/null +++ b/sandbox/testAppSonja/frontend/front/src/app/services/student.service.ts @@ -0,0 +1,31 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Student } from '../Student'; + +@Injectable({ + providedIn: 'root' +}) +export class StudentService { + + constructor(private http: HttpClient) { } + + public getStudents() { + return this.http.get<Student[]>(`http://localhost:5000/api/students`); + } + + public getOneStudent(id: number) { + return this.http.get<any>("http://localhost:5000/api/students/" + id); + } + + public updateStudent(id: number, student: Student) { + return this.http.put("http://localhost:5000/api/students/" + student.id, student); + } + + public deleteStudent(id: number) { + return this.http.delete("http://localhost:5000/api/students/" + id); + } + + public addStudent(newStudent: Student) { + return this.http.post("http://localhost:5000/api/students/", newStudent); + } +} |