Práctica 1 de solid completada

index.html

@@ -19,6 +19,9 @@
             <span id="fullName"></span>
         </p>
         <p id="photo"></p>
+
+        <h2>Contactos</h2>
+        <ul id="friends"></ul>
     </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://solid.github.io/solid-auth-client/dist/solid-auth-client.bundle.js"></script>

js/main.js

@@ -32,12 +32,18 @@ const VCARD = $rdf.Namespace('http://www.w3.org/2006/vcard/ns#');
 const store = $rdf.graph();
 const fetcher = new $rdf.Fetcher(store);
 
-$('#view').click(async function () {
+$('#view').click(() => showProfile());
+
+/* --------------
+   Mostramos información del perfil referenciado por la WebID
+*/
+async function showProfile() {
     // Cargamos los datos a partir del WebID
     const person = $('#webid').val();
     await fetcher.load(person);
     showPersonalData(person);
-});
+    showFriends(person);
+}
 
 // Información personal
 function showPersonalData(person) {
@@ -47,3 +53,22 @@ function showPersonalData(person) {
     $('#fullName').text(fullName && fullName.value);
     $('#photo').html($('<img>').attr('src', photoUrl && photoUrl.value).attr('width', '200px'));
 }
+
+/* -------------------------
+  Contactos (navegable)
+*/
+
+async function showFriends(person) {
+    // Mostramos su lista de amigos
+    const friends = store.each($rdf.sym(person), FOAF('knows'));
+    $('#friends').empty();
+    friends.forEach(async (friend) => {
+        await fetcher.load(friend); // con cada "load", la base de conocimiento ¡crece!
+        const fullName = store.any(friend, FOAF('name'));
+        $('#friends').append(
+            $('<li>').append(
+                $('<a>').text((fullName && fullName.value || friend.value))
+                    .click(() => $('#webid').val(friend.value))
+                    .click(() => showProfile(friend.value))));
+    });
+}
\ No newline at end of file