View config of bridges by IP

Author: michielpost

HueEntertainmentPro/Client/Pages/AddBridgeDialog.razor

@@ -12,31 +12,46 @@
 <FluentDialog Modal="true" TrapFocus="true" Header="Add Hue Bridge">
     <FluentCard>
         <FluentStack Orientation="Orientation.Vertical" Style="padding: 16px; min-width: 400px;">
-            
-                <FluentListbox 
-                               Items="@DiscoveredIps"
+
+            <FluentCard>
+
+                <FluentListbox Items="@DiscoveredIps"
                                Height="150px"
                                Label="Discovered IP Addresses"
                                OptionValue="@(i => i.BridgeId)"
-                           ValueChanged="@(async (string id) => OnBridgeIdSelected(id))">
-                      <OptionTemplate>
-                          @context.IpAddress
-                      </OptionTemplate>
+                               ValueChanged="@(async (string id) => OnBridgeIdSelected(id))">
+                    <OptionTemplate>
+                        @context.IpAddress
+                    </OptionTemplate>
                 </FluentListbox>
 
-            <FluentCheckbox @bind-Value="@EditIp"
-                            Label="Manually enter IP" />
+            </FluentCard>
+
+
+            <FluentCard>
+
+                <FluentCheckbox @bind-Value="@EditIp"
+                                Label="Manually enter IP" />
+
+                <FluentTextField Label="IP Address"
+                                 @bind-Value="@BridgeConfig.IpAddress"
+                                 Placeholder="e.g., 192.168.1.100"
+                                 Disabled="@(!EditIp)" />
+
+                @if (IsFormValid)
+                {
+                    <br />
+                    <FluentAnchor Appearance="Appearance.Neutral" Href="@($"/bridge/{BridgeConfig.IpAddress}")" Target="_blank">
+                        View Bridge Config
+                    </FluentAnchor>
+                }
+
+            </FluentCard>
 
-            <FluentTextField Label="IP Address"
-                             @bind-Value="@BridgeConfig.IpAddress"
-                             Placeholder="e.g., 192.168.1.100"
-                             Disabled="@(!EditIp)" />
 
-          
-           
+            <FluentCard>
                 <FluentCheckbox @bind-Value="@ShowSecrets"
-                                Label="Manually enter username and key"
-                                />
+                                Label="Manually enter username and key" />
 
                 @if (ShowSecrets)
                 {
@@ -47,6 +62,8 @@
                                      @bind-Value="@BridgeConfig.StreamingClientKey"
                                      Placeholder="Streaming Client Key" />
                 }
+            </FluentCard>
+
 
             <FluentTextField Label="Name (optional)"
                              @bind-Value="@BridgeConfig.Name"
@@ -59,6 +76,7 @@
 
             <FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Right" Style="margin-top: 16px;">
                 <FluentButton Appearance="Appearance.Neutral" OnClick="@CloseDialog">Cancel</FluentButton>
+
                 @if (ShowSecrets)
                 {
                     <FluentButton Appearance="Appearance.Accent"
@@ -75,7 +93,7 @@
                         Push Bridge Button and Click Save
                     </FluentButton>
                 }
-               
+
             </FluentStack>
         </FluentStack>
     </FluentCard>
@@ -136,11 +154,11 @@
             if (!ShowSecrets)
             {
                 var setup = await HueSetupService.RegisterAsync(new HueLightDJ.Services.Interfaces.Models.Requests.HueSetupRequest
-                    {
-                        Ip = BridgeConfig.IpAddress
-                    });
+                {
+                    Ip = BridgeConfig.IpAddress
+                });
 
