Remove unused CSS

datalab-org · Sep 5, 2024 · af0dead · af0dead
1 parent ac554b1
commit af0dead
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 28 deletions.
diff --git a/webapp/src/components/EquipmentInformation.vue b/webapp/src/components/EquipmentInformation.vue
@@ -119,15 +119,15 @@ export default {
     getStatusBadgeClass(status) {
       switch (status) {
         case "working":
-          return "badge badge-success";
+          return "badge-success";
         case "broken":
-          return "badge badge-warning";
+          return "badge-warning";
         case "being_fixed":
-          return "badge badge-info";
+          return "badge-info";
         case "defunct":
-          return "badge badge-dark";
+          return "badge-dark";
         case "not_being_fixed":
-          return "badge badge-danger";
+          return "badge-danger";
       }
     },
     formatStatus(status) {

diff --git a/webapp/src/components/SampleInformation.vue b/webapp/src/components/SampleInformation.vue
@@ -38,13 +38,12 @@
           <div class="form-group col-md-3 col-sm-3 col-6 pb-3">
             <ToggleableCollectionFormGroup v-model="Collections" />
           </div>
-          <div class="form-group col-md-3 col-sm-3 col-6 pb-3">
-            <label for="samp-status">Status</label>
-            <select id="samp-status" v-model="Status" class="form-control">
-              <option v-for="option in statusOptions" :key="option" :value="option">
-                {{ formatStatusOption(option) }}
-              </option>
-            </select>
+          <div
+            class="form-group col-md-3 col-sm-3 col-6 pb-3 d-flex justify-content-center align-items-center"
+          >
+            <span :class="getStatusBadgeClass(Status)" class="badge text-uppercase">
+              {{ Status }}
+            </span>
           </div>
         </div>
         <div class="form-row">
@@ -67,7 +66,6 @@
 
 <script>
 import { createComputedSetterForItemField } from "@/field_utils.js";
-import { getItemStatusOptions } from "@/server_fetch_utils.js";
 import ChemFormulaInput from "@/components/ChemFormulaInput";
 import FormattedRefcode from "@/components/FormattedRefcode";
 import ToggleableCollectionFormGroup from "@/components/ToggleableCollectionFormGroup";
@@ -102,7 +100,6 @@ export default {
         { title: "Table of Contents", targetID: "table-of-contents" },
         { title: "Synthesis Information", targetID: "synthesis-information" },
       ],
-      statusOptions: [],
     };
   },
   computed: {
@@ -116,22 +113,25 @@ export default {
     Collections: createComputedSetterForItemField("collections"),
     Status: createComputedSetterForItemField("status"),
   },
-  mounted() {
-    this.fetchStatusOptions();
-  },
   methods: {
-    fetchStatusOptions() {
-      getItemStatusOptions()
-        .then((data) => {
-          this.statusOptions = data;
-        })
-        .catch((error) => {
-          console.error("Failed to load status options:", error);
-        });
-    },
-    formatStatusOption(option) {
-      return option.charAt(0).toUpperCase() + option.slice(1);
+    getStatusBadgeClass(status) {
+      switch (status) {
+        case "planned":
+          return "badge-secondary";
+        case "active":
+          return "badge-primary";
+        case "completed":
+          return "badge-success";
+        case "failed":
+          return "badge-danger";
+      }
     },
   },
 };
 </script>
+
+<style scoped>
+.badge {
+  font-size: 1em;
+}
+</style>