Skip to content

Commit 898fa83

Browse files
yarlyarl
committed
feat(list): add autocomplete, style list
1 parent c91575b commit 898fa83

3 files changed

Lines changed: 115 additions & 39 deletions

File tree

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

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,34 @@
1-
<md-content layout="column" layout-align="start center" flex>
2-
<div class="list" layout="row" layout-align="start stretch">
1+
<md-content layout="row" layout-align="start stretch" flex>
2+
<div class="list" layout="column" layout-align="start stretch" flex="none">
3+
<!-- <div class="md-headline">{{$ctrl.listParams.object.label.pl}} in {{$ctrl.listParams.place.label.pl}}</div> -->
4+
<md-autocomplete
5+
md-input-name="autocompleteField"
6+
md-selected-item="$ctrl.search.selectedItem"
7+
md-search-text="$ctrl.search.text"
8+
md-items="item in $ctrl.querySearch($ctrl.search.text)"
9+
md-selected-item-change="$ctrl.goToItem(item)"
10+
md-item-text="item.label"
11+
md-min-length="1"
12+
placeholder="Search"
13+
md-menu-class="autocomplete-custom-template">
14+
<md-item-template>
15+
<strong>{{item.label}}</strong>
16+
<span>{{item.description}}</span>
17+
</md-item-template>
18+
</md-autocomplete>
319
<div class="list__container" flex>
4-
<md-subheader class="md-no-sticky">List</md-subheader>
5-
<md-list-item ng-repeat="item in $ctrl.list | orderBy: 'value'"
20+
<md-list-item class="md-2-line"
21+
ng-repeat="item in $ctrl.list | orderBy: 'name.value'"
622
ui-sref="main.object({id: item.name.value_id.substring(1)})">
7-
<p>{{item.name.value}} <span class="muted">{{item.admin.value}}</span></p>
23+
<div class="list__image" layout="row" layout-align="center center">
24+
<img ng-src="{{item.image}}" alt="{{item.name.value}}" ng-if="item.image">
25+
</div>
26+
<div class="md-list-item-text" layout="column">
27+
<p>{{item.name.value}}</p>
28+
<p class="muted">{{item.admin.value}}</p>
29+
</div>
830
</md-list-item>
931
</div>
10-
<leaflet ng-if="$ctrl.showMap" markers="$ctrl.map.markers" center="$ctrl.map.center" flex></leaflet>
1132
</div>
33+
<leaflet ng-if="$ctrl.showMap" markers="$ctrl.map.markers" center="$ctrl.map.center" flex></leaflet>
1234
</md-content>

‎src/components/main/list/list.js‎

Lines changed: 64 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,17 @@ const ListComponent = {
99
template: template
1010
};
1111