-                if(!string.IsNullOrEmpty(setup?.ErrorMessage))
+                if (!string.IsNullOrEmpty(setup?.ErrorMessage))
                 {
                     ErrorMessage = setup.ErrorMessage;
                     StateHasChanged();
@@ -169,10 +187,10 @@
                 try
                 {
                     var setup = await HueSetupService.GetEntertainmentGroupsAsync(new HueLightDJ.Services.Interfaces.Models.Requests.HueSetupRequest
-                        {
-                            Ip = BridgeConfig.IpAddress,
-                            Key = BridgeConfig.Username
-                        });
+                    {
+                        Ip = BridgeConfig.IpAddress,
+                        Key = BridgeConfig.Username
+                    });
 
                     if (!string.IsNullOrEmpty(setup?.ErrorMessage))
                     {

HueEntertainmentPro/Client/Pages/BridgeDetail.razor

@@ -1,4 +1,5 @@
 @page "/bridge/{Id:guid}"
+@page "/bridge/{*Ip}"
 @using HueApi.Models.Clip
 @using HueEntertainmentPro.Client.Services
 @using HueEntertainmentPro.Client.Shared.ResourceExplorerComponents
@@ -15,6 +16,8 @@
 @inject IToastService ToastService
 @inject ResourceExplorerService ResourceExplorerService
 
+<PageTitle>Bridge Details</PageTitle>
+
 <h3>Bridge Details</h3>
 
 @if (errorMessage != null)
@@ -54,30 +57,40 @@
         <FluentLabel>No entertainment groups found for this bridge.</FluentLabel>
     }
 
-    <h4 style="margin-top: 20px;">Bridge Config</h4>
-   <p>
-        Explore more bridge details on the <a href="/resource-explorer/@Id">Resource Explorer</a>.<br />
-        View <a href="http://@bridge.Ip/description.xml" target="_blank">description.xml</a>.<br />
-   </p>
-    @if (bridgeConfig == null)
-    {
-        <FluentProgressRing>Loading bridge config...</FluentProgressRing>
-    }
-    else
-    {
-        <JsonViewer Element="@JsonSerializer.SerializeToElement(bridgeConfig)" Bridge="@bridge" />
-    }
 
+}
+else if (Id.HasValue)
+{
+    <FluentProgressRing>Loading bridge details...</FluentProgressRing>
+}
 
+@if (bridgeConfig == null)
+{
+    <FluentProgressRing>Loading bridge config...</FluentProgressRing>
 }
 else
 {
-    <FluentProgressRing>Loading bridge details...</FluentProgressRing>
+    <h4 style="margin-top: 20px;">Bridge Config</h4>
+    <p>
+        @if (Id.HasValue)
+        {
+            <span>
+                Explore more bridge details on the <a href="/resource-explorer/@Id">Resource Explorer</a>.
+            </span>
+            <br />
+        }
+        View <a href="http://@Ip/description.xml" target="_blank">description.xml</a>.<br />
+    </p>
+
+    <JsonViewer Element="@JsonSerializer.SerializeToElement(bridgeConfig)" />
 }
 
 @code {
     [Parameter]
-    public Guid Id { get; set; }
+    public Guid? Id { get; set; }
+
+    [Parameter]
+    public string? Ip { get; set; }
 
     private Bridge? bridge;
     private BridgeConfig? bridgeConfig;
@@ -92,23 +105,37 @@ else
             entertainmentGroups = null;
 
             // Load bridge details
-            bridge = await BridgeService.GetBridge(new GuidRequest() { Id = Id });
-            if (bridge == null)
+            if (Id.HasValue)
+            {
+                bridge = await BridgeService.GetBridge(new GuidRequest() { Id = Id.Value });
+                Ip = bridge?.Ip;
+            }
+
+            if (bridge == null && Ip == null)
             {
                 errorMessage = "Bridge not found.";
                 return;
             }
 
-            var localHueClient = ResourceExplorerService.GetHueClient(bridge);
-            bridgeConfig = await localHueClient.GetConfigAsync();
-
-            // Load entertainment groups
-            var result = await HueSetupService.GetEntertainmentGroupsAsync(new HueLightDJ.Services.Interfaces.Models.Requests.HueSetupRequest()
+            if (bridge != null)
             {
-                Ip = bridge.Ip,
-                Key = bridge.Username
-            });
-            entertainmentGroups = result.Groups.AsQueryable();
+                //TODO: Why does fail when using bridge (which includes key) and returns more data?
+                var localHueClient = ResourceExplorerService.GetHueClient(bridge.Ip);
+                bridgeConfig = await localHueClient.GetConfigAsync();
+
+                // Load entertainment groups
+                var result = await HueSetupService.GetEntertainmentGroupsAsync(new HueLightDJ.Services.Interfaces.Models.Requests.HueSetupRequest()
+                {
+                    Ip = bridge.Ip,
+                    Key = bridge.Username
+                });
+                entertainmentGroups = result.Groups.AsQueryable();
+            }
+            else if (Ip != null)
+            {
+                var localHueClient = ResourceExplorerService.GetHueClient(Ip);
+                bridgeConfig = await localHueClient.GetConfigAsync();
+            }
         }
         catch (Exception ex)
         {

HueEntertainmentPro/Client/Pages/ProAreaDetail.razor

@@ -11,6 +11,8 @@
 @inject IDialogService DialogService
 @inject IToastService ToastService
 
+<PageTitle>Pro Entertainment Area</PageTitle>
+
 <h3>Pro Entertainment Area</h3>
 
 @if (errorMessage != null)

HueEntertainmentPro/Client/Pages/ProAreaPlay.razor

@@ -10,6 +10,8 @@
 @inject ILightDJService LightDJService
 @inject IHubService HubService
 
+<PageTitle>Pro Entertainment Area</PageTitle>
+
 <h3>Pro Entertainment Area</h3>
 
 @if (errorMessage != null)

HueEntertainmentPro/Client/Services/ResourceExplorerService.cs

@@ -17,6 +17,17 @@ public LocalHueApi GetHueClient(Bridge bridge)
       return localHueApi;
     }
 
