[diagnostics] float up diagnostics from API into store

ccarral · May 18, 2023 · 94c3987 · 94c3987
1 parent 9e79772
commit 94c3987
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 2 deletions.
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,11 +1,17 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Dashboard from "../views/Dashboard.vue";
+import Diagnostics from "../views/Diagnostics.vue";
 const routes = [
     {
         path: "/",
         name: "Dashboard",
         component: Dashboard
     },
+    {
+        path: "/diagnostics",
+        name: "Diagnostics",
+        component: Diagnostics
+    }
 ];
 
 const router = createRouter({

diff --git a/src/store/usePoolDiagnostics.ts b/src/store/usePoolDiagnostics.ts
@@ -2,18 +2,22 @@ import { defineStore } from 'pinia';
 import { useWasm } from '../store/useWasm';
 import { useFileDrawer } from "./useFileDrawer";
 
+// Esto es uno por archivo de entrada
 class Diagnostic {
     ok: boolean;
     msg: string;
     line: number;
+    line_content: string;
     col: number;
 
     constructor(ok: boolean) {
         this.ok = ok;
         this.msg = "OK";
         this.line = 0;
         this.col = 0;
+        this.line_content = "";
     }
+
 }
 
 export const usePoolDiagnostics = defineStore('pool-diagnostics', {
@@ -30,14 +34,15 @@ export const usePoolDiagnostics = defineStore('pool-diagnostics', {
             for (const [path, fileContents] of fileDrawer.files) {
                 let wasmResult = null;
                 try {
-                    console.log(typeof fileContents)
                     wasmResult = wasmApi.initPools(fileContents);
                     diagnostics.set(path, new Diagnostic(true))
                 } catch (e) {
                     const diagnostic = new Diagnostic(false);
                     diagnostic.msg = e.msg;
-                    diagnostic.line = 0;
+                    diagnostic.line = e.line;
                     diagnostic.col = 0;
+                    const lines = fileContents.split("\n");
+                    diagnostic.line_content = lines[diagnostic.line];
                     diagnostics.set(path, diagnostic);
                 }
             }

diff --git a/src/views/Diagnostics.vue b/src/views/Diagnostics.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="diagnostics-container">
+    <div v-for="[path, diagnostic] of diagnostics" :key="path" class="diagnostic">
+        <strong>file: {{path}}</strong>
+        <br>
+        <strong>Error: {{diagnostic.msg}}</strong>
+        <br>
+        <strong>Linea: {{diagnostic.line}}</strong>
+        <br>
+        <div>
+          line contents: {{ diagnostic.line_content }}
+        </div>
+        <br>
+    </div>
+  </div>
+</template>
+
+<script>
+import {usePoolDiagnostics} from "../store/usePoolDiagnostics";
+import {useWasm} from "../store/useWasm";
+import {useFileDrawer} from "../store/useFileDrawer";
+import {mapState, mapActions} from 'pinia';
+export default {
+  name: 'Diagnostics',
+  computed: {
+    ...mapState(usePoolDiagnostics, ['diagnostics']),
+  },
+  methods:{
+  ...mapActions(useWasm, ['wasmInit']),
+  ...mapActions(useFileDrawer, ['fetchUrlFiles']),
+  },
+  async mounted(){
+    await this.wasmInit();
+    this.fetchUrlFiles();
+  }
+}
+</script>
+<style>
+.diagnostics-container{
+  background: lightblue;
+}
+</style>