Ability to configure client images in admin app

.github/workflows/admin.yaml

@@ -4,12 +4,14 @@ on:
   push:
     paths:
       - 'admin/**'
+      - '2wr-app/public/images/**'
       - 'TwoWeeksReady.Common/**'
       - '.github/workflows/admin.yaml'
     branches: [ master ]
   pull_request:
     paths:
       - 'admin/**'
+      - '2wr-app/public/images/**'
       - '.github/workflows/admin.yaml'
     branches: [ master ]
   workflow_dispatch:

.gitignore

@@ -353,3 +353,4 @@ MigrationBackup/
 # Ionide (cross platform F# VS Code tools) working folder
 .ionide/
 /lambda/*.zip
+admin/TwoWeeksReady.Admin/client-images.txt

admin/TwoWeeksReady.Admin/Data/ClientImage.cs

@@ -0,0 +1,8 @@
+namespace TwoWeeksReady.Admin.Data
+{
+    public class ClientImage
+    {
+        public string RelativePath { get; set; }
+        public string AbsolutePath { get; set; }
+    }
+}

admin/TwoWeeksReady.Admin/Data/ClientImageService.cs

@@ -0,0 +1,46 @@
+using Microsoft.Extensions.Configuration;
+using System.IO;
+using System.Linq;
+
+namespace TwoWeeksReady.Admin.Data
+{
+    /// <summary>
+    /// Provides a list of image that are available within the 2wr client app.
+    /// These are use in Hazard Info and in Base Kits
+    /// </summary>
+    public class ClientImageService
+    {
+        public readonly IConfiguration _configuration;
+        public readonly ClientImage[] clientImages;
+
+        public ClientImageService(IConfiguration configuration)
+        {
+            _configuration = configuration;
+
+            var imagePaths = File.ReadAllLines("./client-images.txt");
+            var appUrl = _configuration["2wrAppUrl"].TrimEnd('/');
+
+            clientImages = imagePaths
+                                .Select(i => i.Replace("\\", "/"))
+                                .Select(i => new ClientImage
+                                {
+                                    AbsolutePath = ToAbsolutePath(i),
+                                    RelativePath = i
+                                }).ToArray();
+        }
+
+
+        public ClientImage[] Images => clientImages;
+
+        public string ToAbsolutePath(string relativeImagePath)
+        {
+            var appUrl = _configuration["2wrAppUrl"].TrimEnd('/');
+            if (string.IsNullOrEmpty(relativeImagePath))
+            {
+                return appUrl;
+            }
+
+            return $"{appUrl}/{relativeImagePath.TrimStart('/')}";
+        }
+    }
+}

admin/TwoWeeksReady.Admin/Pages/HazardInfos/Details.razor

@@ -3,9 +3,13 @@
 @attribute [Authorize(Roles = "admin")]
 
 @using TinyMCE.Blazor
+@using System.IO;
+@using System.Linq;
+
 @inject IRepository repository
 @inject IJSRuntime JS
 @inject Microsoft.Extensions.Configuration.IConfiguration configuration 
+@inject ClientImageService clientImages
 
 @{ 
     var tinyMCEApiKey = configuration["TinyMCEApiKey"];
@@ -19,7 +23,7 @@ else
 {
 
     <h3>Details</h3>
-    <form>
+    <EditForm Model="@Hazard">
         <div class="form-group">
             <label for="name">Hazard Name</label>
             <input type="text" class="form-control" name="name" @bind="@Hazard.Name">
@@ -30,11 +34,25 @@ else
         </div>
         <div class="form-group">
             <label for="iconUrl">Icon Url</label>
-            <input type="text" class="form-control" name="iconUrl" @bind="@Hazard.IconUrl">
+
+            <InputSelect id="iconUrl" class="form-control" @bind-Value="Hazard.IconUrl">
+                @foreach(var image in clientImages.Images)
+                {
+                    <option value="@image">@image</option>
+                }
+            </InputSelect>
+            <img src="@clientImages.ToAbsolutePath(Hazard.IconUrl)"/>
+
         </div>
         <div class="form-group">
             <label for="mediaUrl">Media Url</label>
-            <input type="text" class="form-control" name="mediaUrl" @bind="@Hazard.MediaUrl">
+            <InputSelect id="mediaUrl" class="form-control" @bind-Value="Hazard.MediaUrl">
+                @foreach(var image in clientImages.Images)
+                {
+                    <option value="@image">@image</option>
+                }
+            </InputSelect>
+            <img src="@clientImages.ToAbsolutePath(Hazard.MediaUrl)"/>
         </div>
 
         <div class="form-group">
@@ -59,21 +77,15 @@ else
         </div>
 
         <button type="button" class="btn btn-primary" @onclick="@Save">Submit</button>
-    </form>
+    </EditForm>
 }
 
 @code {
 
     public Dictionary<string, object> EditorConfig = new Dictionary<string, object>
-{
+    {
         { "plugins", "image" },
         { "toolbar", "image" },
-        {"image_list", new []
-        {
-            // TODO: Figure out a strategy for loading a list of images from assets availabe within the app
-            new { title = "Image 1", value = "http://localhost:8080/images/hazards/earthquake.png"}
-        } }
-
     };
 
     [Parameter]
@@ -103,13 +115,12 @@ else
         if (string.IsNullOrEmpty(Id))
         {
             Hazard = new HazardInfo();
-
         }
         else
         {
             Hazard = await repository.GetHazardInfoById(Id);
         }
-
+        EditorConfig["image_list"] = clientImages.Images.Select(i => new { title = i.RelativePath, value = i.AbsolutePath }).ToArray();
     }
 
 

admin/TwoWeeksReady.Admin/Startup.cs

@@ -115,6 +115,7 @@ public void ConfigureServices(IServiceCollection services)
             services.AddScoped<TokenProvider>();
             //services.AddScoped<IRepository, StubRepository>();
             services.AddScoped<IRepository, FunctionsRepository>();
+            services.AddSingleton<ClientImageService>();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

admin/TwoWeeksReady.Admin/TwoWeeksReady.Admin.csproj

@@ -1,17 +1,41 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
-  <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
-    <UserSecretsId>4c82d094-3afe-4274-922b-9c0d8bdda7c5</UserSecretsId>
-  </PropertyGroup>
+	<PropertyGroup>
+		<TargetFramework>net5.0</TargetFramework>
+		<UserSecretsId>4c82d094-3afe-4274-922b-9c0d8bdda7c5</UserSecretsId>
+	</PropertyGroup>
 
-  <ItemGroup>
-    <ProjectReference Include="..\..\TwoWeeksReady.Common\TwoWeeksReady.Common.csproj" />
-  </ItemGroup>
+	<ItemGroup>
+	  <Content Include="client-images.txt">
+	    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+	  </Content>
+	</ItemGroup>
 
-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="5.0.6" />
-    <PackageReference Include="TinyMCE.Blazor" Version="0.0.8" />
-  </ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\..\TwoWeeksReady.Common\TwoWeeksReady.Common.csproj" />
+	</ItemGroup>
 
-</Project>
+	<ItemGroup>
+		<PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="5.0.6" />
+		<PackageReference Include="TinyMCE.Blazor" Version="0.0.8" />
+	</ItemGroup>
+
+	<ItemGroup>
+		<ClientImages Include="..\..\2wr-app\public\images\**\*.*" />
+	</ItemGroup>
+
+	<Target Name="ClearClientImagesFile">
+		<Delete Files=".\client-images.txt" />
+		<Touch AlwaysCreate="true" Files=".\client-images.txt" />
+	</Target>
+
+	<Target Name="PreBuild" BeforeTargets="PreBuildEvent" DependsOnTargets="ClearClientImagesFile">
+		<!-- Generates an up-to-date file of all the images available in the client app -->
+		<PropertyGroup>
+			<ClientImage>%(ClientImages.Identity)</ClientImage>
+			<ClientImageIndexOffset>$([MSBuild]::Add($(ClientImage.IndexOf(`2wr-app`)), 14))</ClientImageIndexOffset>
+		</PropertyGroup>
+		<Message Text="Client Image: %(ClientImages.Identity)" Importance="high" />
+		<WriteLinesToFile Lines="$([System.String]::Copy(&quot;%(ClientImages.Identity)&quot;).Substring($(ClientImageIndexOffset)))" File="./client-images.txt" Overwrite="false" />
+	</Target>
+</Project>

admin/TwoWeeksReady.Admin/appsettings.json

@@ -9,6 +9,7 @@
   "AllowedHosts": "*",
   "TinyMCEApiKey": "your-api-key",
   "ApiUrl": "http://localhost:7071/api/",
+  "2wrAppUrl": "http://localhost:8080/",
   "Auth0": {
     "Domain": "YOUR_AUTH0_DOMAIN",
     "ClientId": "YOUR_CLIENT_ID",