adcfi/pages/host.html

<main class="container mt-5" v-if="page === 'host'" v-scope @vue:mounted="mounted">
    <h1 class="mb-4">Conectar un HOST</h1>
    <form action="action/conectar_moodle.php" method="post" v-scope="{host: null}" autocomplete="off">
        <div v-if="hosts.length > 0">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label for="moodle-host" class="input-group-text">Moodle host</label>
                </div>
                <input class="form-control" list="moodle-hosts" id="moodle-host" name="moodle-host"
                    placeholder="Seleccione o ingrese un Moodle host" required v-model="selectedHost">
                <datalist id="moodle-hosts">
                    <option v-for="host in hosts" :value="host.host">{{ host.etiqueta }}</option>
                </datalist>
                <button id="limpiar-host" type="reset" class="btn btn-secondary" @click="selectedHost = null">
                    <i class="fas fa-eraser"></i>
                </button>
                <button id="agregar-host" type="button" class="btn btn-success"
                    @click="page = 'current_host'; selectedHost = null">
                    <i class="fas fa-plus"></i>
                </button>
                <button type="button" class="btn btn-info"
                    :disabled="hosts.filter(host => host.host === selectedHost).length === 0"
                    @click="page = 'current_host'">
                    <i class="fas fa-pencil-alt"></i>
                </button>
            </div>
        </div>
        <div v-else class="mb-3">
            <p>No hay hosts registrados</p>
        </div>

        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary"
                :disabled="hosts.filter(host => host.host === selectedHost).length === 0">
                <i class="fas fa-plug"></i> Conectar
            </button>
        </div>
    </form>
</main>


<div v-else @vue:mounted="selectHost">
    <main class="container mt-5">
        <h1>Registrar un nuevo HOST de Moodle</h1>
        <button class="btn btn-primary mb-4" @click="page = 'host'">
            <i class="fas fa-arrow-left"></i> Regresar
        </button>
        <form action="/action/new_host.php" method="post" @submit.prevent="newHost" id="new_host">
            <div class="mb-3">
                <label for="etiqueta" class="form-label">Etiqueta</label>
                <input type="text" name="etiqueta" class="form-control" placeholder="Etiqueta para identificar el host"
                    required v-model="current_host.etiqueta" autocomplete="off">
                <div class="form-text">Etiqueta para identificar: <code>Moodle2023A</code></div>
            </div>
            <div class="mb-3">
                <label for="base_datos" class="form-label">Base de datos</label>
                <input type="text" name="base_datos" class="form-control" placeholder="Nombre de la base de datos"
                    required v-model="current_host.postgres_dbname">
                <div class="form-text">Ejemplo: <code>moodle42licdb</code></div>
            </div>
            <div class="mb-3">
                <label for="host" class="form-label">Host de Moodle</label>
                <input type="text" name="host" class="form-control" placeholder="200.13.89.000" required
                    v-model="current_host.host">
                <div class="form-text">localhost, moodleXYZ.lci.ulsa.mx, 200.13.89.000</div>
            </div>
            <div class="mb-3">
                <label for="puerto" class="form-label">Puerto de la base de datos</label>
                <input type="text" name="puerto" class="form-control" placeholder="5432" required pattern="[0-9]+"
                    v-model="current_host.puerto">
            </div>
            <div class="mb-3">
                <label for="usuario" class="form-label">Usuario de Postgres</label>
                <input type="text" name="usuario" class="form-control" placeholder="postgres" required
                    v-model="current_host.postgres_user">
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">Contraseña de Postgres</label>
                <input type="password" name="password" class="form-control"
                    placeholder="Contraseña del usuario postgres" required v-model="current_host.postgres_password">
            </div>
            <div class="mb-3">
                <label for="periodos" class="form-label">Periodos de GEMA</label>
                <select id="periodos" name="periodos" class="form-select" 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>
            </div>
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-database"></i> Registrar
                </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(`/postgrest/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('/postgrest/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('/postgrest/moodle_host')
            console.log(this.hosts);
            this.periodos = await store.fetch('/fetch/periodos.php?all=true')
        }
    }).mount()
</script>