4 files changed, 96 insertions, 0 deletions
diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css
new file mode 100644
index 00000000..b4ac9669
--- /dev/null
+++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css
@@ -0,0 +1,7 @@
+#container {
+    border-radius: 8px;
+}
+
+#wrapper {
+    color: #003459;
+}
+\ No newline at end of file
diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html
new file mode 100644
index 00000000..a4ab6e2c
--- /dev/null
+++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html
@@ -0,0 +1,38 @@
+
+<div id="wrapper">
+
+    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+        <div class="row mt-3 mb-2 d-flex justify-content-center">
+    
+    <div class="col-sm-6" style="margin-bottom: 10px;">
+    <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
+    </div>
+
+            <div class="row">
+                <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let predictor of publicPredictors | filter:term">
+                  <div class="card h-100">
+                    <div class="card-body">
+                      <h3 class="card-title"><b>{{predictor.name}}</b></h3>
+                      <p class="card-text">{{predictor.description}}</p>
+                      <a  class="btn btn-primary" (click)="openPredictor(predictor._id)">Otvori</a>
+                    </div>
+                    <div class="card-footer text-muted">
+                        Kreirao: {{predictor.username}} <br>
+                        Datum kreiranja: {{predictor.dateCreated |date}}
+                      </div>
+                  </div>
+                </div>
+               
+
+              </div>
+              <div class="text-center"*ngIf="( publicPredictors != undefined && publicPredictors|filter:term).length === 0">
+                <h2>Nema rezultata</h2>
+            </div>
+        </div>
+        
+    </div>
+    
+
+
+
+</div>
+\ No newline at end of file
diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts
new file mode 100644
index 00000000..6d13fedf
--- /dev/null
+++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BrowsePredictorsComponent } from './browse-predictors.component';
+
+describe('BrowsePredictorsComponent', () => {
+  let component: BrowsePredictorsComponent;
+  let fixture: ComponentFixture<BrowsePredictorsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BrowsePredictorsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BrowsePredictorsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts
new file mode 100644
index 00000000..4f96fc36
--- /dev/null
+++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { PredictorsService } from 'src/app/_services/predictors.service';
+import Predictor from 'src/app/_data/Predictor';
+import {Router} from '@angular/router'
+@Component({
+  selector: 'app-browse-predictors',
+  templateUrl: './browse-predictors.component.html',
+  styleUrls: ['./browse-predictors.component.css']
+})
+export class BrowsePredictorsComponent implements OnInit {
+
+  publicPredictors? :Predictor[];
+  term: string="";
+  constructor(private predictors: PredictorsService,private router:Router) {
+    this.predictors.getPublicPredictors().subscribe((predictors) => {
+      this.publicPredictors = predictors;
+    });
+  }
+
+  ngOnInit(): void {
+  }
+  openPredictor(id:string):void{
+    this.router.navigateByUrl('/predict?id='+id);
+  };
+
+}