Add menu.html with export functionality

pages/host.html

@@ -0,0 +1,194 @@
+<main class="container" v-if="page === 'host'" v-scope @vue:mounted="mounted">
+    <h1>Conectar un HOST</h1>
+    <form action="action/conectar_moodle.php" method="post" v-scope="{host: null}">
+        <div class="grid">
+            <div v-if="hosts.length > 0">
+                <label for="moodle-host">
+                    Moodle host
+                    <input list="moodle-hosts" name="moodle-host" placeholder="Moodle host" required
+                        v-model="selectedHost">
+                </label>
+                <datalist id="moodle-hosts" v-for="host in hosts">
+                    <option :value="host.host">
+                        {{ host.etiqueta }}
+                    </option>
+                </datalist>
+            </div>
+            <div v-else>
+                <p>No hay hosts registrados</p>
+            </div>
+            <label for="agregar-host">
+                Agregar host
+                <button id="agregar-host" type="button" @click="page = 'current_host'; selectedHost = null">
+                    <i class="fas fa-plus"></i>
+                </button>
+            </label>
+        </div>
+        <div class="grid">
+            <button type="button" :disabled="hosts.filter(host => host.host === selectedHost).length === 0"
+                @click="page = 'current_host'">Editar <i class="fas fa-edit"></i>
+            </button>
+            <button type="submit" :disabled="hosts.filter(host => host.host === selectedHost).length === 0">
+                Conectar <i class="fas fa-database"></i>
+            </button>
+        </div>
+    </form>
+</main>
+
+<div v-else @vue:mounted="selectHost">
+    <main class="container">
+        <h1>Registrar un nuevo HOST de Moodle</h1>
+        <button class="btn btn-primary" @click="page = 'host'">
+            Regresar
+            <i class="fas fa-arrow-left"></i>
+        </button>
+        <form action="/action/new_host.php" method="post" @submit.prevent="newHost" id="new_host">
+            <div class="grid">
+                <label for="etiqueta">
+                    Etiqueta
+                    <input type="text" name="etiqueta" placeholder="Etiqueta para identificar el host" required
+                        :value="current_host.etiqueta" v-model="current_host.etiqueta" autocomplete="off">
+                    <small>Etiqueta para identificar: <code>Moodle2023A</code></small>
+                </label>
+                <label for="base_datos">
+                    Base de datos
+                    <input type="text" name="base_datos" placeholder="Nombre de la base de datos" required
+                        :value="current_host.postgres_dbname" v-model="current_host.postgres_dbname">
+                    <small>Ejemplo: <code>moodle42licdb</code></small>
+                </label>
+            </div>
+            <div class="grid">
+                <label for="host">
+                    Host de Moodle
+                    <input type="text" name="host" placeholder="200.13.89.000" required :value="current_host.host"
+                        v-model="current_host.host">
+                    <small>localhost, moodleXYZ.lci.ulsa.mx, 200.13.89.000</small>
+                </label>
+
+
+                <label for="puerto">
+                    Puerto de la base de datos
+                    <!-- validate only numbers -->
+                    <input type="text" name="puerto" placeholder="5432" required value="5432" pattern="[0-9]+"
+                        :value="current_host.puerto" v-model="current_host.puerto">
+                </label>
+            </div>
+            <div class="grid">
+                <label for="usuario">
+                    Usuario de Postgres
+                    <input type="text" name="usuario" placeholder="postgres" required value="postgres"
+                        :value="current_host.postgres_user" v-model="current_host.postgres_user">
+                </label>
+                <label for="password">
+                    Contraseña de Postgres
+                    <input type="password" name="password" placeholder="Contraseña del usuario postgres" required
+                        v-model="current_host.postgres_password">
+                </label>
+            </div>
+            <div class="grid">
+                <label for="periodos">Which periodos would you like to order?
+                    <select id="periodos" name="periodos" multiple required v-model="current_host.periodos_gema">
+
+                        <option v-for="periodo in periodos" :value="periodo.Periodo_id"
+                            :selected="current_host.periodos_gema.includes(periodo.Periodo_id)">
+                            {{ periodo.Periodo_desc }} de {{ periodo.Nivel_desc }}
+                        </option>
+                    </select>
+                </label>
+            </div>
+            <div class="grid">
+                <button type="submit">
+                    Registrar
+                    <i class="fas fa-database"></i>
+                </button>
+            </div>
+        </form>
+    </main>
+</div>
+
+
+
+<script>
+    PetiteVue.createApp({
+        store,
+        // state
+        page: 'host',
+        // data
+        hosts: [],
+        periodos: [],
+
+        selectedHost: null,
+
+        current_host: {},
+
+        reset() {
+            this.current_host = {
+                etiqueta: null,
+                postgres_dbname: null,
+                host: null,
+                puerto: 5432,
+                postgres_user: 'postgres',
+
+                periodos_gema: []
+            }
+        },
+
+        async selectHost() {
+            if (this.selectedHost) {
+                const data = await store.fetch(`http://www.localhost:3000/moodle_host?host=eq.${this.selectedHost}`, {
+                    headers: {
+                        'Prefer': 'plurality=singular'
+                    }
+                })
+                this.current_host = data[0]
+                this.current_host.postgres_password = '';
+            }
+            else {
+                this.reset()
+            }
+        },
+
+        async newHost() {
+            try {
+                const response = await fetch('http://www.localhost:3000/rpc/new_host', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        Authorization: `Bearer ${store.token}`
+                    },
+                    body: JSON.stringify({
+                        etiqueta_param: this.current_host.etiqueta,
+                        host_param: this.current_host.host,
+                        puerto_param: this.current_host.puerto,
+                        postgres_user_param: this.current_host.postgres_user,
+                        postgres_dbname_param: this.current_host.postgres_dbname,
+                        postgres_password_param: this.current_host.postgres_password,
+                        periodos_gema_param: `{${this.current_host.periodos_gema.join(',')}}`,
+                        moodle_host_id_param: this.current_host.moodle_host_id ?? null,
+                    }),
+                })
+            } catch (error) {
+                store.error = {
+                    title: 'Error al registrar el host',
+                    message: 'Ocurrió un error al registrar el host',
+                    avoidable: true,
+                }
+
+            }
+
+            store.error = {
+                title: 'Host registrado',
+                message: 'El host se ha registrado correctamente',
+                avoidable: true,
+            }
+
+            this.reset()
+        },
+
+        async mounted() {
+            this.reset()
+            this.hosts = await store.fetch('http://www.localhost:3000/moodle_host')
+            this.periodos = await store.fetch('/fetch/periodos.php')
+        }
+    }).mount()
+</script>

