Merge pull request #951 from argilo/small-tasking

Use coloured icons for task status

auto_rx/autorx/static/css/autorx.css

@@ -61,17 +61,10 @@
 .icon-angle-down:before { content: '\f107'; } /* '' */
 .icon-history:before { content: '\f1da'; } /* '' */
 
-
-#task_status {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 2px;
-}
-
 .sdrinfo-element {
-	margin: 0px 4px;
-	padding: 4px;
-	
+	display: inline-block;
+	margin: 0.1em;
+	padding: 0.1em 0.2em;	
 	border: 2px solid rgb(135, 135, 135);
-	border-radius: 1px;
-}
+	border-radius: 4px;
+}

auto_rx/autorx/static/js/autorxapi.js

@@ -3,13 +3,16 @@
 function update_task_list(){
     // Grab the latest task list.
     $.getJSON("get_task_list", function(data){
-        var task_info = "";
+        var task_summary = "";
+        var task_details = "";
+        var num_tasks = 0;
 
         $('#stop-frequency-select').children().remove();
 
         added_decoders = false;
 
         for (_task in data){
+            num_tasks += 1;
             // Append the current task to the task list.
             if(_task.includes("SPY") || _task.includes("KA9Q")){
                 task_detail = _task + " - "
@@ -26,6 +29,7 @@ function update_task_list(){
 
                 added_decoders = true;
 
+                task_icon = "🟢";
                 task_detail += (parseFloat( data[_task]["freq"] )/1e6).toFixed(3);
 
                 if (data[_task].hasOwnProperty("type")){
@@ -34,13 +38,16 @@ function update_task_list(){
                 
             } else {
                 if(data[_task]["task"] == "Scanning"){
+                    task_icon = "🔵";
                     task_detail += "Scan";
                 } else {
+                    task_icon = "⚪";
                     task_detail += "Idle";
                 }
             }
 
-            task_info += "<div class='sdrinfo-element'>" + task_detail + "</div>"
+            task_summary += "<span title='" + task_detail + "'>" + task_icon + "</span>"
+            task_details += "<span class='sdrinfo-element'>" + task_icon + " " + task_detail + "</span>"
         }
 
         if(added_decoders == false){
@@ -51,7 +58,15 @@ function update_task_list(){
         }
         
         // Update page with latest task.
-        $('#task_status').html(task_info);
+        if (num_tasks <= 3) {
+            $('#summary_element').css("display", "block");
+            $('#task_summary').html(task_details);
+            $('#task_details').html("");
+        } else {
+            $('#summary_element').css("display", "list-item");
+            $('#task_summary').html(task_summary);
+            $('#task_details').html(task_details);
+        }
         
         setTimeout(resume_web_controls,2000);
     });

auto_rx/autorx/templates/index.html

@@ -51,6 +51,7 @@
                     $('#main span').css('color', 'black')
                 }
                 $('#main p').css('color', 'black')
+                $('#main details').css('color', 'black')
                 $('.modal-content p').css('color', 'black')
                 $('.modal-content h2').css('color', 'black')
                 $('.modal-content span').css('color', 'black')
@@ -77,6 +78,7 @@
                     $('#main span').css('color', 'white')
                 }
                 $('#main p').css('color', 'white')
+                $('#main details').css('color', 'white')
                 $('.modal-content p').css('color', 'white')
                 $('.modal-content h2').css('color', 'white')
                 $('.modal-content span').css('color', 'white')
@@ -458,6 +460,10 @@
                 }
             }
 
+            $("#tasking").on("toggle", function() {
+                mymap.invalidateSize();
+            })
+
             // Create Tabulator table.
             table = new Tabulator("#telem_table", {
                 index:"realid",
@@ -1628,7 +1634,10 @@
         </div>
         <span style="font-size:2vh;font-size:calc(var(--vh, 1vh) * 2);" id="footertext"></span>
         <p style="font-size:2vh;font-size:calc(var(--vh, 1vh) * 2);">Station: <span id="station_callsign">???</span></p>
-        <p style="font-size:2vh;font-size:calc(var(--vh, 1vh) * 2);">Tasking: <span id="task_status"></span></p>
+        <details id="tasking" style="font-size:2vh;font-size:calc(var(--vh, 1vh) * 2);">
+            <summary id="summary_element">Tasking: <span id="task_summary"></span></summary>
+            <span id="task_details"></span>
+        </details>
         <div id="tableid">
             <div id="telem_table"></div>
         </div>