From e4c21c74a51ce3ddb6b5b38f8c5af7a8e7ddb61f Mon Sep 17 00:00:00 2001
From: Marcel Baumgartner <marcel.kbkm@gmail.com>
Date: Sun, 9 Jul 2023 19:46:18 +0200
Subject: [PATCH 1/2] Added custom scroll bar

---
 Moonlight/wwwroot/assets/css/blazor.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/Moonlight/wwwroot/assets/css/blazor.css b/Moonlight/wwwroot/assets/css/blazor.css
index cbe7e5a..0ce3863 100644
--- a/Moonlight/wwwroot/assets/css/blazor.css
+++ b/Moonlight/wwwroot/assets/css/blazor.css
@@ -41,6 +41,7 @@
 .components-reconnect-rejected > .rejected {
     display: block;
 }
+
 .components-reconnect-hide > div {
     display: none;
 }
@@ -55,4 +56,17 @@
 
 .components-reconnect-rejected {
     display: block;
+}
+
+::-webkit-scrollbar {
+    width: 12px;
+    background: var(--kt-card-bg);
+}
+
+::-webkit-scrollbar-thumb {
+    background: #6964E4;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #6964E4;
 }
\ No newline at end of file

From 151bc82998b55d1d167c8e83cb1ab898fcab912e Mon Sep 17 00:00:00 2001
From: Marcel Baumgartner <marcel.kbkm@gmail.com>
Date: Sun, 9 Jul 2023 19:46:32 +0200
Subject: [PATCH 2/2] Added better server image seletor

---
 Moonlight/Shared/Views/Servers/Create.razor | 83 +++++++++++++++------
 1 file changed, 62 insertions(+), 21 deletions(-)

diff --git a/Moonlight/Shared/Views/Servers/Create.razor b/Moonlight/Shared/Views/Servers/Create.razor
index 30f687d..853fcd4 100644
--- a/Moonlight/Shared/Views/Servers/Create.razor
+++ b/Moonlight/Shared/Views/Servers/Create.razor
@@ -48,7 +48,9 @@
                     <div class="card-body pt-0">
                         <div class="d-flex flex-column gap-10">
                             <div class="fv-row">
-                                <label class="form-label"><TL>Node</TL></label>
+                                <label class="form-label">
+                                    <TL>Node</TL>
+                                </label>
                                 <div class="fw-bold fs-3">@(DeployNode.Name)</div>
                             </div>
                             @if (Model.Image != null)
@@ -56,12 +58,16 @@
                                 var limit = Images[Model.Image];
 
                                 <div class="fv-row">
-                                    <label class="form-label"><TL>Image</TL></label>
+                                    <label class="form-label">
+                                        <TL>Image</TL>
+                                    </label>
                                     <div class="fw-bold fs-3">@(Model.Image.Name)</div>
                                 </div>
 
                                 <div class="fv-row">
-                                    <label class="form-label"><TL>CPU</TL></label>
+                                    <label class="form-label">
+                                        <TL>CPU</TL>
+                                    </label>
                                     <div class="fw-bold fs-3">
                                         @{
                                             var cpu = limit.ReadValue("cpu");
@@ -76,12 +82,16 @@
                                 </div>
 
                                 <div class="fv-row">
-                                    <label class="form-label"><TL>Memory</TL></label>
+                                    <label class="form-label">
+                                        <TL>Memory</TL>
+                                    </label>
                                     <div class="fw-bold fs-3">@(limit.ReadValue("memory")) MB</div>
                                 </div>
 
                                 <div class="fv-row">
-                                    <label class="form-label"><TL>Disk</TL></label>
+                                    <label class="form-label">
+                                        <TL>Disk</TL>
+                                    </label>
                                     <div class="fw-bold fs-3">@(limit.ReadValue("disk")) MB</div>
                                 </div>
                             }
