adcfi/pages/host.html

<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>