From 34ff03aca1353478a0bd63b7a9177f01bd820f2d Mon Sep 17 00:00:00 2001
From: Natalia Portillo <claunia@claunia.com>
Date: Thu, 6 Aug 2020 00:52:18 +0100
Subject: [PATCH] Add carousel to company logos, fixes #19

---
 Marechai/Marechai.csproj               |  2 +-
 Marechai/Pages/Companies/View.razor    | 48 +++++++++++++-------------
 Marechai/Pages/Companies/View.razor.cs |  7 +++-
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/Marechai/Marechai.csproj b/Marechai/Marechai.csproj
index ba36a370..161515aa 100644
--- a/Marechai/Marechai.csproj
+++ b/Marechai/Marechai.csproj
@@ -2,7 +2,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
   <PropertyGroup>
     <TargetFramework>netcoreapp3.1</TargetFramework>
-    <Version>4.0.0.1767</Version>
+    <Version>4.0.0.1784</Version>
     <Company>Canary Islands Computer Museum</Company>
     <Copyright>Copyright © 2003-2020 Natalia Portillo</Copyright>
     <Product>Canary Islands Computer Museum Website</Product>
diff --git a/Marechai/Pages/Companies/View.razor b/Marechai/Pages/Companies/View.razor
index 62fd260c..59e8c8ec 100644
--- a/Marechai/Pages/Companies/View.razor
+++ b/Marechai/Pages/Companies/View.razor
@@ -65,19 +65,15 @@
     }
 </p>
 <div class="row">
-@{
-    _carrouselActive = "active";
-}
 @if (_logos != null &&
      _logos.Count > 1)
 {
-    // TODO: Carousel
     <div class="col-3">
-        <div class="carousel slide" data-ride="carousel" id="logosCarousel">
-            <div class="carousel-inner">
-                @foreach (var logo in _logos.Where(logo => File.Exists(Path.Combine(Host.WebRootPath, "assets/logos", logo.Guid + ".svg"))))
-                {
-                    <div class="carousel-item @_carrouselActive">
+        <Carousel @bind-SelectedSlide="@_selectedSlide" ShowIndicators="true" ShowControls="true">
+            @foreach(var logo in _logos.Where(logo => File.Exists(Path.Combine(Host.WebRootPath, "assets/logos", logo.Guid + ".svg"))))
+            {
+                <CarouselSlide Name="@logo.Guid.ToString()">
+                    <div style="width: 256px; height: 256px; margin: auto;">
                         <picture>
                             <source type="image/svg+xml" srcset="/assets/logos/@(logo.Guid).svg">
                             <source type="image/webp" srcset="/assets/logos/webp/1x/@(logo.Guid).webp,
@@ -88,21 +84,9 @@
                              /assets/logos/png/1x/@(logo.Guid).webp 3x" src="/assets/logos/png/1x/@(logo.Guid).png" alt="" height="auto" width="auto" style="max-height: 256px; max-width: 256px" />
                         </picture>
                     </div>
-
-                    _carrouselActive = null;
-                }
-            </div>
-            <a class="carousel-control-prev" data-slide="prev" href="#logosCarousel" role="button">
-                <span aria-hidden="true" class="carousel-control-prev-icon">
-                </span>
-                <span class="sr-only">Previous</span>
-            </a>
-            <a class="carousel-control-next" data-slide="next" href="#logosCarousel" role="button">
-                <span aria-hidden="true" class="carousel-control-next-icon">
-                </span>
-                <span class="sr-only">Next</span>
-            </a>
-        </div>
+                </CarouselSlide>
+            }
+        </Carousel>
     </div>
 }
 <div class="col-6">
@@ -391,3 +375,19 @@
     </div>
 }
 </div>
+
+<style>
+    .carousel-indicators {
+        position: absolute;
+        bottom: -50px;
+    }
+
+    .carousel-indicators li {
+        background-color: black;
+    }
+    
+    .carousel-control-prev,
+    .carousel-control-next {
+        filter: sepia(100%) saturate(200%) brightness(0%) hue-rotate(330deg);
+    }
+</style>
\ No newline at end of file
diff --git a/Marechai/Pages/Companies/View.razor.cs b/Marechai/Pages/Companies/View.razor.cs
index 5fd6f344..73566f0b 100644
--- a/Marechai/Pages/Companies/View.razor.cs
+++ b/Marechai/Pages/Companies/View.razor.cs
@@ -24,6 +24,7 @@
 *******************************************************************************/
 
 using System.Collections.Generic;
+using System.IO;
 using System.Linq;
 using System.Threading.Tasks;
 using Marechai.Database;
@@ -35,7 +36,6 @@ namespace Marechai.Pages.Companies
 {
     public partial class View
     {
-        string            _carrouselActive;
         CompanyViewModel  _company;
         List<Machine>     _computers;
         List<Machine>     _consoles;
@@ -43,6 +43,7 @@ namespace Marechai.Pages.Companies
         int               _id;
         bool              _loaded;
         List<CompanyLogo> _logos;
+        string            _selectedSlide;
         Company           _soldTo;
 
         [Parameter]
@@ -84,6 +85,10 @@ namespace Marechai.Pages.Companies
             _soldTo      = await Service.GetSoldToAsync(_company.SoldToId);
             _logos       = await CompanyLogosService.GetByCompany(Id);
 
+            _selectedSlide = _logos.
+                             FirstOrDefault(logo => File.Exists(Path.Combine(Host.WebRootPath, "assets/logos",
+                                                                             logo.Guid + ".svg")))?.Guid.ToString();
+
             _loaded = true;
             StateHasChanged();
         }