Merge pull request #4 from yarl/dev

version 0.4

Author: yarl

package.json

@@ -1,6 +1,6 @@
 {
   "name": "monumental",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "description": "Monumental app",
   "main": "src/index.js",

src/components/index.js

@@ -1,9 +1,11 @@
 import main from './main/main';
 import dashboard from './main/dashboard/dashboard';
+import list from './main/list/list';
 import monument from './main/monument/monument';
 
 export default () => {
   main();
   dashboard();
+  list();
   monument();
 };

src/components/main/dashboard/dashboard.html

@@ -1,3 +1,6 @@
-<md-content layout="column" layout-gt-sm="row" layout-align="start stretch" flex>
-  <a ui-sref="main.object({id: 'Q765569'})">Zamek Gryf (Q765569)<a/>
+<md-content layout="column" layout-align="start center" flex>
+  <div class="dashboard">
+    <a ui-sref="main.object({id: '765569'})">Zamek Gryf<a/><br />
+    <a ui-sref="main.list({id: '16970-in-54181'})">churches in silesian voivodeship<a/>
+  </div>
 </md-content>

src/components/main/dashboard/dashboard.scss

@@ -2,5 +2,8 @@
 @import '../../../styles/responsive';
 
 mo-dashboard {
-
+    .dashboard {
+        width: 980px;
+        max-width: 100%;
+    }
 }

src/components/main/list/list.html

@@ -0,0 +1,12 @@
+<md-content layout="column" layout-align="start center" flex>
+  <div class="list" layout="row" layout-align="start stretch">
+    <div class="list__container" flex>
+      <md-subheader class="md-no-sticky">List</md-subheader>
+      <md-list-item ng-repeat="item in $ctrl.list | orderBy: 'value'"
+                    ui-sref="main.object({id: item.name.value_id.substring(1)})">
+        <p>{{item.name.value}} <span class="muted">{{item.admin.value}}</span></p>
+      </md-list-item>
+    </div>
+    <leaflet ng-if="$ctrl.showMap" markers="$ctrl.map.markers" center="$ctrl.map.center" flex></leaflet>
+  </div>
+</md-content>

src/components/main/list/list.js

@@ -0,0 +1,75 @@
+import _ from 'lodash';
+
+import './list.scss';
+import template from './list.html';
+import '../../../images/marker.png';
+
+const ListComponent = {
+  controller: controller,
+  template: template
+};
+
+function controller($stateParams, $timeout, wikidata) {
+  let vm = this;
+  vm.map = {};
+
+  const ids = $stateParams.id.split('-in-').map(id => id[0] === 'Q' ? id : 'Q' + id);
+  const icon = {
+    iconUrl: 'assets/images/marker.png',
+    shadowUrl: undefined,
+    iconSize: [40, 40],
+    shadowSize: [0, 0],
+    iconAnchor: [20, 20],
+    shadowAnchor: [0, 0]
+  };
+
+  vm.map = {
+    center: {
+      lat: 51.686,
+      lng: 19.545,
+      zoom: 7
+    },
+    markers: {}
+  };
+
+  wikidata.getSPARQL(`SELECT ?item ?itemLabel  ?admin ?adminLabel ?coord WHERE {
+    ?item wdt:P31 wd:`+ ids[0] + ` .
+    ?item wdt:P131* wd:`+ ids[1] + ` .
+    ?item wdt:P131 ?admin .
+    ?item wdt:P625 ?coord .
+    SERVICE wikibase:label { bd:serviceParam wikibase:language "pl,en" }
+  }`).then(data => {
+    console.log(data)
+    vm.list = data.map(element => ({
+      name: {
+        value_id: element.item.value.substring(element.item.value.indexOf('/Q') + 1),
+        value: element.itemLabel.value
+      },
+      admin: {
+        value_id: element.admin.value.substring(element.admin.value.indexOf('/Q') + 1),
+        value: element.adminLabel.value
+      },
+      coord: element.coord.value ? element.coord.value.replace('Point(', '').replace(')', '').split(' ') : false
+    }));
+    return vm.list;
+  }).then(list => {
+    list.forEach(element => {
+      if(element.coord) {
+        vm.map.markers[element.name.value_id] = {
+          lat: +element.coord[1],
+          lng: +element.coord[0],
+          icon: icon
+        };
+      }
+    });
+    $timeout(() => {
+      vm.showMap = true;
+    });
+  });
+}
+
+export default () => {
+  angular
+    .module('monumental')
+    .component('moList', ListComponent);
+};

src/components/main/list/list.scss

@@ -0,0 +1,12 @@
+mo-list {
+    .list {
+        width: 980px;
+        max-width: 100%;
+    }
+    
+    .list__container {
+        max-height: calc(100vh - 110px);
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+}

src/components/main/main.js

@@ -10,7 +10,7 @@ const MainComponent = {
 function controller(wikidata, $state) {
   let vm = this;
 
-  vm.goToItem = (item) => $state.go('main.object', {id: item.title});
+  vm.goToItem = (item) => $state.go('main.object', {id: item.title.substring(1)});
   vm.querySearch = (text) => wikidata.getSearch(text);
   vm.search = {};
 

src/components/main/monument/monument.js

@@ -11,7 +11,7 @@ const MonumentComponent = {
 
 function controller($http, $q, $sce, $stateParams, $timeout, $window, WikiService, wikidata) {
   let vm = this;
-  const id = $stateParams.id;
+  const id = $stateParams.id[0] === 'Q' ? $stateParams.id : 'Q' + $stateParams.id;
 
   vm.getCommonsLink = getCommonsLink;
   vm.image = [];

src/index.js

@@ -55,6 +55,11 @@ function stateConfig($stateProvider, $urlRouterProvider) {
       template: `<mo-dashboard></mo-dashboard>`,
       resolve: {}
     })
+    .state('main.list', {
+      url: '/list/:id',
+      template: `<mo-list></mo-list>`,
+      resolve: {}
+    })
     .state('main.object', {
       url: '/object/:id?lang',
       template: `<mo-monument></mo-monument>`,