const { createApp } = Vue;

const api = {
  auds: "/auditories/",
  oboruds: (audId) => `/oboruds/?aud_id=${encodeURIComponent(audId)}`,
};

async function fetchJSON(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

createApp({
  data() {
    return {
      view: 'byAud',
      auditories: [],
      selectedAudId: '',
      oboruds: [],
      status: '',
      error: '',
    };
  },
  methods: {
    async loadAuditories() {
      this.status = 'Загрузка аудиторий…';
      this.error = '';
      try {
        this.auditories = await fetchJSON(api.auds);
        this.status = '';
      } catch (e) {
        console.error(e);
        this.error = 'Не удалось загрузить аудитории';
        this.status = '';
      }
    },
    async loadOboruds() {
      if (!this.selectedAudId) {
        this.error = '';
        this.status = 'Выберите аудиторию';
        return;
      }
      this.status = 'Загрузка оборудования…';
      this.error = '';
      try {
        this.oboruds = await fetchJSON(api.oboruds(this.selectedAudId));
        this.status = '';
      } catch (e) {
        console.error(e);
        this.error = 'Не удалось загрузить оборудование';
        this.status = '';
      }
    },
  },
  mounted() {
    this.loadAuditories();
  }
}).mount('#app');