Finished friends manager

linkeddata · Mar 22, 2015 · 8a01349 · 8a01349
1 parent 664ae56
commit 8a01349
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 17 deletions.
diff --git a/app/app.js b/app/app.js
@@ -53,7 +53,7 @@ angular.module( 'App', [
 })
 .controller( 'MainCtrl', function MainCtrl ( $scope, $location, $http, $timeout, $state, $stateParams ) {
   $scope.showMenu = true;
-  $scope.appuri = window.location.host+window.location.pathname;
+  $scope.appuri = window.location.origin;
   $scope.loginTLSButtonText = 'With certificate';
   $scope.loginRSAButtonText = 'With key store';
   $scope.webid = '';
@@ -276,7 +276,7 @@ angular.module( 'App', [
           if (forWebID) {
             extra = 'additional';
           }
-          Notifier.error('Failed to fetch '+extra+' profile '+uri+'. HTTP '+xhr.status);
+          console.log('Failed to fetch '+extra+' profile '+uri+'. HTTP '+xhr.status);
           if (!$scope.profiles[webid].fullname) {
             $scope.profiles[webid].fullname = webid;
           }

diff --git a/app/friends/edit-friends.tpl.html b/app/friends/edit-friends.tpl.html
@@ -18,7 +18,10 @@ <h2 id="profileDesc">You must <a href="#/login" class="white-text show-link">log
 
   <div class="row card-panel" ng-show="authenticated && profile.webid && !profile.loading">
     <div class="col s12">
-      <h3 class="valign-wrapper align-left"><span aria-hidden="true" class="mdi-action-account-child valign right-10"></span><a href="#/view?webid={{profile.webid|encodeURL}}" ng-show="profile.fullname">{{profile.fullname.value}}'s</a>&nbsp;Friends</h3>
+      <h3 class="valign-wrapper align-left">
+        <span aria-hidden="true" class="mdi-action-account-child valign right-10"></span>
+        <span class="right-10">Friends of</span><a href="#/view?webid={{profile.webid|encodeURL}}" ng-show="profile.fullname" class="truncate">{{profile.fullname.value}}</a>
+      </h3>
     </div>
     <div class="input-field col s12" ng-repeat="(id, friend) in profile.friends track by $index">
       <form>

diff --git a/app/friends/friends.js b/app/friends/friends.js
@@ -7,7 +7,7 @@ angular.module( 'App.friends', [
     views: {
       "main": {
         controller: 'EditFriendsCtrl',
-        templateUrl: 'app/friends/edit-friends.tpl.html'
+        templateUrl: 'app/friends/view-friends.tpl.html'
       }
     },
     data:{ pageTitle: 'Edit friends' }
@@ -31,6 +31,7 @@ angular.module( 'App.friends', [
 .controller( 'EditFriendsCtrl', function EditFriendsCtrl( $scope, $state, $location, $upload, $stateParams ) {
   $scope.profile = {};
   $scope.form = {};
+  $scope.editor = true;
 
   $scope.Befriend = function() {
     if (!$scope.profile.friends) {
@@ -90,11 +91,23 @@ angular.module( 'App.friends', [
       $scope.profile = $scope.$parent.profile;
     }
   }
+
+  $scope.$watch('profile.friends', function(newVal, oldVal) {
+    if (newVal !== undefined) {
+      newVal.forEach(function(webid) {
+        if (webid && webid.value && !$scope.$parent.profiles[webid.value]) {
+          $scope.$parent.getProfile(webid.value, false, false);
+        }
+      });
+    }
+  });
+
 })
 
 .controller( 'ViewFriendsCtrl', function ViewFriendsCtrl( $scope, $state, $location, $upload, $stateParams ) {
   $scope.form = {};
   $scope.profile = {};
+  $scope.editor = false;
 
   $scope.viewFriends = function(webid) {
     if (!$scope.$parent.profiles) {
@@ -133,7 +146,51 @@ angular.module( 'App.friends', [
     }
   }
 
+  $scope.$watch('profile.friends', function(newVal, oldVal) {
+    if (newVal !== undefined) {
+      newVal.forEach(function(webid) {
+        if (webid && webid.value && !$scope.$parent.profiles[webid.value]) {
+          $scope.$parent.getProfile(webid.value, false, false);
+        }
+      });
+    }
+  });
 });
+// .directive('addFriend', function () {
+//     return {
+//         restrict: 'AE',
+//         transclude: true,
+//         template: '<input id="newfriend" type="tel" ng-model="friend.value" ng-blur="updateObject(friend)" ng-disabled="friend.locked">'+
+//                   '<label for="newfriend" ng-class="{active: friend.value.length > 0}">WebID{{friend.locked?"...updating":""}}</label>'+
+//                   '<div pick-source obj="friend" ng-if="friend.picker"></div>',
+//         link: function($scope, $element, $attrs) {
+//           $('#location-picker').openModal();
+//           $scope.$parent.overlay = true;
+
+//           $scope.setWhy = function(uri) {
+//             $scope.obj.statement['why']['uri'] = $scope.obj.statement['why']['value'] = uri;
+//             console.log("Set Why to:"+uri);
+//             console.log($scope.obj.statement);
+//             if ($scope.obj.statement.predicate.value == FOAF('img').value || $scope.obj.statement.predicate.value == FOAF('depiction').value) {
+//               console.log("Supposed to save picture");
+//               $scope.$parent.savePicture();
+//             } else if ($scope.obj.statement.predicate.value == UI('backgroundImage').value) {
+//               console.log("Supposed to save bgpicture");
+//               $scope.$parent.saveBackground();
+//             } else {
+//               console.log("Supposed to update obj");
+//               $scope.$parent.updateObject($scope.obj);
+//             }
+//             $scope.cancel();
+//           }
+//           $scope.cancel = function() {
+//             $scope.$parent.overlay = false;
+//             $scope.obj.picker = false;
+//             $('#location-picker').closeModal();
+//           }
+//         }
+//     };
+// });
 
 
 
diff --git a/app/friends/view-friends.tpl.html b/app/friends/view-friends.tpl.html
@@ -10,22 +10,64 @@ <h5>This profile does not contain any friends.</h5>
   </div>
 
   <div class="row" ng-show="profile.webid && !profile.loading">
-    <div class="col card-panel s12 center">
-      <h3 class="valign-wrapper align-left"><span aria-hidden="true" class="mdi-action-account-child valign right-10"></span><span ng-show="profile.fullname">{{profile.fullname.value}}'s </span> Friends</h3>
-    </div>
-
-    <div class="col s12 card-panel" ng-repeat="(id, friend) in profile.friends track by $index">
-
-
-        <span>{{friend.value}}</span>
-
-
+    <div class="col s12 card-panel center">
+      <ul class="collection">
+        <li class="collection-item title">
+          <h3 class="valign-wrapper align-left truncate"><span aria-hidden="true" class="mdi-action-account-child valign right-10"></span>
+          <span class="truncate">Friends of<a href="#/view?webid={{profile.webid|encodeURL}}" ng-show="profile.fullname" class="left-10">{{profile.fullname.value}}</a></span>
+          </h3>
+        </li>
+        <li class="collection-item avatar valign-wrapper" ng-repeat="(id, friend) in profile.friends track by $index">
+          <div class="small-circle valign">
+            <img ng-hide="profiles[friend.value].picture.value" ng-src="images/generic_photo.png" alt="Picture of {{profiles[friend.value].fullname.value}}">
+            <img ng-show="profiles[friend.value].picture.value" ng-src="{{profiles[friend.value].picture.value}}" alt="Picture of {{profiles[friend.value].fullname.value}}">
+          </div>
+          <div class="friend-details valign">
+            <h5 class="truncate" ng-show="profiles[friend.value].fullname">{{profiles[friend.value].fullname.value}}</h5>
+            <div>
+              <span class="truncate left" ng-show="profiles[friend.value].emails.length > 0">{{profiles[friend.value].emails[0].value}}</span>
+              <br>
+              <div ng-hide="editor" class="left truncate"><a href="{{friend.value}}" target="_blank">{{friend.value}}</a></div>
+              <form ng-show="editor">
+                <div class="input-field">
+                <input id="friend_{{id}}" type="tel" ng-model="friend.value" ng-blur="updateObject(friend)" ng-disabled="friend.locked">
+                <label for="friend_{{id}}" ng-class="{active: friend.value.length > 0}">Friend's WebID{{friend.locked?'...updating':''}}</label>
+                <div pick-source obj="friend" ng-if="friend.picker"></div>
+              </div>
+            </form>
+            </div>
+          </div>
+          <div class="right valign left-10" ng-show="editor">
+              <a href="#!" class="secondary-content" ng-click="Unfriend(id)"><span aria-hidden="true" class="mdi-action-delete medium blue-text"></span></a>
+            </div>
+        </li>
+        <!-- <li class="collection-item" ng-show="editor">
+          <form>
+            <div class="input-field">
+            <a class="prefix" ng-click="Unfriend(id)"><span aria-hidden="true" class="mdi-action-delete"></span>
+              <span class="sr">Delete Friend</span>
+            </a>
+            <input id="friend_{{id}}" type="tel" ng-model="friend.value" ng-blur="updateObject(friend)" ng-disabled="friend.locked">
+            <label for="friend_{{id}}" ng-class="{active: friend.value.length > 0}">Friend's WebID{{friend.locked?'...updating':''}}</label>
+            <div pick-source obj="friend" ng-if="friend.picker"></div>
+          </div>
+        </form>
+        </li> -->
+      </ul>
     </div>
-    <div class="col s12" ng-show="authenticated">
+    <div class="col s12" ng-show="authenticated && !editor">
       <a class="btn blue" ng-click="editFriends()"><span aria-hidden="true" class="mdi-editor-mode-edit left right-10"></span>
         <span class="sr">Switch to editor </span>Switch to editor
       </a>
     </div>
+    <div class="col s12" ng-show="authenticated && editor">
+      <a class="btn blue" ng-click="Befriend()"><span aria-hidden="true" class="mdi-content-add left right-10"></span>
+        <span class="sr">Add </span>Friend
+      </a>
+      <a class="btn blue" ng-click="viewFriends()"><span aria-hidden="true" class="mdi-action-done left right-10"></span>
+        <span class="sr">Switch to viewer </span>Switch to viewer
+      </a>
+    </div>
   </div>
 
   <div ng-if="!profile.webid">

diff --git a/css/style.css b/css/style.css
@@ -305,6 +305,41 @@ form {
 	height: 200px;
 }
 
+.small-circle {
+  overflow:hidden;
+  position:absolute;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  background-clip: padding-box;
+  max-height: 100px;
+  width: 100px;
+  height: auto;
+}
+.small-circle img {
+  max-width: 100px;
+  height: 100px;
+  width: auto;
+}
+.collection-item {
+  min-height: 120px;
+}
+.collection-item.title {
+  height: 70px;
+}
+.friend-details {
+  position: relative;
+  padding-left: 120px;
+  width: 100%;
+  text-align: left;
+  line-height: 1.5rem;
+}
+.truncate {
+  width: 100%;
+}
+.medium {
+  font-size: 2rem;
+}
 .fixed {
 	position: fixed!important;
 }
@@ -324,6 +359,9 @@ form {
 .right-10 {
 	margin-right: 10px!important;
 }
+.left-10 {
+  margin-left: 10px!important;
+}
 .pad-right-20 {
 	padding-right: 20px!important;
 }

diff --git a/index.html b/index.html
@@ -38,8 +38,6 @@ <h1>{{pageTitle}}
 
           <ul class="side-nav blue-grey darken-3" id="left-menu">
             <li class="blue accent-2" ng-show="authenticated"><profile-card></profile-card></li>
-            <li>
-              <a href="#/view" class="white-text valign-wrapper align-left"><span aria-hidden="true" class="mdi-action-account-box prefix valign inline-block right-10"></span><span class="valign inline-block">View profile</span></a></li>
             <li>
               <a href="#/edit/profile" class="white-text valign-wrapper align-left"><span aria-hidden="true" class="mdi-action-account-box prefix valign inline-block right-10"></span><span class="valign inline-block">Edit profile</span></a></li>
             <li>