Adding Sample TimeZoneConverter Grid

michal-ciechan · Nov 9, 2024 · 15bc5cf · 15bc5cf
1 parent 41db960
commit 15bc5cf
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 30 deletions.
diff --git a/MikeysUtils3/MikeysUtils3.csproj b/MikeysUtils3/MikeysUtils3.csproj
@@ -9,6 +9,7 @@
     <ItemGroup>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.8"/>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.8" PrivateAssets="all"/>
+        <PackageReference Include="NodaTime" Version="3.2.0" />
     </ItemGroup>
 
     <ItemGroup>

diff --git a/MikeysUtils3/Pages/TimeZonePage/TimeZoneConverter.razor b/MikeysUtils3/Pages/TimeZonePage/TimeZoneConverter.razor
@@ -1,10 +1,13 @@
 @page "/time-zone"
+@using NodaTime
 
 <PageTitle>Time Zone Converter</PageTitle>
 
 <div class="d-flex flex-row justify-content-center">
     <div class="w-auto">
-        <div class="text-center"><i class="bi bi-cone-striped text-warning" style="font-size: 5rem;"></i></div>
+        <div class="text-center">
+            <i class="bi bi-cone-striped text-warning" style="font-size: 5rem;"></i>
+        </div>
     </div>
     <div>
         <h1 class="text-center text-primary">Time Zone Converter</h1>
@@ -15,20 +18,54 @@
 <div class="row gy-2 mb-2">
     <div class="col">
         <div class="input-group mb-3">
-            <span class="input-group-text" id="basic-addon1">Input Date / Time</span>
-            <input type="text" class="form-control form-control-lg" placeholder="Input Date/Time String Here" @bind="_input" @bind:after="OnInputChanged" @bind:event="oninput"/>
+            <span class="input-group-text" id="basic-addon1">Input Time</span>
+            <input type="text" class="form-control form-control-lg" placeholder="Input Time. Example: 08:50:39.1234123, 24, 18 BST to EDT, 17 Chicago to London" @bind="_input" @bind:after="OnInputChanged" @bind:event="oninput"/>
         </div>
     </div>
 </div>
-<div class="row gy-4">
-
+<div class="row gy-4 flex-row">
+    <div class="col d-flex flex-row btn-group-multi-vertical">
+        @for (int col = 0; col < _zones.Count; col++)
+        {
+            <div style="width: 70px; background-color: pink;">
+                <div class="btn-group-vertical bg-light w-100">
+                    @for (int i = 0; i < 24; i++)
+                    {
+                        if (i == @DateTime.Now.Hour)
+                        {
+                            <button type="button" class="btn btn-primary">@i.ToString("00:\\0\\0") </button>
+                        }
+                        else
+                        {
+                            <button type="button" class="btn btn-outline-primary">@i.ToString("00:\\0\\0")</button>
+                        }
+                    }
+                </div>
+            </div>
+        }
+    </div>
 </div>
 
 
 @code {
+
+    private record DateTimeZoneInfo(DateTimeZone Zone);
+
     private string _input = "";
 
+    private List<DateTimeZoneInfo> _zones = [
+        new (DateTimeZoneProviders.Tzdb["America/Los_Angeles"]),
+        new (DateTimeZoneProviders.Tzdb["America/Chicago"]),
+        new (DateTimeZoneProviders.Tzdb["America/New_York"]),
+        new (DateTimeZoneProviders.Tzdb["Etc/UTC"]),
+        new (DateTimeZoneProviders.Tzdb["Europe/London"]),
+        new (DateTimeZoneProviders.Tzdb["Europe/Amsterdam"]),
+        new (DateTimeZoneProviders.Tzdb["Asia/Hong_Kong"]), 
+        new (DateTimeZoneProviders.Tzdb["Australia/Sydney"]),
+    ]; 
+
     private void OnInputChanged()
     {
     }
+
 }
diff --git a/MikeysUtils3/wwwroot/css/app.css b/MikeysUtils3/wwwroot/css/app.css
@@ -17,7 +17,7 @@ a, .btn-link {
 }
 
 .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
 }
 
 .content {
@@ -48,22 +48,22 @@ a, .btn-link {
     z-index: 1000;
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.5rem;
+}
 
 .blazor-error-boundary {
     background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
     padding: 1rem 1rem 1rem 3.7rem;
     color: white;
 }
 
-    .blazor-error-boundary::after {
-        content: "An error has occurred."
-    }
+.blazor-error-boundary::after {
+    content: "An error has occurred."
+}
 
 .loading-progress {
     position: relative;
@@ -73,19 +73,19 @@ a, .btn-link {
     margin: 20vh auto 1rem auto;
 }
 
-    .loading-progress circle {
-        fill: none;
-        stroke: #e0e0e0;
-        stroke-width: 0.6rem;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
-    }
+.loading-progress circle {
+    fill: none;
+    stroke: #e0e0e0;
+    stroke-width: 0.6rem;
+    transform-origin: 50% 50%;
+    transform: rotate(-90deg);
+}
 
-        .loading-progress circle:last-child {
-            stroke: #1b6ec2;
-            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
-            transition: stroke-dasharray 0.05s ease-in-out;
-        }
+.loading-progress circle:last-child {
+    stroke: #1b6ec2;
+    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
+    transition: stroke-dasharray 0.05s ease-in-out;
+}
 
 .loading-progress-text {
     position: absolute;
@@ -94,10 +94,32 @@ a, .btn-link {
     inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
 }
 
-    .loading-progress-text:after {
-        content: var(--blazor-load-percentage-text, "Loading");
-    }
+.loading-progress-text:after {
+    content: var(--blazor-load-percentage-text, "Loading");
+}
 
 code {
     color: #c02d76;
 }
+
+.btn-group-multi-vertical {
+    *:not(:first-child) .btn-group-vertical {
+        > .btn:first-child {
+            border-top-left-radius: 0;
+        }
+
+        > .btn:last-child {
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    *:not(:last-child) .btn-group-vertical {
+        > .btn:first-child {
+            border-top-right-radius: 0;
+        }
+
+        > .btn:last-child {
+            border-bottom-right-radius: 0;
+        }
+    }
+}