From 8bcb72b2596713611ee7c924701b7207d4345de0 Mon Sep 17 00:00:00 2001
From: Gary Murphy <gary.murphy62@mail.dcu.ie>
Date: Sat, 6 May 2023 20:14:56 +0100
Subject: [PATCH] updated dynamic component layout

---
 src/PanoptesFrontend/Pages/ModDisplay.razor | 71 ++++++++++++++-------
 1 file changed, 49 insertions(+), 22 deletions(-)

diff --git a/src/PanoptesFrontend/Pages/ModDisplay.razor b/src/PanoptesFrontend/Pages/ModDisplay.razor
index 7750191..6f9a93f 100644
--- a/src/PanoptesFrontend/Pages/ModDisplay.razor
+++ b/src/PanoptesFrontend/Pages/ModDisplay.razor
@@ -8,37 +8,64 @@
 @inject IHttpService httpService
 @inject IJSRuntime JSRuntime
 
-@if (tables != null | graphs != null)
+@if (tables != null || graphs != null)
 {
     <div class="container-fluid">
-    <div class="row">
-        <div class="col-md-6">
-            @foreach (var component in tables)
+        <div class="row">
+            @if (graphs != null)
             {
-                <div class="card mb-3">
-                    <div class="card-body">
-                        <DynamicTable data="@component.Data" TableId="@component.Id" module="@moduleId"/>
+                @for (int i = 0; i < graphs.Length; i += 2)
+                {
+                    <div class="col-md-12">
+                        <div class="row">
+                            @if (i < graphs.Length)
+                            {
+                                <div class="col-md-6">
+                                    <div class="card mb-3">
+                                        <div class="card-body">
+                                            <DynamicChart StatsList="@graphs[i].Stats" 
+                                                          SelectedChartType="@graphs[i].Graph" 
+                                                          ChartTitle="@graphs[i].Title"
+                                                          ChartId="@graphs[i].Id"
+                                                          module="@moduleId"/>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                            @if (i + 1 < graphs.Length)
+                            {
+                                <div class="col-md-6">
+                                    <div class="card mb-3">
+                                        <div class="card-body">
+                                            <DynamicChart StatsList="@graphs[i + 1].Stats" 
+                                                          SelectedChartType="@graphs[i + 1].Graph" 
+                                                          ChartTitle="@graphs[i + 1].Title"
+                                                          ChartId="@graphs[i + 1].Id"
+                                                          module="@moduleId"/>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                        </div>
                     </div>
-                </div>
+                }
             }
-        </div>
-        <div class="col-md-6">
-            @foreach (var component in graphs)
+
+            @if (tables != null)
             {
-                <div class="card mb-3">
-                    <div class="card-body">
-                            <DynamicChart StatsList="@component.Stats" 
-                                          SelectedChartType="@component.Graph" 
-                                          ChartTitle="@component.Title"
-                                          ChartId="@component.Id"
-                                          module="@moduleId"/>
-                    </div>
+                <div class="col-md-12">
+                    @foreach (var table in tables)
+                    {
+                        <div class="card mb-3">
+                            <div class="card-body">
+                                <DynamicTable data="@table.Data" TableId="@table.Id" module="@moduleId"/>
+                            </div>
+                        </div>
+                    }
                 </div>
             }
         </div>
     </div>
-</div>
-
 }
 
 
@@ -50,7 +77,7 @@
 
     protected async override Task OnInitializedAsync()
     {
-        var schema = await httpService.GetAsync<Schema>("http://localhost:10000/" + @moduleId + "/schema");
+        var schema = await httpService.GetAsync<Schema>("http://localhost:10000/" + moduleId + "/schema");
         tables = schema.tables;
         graphs = schema.graphs;
     }