+    public LocalHueApi GetHueClient(string ip)
+    {
+      //Use new HttpClient because setting DangerousAcceptAnyServerCertificateValidator is not supported
+      var localHueApi = new LocalHueApi(ip, null, new HttpClient());
+      localHueApi.SetBaseAddress(new Uri($"{NavigationManager.BaseUri}hueproxy/{ip}/"));
+
+      // Console.WriteLine("Base URL: " + $"{NavigationManager.BaseUri}/hueproxy/{bridge.Ip}/");
+
+      return localHueApi;
+    }
+
     public string CreateResourceLink(Guid id, string? rtype, Guid? rid = null)
     {
       if (rtype == null)

HueEntertainmentPro/Client/Shared/ResourceExplorerComponents/JsonViewer.razor

@@ -3,17 +3,17 @@
 @using HueEntertainmentPro.Client.Services
 @inject ResourceExplorerService ResourceExplorerService
 
-<div class="json-node" style="margin-left:@(Level * 10)px">
+<div class="json-node json-content" style="margin-left:@(Level * 10)px">
     @if (!string.IsNullOrEmpty(Key))
     {
-        <b>@Key:</b>
+        <b>@Key: </b>
     }
-    <div class="json-content">
+
         @if (Element.ValueKind == JsonValueKind.Object)
         {
             // Detect HueResource (must have rid + rtype properties)
             if (Element.TryGetProperty("rid", out var ridProp) &&
-            Element.TryGetProperty("rtype", out var rtypeProp))
+              Element.TryGetProperty("rtype", out var rtypeProp))
             {
                 // Deserialize into your HueResource type
                 var resource = Element.Deserialize<ResourceIdentifier>();
@@ -89,7 +89,6 @@
         {
             <span>null</span>
         }
-    </div>
 </div>
 
 @code {

HueEntertainmentPro/Server/Program.cs

@@ -95,6 +95,6 @@
 
 app.MapRazorPages();
 app.MapControllers();
-app.MapFallbackToFile("index.html");
+app.MapFallbackToFile("{**path}", "index.html");
 
 app.Run();