add: parser structure

ECYS-FIUSAC · Jan 6, 2025 · 7899bd8 · 7899bd8
1 parent c240aba
commit 7899bd8
Show file tree

Hide file tree

Showing 8 changed files with 4,028 additions and 0 deletions.
diff --git a/fases/fase3/OLC2.ico b/fases/fase3/OLC2.ico
diff --git a/fases/fase3/index.html b/fases/fase3/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="OLC2.ico" type="image/x-icon">
+    <title>FortranPEG</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        fort: '#734c94',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="h-screen py-2 px-4">
+    <!-- HEADER -->
+    <header class="flex flex-row gap-4">
+        <div class="flex flex-row gap-1">
+            <svg width="40" height="40" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+                <path style="fill:#734c94;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M18.969 0C13.25 0 0 11 0 18.66v90.453c0 5.692 11.21 18.903 18.781 18.903l90.551-.032c6.738-.004 18.688-9.683 18.688-18.601V18.84c0-6.078-10.61-18.832-18.43-18.832L18.969 0zm-1.395 13.66h93.367v41.711l-10.992-.164c-.101-.098-.402-3.047-.605-5.758C98.19 36.7 95.328 29.363 89.809 26.5c-2.914-1.504-7.457-1.95-22.02-1.953l-13.57.004v31.273h2.41c4.066-.05 9.234-1.004 10.941-2.058 2.211-1.356 4.067-5.27 4.72-9.989.491-3.445.87-6.023.87-6.023h10.676v49.691H72.793v-1.957c0-3.21-1.508-10.691-2.563-12.949-1.656-3.465-4.464-4.668-12.449-5.422l-3.664-.351.203 16.113c.149 15.308.25 16.164 1.203 17.469 1.207 1.605 2.512 1.906 10.493 2.507l5.355.258-.035 10.938H17.574v-10.942l4.922-.304c9.988-.653 9.887-.602 10.39-8.43.45-7.43-.116-65.598-.452-66.762-.551-1.922-2.618-3.027-8.786-3.023l-6.074-.04V13.66z"/>
+            </svg>
+            <h1 class="text-2xl font-bold pt-2">ortranPEG</h1>
+        </div>
+        <h1 class="text-xl font-semibold bg-fort p-2 text-white rounded-lg">Generador de parser para Fortran</h1>
+    </header>
+
+    <!-- CONTENT -->
+    <div class=" flex flex-row w-full mt-10 h-5/6">
+        <!-- EDITOR DE TEXTO -->
+        <section class="h-full w-full">
+            <h2 class="text-lg font-semibold text-center bg-fort text-white rounded-t-lg" style="width: 93%;">Escribe tu gramatica</h2>
+            <div id="editor" class=" border border-gray-500"  style="height: 92%; width: 93%;"></div>
+        </section>
+
+        <!-- SALIDA -->
+        <section class="h-full w-full flex flex-col">
+            <h2 class="text-lg font-semibold text-center bg-fort text-white rounded-t-lg ml-auto" style="width: 93%;" >Salida</h2>
+            <div id="salida" class="ml-auto border border-gray-500" style="height: 92%; width: 93%;"></div>
+        </section>
+
+    </div>
+
+    <div class="text-center">
+        <a id="BotonDescarga" download="parser.f90" class="py-2 px-4 bg-fort text-white font-bold text-xl rounded-lg">Descargar modulo de Fortran</a>
+    </div>
+
+    <script type="module" src="index.js"></script>
+</body>
+</html>
diff --git a/fases/fase3/index.js b/fases/fase3/index.js
@@ -0,0 +1,112 @@
+import * as monaco from 'https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/+esm';
+import { parse } from './parser/gramatica.js';
+import { generateParser } from './parser/compiler/utils.js';
+
+export let ids = [];
+export let usos = [];
+export let errores = [];
+
+// Crear el editor principal
+const editor = monaco.editor.create(document.getElementById('editor'), {
+    value: '',
+    language: 'java',
+    theme: 'tema',
+    automaticLayout: true,
+});
+
+// Crear el editor para la salida
+const salida = monaco.editor.create(document.getElementById('salida'), {
+    value: '',
+    language: 'java',
+    readOnly: true,
+    automaticLayout: true,
+});
+
+let decorations = [];
+
+// Analizar contenido del editor
+let cst;
+const analizar = async () => {
+    const entrada = editor.getValue();
+    ids.length = 0;
+    usos.length = 0;
+    errores.length = 0;
+    try {
+        cst = parse(entrada);
+
+        if (errores.length > 0) {
+            salida.setValue(`Error: ${errores[0].message}`);
+            cst = null;
+            return;
+        } else {
+            // salida.setValue('Análisis Exitoso');
+            const fileContents = await generateParser(cst); // Llamada correcta a generateParser
+            salida.setValue(fileContents); // Mostrar el contenido generado en la salida
+
+            // Preparar el botón de descarga
+            const blob = new Blob([fileContents], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const button = document.getElementById('BotonDescarga'); // Asegúrate de que el ID coincide con el HTML
+            button.href = url;
+        }
+
+        // salida.setValue("Análisis Exitoso");
+        // Limpiar decoraciones previas si la validación es exitosa
+        decorations = editor.deltaDecorations(decorations, []);
+    } catch (e) {
+        cst = null;
+        if (e.location === undefined) {
+            salida.setValue(`Error: ${e.message}`);
+        } else {
+            // Mostrar mensaje de error en el editor de salida
+            salida.setValue(
+                `Error: ${e.message}\nEn línea ${e.location.start.line} columna ${e.location.start.column}`
+            );
+
+            // Resaltar el error en el editor de entrada
+            decorations = editor.deltaDecorations(decorations, [
+                {
+                    range: new monaco.Range(
+                        e.location.start.line,
+                        e.location.start.column,
+                        e.location.start.line,
+                        e.location.start.column + 1
+                    ),
+                    options: {
+                        inlineClassName: 'errorHighlight', // Clase CSS personalizada para cambiar color de letra
+                    },
+                },
+                {
+                    range: new monaco.Range(
+                        e.location.start.line,
+                        e.location.start.column,
+                        e.location.start.line,
+                        e.location.start.column
+                    ),
+                    options: {
+                        glyphMarginClassName: 'warningGlyph', // Clase CSS para mostrar un warning en el margen
+                    },
+                },
+            ]);
+        }
+    }
+};
+
+// Escuchar cambios en el contenido del editor
+editor.onDidChangeModelContent(() => {
+    analizar();
+});
+
+// CSS personalizado para resaltar el error y agregar un warning
+const style = document.createElement('style');
+style.innerHTML = `
+    .errorHighlight {
+        color: red !important;
+        font-weight: bold;
+    }
+    .warningGlyph {
+        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="orange" d="M8 1l7 14H1L8 1z"/></svg>') no-repeat center center;
+        background-size: contain;
+    }
+`;
+document.head.appendChild(style);