@@ -108,15 +118,6 @@
                             </div>
                             @if (Images.Any())
                             {
-                                <label class="form-label">
-                                    <TL>Image</TL>
-                                </label>
-                                <SmartSelect TField="Image"
-                                             @bind-Value="Model.Image"
-                                             Items="Images.Keys.ToArray()"
-                                             DisplayField="@(x => x.Name)">
-                                </SmartSelect>
-
                                 <button type="submit" class="mt-5 float-end btn btn-primary">
                                     <TL>Create</TL>
                                 </button>
@@ -125,13 +126,45 @@
                             {
                                 <div class="alert alert-warning d-flex align-items-center p-5 mb-10">
                                     <span>
-                                        <TL>You reached the maximum amount of servers for every image of your subscription</TL>: @(Subscription == null ? SmartTranslateService.Translate("Default") : Subscription.Name)
+                                        <TL>We could not find any image in your subscription you have access to</TL>: @(Subscription == null ? SmartTranslateService.Translate("Default") : Subscription.Name)
                                     </span>
                                 </div>
                             }
                         </SmartForm>
                     </div>
                 </div>
+
+                <div class="row">
+                    @foreach (var keyValuePair in Images)
+                    {
+                        bool selected = Model.Image != null && Model.Image.Id == keyValuePair.Key.Id;
+
+                        <div class="col-12 col-md-4">
+                            @if (ServerCounts[keyValuePair.Key] > keyValuePair.Value.Amount)
+                            {
+                                <div class="m-2 card blur">
+                                    <div class="card-body">
+                                        <h5 class="card-title text-center">@(keyValuePair.Key.Name)</h5>
+                                        <p class="card-text">
+                                            @(keyValuePair.Key.Description)
+                                        </p>
+                                    </div>
+                                </div>
+                            }
+                            else
+                            {
+                                <a href="#" class="m-2 card @(selected ? "border border-2 border-primary" : "") invisible-a" @onclick:preventDefault @onclick="() => SelectImage(keyValuePair.Key)">
+                                    <div class="card-body">
+                                        <h5 class="card-title text-center">@(keyValuePair.Key.Name)</h5>
+                                        <p class="card-text">
+                                            @(keyValuePair.Key.Description)
+                                        </p>
+                                    </div>
+                                </a>
+                            }
+                        </div>
+                    }
+                </div>
             </div>
         </div>
     }
@@ -141,11 +174,12 @@
 {
     [CascadingParameter]
     public User User { get; set; }
-    
+
     private Node? DeployNode;
     private Subscription? Subscription;
 
     private Dictionary<Image, SubscriptionLimit> Images = new();
+    private Dictionary<Image, int> ServerCounts = new();
 
     private ServerOrderDataModel Model = new();
 
@@ -176,9 +210,9 @@
                     .Include(x => x.Image)
                     .Where(x => x.Owner.Id == User.Id)
                     .Count(x => x.Image.Id == image.Id);
-                
-                if(serversCount < limit.Amount)
-                    Images.Add(image, limit);
+
+                Images.Add(image, limit);
+                ServerCounts.Add(image, serversCount);
             }
         }
     }
@@ -198,7 +232,7 @@
 
             if (serversCount < limit.Amount)
             {
-                if(int.TryParse(limit.ReadValue("cpu"), out int cpu) &&
+                if (int.TryParse(limit.ReadValue("cpu"), out int cpu) &&
                     int.TryParse(limit.ReadValue("memory"), out int memory) &&
                     int.TryParse(limit.ReadValue("disk"), out int disk))
                 {
@@ -211,7 +245,7 @@
                         Model.Image,
                         DeployNode
                         );
-                    
+
                     NavigationManager.NavigateTo($"/server/{server.Uuid}");
                 }
                 else
@@ -221,4 +255,11 @@
             }
         }
     }
+
+    private async Task SelectImage(Image image)
+    {
+        Model.Image = image;
+
+        await InvokeAsync(StateHasChanged);
+    }
 }
\ No newline at end of file