pages/menu.html

@@ -0,0 +1,50 @@
+<main class="container">
+    <button type="button" class="secondary" v-for="item in menu" @click="item.click">
+        <i :class="item.icon"></i>
+        {{ item.name }}
+    </button>
+</main>
+<script>
+    PetiteVue.createApp({
+        menu: [{
+            name: 'Construcción de Calificación',
+            icon: 'fas fa-plus',
+            url: '/export/excel.php',
+            filename: 'calificacion.csv',
+            async click() {
+                store.loading = true;
+                const response = await fetch(this.url, { method: 'POST', body: JSON.stringify({ query: 'calificaciones' }) });
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = this.filename;
+                a.charset = "windows-1252"; // Set the charset to ANSI
+                a.click();
+                a.remove();
+                store.loading = false;
+            }
+        },
+        {
+            name: 'Usuarios registrados',
+            icon: 'fas fa-plus',
+            url: '/export/excel.php',
+            filename: 'usuarios.csv',
+            async click() {
+                store.loading = true;
+                const response = await fetch(this.url, { method: 'POST', body: JSON.stringify({ query: 'usuarios' }) });
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = this.filename;
+                a.charset = "windows-1252"; // Set the charset to ANSI
+                a.click();
+                a.remove();
+                store.loading = false;
+            }
+        }
+        ],
+
+    }).mount();
+</script>