Initial lens implementation

components/lenses/ResponseBodyRenderer.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <tabs>
+      <tab
+        v-for="(lens, index) in validLenses"
+        :id="lens.lensName"
+        :key="lens.lensName"
+        :label="lens.lensName"
+        :selected="index === 0"
+      >
+        <component :is="lens.renderer" :response="response" />
+      </tab>
+    </tabs>
+  </div>
+</template>
+
+<script>
+import getSuitableLenses from "../../helpers/lenses/lenses"
+
+export default {
+  components: {
+    // Lens Renderers
+    raw: () => import("../lenses/renderers/RawLensRenderer"),
+    json: () => import("../lenses/renderers/JSONLensRenderer"),
+    imageres: () => import("../lenses/renderers/ImageLensRenderer"),
+    htmlres: () => import("../lenses/renderers/HTMLLensRenderer"),
+
+    tabs: () => import("../ui/tabs"),
+    tab: () => import("../ui/tab"),
+  },
+
+  props: {
+    response: {},
+  },
+
+  computed: {
+    validLenses() {
+      return getSuitableLenses(this.response)
+    },
+  },
+}
+</script>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -0,0 +1,36 @@
+<template>
+  <ul>
+    <li>
+      <Editor
+        :value="responseBodyText"
+        :lang="'html'"
+        :options="{
+          maxLines: 16,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      return new TextDecoder("utf-8").decode(this.response.body)
+    },
+  },
+}
+</script>

components/lenses/renderers/ImageLensRenderer.vue

@@ -0,0 +1,56 @@
+<template>
+  <ul>
+    <li>
+      <img :src="imageSource" />
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      imageSource: "",
+    }
+  },
+  watch: {
+    response: {
+      immediate: true,
+      handler(newValue) {
+        console.log("wetch")
+        this.imageSource = ""
+
+        const buf = this.response.body
+        const bytes = new Uint8Array(buf)
+        const blob = new Blob([bytes.buffer])
+
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          console.log(e.target.result)
+          this.imageSource = e.target.result
+        }
+        reader.readAsDataURL(blob)
+      },
+    },
+  },
+
+  mounted() {
+    console.log("mount")
+    this.imageSource = ""
+
+    console.log(this.response)
+    const buf = this.response.body
+    const bytes = new Uint8Array(buf)
+    const blob = new Blob([bytes.buffer])
+
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      console.log(e.target.result)
+      this.imageSource = e.target.result
+    }
+    reader.readAsDataURL(blob)
+  },
+}
+</script>

components/lenses/renderers/JSONLensRenderer.vue

@@ -0,0 +1,45 @@
+<template>
+  <ul>
+    <li>
+      <Editor
+        :value="responseBodyText"
+        :lang="'json'"
+        :options="{
+          maxLines: 16,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      try {
+        return JSON.stringify(
+          JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))),
+          null,
+          2
+        )
+      } catch (e) {
+        // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
+        return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+      }
+    },
+  },
+}
+</script>

components/lenses/renderers/RawLensRenderer.vue

@@ -0,0 +1,36 @@
+<template>
+  <ul>
+    <li>
+      <Editor
+        :value="responseBodyText"
+        :lang="'plain_text'"
+        :options="{
+          maxLines: 16,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+    },
+  },
+}
+</script>

components/ui/ace-editor.vue

@@ -76,6 +76,7 @@ export default {
       })
     },
     lang(value) {
+      console.log("ace/mode/" + value)
       this.editor.getSession().setMode("ace/mode/" + value)
     },
     options(value) {