From cb6b1e05ffa9751cdb41f8eb4e306faed683a70d Mon Sep 17 00:00:00 2001
From: Samuele Locatelli <samuele@steamware.net>
Date: Fri, 17 Feb 2023 09:29:49 +0100
Subject: [PATCH] Aggiunto effetto btn x gauge (opzionale)

---
 EgwCoreLib.BlazorTest/Pages/Index.razor | 69 +++++++++++++++++++++----
 EgwCoreLib.Razor/CircleGauge.razor      | 21 ++++++--
 EgwCoreLib.Razor/CircleGauge.razor.cs   |  7 ++-
 3 files changed, 83 insertions(+), 14 deletions(-)

diff --git a/EgwCoreLib.BlazorTest/Pages/Index.razor b/EgwCoreLib.BlazorTest/Pages/Index.razor
index d35cea1..cda409b 100644
--- a/EgwCoreLib.BlazorTest/Pages/Index.razor
+++ b/EgwCoreLib.BlazorTest/Pages/Index.razor
@@ -3,26 +3,77 @@
 <PageTitle>Index</PageTitle>
 <div>
 
-    <div class="containerCard">
-        <DtCard></DtCard>
+    <div class="row py-4" style="background-color: #ACDDAC;">
+        <div class="col-4">
+        </div>
+        <div class="col-4">
+            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <radialGradient id="RadialGrad2">
+                        <stop offset="0%" stop-color="#000000" />
+                        <stop offset="80%" stop-color="#151515" />
+                        <stop offset="90%" stop-color="#444444" />
+                        <stop offset="100%" stop-color="#878787" />
+                    </radialGradient>
+                </defs>
+                <rect width="100" height="100" rx="50" fill="url(#RadialGrad2)" fill-opacity="0.5">
+                </rect>
+                    <text id="TitleElem" x="10%" y="50%" class="text-light" style="font-size:2rem;">Titolo</text>
+                    <text x="10%" y="70%" class="text-light" style="font-size:0.8rem;">testo più lungo
+                    <animate attributeName="x"
+                             values="100%;-100%"
+                             dur="5s"
+                             begin="2s"
+                             repeatCount="indefinite" />
+                    </text>
+                <g transform="translate(50%,50%)">
+                </g>
+            </svg>
+        </div>
+        <div class="col-4">
+        </div>
+        @*<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+        <rect width="10" height="10">
+        <animate attributeName="rx"
+        values="0;5;0"
+        dur="5s"
+        repeatCount="indefinite" />
+        </rect>
+        </svg>*@
     </div>
-    <div class="containerBtnEntrEsc">
-        <BottoniEntrEsc></BottoniEntrEsc>
+    <div class="row py-4" style="background-color: #34495E;">
+        <div class="col-4">
+        </div>
+        <div class="col-4">
+            <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <radialGradient id="RadialGrad2">
+                        <stop offset="0%" stop-color="#000000" />
+                        <stop offset="80%" stop-color="#151515" />
+                        <stop offset="90%" stop-color="#444444" />
+                        <stop offset="100%" stop-color="#878787" />
+                    </radialGradient>
+                </defs>
+                <rect width="10" height="10" rx="5" fill="url(#RadialGrad2)" fill-opacity="0.5">
+                </rect>
+            </svg>
+        </div>
+        <div class="col-4">
+        </div>
     </div>
-
     <div class="row">
-        <div class="col-12 col-md-4 col-lg-2 containerCalendario">
+        <div class="col-12 containerCalendario">
             <div class="calendario">
                 <div class="d-flex justify-content-between">
                     <div>
-                        <CircleGauge Titolo="9:00" Testo="Caricate" maxVal="480" currVal="540" strokeColorVal="#F1C40F"></CircleGauge>
+                        <CircleGauge Titolo="9:00" Testo="Caricate" maxVal="480" currVal="540" strokeColorVal="#F1C40F" ShowCircleBtn="true"></CircleGauge>
                     </div>
                     <div>
