From 987807ec3b8461343d961923607989dbd3bf9d1e Mon Sep 17 00:00:00 2001
From: jaknapper <jaknapper@hotmail.com>
Date: Wed, 25 Jun 2025 18:12:12 +0100
Subject: [PATCH] Custom EndpointButton, Download logs using EndpointButton

---
 webapp/src/assets/less/theme.less             | 31 ++++--------
 .../labThingsComponents/endpointButton.vue    | 48 +++++++++++++++++++
 .../tabContentComponents/loggingContent.vue   | 16 ++++---
 .../tabContentComponents/scanListContent.vue  | 22 +++++----
 4 files changed, 79 insertions(+), 38 deletions(-)
 create mode 100644 webapp/src/components/labThingsComponents/endpointButton.vue

diff --git a/webapp/src/assets/less/theme.less b/webapp/src/assets/less/theme.less
index a8c6e80f..0b69d967 100644
--- a/webapp/src/assets/less/theme.less
+++ b/webapp/src/assets/less/theme.less
@@ -201,7 +201,6 @@ h4, .uk-h4 {
 
 .uk-card {
     border-radius: @paper-border-radius;
-    //border: 1px solid rgba(180, 180, 180, 0.25);
     box-shadow: @small-shadow;
 }
 
@@ -220,31 +219,13 @@ h4, .uk-h4 {
     margin: 0 auto;
 }
 
-.uk-card-default .uk-card-footer {
-    border-top: 1px solid rgba(180, 180, 180, 0.25);
-}
-
-.uk-card-primary .uk-card-footer {
-    border-top: 1px solid rgba(0, 0, 0, 0.075);
-}
-
-.uk-card-default {
-    color: @global-color;
-}
-
 .hook-inverse() {
 
     // Override background colour in dark mode
-    .uk-card-default {
+    .uk-card {
         background-color: #2a2a2a !important;
         color: @inverse-global-color;
     }
-
-    // Lighten on hover to show depth in dark mode
-    .uk-card-default:hover {
-        transition: background-color @animation-fast-duration ease;
-        background-color: #333 !important;
-    }
 }
 
 /*
@@ -385,7 +366,7 @@ a:hover {
 
 .hook-inverse() {
     .uk-button {
-        background-color: rgba(180, 180, 180, 0.15);
+        background-color: rgba(27, 13, 13, 0.15);
         color: @inverse-primary-muted-color;
         border-color: @inverse-primary-muted-color;
     }
@@ -396,7 +377,7 @@ a:hover {
     }
 
     .uk-button-primary {
-        background-color: rgba(180, 180, 180, 0.15);
+        background-color: rgb(0, 0, 0);
         color: @inverse-primary-muted-color;
         border-color: @inverse-primary-muted-color;
     }
@@ -408,6 +389,12 @@ a:hover {
     }
 }
 
+.disabled {
+  border: 1px solid #999999 !important;
+  background-color: #cccccc !important;
+  color: #919191 !important;
+}
+
 .uk-icon-button,
 .uk-icon-button:hover {
     text-decoration: none
diff --git a/webapp/src/components/labThingsComponents/endpointButton.vue b/webapp/src/components/labThingsComponents/endpointButton.vue
new file mode 100644
index 00000000..f626527a
--- /dev/null
+++ b/webapp/src/components/labThingsComponents/endpointButton.vue
@@ -0,0 +1,48 @@
+<template>
+    <a
+      class="uk-button"
+      :class="[isDisabled ? 'disabled' : '', buttonPrimary ? 'uk-button-primary' : 'uk-button-default']"
+      :href="URL"
+      download
+      > {{ buttonLabel }}</a
+    >
+</template>
+
+<script>
+
+export default {
+  name: "EndpointButton",
+
+  props: {
+    buttonPrimary: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    URL: {
+      type: String,
+      required: true,
+    },
+    isDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    destinationName: {
+      type: String,
+      required: false,
+      default: null
+    },
+    buttonLabel: {
+      type: String,
+      required: false,
+      default: "Download File"
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/theme.less";
+
+</style>
diff --git a/webapp/src/components/tabContentComponents/loggingContent.vue b/webapp/src/components/tabContentComponents/loggingContent.vue
index 38f3520c..f1628462 100644
--- a/webapp/src/components/tabContentComponents/loggingContent.vue
+++ b/webapp/src/components/tabContentComponents/loggingContent.vue
@@ -30,12 +30,12 @@
             </button>
           </div>
           <div>
-            <a
-              class="uk-button uk-button-default"
-              :href="logFileURI"
-              download="openflexure_microscope.log"
-              >Download Log File</a
-            >
+          <EndpointButton
+            class="uk-button uk-width-1-1"
+            :URL="logFileURI"
+            buttonLabel="Download Log File"
+            :buttonPrimary="false"
+            />
           </div>
         </div>
       </div>
@@ -94,12 +94,14 @@
 <script>
 import axios from "axios";
 import Paginate from "vuejs-paginate";
+import EndpointButton from "../labThingsComponents/endpointButton.vue";
 
 export default {
   name: "LoggingContent",
 
   components: {
-    Paginate
+    Paginate,
+    EndpointButton
   },
 
   data: function() {
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index 66311720..af6da18b 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -86,7 +86,9 @@
               </div>
               <h3 class="uk-card-title" style="text-align: center;">{{ item.name }}</h3>
               <div class="button-container">
+              <div class="uk-button-group" style="width:100%">
                 <action-button
+                class="uk-width-1-2"
                 thing="smart_scan"
                 action="download_zip"
                 submit-label="Download All"
@@ -95,15 +97,15 @@
                 :button-primary="true"
                 @response="downloadZipFile"
                 @error="modalError"
-                class="uk-button uk-width-1-2"
                 />
-                <a
-                  class="uk-button uk-button-primary uk-width-1-2"
-                  :class="item.stitch_available ? '' : 'disabled'"
-                  :href="downloadStitchFile( item.name )"
-                  download
-                  >Download Stitch</a
-                >
+                <EndpointButton
+                  class="uk-width-1-2"
+                  :buttonPrimary=true
+                  :isDisabled=!item.stitch_available
+                  :URL="downloadStitchFile( item.name )"
+                  buttonLabel="Download JPEG"
+                  />
+              </div>
               <button
                 class="uk-button uk-button-default uk-width-1-1"
                 @click="deleteScan(item.name)"
@@ -120,6 +122,7 @@
                 :button-primary="false"
                 :modal-progress="true"
                 @error="modalError"
+                @response="updateScans"
               />
               <button
                 v-if="item.dzi" class="uk-button uk-button-default uk-width-1-1"
@@ -151,11 +154,12 @@ import axios from "axios";
 import UIkit from "uikit";
 import actionButton from "../labThingsComponents/actionButton.vue";
 import OpenSeadragonViewer from "./scanListComponents/openSeadragonViewer.vue";
+import EndpointButton from "../labThingsComponents/endpointButton.vue";
 
 // Export main app
 export default {
   name: "ScanListContent",
-  components: { actionButton, OpenSeadragonViewer },
+  components: { actionButton, OpenSeadragonViewer, EndpointButton },
 
   data: function() {
     return {