Use profile picture in preference to avatar

the User#avatar property is both deprecated and broken - this removs all reference to it from this application, using the new profile_picture field instead. Depends on fablabbcn/smartcitizen-api#271 and will need some testing once that is deployed.
fablabbcn · Nov 20, 2023 · e752e8d · e752e8d
1 parent f5b6afd
commit e752e8d
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 23 deletions.
diff --git a/src/app/components/kit/showKit/showKit.html b/src/app/components/kit/showKit/showKit.html
@@ -1,10 +1,10 @@
 <section class="kit_data" change-content-margin>
   <div class="shadow"></div>
-  
+
   <div ng-if="vm.kitIsPrivate" class="kit_fixed bg-grey-lightest" move-down layout="row">
     <p>Device not found, or it has been set to private. <a href="https://forum.smartcitizen.me/" target="_blank">Contact us</a> for more information.</p>
   </div>
-  
+
   <div ng-if="!vm.kitIsPrivate || vm.kitBelongsToUser" class="over_map">
     <section class="kit_menu" stick>
       <section ng-if="!vm.kit" class="overlay-kitinfo"></section>
@@ -13,7 +13,7 @@
         <div flex="nogrow" layout="row" layout-align="start center">
           <div hide show-gt-xs class="kit_user">
             <md-tooltip md-direction="top">Visit user profile</md-tooltip>
-            <img ng-src="{{ vm.kit.owner.avatar || './assets/images/avatar.svg'}}" />
+            <img ng-src="{{ vm.kit.owner.profile_picture || './assets/images/avatar.svg'}}" />
             <a href="./users/{{vm.kit.owner.id}}"><span>{{ vm.kit.owner.username}}</span></a>
           </div>
           <div hide show-gt-xs class="kit_name">
@@ -187,7 +187,7 @@ <h6>{{ vm.sensorNames[vm.selectedSensor] }} </h6>
           </div>
         </div>
       </section>
-      
+
       <div class="kit_details" ng-if="vm.kit">
         <div class="kit_detailed_content_container" layout="row" layout-xs="column" layout-align="space-between start" layout-align-xs="space-between start">
 
@@ -248,7 +248,7 @@ <h2>We empower communities to better understand their environment</h2>
         <div class="kit_detailed_content_container" layout="column">
 
           <div layout="row" layout-align="start center">
-            <img class="ml-20 mr-30" style="height:100px; border-radius:50px;" ng-src="{{ vm.kit.owner.avatar || './assets/images/avatar.svg' }}" />
+            <img class="ml-20 mr-30" style="height:100px; border-radius:50px;" ng-src="{{ vm.kit.owner.profile_picture || './assets/images/avatar.svg' }}" />
 
             <div>
               <a href="./users/{{vm.kit.owner.id}}" class="kit_owner_usernameLink">

diff --git a/src/app/components/layout/layout.html b/src/app/components/layout/layout.html
@@ -42,7 +42,7 @@
       <md-menu ng-show="vm.isShown && vm.isLoggedin" >
         <md-button class="btn-small" ng-click="$mdMenu.open($event)" layout="column" layout-align="center center">
           <md-tooltip md-direction="bottom">Your profile</md-tooltip>
-          <img class="navbar_avatar_icon" ng-src="{{ vm.currentUser.profile_picture || vm.currentUser.avatar || './assets/images/avatar.svg' }}" />
+          <img class="navbar_avatar_icon" ng-src="{{ vm.currentUser.profile_picture || './assets/images/avatar.svg' }}" />
         </md-button>
 
         <md-menu-content ng-mouseleave="$mdMenu.close()">
@@ -67,7 +67,7 @@
   <md-sidenav class="md-sidenav-right" md-component-id="right" md-whiteframe="3">
 
     <md-toolbar layout="row" layout-align="end center">
-      <md-button ng-click="toggleRight()" layout="column" layout-align="center center"> 
+      <md-button ng-click="toggleRight()" layout="column" layout-align="center center">
         <img class="" ng-src="{{'./assets/images/menu2.svg' }}" />
       </md-button>
     </md-toolbar>

diff --git a/src/app/components/myProfile/Users.html b/src/app/components/myProfile/Users.html
@@ -2,7 +2,7 @@
   <div layout-padding layout-margin class="mt-50 mb-30 bg-white">
     <div style="max-width:500px">
       <div class="myProfile_form_avatar" layout="row" layout-align="start center">
