expand/collapse na gui archrunu (na vyzkouseni)

v2realbot/static/index.html

@@ -57,7 +57,7 @@
              <!-- <script src="https://code.jquery.com/jquery-3.5.1.js"></script> -->  
 
 
-        <link rel="stylesheet" href="/static/main.css?v=1.02">
+        <link rel="stylesheet" href="/static/main.css?v=1.03">
         <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script> -->
 
         <script src="/static/js/libs/mousetrap.min.js"></script>
@@ -855,7 +855,7 @@
        
         <script src="/static/js/utils.js?v=1.01"></script>
         <script src="/static/js/instantindicators.js?v=1.01"></script>
-        <script src="/static/js/archivechart.js?v=1.02"></script>
+        <script src="/static/js/archivechart.js?v=1.03"></script>
         <script src="/static/js/archivetables.js?v=1.01"></script>
         <script src="/static/js/livewebsocket.js?v=1.01"></script>
         <script src="/static/js/realtimechart.js?v=1.01"></script>

v2realbot/static/js/archivetables.js

@@ -1256,12 +1256,19 @@ var archiveRecords =
                 // Construct the GROUP HEADER - sem pripadna tlačítka atp.
                 //var groupHeaderContent = '<strong>' + (group ? 'Batch ID: ' + group : 'No Batch') + '</strong>';
                 var tools = ''
+                var icon = ''
+                exp_coll_icon_name = ''
                 if (group) {
                     tools += '<span id="batchtool_report_button" class="material-symbols-outlined tool-icon" title="Batch Report">lab_profile</span>'
                     tools += '<span id="batchtool_delete_button" class="material-symbols-outlined tool-icon" title="Delete Batch">delete</span>'
+                    exp_coll_icon_name = (state == 'collapsed') ? 'expand_more' : 'expand_less'
+                    icon = '<span class="material-symbols-outlined expand-icon" style="background-color:' + getColorForId(stratinId) + ';" title="Expand">'+exp_coll_icon_name+'</span>'
                 }
+
+
                 //console.log(group, groupId, stratinId)
-                var groupHeaderContent = '<span class="batchheader-batch-id">'+(group ? '<span class="color-tag" style="background-color:' + getColorForId(stratinId) + ';"></span>Batch ID: ' + group: 'No Batch')+'</span>';
+                //var groupHeaderContent = '<span class="batchheader-batch-id">'+(group ? '<span class="color-tag" style="background-color:' + getColorForId(stratinId) + ';"></span>Batch ID: ' + group: 'No Batch')+'</span>';
+                var groupHeaderContent = '<span class="batchheader-batch-id">'+(group ? icon + 'Batch ID: ' + group: 'No Batch')+'</span>';
                 groupHeaderContent += (group ? ' <span class="batchheader-count-info">(' + itemCount + ')</span>' + '  <span class="batchheader-period-info">' + period + '</span>   <span class="batchheader-profit-info">Profit: ' + profit + '</span>'  : '');
                 groupHeaderContent += group ? tools : ""
                 return $('<tr/>')
@@ -1344,6 +1351,15 @@ $('#archiveTable tbody').on('click', 'tr.group-header', function (event) {
     var headerRow = $(this);
     var name = headerRow.data('name');
     var collapsed = headerRow.hasClass('collapsed');
+
+    // Toggle the expand icon name
+    var expandIcon = headerRow.find('.expand-icon');
+    if (collapsed) {
+        expandIcon.text('expand_less');
+    } else {
+        expandIcon.text('expand_more');
+    }
+
     headerRow.toggleClass('collapsed');
 
     archiveRecords.rows().every(function () {

v2realbot/static/main.css

@@ -20,6 +20,15 @@
   overflow: visible;
 }
 
+.expand-icon {
+  margin-right: 3px;
+  vertical-align: middle;
+  font-size: 15px;
+  color: var(--bs-gray-400);
+  border-radius: 4px;
+  /* padding: 2px; */
+}
+
 .tool-icon {
   margin-right: 0px;
   vertical-align: middle;
@@ -254,6 +263,15 @@ table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sort
   margin-right: 5px;
   vertical-align: middle;
 }
+/* Base style for color-tag */
+
+/* Additional class to change the triangle direction when the row is expanded */
+.collapsed .color-tag {
+  border-top: none;
+  border-bottom: 10px solid #838E65; /* Triangle pointing down when expanded */
+}
+
+
 
 .group-header {
   cursor: pointer;