Skip to content

Commit 1c06717

Browse files
yarlyarl
committed
feat(list): add filtering, map opimization
1 parent b018010 commit 1c06717

File tree

10 files changed

+356
-170
lines changed

10 files changed

+356
-170
lines changed

‎src/components/main/list/list.html

+51-30
Original file line numberDiff line numberDiff line change
@@ -63,17 +63,43 @@ <h4 class="header__subtitle md-headline">{{ ::$ctrl.place.labels[$ctrl.lang] ||
6363
<div class="list__subheader"
6464
layout="row" layout-align="start center"
6565
ng-if="$ctrl.mobile.fullHeader">
66-
<!--<md-input-container md-no-float>
67-
<input type="text" ng-model="$ctrl.filters.name" placeholder="Name">
68-
</md-input-container>-->
69-
<span ng-if="$ctrl.showMap">{{$ctrl.list.length}} results</span>
70-
<span ng-if="!$ctrl.showMap">Loading...</span>
66+
<span ng-if="$ctrl.loading !== 'data'">{{$ctrl.list.length}} results</span>
7167
<div flex></div>
72-
<!--
73-
<md-button class="md-icon-button md-primary" aria-label="Open in Wikidata">
74-
<md-icon>filter_list</md-icon>
75-
</md-button>
76-
-->
68+
<div class="list__filter" layout="row" layout-align="center center">
69+
70+
<md-input-container>
71+
<label>Heritage status</label>
72+
<md-select ng-model="$ctrl.filter.heritage" ng-change="$ctrl.filterMap()">
73+
<md-option ng-value=""></md-option>
74+
<md-option ng-value="1">Yes</md-option>
75+
<md-option ng-value="0">No</md-option>
76+
</md-select>
77+
</md-input-container>
78+
79+
<md-input-container>
80+
<label>Image</label>
81+
<md-select ng-model="$ctrl.filter.image" ng-change="$ctrl.filterMap()">
82+
<md-option ng-value=""></md-option>
83+
<md-option ng-value="1">Yes</md-option>
84+
<md-option ng-value="0">No</md-option>
85+
</md-select>
86+
</md-input-container>
87+
88+
<md-input-container>
89+
<label>Type</label>
90+
<md-select ng-model="$ctrl.filter.instance" ng-change="$ctrl.filterMap()">
91+
<md-option ng-value=""><span class="muted">Any</span></md-option>
92+
<md-option ng-value="instance.value"
93+
ng-repeat="instance in $ctrl.dict.instances">
94+
{{ instance.label }}
95+
</md-option>
96+
</md-select>
97+
</md-input-container>
98+
<md-button class="md-button md-primary" aria-label="Open in Wikidata" ng-if="false">
99+
<md-icon>filter_list</md-icon>
100+
Filter
101+
</md-button>
102+
</div>
77103
<md-button class="md-icon-button" aria-label="Hide header" hide-gt-xs
78104
ng-click="$ctrl.mobile.fullHeader = false">
79105
<md-icon>keyboard_arrow_up</md-icon>
@@ -88,9 +114,10 @@ <h4 class="header__subtitle md-headline">{{ ::$ctrl.place.labels[$ctrl.lang] ||
88114
ng-swipe-left="$ctrl.showMyMap()">
89115
<div class="list__container" flex
90116
layout="column" layout-align="start stretch">
91-
<md-virtual-repeat-container flex>
117+
<md-virtual-repeat-container md-top-index="$ctrl.topIndex" flex>
92118
<md-list-item class="md-2-line"
93-
md-virtual-repeat="item in $ctrl.list | orderBy: 'name.value'"
119+
md-virtual-repeat="item in $ctrl.list"
120+
ng-class = "{ 'muted' : $ctrl.highlighted === item.name.value_id }"
94121
ui-sref="main.object({id: item.name.value_id.substring(1)})">
95122
<div class="list__image" layout="row" layout-align="center center">
96123
<img ng-src="{{ item.image }}" alt="{{ item.name.value }}" ng-if="item.image">
@@ -101,23 +128,9 @@ <h4 class="header__subtitle md-headline">{{ ::$ctrl.place.labels[$ctrl.lang] ||
101128
<p class="muted">{{ item.admin.value }}</p>
102129
</div>
103130
</md-list-item>
104-
<md-list-item class="md-2-line" ng-if="!$ctrl.showMap">
105-
<div class="list__image" layout="row" layout-align="center center"></div>
106-
<div class="md-list-item-text" layout="column"></div>
107-
</md-list-item>
108-
<md-list-item class="md-2-line" ng-if="!$ctrl.showMap">
109-
<div class="list__image" layout="row" layout-align="center center"></div>
110-
<div class="md-list-item-text" layout="column"></div>
111-
</md-list-item>
112-
<md-list-item class="md-2-line" ng-if="!$ctrl.showMap">
113-
<div class="list__image" layout="row" layout-align="center center"></div>
114-
<div class="md-list-item-text" layout="column"></div>
115-
</md-list-item>
116-
<md-list-item class="md-2-line" ng-if="!$ctrl.showMap">
117-
<div class="list__image" layout="row" layout-align="center center"></div>
118-
<div class="md-list-item-text" layout="column"></div>
119-
</md-list-item>
120-
<md-list-item class="md-2-line" ng-if="!$ctrl.showMap">
131+
<md-list-item class="md-2-line"
132+
ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
133+
ng-if="$ctrl.loading === 'data'">
121134
<div class="list__image" layout="row" layout-align="center center"></div>
122135
<div class="md-list-item-text" layout="column"></div>
123136
</md-list-item>
@@ -126,7 +139,15 @@ <h4 class="header__subtitle md-headline">{{ ::$ctrl.place.labels[$ctrl.lang] ||
126139
<div class="list__swiper" ng-click="$ctrl.showMyMap()"></div>
127140
</div>
128141
<div class="list__map" flex flex-xs="50">
129-
<leaflet ng-if="$ctrl.showMap" flex
142+
<div class="list__map--loading"
143+
layout="column" layout-align="center center"
144+
ng-if="$ctrl.loading">
145+
<div class="cssload-container">
146+
<div class="cssload-speeding-wheel"></div>
147+
</div>
148+
<p>Loading data</p>
149+
</div>
150+
<leaflet ng-if="$ctrl.map" flex
130151
markers="$ctrl.map.markers"
131152
markers-watch-options="$ctrl.map.markersWatchOptions"
132153
layers="::$ctrl.map.layers"

0 commit comments

Comments
 (0)