-        <img ng-src="{{ vm.user.profile_picture || vm.user.avatar || './assets/images/avatar.svg' }}" class="myProfile_form_avatarImage" />
+        <img ng-src="{{ vm.user.profile_picture || './assets/images/avatar.svg' }}" class="myProfile_form_avatarImage" />
         <md-button class="md-raised md-accent" ngf-select ngf-change="vm.uploadAvatar($files)">CHANGE AVATAR</md-button>
       </div>
 

diff --git a/src/app/components/myProfile/myProfile.controller.js b/src/app/components/myProfile/myProfile.controller.js
@@ -238,15 +238,6 @@
 
       function uploadAvatar(fileData) {
         if(fileData && fileData.length) {
-          /*
-          file.getCredentials(fileData[0].name)
-            .then(function(res) {
-              file.uploadFile(fileData[0], res.key, res.policy, res.signature)
-                .success(function() {
-                  vm.user.avatar = file.getImageURL(res.key);
-                });
-              });
-          */
 
           // TODO: Is there a simpler way to patch the image to the API and use the response?
           // Something like:

diff --git a/src/app/components/myProfile/myProfile.html b/src/app/components/myProfile/myProfile.html
@@ -1,7 +1,7 @@
 <section class="myProfile_state" layout="column">
   <div class="profile_header myProfile_header dark">
     <div class="myProfile_header_container" layout="row">
-      <img ng-src="{{ vm.user.profile_picture || vm.user.avatar || './assets/images/avatar.svg' }}" class="profile_header_avatar myProfile_header_avatar" />
+      <img ng-src="{{ vm.user.profile_picture || './assets/images/avatar.svg' }}" class="profile_header_avatar myProfile_header_avatar" />
       <div class="profile_header_content">
         <h2 class="profile_header_name">{{ vm.user.username || 'No data' }}</h2>
         <div class="profile_header_location">

diff --git a/src/app/components/userProfile/userProfile.html b/src/app/components/userProfile/userProfile.html
@@ -1,7 +1,7 @@
 <section class="myProfile_state" layout="column">
   <div class="profile_header myProfile_header dark">
     <div class="myProfile_header_container" layout="row">
-      <img ng-src="{{ vm.user.profile_picture ||  vm.user.avatar || './assets/images/avatar.svg' }}" class="profile_header_avatar myProfile_header_avatar" />
+      <img ng-src="{{ vm.user.profile_picture || './assets/images/avatar.svg' }}" class="profile_header_avatar myProfile_header_avatar" />
       <div class="profile_header_content">
         <h2 class="profile_header_name">{{ vm.user.username || 'No data' }}</h2>
         <div class="profile_header_location">

diff --git a/src/app/core/constructors/user/user.constructor.js b/src/app/core/constructors/user/user.constructor.js
@@ -9,7 +9,7 @@
        * @param {Object} userData - User data sent from API
        * @property {number} id - User ID
        * @property {string} username - Username
-       * @property {string} avatar - Avatar URL of user
+       * @property {string} profile_picture - Avatar URL of user
        * @property {Array} kits - Kits that belongs to this user
        * @property {string} url - URL 
        * @property {string} city - User city
@@ -19,7 +19,6 @@
       function User(userData) {
         this.id = userData.id;
         this.username = userData.username;
-        this.avatar = userData.avatar;
         this.profile_picture = userData.profile_picture;
         this.kits = userData.devices;
         this.url = userData.url;

diff --git a/src/app/core/utils/kitUtils.service.js b/src/app/core/utils/kitUtils.service.js
@@ -139,7 +139,7 @@
           city: object.owner.location.city,
           country: COUNTRY_CODES[object.owner.location.country_code],
           url: object.owner.url,
-          avatar: object.owner.avatar
+          profile_picture: object.owner.profile_picture
         };
       }
 

diff --git a/src/app/core/utils/searchUtils.service.js b/src/app/core/utils/searchUtils.service.js
@@ -41,7 +41,7 @@
       function parseIcon(object, type) {
         switch(type) {
           case 'User':
-            return object.avatar;
+            return object.profile_picture;
           case 'Device':
             return 'assets/images/kit.svg';
           case 'Country':