[UI] create a page with contributor details #88 (#200)

README.md

@@ -4,8 +4,7 @@ Internal and Public web service provider of the Department of Computer Engineeri
 
 ## Team of Developers
 
-
-To be updated
+- [https://portal.ce.pdn.ac.lk/contributors](https://portal.ce.pdn.ac.lk/contributors)
 
 ## Useful Commands and Instructions
 
@@ -133,6 +132,8 @@ sudo sh ./scripts/deploy-prod.sh
 
 Thanks to all the contributors who have helped with this project!
 
-<a href="https://github.com/cepdnaclk/portal.ce.pdn.ac.lk/graphs/contributors">
+<a href="https://portal.ce.pdn.ac.lk/contributors">
+  https://portal.ce.pdn.ac.lk/contributors
+  <br/><br/>
   <img src="https://contrib.rocks/image?repo=cepdnaclk/portal.ce.pdn.ac.lk" />
-</a>
+</a>

app/Http/Controllers/Frontend/HomeController.php

@@ -2,6 +2,8 @@
 
 namespace App\Http\Controllers\Frontend;
 
+use App\Services\DepartmentDataService;
+
 /**
  * Class HomeController.
  */
@@ -14,4 +16,32 @@ public function index()
     {
         return view('frontend.index');
     }
-}
+
+    /**
+     * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
+     */
+    public function terms()
+    {
+        return view('frontend.pages.terms');
+    }
+
+    /**
+     * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
+     */
+    public function contributors()
+    {
+        $projects = [
+            '/projects/v1/co225/E20/Computer-Engineering-Portal/',
+        ];
+
+        $data = [];
+        $api = new DepartmentDataService();
+
+        foreach ($projects as  $key => $url) {
+            $projectData = collect($api->getProjectData($url));
+            array_push($data, $projectData);
+        }
+
+        return view('frontend.pages.contributors', compact('data'));
+    }
+}

app/Services/DepartmentDataService.php

@@ -46,6 +46,20 @@ function () {
         return in_array($userEmail, $emails);
     }
 
+
+    public function getProjectData($url)
+    {
+
+        $project = Cache::remember(
+            "project_$url",
+            config('constants.department_data.cache_duration'),
+            function () use ($url) {
+                return  $this->getData($url);
+            }
+        );
+        return $project;
+    }
+
     private function getData($endpoint)
     {
         $url = config('constants.department_data.base_url') . $endpoint;
@@ -61,4 +75,4 @@ private function getData($endpoint)
             return [];
         }
     }
-}
+}

resources/sass/frontend/_global.scss

@@ -10,3 +10,15 @@
 @import '~@fortawesome/fontawesome-free/scss/regular';
 @import '~@fortawesome/fontawesome-free/scss/solid';
 @import '~@fortawesome/fontawesome-free/scss/brands';
+
+.profile-title {
+    font-size: 1em !important;
+}
+
+.profile-text {
+    font-size: 1em !important;
+}
+
+.project-card-title {
+    font-size: 10pt;
+}

resources/views/frontend/index.blade.php

@@ -140,6 +140,10 @@
             <div class="links">
                 <a href="https://github.com/cepdnaclk/portal.ce.pdn.ac.lk" target="_blank"><i class="fab fa-github"></i>
                     GitHub</a>
+                <a href="{{ route('frontend.pages.terms') }}"><i class="fa fa-list"></i>
+                    Terms & Conditions</a>
+                <a href="{{ route('frontend.pages.contributors') }}"><i class="fa fa-user"></i>
+                    Contributors</a>
             </div>
         </div>
     </div>

resources/views/frontend/pages/contributors.blade.php

@@ -0,0 +1,80 @@
+@extends('frontend.layouts.app')
+
+@section('title', __('Contributors'))
+
+@section('content')
+    <div class="container py-4">
+        <div class="row justify-content-center">
+            <div class="col-md-12">
+                @foreach ($data as $key => $project)
+                    <x-frontend.card>
+                        <x-slot name="body">
+
+                            <h3>#{{ $key + 1 }} {{ $project['title'] }}</h3>
+                            <p>{{ $project['description'] }}</p>
+
+                            <ul>
+                                <li><a target="_blank" href="{{ $project['project_url'] }}">Project Page</a></li>
+                                <li><a target="_blank" href="{{ $project['page_url'] }}">Project Details / Blog</a></li>
+                            </ul>
+
+                            <h3 class="pt-3">Project Team</h3>
+                            <div class="row" id="teamCards">
+                                @foreach ($project['team'] as $teamMember)
+                                    <div class="col-4 col-sm-3 col-md-2 col-lg-2 d-flex" style="padding: 3px;">
+                                        <div class="card p-1 flex-fill">
+                                            <div class="overflow-hidden">
+                                                <img class="card-img-top img-fluid" src="{{ $teamMember['profile_image'] }}"
+                                                    alt="{{ $teamMember['name'] }}">
+                                            </div>
+                                            <div class="card-body p-0 d-flex flex-column">
+                                                <h4 class="profile-title card-title text-center pt-1 text-wrap">
+                                                    {{ $teamMember['name'] }}
+                                                </h4>
+
+                                                @if ($teamMember['profile_url'])
+                                                    <div class="d-grid mt-auto px-2 pb-2">
+                                                        <a href="{{ $teamMember['profile_url'] }}" target="_blank"
+                                                            class="btn btn-sm btn-primary btn-block">Profile</a>
+                                                    </div>
+                                                @endif
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endforeach
+                            </div>
+
+                            <h3 class="pt-3">Project Supervisors</h3>
+                            <div class="row" id="supervisorCards">
+                                @foreach ($project['supervisors'] as $supervisor)
+                                    <div class="col-4 col-sm-3 col-md-2 col-lg-2 d-flex" style="padding: 3px;">
+                                        <div class="card p-1 flex-fill">
+                                            <div class="overflow-hidden">
+                                                <img class="card-img-top img-fluid" src="{{ $supervisor['profile_image'] }}"
+                                                    alt="{{ $supervisor['name'] }}">
+                                            </div>
+                                            <div class="card-body p-0 d-flex flex-column">
+                                                <h4 class="profile-title card-title text-center pt-1 text-wrap">
+                                                    {{ $supervisor['name'] }}
+                                                </h4>
+
+                                                @if ($supervisor['profile_url'])
+                                                    <div class="d-grid mt-auto px-2 pb-2">
+                                                        <a href="{{ $supervisor['profile_url'] }}" target="_blank"
+                                                            class="btn btn-sm btn-primary btn-block">Profile</a>
+                                                    </div>
+                                                @endif
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endforeach
+                            </div>
+
+                        </x-slot>
+                    </x-frontend.card>
+                    <br />
+                @endforeach
+            </div>
+        </div>
+    </div>
+@endsection