Merge pull request #14 from Sparse-Technology/eren/card-size-works

C#: DSCS: Fixed Card Height Arrangement Issue #13

Author: Ibrahim Ethem Gursoy

Pages/Index.cshtml

@@ -279,7 +279,7 @@
 
     @* Camera Cards Body *@
     <div id="cameraCardsBody" class="container-fluid" style="font-size: small; padding-top: 2rem">
-        <div class="d-flex flex-wrap">
+        <div id="sortedCameraCards" class="d-flex flex-wrap">
             @* Getting Model.Devices *@
             @foreach (var dev in @Model.Devices.OrderBy(d => d.DeviceActiveStatus))
             {

wwwroot/js/src/main.js

@@ -9,7 +9,7 @@ import { jsonrepair } from "jsonrepair";
 // GLOBAL VARIABLES
 var jsonDeviceArray = [];
 var jsonStringCopy = "";
-var errorNotifColor = "#d72a6f";
+var errorNotifColor = "#d72a6f"; 
 var successNotifColor = "#20ad6b";
 var neutralNotifColor = "#8f6ac4";
 
@@ -32,6 +32,8 @@ $(document).ready(function () {
         }
     );
 
+    sortAndAppendContainers();
+
     // Closing modals
     $('[data-dismiss="modalLabel"]').on("click", function () {
         $("#exportDeviceModal").modal("hide");
@@ -65,6 +67,22 @@ window.toggleExportMenuVisibility = function () {
     }
 };
 
+// Sorting camera cards by height
+window.sortAndAppendContainers = function(){
+    var containers = $('[data-card="container"]');
+
+    containers.sort(function (a, b) {
+        // Compare the heights of the camera containers in descending order
+        var heightA = $(a).find('[data-card="cameraContainer"]').height();
+        var heightB = $(b).find('[data-card="cameraContainer"]').height();
+
+        return heightA - heightB;
+    });
+
+    // Append the sorted camera containers back to the parent containers with data-card="container"
+    $('#sortedCameraCards').empty().append(containers);
+}
+
 window.resetLabels = function () {
     $('#dynamicKeys input[type="checkbox"]').prop("checked", false).change();
     $("[id^=btnRenameInput_]").val(null);