From bb7c81de4b22204a05345f65709be70022fcc0af Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Sun, 22 Aug 2021 17:37:32 +0200
Subject: [PATCH 1/3] Catch error and display status code

---
 src/components/RouteBlock.vue | 44 ++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/components/RouteBlock.vue b/src/components/RouteBlock.vue
index 30d4f40..f2efde8 100644
--- a/src/components/RouteBlock.vue
+++ b/src/components/RouteBlock.vue
@@ -11,7 +11,15 @@
     <input type="text" name="api-path" v-model="routePath">
     <label for="request-body">REQUEST BODY</label>
     <textarea v-model="routeBody" name="request-body"></textarea>
-    <label for="request-response">REQUEST RESPONSE</label>
+    <label for="request-response">REQUEST RESPONSE
+      <span v-if="codeResponse" class="response-status">
+        <div
+          class="dot-status"
+          :class="codeResponse > 300 ? 'dot-status-error' : '' ">
+        </div>
+        STATUS: {{ codeResponse }}
+      </span>
+    </label>
     <textarea v-model="apiResponse" name="request-response"></textarea>
     <button @click="fetchData">🏃🏽 RUN</button>
     <button @click="deleteRoute">💣 DELETE</button>
@@ -40,6 +48,7 @@ export default {
   data() {
     return {
       apiResponse: '',
+      codeResponse: undefined,
     };
   },
   computed: {
@@ -93,6 +102,14 @@ export default {
         .then((res) => {
           console.log('AXIOS RESPONSE: ', res);
           this.apiResponse = JSON.stringify(res);
+          this.codeResponse = res.status;
+        })
+        .catch((err) => {
+          console.log('AXIOS ERROR', err);
+          this.apiResponse = JSON.stringify(err);
+          if (err?.response?.status) {
+            this.codeResponse = err.response.status;
+          }
         });
     },
     deleteRoute() {
@@ -103,6 +120,10 @@ export default {
 </script>
 
 <style scoped>
+  label {
+    display: flex;
+  }
+
   .route-block {
     display: grid;
     gap: var(--unit-2);
@@ -110,4 +131,25 @@ export default {
     border: 1px solid var(--color-2-5);
     background-color: var(--color-1);
   }
+
+  .response-status {
+    margin-left: var(--unit-4);
+    color: var(--color-2);
+    display: flex;
+    align-items: center;
+    margin-top: -6px;
+  }
+
+  .dot-status {
+    width: var(--unit-1);
+    height: var(--unit-1);
+    border: 1px solid var(--color-2);
+    border-radius: 50%;
+    background: chartreuse;
+    margin: 0 var(--unit-1);
+  }
+
+  .dot-status-error {
+    background: red;
+  }
 </style>
-- 
GitLab


From 2132a249f88af759601a56edbdf959a07e4f4393 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Sun, 22 Aug 2021 17:53:08 +0200
Subject: [PATCH 2/3] Update style for a better vizu ;)

---
 src/App.vue                             |  1 +
 src/components/BtnColorModeSwitcher.vue |  4 +++-
 src/components/RouteBlock.vue           | 21 ++++++++++++++++++++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ca262de..f02a087 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -29,6 +29,7 @@ export default {
   --color-1-5: #2c3e5080;
   --color-2: #adefd1;
   --color-2-5: #adefd180;
+  --color-3: #476a74;
   /* units */
   --unit-1: 6px;
   --unit-2: calc(2 * var(--unit-1));
diff --git a/src/components/BtnColorModeSwitcher.vue b/src/components/BtnColorModeSwitcher.vue
index 172a664..c8ff2a1 100644
--- a/src/components/BtnColorModeSwitcher.vue
+++ b/src/components/BtnColorModeSwitcher.vue
@@ -19,11 +19,12 @@ export default {
       const r = document.querySelector(':root');
       if (this.colorMode === 1) {
         // -- Light mode
-        r.style.setProperty('--color-0', '#eafbf3');
+        r.style.setProperty('--color-0', '#ffffff');
         r.style.setProperty('--color-1', '#d4f7e7');
         r.style.setProperty('--color-1-5', '#d4f7e780');
         r.style.setProperty('--color-2', '#1b2631');
         r.style.setProperty('--color-2-5', '#1b263180');
+        r.style.setProperty('--color-3', '#abdccb');
       } else {
         // -- Dark mode (default)
         r.style.setProperty('--color-0', '#1b2631');
@@ -31,6 +32,7 @@ export default {
         r.style.setProperty('--color-1-5', '#2c3e5080');
         r.style.setProperty('--color-2', '#adefd1');
         r.style.setProperty('--color-2-5', '#adefd180');
+        r.style.setProperty('--color-3', '#476a74');
       }
     },
   },
diff --git a/src/components/RouteBlock.vue b/src/components/RouteBlock.vue
index f2efde8..537ce4c 100644
--- a/src/components/RouteBlock.vue
+++ b/src/components/RouteBlock.vue
@@ -124,11 +124,30 @@ export default {
     display: flex;
   }
 
+  input,
+  textarea,
+  select {
+    border: none;
+  }
+
+  button {
+    border: none;
+    background: var(--color-3);
+    color: var(--color-2);
+  }
+
+  button:hover {
+    cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    background-color: var(--color-0);
+  }
+
   .route-block {
     display: grid;
     gap: var(--unit-2);
     padding: var(--unit-2);
-    border: 1px solid var(--color-2-5);
+    border: none;
     background-color: var(--color-1);
   }
 
-- 
GitLab


From 835628dc63c3393cfa9012ca54e8dc34338b7c0f Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.courat@bag-era.fr>
Date: Sun, 22 Aug 2021 17:53:50 +0200
Subject: [PATCH 3/3] Update version to 0.2.2

---
 package.json               | 2 +-
 src/components/Onboard.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 3cc2c2d..b4fcee4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vapi",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/components/Onboard.vue b/src/components/Onboard.vue
index 5fad9d0..b832853 100644
--- a/src/components/Onboard.vue
+++ b/src/components/Onboard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="on-board">
-    <h1>VAPI <span>0.2.1</span></h1>
+    <h1>VAPI <span>0.2.2</span></h1>
     <p>A minimal api tester</p>
   </div>
 </template>
-- 
GitLab