Spruce up progress bar output object

openpharma · Dec 5, 2024 · bfc864f · bfc864f
1 parent f0a19e7
commit bfc864f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/R/shiny.R b/R/shiny.R
@@ -48,10 +48,16 @@ update_cbs <- function(tblId, checked) {
 progress_bar <- function(outputId) {
   div(
     id = outputId,
-    class = "cs-progress-bar",
-    div(class = c("cs-progress", "completed")),
-    div(class = c("cs-progress", "unmarking")),
-    div(class = c("cs-progress", "marking"))
+    class = "cs-progress-container",
+    div(
+      class = "cs-progress-bar",
+      div(class = c("cs-progress", "completed")),
+      div(class = c("cs-progress", "unmarking")),
+      div(class = c("cs-progress", "marking"))
+    ),
+    div(
+      class = "cs-completed"
+    )
   )
 }
 

diff --git a/inst/app/www/custom.css b/inst/app/www/custom.css
@@ -76,30 +76,40 @@ tr:has(td input[type="checkbox"].indeterminate:not(:indeterminate))>td {
     border-color: aquamarine;
 }
 
-div.cs-progress-bar {
+div.cs-progress-container {
+  display: flex;
+  margin-bottom: 1rem;
+  align-items: center;
+  gap: 5px;
+}
+
+div.cs-progress-container>.cs-progress-bar {
   width: 100%;
   background-color: #b3b3b3;
   color: #ffffff;
   border-radius: 10px;
   height: 10px;
   overflow: hidden;
   display: flex;
-  margin-bottom: 1rem;
 }
 
-div.cs-progress-bar>div.cs-progress {
+div.cs-progress-container>.cs-completed {
+  cursor: default;
+}
+
+div.cs-progress-container>.cs-progress-bar>.cs-progress {
   height: 100%;
   transition: width 1s;
 }
 
-div.cs-progress-bar>div.cs-progress.completed {
+div.cs-progress-container>.cs-progress-bar>.cs-progress.completed {
   background-color: green;
 }
 
-div.cs-progress-bar>div.cs-progress.unmarking {
+div.cs-progress-container>.cs-progress-bar>.cs-progress.unmarking {
   background-color: red;
 }
 
-div.cs-progress-bar>div.cs-progress.marking {
+div.cs-progress-container>.cs-progress-bar>.cs-progress.marking {
   background-color: blue;
 }
diff --git a/inst/app/www/custom.js b/inst/app/www/custom.js
@@ -42,15 +42,17 @@ $(document).ready(function() {
 
   $.extend(customProgressBar, {
     find: function(scope) {
-      return $(scope).find("div.cs-progress-bar");
+      return $(scope).find("div.cs-progress-container");
     },
     renderValue: function(el, data) {
       let cmp_pct = (data.completed-data.unmarking)/data.total*100;
       let um_pct = data.unmarking/data.total*100;
       let m_pct = data.marking/data.total*100;
+      let true_cmp_pct = data.completed/data.total*100;
       $('#' + el.id + " .cs-progress.completed").width(cmp_pct.toFixed(2) + "%")
       $('#' + el.id + " .cs-progress.unmarking").width(um_pct.toFixed(2) + "%")
       $('#' + el.id + " .cs-progress.marking").width(m_pct.toFixed(2) + "%")
+      $('#' + el.id + " .cs-completed").html(true_cmp_pct.toFixed(1) + "%")
     }
   });