diff options
Diffstat (limited to 'frontend/src/app/_pages/playground')
4 files changed, 78 insertions, 0 deletions
diff --git a/frontend/src/app/_pages/playground/playground.component.css b/frontend/src/app/_pages/playground/playground.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_pages/playground/playground.component.css diff --git a/frontend/src/app/_pages/playground/playground.component.html b/frontend/src/app/_pages/playground/playground.component.html new file mode 100644 index 00000000..1dd7e331 --- /dev/null +++ b/frontend/src/app/_pages/playground/playground.component.html @@ -0,0 +1,18 @@ +<div class="position-fixed d-flex flex-col align-items-center justify-content-center" style="top: 50%; left: 50%; transform: translateX(-50%);"> + <div class="d-flex flex-row align-items-center justify-content-center mt-5"> + <h2 class="text-light my-2"> + Broj tačaka: + </h2> + <mat-slider class="mx-3" [(ngModel)]="backgroundFill" min="0" max="1" step="0.01" (input)="updateFillPref($event)"> + </mat-slider> + + </div> + <div class="d-flex flex-row align-items-center justify-content-center mt-5"> + <h2 class="text-light my-2"> + Animacija: </h2> + <mat-slide-toggle class="mx-3" [(ngModel)]="animateBackground" (change)="updateAnimPref()"></mat-slide-toggle> + + </div> +</div> +<div style="height: 5000px;"> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/playground/playground.component.spec.ts b/frontend/src/app/_pages/playground/playground.component.spec.ts new file mode 100644 index 00000000..bf66b27e --- /dev/null +++ b/frontend/src/app/_pages/playground/playground.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PlaygroundComponent } from './playground.component'; + +describe('PlaygroundComponent', () => { + let component: PlaygroundComponent; + let fixture: ComponentFixture<PlaygroundComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PlaygroundComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PlaygroundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/playground/playground.component.ts b/frontend/src/app/_pages/playground/playground.component.ts new file mode 100644 index 00000000..831132a4 --- /dev/null +++ b/frontend/src/app/_pages/playground/playground.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; +import { MatSliderChange } from '@angular/material/slider'; +import { CookieService } from 'ngx-cookie-service'; + +@Component({ + selector: 'app-playground', + templateUrl: './playground.component.html', + styleUrls: ['./playground.component.css'] +}) +export class PlaygroundComponent implements OnInit { + + animateBackground = true; + backgroundFill = 1.0; + + constructor(private cookie: CookieService) { } + + updateFillPref(event: MatSliderChange) { + this.backgroundFill = event.value!; + this.cookie.set('backgroundFill', "" + this.backgroundFill); + } + + updateAnimPref() { + this.cookie.set('animateBackground', "" + this.animateBackground); + } + + ngOnInit(): void { + if (this.cookie.check('animateBackground')) { + this.animateBackground = this.cookie.get('animateBackground') == 'true'; + } + if (this.cookie.check('backgroundFill')) { + this.backgroundFill = parseFloat(this.cookie.get('backgroundFill')); + } + } + +} |