format string

web/client/src/utils/index.ts

@@ -8,4 +8,8 @@ const isValid = (number: string): boolean => {
   return formatted.match(/^[0-9]+$/) !== null && formatted.length > 2;
 };
 
-export { formatNumber, isValid };
+const formatString = (string: string): string => {
+  return string.replace(/([A-Z])/g, " $1").trim();
+};
+
+export { formatNumber, isValid, formatString };

web/client/src/views/Number.vue

@@ -1,31 +1,37 @@
 <template>
   <div>
-    <b-container v-if="isLookup" class="border p-4 mb-3">
-      <h3 class="text-center">Information</h3>
-      <b-container>
-        <b-row v-for="(value, name) in localData" :key="name" align-v="center">
-          <h5 class="text-capitalize m-0 mr-4">{{ name }}:</h5>
+    <b-card
+      v-if="isLookup || showInformations"
+      header="Informations"
+      class="mb-3 mt-3 text-center"
+    >
+      <b-list-group flush>
+        <b-list-group-item
+          v-for="(value, name) in localData"
+          :key="name"
+          class="text-left d-flex"
+        >
+          <h5 class="text-capitalize m-0 mr-4">{{ formatString(name) }}:</h5>
           <p class="m-0">{{ value }}</p>
-        </b-row>
-      </b-container>
-    </b-container>
+        </b-list-group-item>
+      </b-list-group>
+    </b-card>
 
-    <b-container v-if="isLookup" class="border p-4">
-      <h3 class="text-center">Scanners</h3>
+    <b-card v-if="isLookup" header="Scanners" class="text-center">
       <Scanner
         v-for="(scanner, index) in scanners"
         :key="index"
         :name="scanner.name.charAt(0).toUpperCase() + scanner.name.slice(1)"
         :scanId="scanner.name"
       />
-    </b-container>
+    </b-card>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 import { mapMutations, mapState } from "vuex";
-import { formatNumber, isValid } from "../utils";
+import { formatNumber, isValid, formatString } from "../utils";
 import Scanner from "../components/Scanner.vue";
 import axios, { AxiosResponse } from "axios";
 import config from "@/config";
@@ -38,6 +44,7 @@ interface ScannerObject {
 interface Data {
   loading: boolean;
   isLookup: boolean;
+  showInformations: boolean;
   scanners: Array<ScannerObject>;
   localData: {
     valid: boolean;
@@ -67,6 +74,7 @@ export default Vue.extend({
     return {
       loading: false,
       isLookup: false,
+      showInformations: false,
       scanners: [],
       localData: {
         valid: false,
@@ -84,6 +92,7 @@ export default Vue.extend({
     this.runScans();
   },
   methods: {
+    formatString: formatString,
     async getScanners() {
       try {
         const res = await axios.get(`${config.apiUrl}/v2/scanners`);
@@ -116,6 +125,8 @@ export default Vue.extend({
         if (this.localData.valid) {
           this.getScanners();
           this.isLookup = true;
+        } else {
+          this.showInformations = true;
         }
       } catch (error) {
         this.$store.commit("pushError", { message: error });

web/client/src/views/Scan.vue

@@ -36,14 +36,13 @@
       header="Informations"
       class="mb-3 mt-3 text-center"
     >
-      <!-- <h3 class="text-center">Information</h3> -->
       <b-list-group flush>
         <b-list-group-item
           v-for="(value, name) in localData"
           :key="name"
           class="text-left d-flex"
         >
-          <h5 class="text-capitalize m-0 mr-4">{{ name }}:</h5>
+          <h5 class="text-capitalize m-0 mr-4">{{ formatString(name) }}:</h5>
           <p class="m-0">{{ value }}</p>
         </b-list-group-item>
       </b-list-group>
@@ -63,7 +62,7 @@
 <script lang="ts">
 import Vue from "vue";
 import { mapMutations, mapState } from "vuex";
-import { formatNumber, isValid } from "../utils";
+import { formatNumber, isValid, formatString } from "../utils";
 import VuePhoneNumberInput from "vue-phone-number-input";
 import Scanner from "../components/Scanner.vue";
 import axios, { AxiosResponse } from "axios";
@@ -142,6 +141,7 @@ export default Vue.extend({
     };
   },
   methods: {
+    formatString: formatString,
     clearData() {
       this.isLookup = false;
       this.showInformations = false;