From 4714f04a804ec893202cd368b4e7569f58f23f34 Mon Sep 17 00:00:00 2001
From: Josef Citrine <josefcitrine@googlemail.com>
Date: Tue, 7 Jun 2016 19:31:32 +0100
Subject: [PATCH] Added follower count

---
 app/Http/Controllers/Api/Web/ArtistsController.php |  6 +++++-
 public/templates/artists/_show_layout.html         |  7 +++++++
 resources/assets/styles/content.less               | 10 +++++++---
 resources/assets/styles/mobile.less                |  5 +++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/Http/Controllers/Api/Web/ArtistsController.php b/app/Http/Controllers/Api/Web/ArtistsController.php
index 2a9f2893..1f3015fc 100644
--- a/app/Http/Controllers/Api/Web/ArtistsController.php
+++ b/app/Http/Controllers/Api/Web/ArtistsController.php
@@ -28,6 +28,7 @@ use Poniverse\Ponyfm\Http\Controllers\ApiControllerBase;
 use Poniverse\Ponyfm\Models\Image;
 use Poniverse\Ponyfm\Models\Track;
 use Poniverse\Ponyfm\Models\User;
+use Poniverse\Ponyfm\Models\Follower;
 use Illuminate\Support\Facades\App;
 use Illuminate\Support\Facades\Input;
 use Illuminate\Support\Facades\Response;
@@ -173,6 +174,9 @@ class ArtistsController extends ApiControllerBase
         $palette = ColorThief::getPalette($user->getAvatarUrl(Image::SMALL), 2);
         $formatted_palette = array_map("Helpers::rgb2hex", $palette);
 
+        $followers = Follower::where('artist_id', $user->id)
+            ->count();
+
         return Response::json([
             'artist' => [
                 'id' => $user->id,
@@ -185,7 +189,7 @@ class ArtistsController extends ApiControllerBase
                 ],
                 'avatar_colors' => $formatted_palette,
                 'created_at' => $user->created_at,
-                'followers' => [],
+                'followers' => $followers,
                 'following' => [],
                 'latest_tracks' => $latestTracks,
                 'comments' => $comments,
diff --git a/public/templates/artists/_show_layout.html b/public/templates/artists/_show_layout.html
index c63efdc5..68709e7c 100644
--- a/public/templates/artists/_show_layout.html
+++ b/public/templates/artists/_show_layout.html
@@ -4,6 +4,13 @@
         <img src="{{artist.avatars.normal}}">
         <div class="artist-right">
             <h1>{{artist.name}}<i class="fa fa-star admin-star" ng-show="::artist.isAdmin" data-title="Admin" bs-tooltip></i></h1>
+            <p class="follower-count">
+                <ng-pluralize count="artist.followers"
+                when="{'0': 'No followers',
+                     'one': '1 follower',
+                     'other': '{} followers'}">
+                </ng-pluralize>
+            </p>
             <a href="#" class="btn btn-default" ng-class="{'btn-primary': !artist.user_data.is_following}" ng-show="auth.isLogged && auth.user.id != artist.id" pfm-eat-click ng-click="toggleFollow()">
                 <span ng-if="!artist.user_data.is_following">Follow</span>
                 <span ng-if="artist.user_data.is_following">Following!</span>
diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less
index d0ec0316..8afa958d 100644
--- a/resources/assets/styles/content.less
+++ b/resources/assets/styles/content.less
@@ -158,17 +158,21 @@
         margin-left: 165px;
         margin-top: 5px;
 
-        > h1 {
+        > h1, .follower-count {
           font-size: 20pt;
           color: #fff;
           background: rgba(0,0,0,0.5);
-          display: inline;
           padding: 5px 10px;
+          margin-bottom: 5px;
+          display: table;
+        }
+        
+        > .follower-count {
+          font-size: 14pt;
         }
 
         > .btn {
           display: table;
-          margin-top: 10px;
         }
       }
     }
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index d2f175d1..9b374df3 100644
--- a/resources/assets/styles/mobile.less
+++ b/resources/assets/styles/mobile.less
@@ -191,6 +191,11 @@
         margin-top: 15px !important;
         text-align: center;
 
+        > h1, .follower-count {
+          margin-left: auto;
+          margin-right: auto;
+        }
+
         > .btn {
           margin-left: auto;
           margin-right: auto;