Ajustes.vue

<template>
  <div>
    <div class="columns">
      <div class="column">
        <h2 class="is-size-2">Impresora</h2>
        <b-message title="Aviso" has-icon type="is-warning" :closable="false"
          >Recuerde seleccionar solo impresoras térmicas, no virtuales ni de
          otro tipo. Si la impresora no aparece en la lista, probablemente no la
          haya compartido anteriormente</b-message
        >
        <b-field label="Impresora">
          <b-select
            :loading="cargando"
            v-model="impresoraSeleccionada"
            placeholder="Seleccione una impresora"
          >
            <option
              v-for="impresora in impresoras"
              :value="impresora"
              :key="impresora"
            >
              {{ impresora }}
            </option>
          </b-select>
        </b-field>
        <b-button :loading="cargando" @click="guardar()" type="is-success"
          >Guardar</b-button
        >
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <h2 class="is-size-2">Conexión remota</h2>
        <p>
          Usted puede escanear el siguiente código QR o acceder a
          <code>
            {{ direccionServidor }}
          </code>
          desde su navegador.
          <strong
            >Recuerde que todos los dispositivos deben estar en la misma red de
            área local</strong
          >
        </p>
        <img alt="" ref="imagenQr" />
      </div>
    </div>
  </div>
</template>
<script>
import AjustesService from "../services/AjustesService";
const QRious = require("../../node_modules/qrious/dist/qrious");
export default {
  data: () => ({
    cargando: false,
    impresoraSeleccionada: "",
    impresoras: [],
    direccionServidor: "",
  }),
  async mounted() {
    await this.obtenerIp();
    await this.obtenerImpresoras();
    await this.obtenerImpresora();
  },
  methods: {
    async guardar() {
      this.cargando = true;
      await AjustesService.guardarImpresora(this.impresoraSeleccionada);
      this.$buefy.dialog.alert(
        "Se ha guardado la impresora. Verifique que se haya impreso un ticket de prueba para asegurarse de que todo ha funcionado"
      );
      this.cargando = false;
    },
    async obtenerImpresora() {
      this.cargando = true;
      this.impresoraSeleccionada = await AjustesService.obtenerImpresora();
      this.cargando = false;
    },
    async obtenerIp() {
      this.cargando = true;
      const ip = await AjustesService.obtenerIp();
      this.direccionServidor = `${window.location.protocol}//${ip}:${window.location.port}${window.location.pathname}${window.location.hash}`;
      new QRious({
        element: this.$refs.imagenQr,
        value: this.direccionServidor,
        size: 200,
        backgroundAlpha: 1,
        foreground: "#000000",
        level: "H",
      });
      this.cargando = false;
    },
    async obtenerImpresoras() {
      this.cargando = true;
      this.impresoras = await AjustesService.obtenerImpresoras();
      this.cargando = false;
    },
  },
};
</script>