feat: show place of burial in the modal

Closes #5.
yarl · Oct 18, 2018 · 03b8c4b · 03b8c4b
1 parent 3d35e13
commit 03b8c4b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/src/models/Grave.js b/src/models/Grave.js
@@ -9,6 +9,7 @@ export default class Grave {
   description;
   birthDate;
   deathDate;
+  graveyard;
 
   constructor(grave) {
     this.id = grave.person.value
@@ -45,6 +46,14 @@ export default class Grave {
       };
     } catch (err) { /* safely ignore */ }
 
+    try {
+      this.graveyard = {
+        url: grave.graveyard.value,
+        value: grave.graveyardLabel.value,
+        lang: grave.graveyardLabel['xml:lang'],
+      };
+    } catch (err) { /* safely ignore */ }
+
     try {
       this.description = {
         value: grave.personDescription.value,

diff --git a/src/views/About.vue b/src/views/About.vue
@@ -5,14 +5,15 @@
       <h2 class="subtitle">
         This web application is using Wikidata data using SPARQL query listed below. You can find source code <a href="http://github.com/yarl/gravemap">on GitHub</a>.
       </h2>
-      <code>SELECT ?person ?personLabel ?personDescription ?coord ?graveImage ?image ?birthDate ?deathDate
+      <code>SELECT ?person ?personLabel ?personDescription ?graveyard ?graveyardLabel ?coord ?graveImage ?image ?birthDate ?deathDate
   WHERE {
     SERVICE wikibase:box {
       ?statement pq:P625 ?coord.
       bd:serviceParam wikibase:cornerWest &lt;coordinates&gt;.
       bd:serviceParam wikibase:cornerEast &lt;coordinates&gt;.
     }
     ?person p:P119 ?statement; wdt:P31 wd:Q5.
+    ?person wdt:P119 ?graveyard.
     OPTIONAL { ?person wdt:P1442 ?graveImage }
     OPTIONAL { ?person wdt:P18 ?image }
     OPTIONAL { ?person wdt:P569 ?birthDate }

diff --git a/src/views/Map.vue b/src/views/Map.vue
@@ -40,6 +40,13 @@
             </figure>
           </div>
           <div class="card-content">
+            <p class="graveyard-info"
+                  v-if="modalPerson.graveyard && modalPerson.graveyard.value">
+                <a :href="modalPerson.graveyard.url"
+                    target="_blank">
+                  {{ modalPerson.graveyard.value }}
+                </a>
+            </p>
             <div class="media">
               <div class="media-left">
                 <figure class="image is-48x48">
@@ -147,12 +154,13 @@
    * Computes SPARQL query for people with P119 statements
    */
   function getQuery() {
-    return `SELECT ?person ?personLabel ?personDescription ?coord ?graveImage ?image ?birthDate ?deathDate
+    return `SELECT ?person ?personLabel ?personDescription ?graveyard ?graveyardLabel ?coord ?graveImage ?image ?birthDate ?deathDate
       WHERE {
         SERVICE wikibase:box {
           ?statement pq:P625 ?coord. ${getBBox()}
         }
         ?person p:P119 ?statement; wdt:P31 wd:Q5.
+        ?person wdt:P119 ?graveyard.
         OPTIONAL { ?person wdt:P1442 ?graveImage }
         OPTIONAL { ?person wdt:P18 ?image }
         OPTIONAL { ?person wdt:P569 ?birthDate }
@@ -231,7 +239,7 @@
             (element, index, array) =>
             array.findIndex(t => t.person.value === element.person.value) === index)
           .map(grave => new Grave(grave));
-        console.info('Graves loaded:', this.graves);
+        // console.info('Graves loaded:', this.graves);
       });
   }
 
@@ -360,6 +368,10 @@
     max-height: 100%;
     margin: auto;
   }
+  .modal .card .graveyard-info {
+    margin-left: 64px;
+    margin-bottom: 5px;
+  }
   .modal .card .title.is-4 {
     margin-bottom: 0;
   }