12-
function controller($stateParams, $timeout, wikidata) {
12+
function controller($state, $stateParams, $timeout, leafletData, wikidata) {
1313
let vm = this;
14+
const ids = $stateParams.id.split('-in-').map(id => id[0] === 'Q' ? id : 'Q' + id);
15+
1416
vm.map = {};
17+
vm.listParams = {};
18+
19+
vm.goToItem = (item) => item ? $state.go('main.list', { id: ids[0].substring(1) + '-in-' + item.id.substring(1) }) : false;
20+
vm.querySearch = (text) => wikidata.getSearch(text);
21+
vm.search = {};
1522

16-
const ids = $stateParams.id.split('-in-').map(id => id[0] === 'Q' ? id : 'Q' + id);
1723
const icon = {
1824
iconUrl: 'assets/images/marker.png',
1925
shadowUrl: undefined,
@@ -32,40 +38,68 @@ function controller($stateParams, $timeout, wikidata) {
3238
markers: {}
3339
};
3440

35-
wikidata.getSPARQL(`SELECT ?item ?itemLabel ?admin ?adminLabel ?coord WHERE {
36-
?item wdt:P31 wd:`+ ids[0] + ` .
41+
wikidata.getSearch(ids[1]).then(results => {
42+
vm.search.selectedItem = results.length ? results[0] : undefined;
43+
});
44+
45+
/*
46+
wikidata.getLabels(ids).then(labels => {
47+
angular.extend(vm.listParams, {
48+
object: {
49+
id: ids[0],
50+
label: labels[ids[0]]
51+
},
52+
place: {
53+
id: ids[1],
54+
label: labels[ids[1]]
55+
}
56+
});
57+
});
58+
*/
59+
60+
wikidata.getSPARQL(`SELECT DISTINCT ?item ?itemLabel ?admin ?adminLabel ?coord ?image WHERE {
61+
?item p:P1435 ?monument .
3762
?item wdt:P131* wd:`+ ids[1] + ` .
3863
?item wdt:P131 ?admin .
3964
?item wdt:P625 ?coord .
65+
OPTIONAL { ?item wdt:P18 ?image }
4066
SERVICE wikibase:label { bd:serviceParam wikibase:language "pl,en" }
4167
}`).then(data => {
42-
console.log(data)
43-
vm.list = data.map(element => ({
44-
name: {
45-
value_id: element.item.value.substring(element.item.value.indexOf('/Q') + 1),
46-
value: element.itemLabel.value
47-
},
48-
admin: {
49-
value_id: element.admin.value.substring(element.admin.value.indexOf('/Q') + 1),
50-
value: element.adminLabel.value
51-
},
52-
coord: element.coord.value ? element.coord.value.replace('Point(', '').replace(')', '').split(' ') : false
53-
}));
54-
return vm.list;
55-
}).then(list => {
56-
list.forEach(element => {
57-
if(element.coord) {
58-
vm.map.markers[element.name.value_id] = {
59-
lat: +element.coord[1],
60-
lng: +element.coord[0],
61-
icon: icon
62-
};
63-
}
68+
console.log(data)
69+
vm.list = data.map(element => ({
70+
name: {
71+
value_id: element.item.value.substring(element.item.value.indexOf('/Q') + 1),
72+
value: element.itemLabel.value
73+
},
74+
admin: {
75+
value_id: element.admin.value.substring(element.admin.value.indexOf('/Q') + 1),
76+
value: element.adminLabel.value
77+
},
78+
coord: element.coord.value ? element.coord.value.replace('Point(', '').replace(')', '').split(' ') : false,
79+
image: element.image ? element.image.value.replace('wiki/Special:FilePath', 'w/index.php?title=Special:Redirect/file') + '&width=75' : false
80+
}));
81+
return vm.list;
82+
}).then(list => {
83+
let bounds = [];
84+
list.forEach(element => {
85+
if (element.coord) {
86+
vm.map.markers[element.name.value_id] = {
87+
lat: +element.coord[1],
88+
lng: +element.coord[0],
89+
icon: icon
90+
};
91+
bounds.push([+element.coord[1], +element.coord[0]]);
92+
}
93+
});
94+
$timeout(() => {
95+
vm.showMap = true;
96+
leafletData.getMap().then(function (map) {
97+
if (bounds.length) {
98+
map.fitBounds(bounds, { padding: [25, 25] });
99+
}
100+
});
101+
});
64102
});
65-
$timeout(() => {
66-
vm.showMap = true;
67-
});
68-
});
69103
}
70104

71105
export default () => {

‎src/components/main/list/list.scss‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,32 @@
11
mo-list {
22
.list {
3-
width: 980px;
4-
max-width: 100%;
3+
width: 450px;
4+
height: calc(100vh - 105px);
55
}
66

77
.list__container {
8-
max-height: calc(100vh - 110px);
98
overflow-y: scroll;
109
overflow-x: hidden;
10+
11+
md-list-item.md-2-line {
12+
border-bottom: 1px solid #e5e5e5;
13+
}
14+
}
15+
16+
.list__image {
17+
width: 75px;
18+
min-width: 75px;
19+
height: 75px;
20+
background: #e5e5e5;
21+
margin: 15px 15px 15px 0;
22+
23+
img {
24+
max-width: 100%;
25+
max-height: 100%;
26+
}
27+
}
28+
29+
md-autocomplete {
30+
margin: 20px;
1131
}
1232
}

0 commit comments

Comments
 (0)