-                        <CircleGauge Titolo="4:00" Testo="Lavorate" maxVal="480" currVal="240" strokeColorVal="#00FF00"></CircleGauge>
+                        <CircleGauge Titolo="4:00" Testo="Lavorate" maxVal="480" currVal="240" strokeColorVal="#00FF00" ShowCircleBtn="true"></CircleGauge>
                     </div>
                 </div>
                 <div class="containerBtnTemp">
-                    <button>
+                    <button class="btn btn-sm btn-warning">
                         TEMP
                     </button>
                 </div>
diff --git a/EgwCoreLib.Razor/CircleGauge.razor b/EgwCoreLib.Razor/CircleGauge.razor
index d3663e4..ddc1f3d 100644
--- a/EgwCoreLib.Razor/CircleGauge.razor
+++ b/EgwCoreLib.Razor/CircleGauge.razor
@@ -2,13 +2,26 @@
 <svg viewBox="0 0 200 200" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
     <circle cx="100" cy="100" r="@innRad" fill="none" stroke="rgba(189, 195, 199, 0.5)" stroke-width="@sWidth" />
     <circle cx="100" cy="100" r="@innRad" fill="none" stroke="@strokeColorVal" stroke-width="@sWidth" stroke-linecap="round" transform="rotate(-90,100,100)" stroke-dasharray="calc(@innRad * 6.28 * @valInner / @maxVal) calc(@innRad * 6.28 * (@maxVal - @valInner) / @maxVal)" />
-    <g transform="translate(100,100)">
-        <text id="TitleElem" style="@StyleTitolo" x="0" y="0">@Titolo</text>
-        <text x="0" y="30" style="@StyleTesto">@Testo</text>
-    </g>
+    @if (ShowCircleBtn)
+    {
+        <defs>
+            <radialGradient id="RadialGrad2">
+                <stop offset="0%" stop-color="#000000" />
+                <stop offset="80%" stop-color="#151515" />
+                <stop offset="90%" stop-color="#444444" />
+                <stop offset="100%" stop-color="#878787" />
+            </radialGradient>
+        </defs>
+        <circle cx="100" cy="100" r="@(innRad-sWidth)" fill="url(#RadialGrad2)" fill-opacity="0.5">
+        </circle>
+    }
     @if (showOuter)
     {
         <circle cx="100" cy="100" r="@outRad" fill=none stroke="rgba(189, 195, 199, 0.5)" class="bg-opacity-25" stroke-width="@sWidth" />
         <circle cx="100" cy="100" r="@outRad" fill=none stroke="@strokeColorVal" stroke-width="@sWidth" stroke-linecap="round" transform="rotate(-90,100,100)" stroke-dasharray="calc(@outRad * 6.28 * @valOuter / @maxVal) calc(@outRad * 6.28 * (@maxVal - @valOuter) / @maxVal)" />
     }
+    <g transform="translate(100,100)">
+        <text id="TitleElem" style="@StyleTitolo" x="0" y="0">@Titolo</text>
+        <text x="0" y="30" style="@StyleTesto">@Testo</text>
+    </g>
 </svg>
diff --git a/EgwCoreLib.Razor/CircleGauge.razor.cs b/EgwCoreLib.Razor/CircleGauge.razor.cs
index deacbeb..8d39107 100644
--- a/EgwCoreLib.Razor/CircleGauge.razor.cs
+++ b/EgwCoreLib.Razor/CircleGauge.razor.cs
@@ -19,6 +19,11 @@ namespace EgwCoreLib.Razor
         public string StyleTesto { get; set; } = "font-size: 1em; fill: gray;";
         [Parameter]
         public string strokeColorVal { get; set; } = "#00FF66";
+        /// <summary>
+        /// Indica se mostrare o meno il btn centrale
+        /// </summary>
+        [Parameter]
+        public bool ShowCircleBtn { get; set; } = false;
 
         /// <summary>
         /// Valore da rappresentare
@@ -33,7 +38,7 @@ namespace EgwCoreLib.Razor
 
 
         /// <summary>
-        /// Spessore dei cerchida  disegnare
+        /// Spessore dei cerchi da disegnare
         /// </summary>
         [Parameter]
         public int sWidth { get; set; } = 10;