Commit a1d45b70 authored by Alexander's avatar Alexander

do the bli filter in an angular way

parent e32036eb
import {defaults as defaultControls, Control} from 'ol/control.js'
//import {default as ol} from 'ol';
//import {Control} from 'ol/control/Control'
import Map from 'ol/Map.js'
import View from 'ol/View.js'
import { isContentQueryHost } from '@angular/core/src/render3/util';
//import {defaults as defaultControls,Control} from 'ol/control.js'
export class FilterBLIDimensionsControl extends Control{
//our control is already in the DOM
//but due to styling issues is not shown correctly
isCollapsed:boolean = false;
basicStyle :string = ' width: 3em; height:3em; border-radius:20px; ';
collapsedStyle : string = ' margin-right:-1em; margin-left:-1em; ';
filterButtons : HTMLElement[]=[];
//the actual filter
filters : boolean[]=[];
//should be final, do not know how to do it
arr : string[] = [
'community','education','engagement','governance',
'health','housing','income','infrastructure',
'leisure','nature','satisfaction','security',
'wlbalance','work'
];
constructor(opt_options){
super({});
let rowContainer = document.createElement('div');
rowContainer.className='row justify-content-center';
rowContainer.setAttribute('style','position:absolute; bottom:80px; width:100%;');
let element = document.createElement('div');
//element.className='col-md-10 row justify-content-center';
element.classList.add('col-md-10');
element.classList.add('row');
element.classList.add('justify-content-center');
//we do not set the control class because it gives a background color
//which is unwanted
//element.className='ol-control';
//element.setAttribute("style","position: absolute; bottom:80px; left:20px;");
for(let i=0;i<this.arr.length;i++){
let button = this.make_bli_icon('bliicon-'+this.arr[i]+'.svg')
button.addEventListener('click',()=>{
this.clickSomeBLIIcon(i);
});
this.filterButtons.push(button);
this.filters.push(true);
element.appendChild(button);
if(i==6){
let expandToggle = document.createElement('div');
expandToggle.setAttribute('style','border-radius:20px;');
expandToggle.className='btn btn-primary m-3';
expandToggle.innerText='< Dimensionen des Guten Lebens >';
expandToggle.addEventListener('click',()=>this.clickToggleFilterIcons(this));
element.appendChild(expandToggle);
}
}
rowContainer.appendChild(element);
Control.call(this,{
element:rowContainer,
target: opt_options.target
});
this.rerender(this);
}
clickSomeBLIIcon(i:number){
console.log('clicked '+this.arr[i]);
this.filters[i]=!this.filters[i];
this.rerender(this);
}
make_bli_icon(file : string) : HTMLElement{
let icon=document.createElement('img');
icon.src='/assets/img/bli/'+file;
icon.setAttribute('style',this.basicStyle);
icon.className='mt-3';
return icon;
}
clickToggleFilterIcons = (instance : FilterBLIDimensionsControl) => {
console.log('click toggle filter icons');
instance.isCollapsed = !instance.isCollapsed;
this.rerender(instance);
}
rerender(instance:FilterBLIDimensionsControl) : void{
//applies the styles to the filter control
instance.filterButtons.forEach(function(element,index){
const activeStyle:string=' background-color: rgb(148, 193, 31); ';
const inActiveStyle:string=' background-color: white; '
element.setAttribute(
'style',
instance.basicStyle
+((instance.isCollapsed)?instance.collapsedStyle:'')
+((instance.filters[index])?activeStyle:inActiveStyle)
);
});
}
}
\ No newline at end of file
......@@ -26,13 +26,13 @@ import { CreateComponent } from './widgets/entry/create/create.component';
import { LoginComponent } from './widgets/modals/login/login.component';
/// staging.
import { MarkdownComponent } from './staging/markdown/markdown.component';
import { BliFilterComponent } from './widgets/bli-filter/bli-filter.component';
const routes: Routes = [
{ path: 'autosuggest', component: AutosuggestComponent },
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'alexander', component: BliFilterComponent },
{ path: 'auth', component: AuthComponent },
{ path: 'help', component: HelpComponent },
{ path: 'error', component: ErrorComponent },
......
......@@ -67,6 +67,7 @@ import { NetworkpartnerComponent } from './widgets/entry/networkpartner/networkp
import { OsminformationComponent } from './widgets/entry/osminformation/osminformation.component';
import { GoodplaceComponent } from './widgets/entry/goodplace/goodplace.component';
import { EditsourceComponent } from './widgets/modals/editsource/editsource.component';
import { BliFilterComponent } from './widgets/bli-filter/bli-filter.component';
enableProdMode();
......@@ -123,6 +124,7 @@ enableProdMode();
OsminformationComponent,
GoodplaceComponent,
EditsourceComponent,
BliFilterComponent,
//MatAutocompleteModule,
],
imports: [
......
......@@ -11,7 +11,7 @@ import { isArray } from 'util';
providedIn: 'root'
})
export class BliService {
dimensions: Array<BliDimension>;
public dimensions: Array<BliDimension>;
constructor(
private logger: LogService,
private authService: AuthService,
......
......@@ -29,12 +29,6 @@ import { OsmNodeService } from './osm-node.service';
//import { control } from 'ol/control.js';
//import ol from 'ol';
import {FilterBLIDimensionsControl} from '../alexander/FilterBLIDimensonsControl';
//OlTransforms.transformExtent(extent,'EPSG:3857','EPSG:4326');
@Injectable({
......@@ -560,12 +554,7 @@ export class MapService {
})
])
*/
.extend([this.attribution,new FilterBLIDimensionsControl(
{
source:this.source,
target:'map'
}
)])
.extend([this.attribution])
});
......
.bli-wrap{
/*line-height:2em;*/
/*transition:line-height 0.5s;*/
}
.img-basic{
border-radius: 20px;
}
.not-collapsed-img{
width: 3em;
height: 3em;
transition: width 0.5s;
/*
transition: height 0.5s;
*/
}
.collapsed-img{
transition: width 0.5s;
width: 1em;
height: 3em;
/*
display: none;
*/
}
.not-collapsed{
opacity: 1.0;
transition: opacity 0.5s;
}
.collapsed{
/*line-height:2.5em;*/
opacity: 0.5;
transition: opacity,display 0.5s;
/*width: 0px;*/
display:none;
}
.bli-filter-wrap{
/*
margin: 0 auto 54px auto;
padding: 30px;
/*
background-color: rgba(255,255,255,0.85);
color: black;
box-shadow: 0px 0px 4px rgba(127,127,127,0.7);
width: 400px;
position: relative;
*/
z-index:2;
position: absolute;
bottom: 80px;
width: 100%;
}
.activeStyle{
background-color: rgb(148, 193, 31);
}
.inActiveStyle{
background-color: white;
}
\ No newline at end of file
<div class="bli-filter-wrap" >
<div class="bli-wrap" >
<div class="row justify-content-center d-flex flex-nowrap">
<div class="col-md-2"></div>
<div class="col-md-3 row justify-content-center" [ngClass]="{'collapsed':_collapsed, 'not-collapsed':!_collapsed}">
<div *ngFor="let dim of bli_dimensions().slice(0,6)" class="mt-3 bli-icon-filter" (click)="toggleIcon(dim)">
<img src="{{make_bli_img_src(dim)}}" class="img-basic" [ngClass]="{'collapsed-img':_collapsed, 'not-collapsed-img':!_collapsed, 'activeStyle': isActive(dim), 'inActiveStyle':!isActive(dim)}"/>
<span class="{{bliService.getIcon(dim.name)}}" style="width: 3em; height:3em; border-radius:20px; "></span>
</div>
</div>
<div
class="col-md-2 btn btn-primary m-3 row justify-content-center"
(click)="clickHandler()"
style="font-weight:bold; font-size:0.8em; border-radius:30px;"
>
<table class="col">
<tr>
<td style='font-weight:bold; font-size:1.4em;'> « </td>
<td> Dimensionen <br> des Guten Lebens </td>
<td style='font-weight:bold; font-size:1.4em;'> » </td>
</tr>
</table>
</div>
<div class="col-md-3 row justify-content-center" [ngClass]="{'collapsed':_collapsed, 'not-collapsed':!_collapsed}">
<div *ngFor="let dim of bli_dimensions().slice(6,12)" class="mt-3 bli-icon-filter" (click)="toggleIcon(dim)">
<img src="{{make_bli_img_src(dim)}}" class="img-basic" [ngClass]="{'collapsed-img':_collapsed, 'not-collapsed-img':!_collapsed, 'activeStyle': isActive(dim), 'inActiveStyle':!isActive(dim)}"/>
<span class="{{bliService.getIcon(dim.name)}}" style="width: 3em; height:3em; border-radius:20px; "></span>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BliFilterComponent } from './bli-filter.component';
describe('BliFilterComponent', () => {
let component: BliFilterComponent;
let fixture: ComponentFixture<BliFilterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BliFilterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BliFilterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { BliService } from '../../services/bli.service';
import { MapService } from '../../services/map.service';
@Component({
selector: 'app-bli-filter',
templateUrl: './bli-filter.component.html',
styleUrls: ['./bli-filter.component.css']
})
export class BliFilterComponent implements OnInit {
basicStyle :string = ' width: 3em; height:3em; border-radius:20px; ';
filters:Map<string,boolean> = new Map<string,boolean>();
constructor(private bliService: BliService,private mapService : MapService) {
for(let s in this.bli_dimensions()){
this.filters.set(s,false);
}
}
ngOnInit() {
}
_wide:boolean;
_collapsed:boolean=false;
isActive(dim:string):boolean{
return this.filters.get(dim);
}
clickHandler():void{
this._wide = !this._wide;
this._collapsed = !this._collapsed;
}
make_bli_img_src(name:string):string{
return '/assets/img/bli/bliicon-'+name+".svg";
}
make_bli_icon(file : string) : HTMLElement{
let icon=document.createElement('img');
icon.src='/assets/img/bli/'+file;
icon.setAttribute('style',this.basicStyle);
icon.className='mt-3 bli-icon-filter';
return icon;
}
bli_dimensions() : string[]{
return [
'community','education','engagement','governance',
'health','housing','income','infrastructure',
'leisure','nature','satisfaction','security',
'wlbalance','work'
];
}
toggleIcon(i:string){
console.log("toggle "+i);
this.filters.set(i,!this.filters.get(i));
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment