radiator-web/src/views/CreateAccessPoint.vue

<template>
  <div class="sm:w-3/4 md:w-1/3 w-full dark:text-white">
    <h1 class="font-hairline mb-6 text-center">
      {{ isEdit ? "Edit" : "Create" }} Access Point
    </h1>
    <form
      class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
      @submit.prevent="createAccessPoint"
    >
      <div class="mb-4">
        <label class="font-bold text-gray-800 block mb-2"
          >AccessPoint Name aruba-ap-<input
            type="text"
            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
            v-model.trim="ap.ap_name"
            placeholder="c01"
          />
        </label>
      </div>
      <div class="mb-4">
        <label class="font-bold text-gray-800 block mb-2"
          >MAC
          <input
            type="text"
            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
            v-model.trim="ap.mac_address"
            placeholder="a1b2c3d4e5f6"
          />
        </label>
      </div>
      <div class="mb-4">
        <label class="font-bold text-gray-800 block mb-2"
          >S/N
          <input
            type="text"
            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
            v-model.trim="ap.serialnumber"
            placeholder="12345678"
          />
        </label>
      </div>
      <div class="mb-4">
        <label class="font-bold text-gray-800 block mb-2"
          >Location
          <input
            type="text"
            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
            v-model.trim="ap.location"
            placeholder="02-02-02"
          />
        </label>
      </div>
      <div class="mb-4">
        <label class="font-bold text-gray-800 block mb-2"
          >Model
          <input
            type="text"
            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
            v-model.trim="ap.model"
            placeholder="ap-205h"
          />
        </label>
      </div>
      <div class="mb-4">
        <label class="font-bold text-gray-800 block mb-2"
          >Appointment
          <input
            type="text"
            disabled
            class="text-gray-800 block appearance-none w-full bg-white border border-gray-300 px-2 py-2 rounded shadow"
            v-model.trim="ap.appointment"
            placeholder=""
          />
        </label>
      </div>
      <div class="mb-4">
        <label class="font-bold text-gray-800 block mb-2"
          >Comment
          <input
            type="text"
            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
            v-model.trim="ap.comment"
            placeholder=""
          />
        </label>
      </div>

      <div class="flex items-center justify-between">
        <button
          class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
          type="submit"
        >
          {{ isEdit ? "Edit" : "Create" }}!
        </button>
      </div>
    </form>
  </div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, defineComponent } from "vue";
import {
  AccessPoint,
  getAccessPointByID,
  Site,
  getSite as apiGetSite,
  getSites as apiGetSites,
  createAccessPoint as apiCreateAccessPoint,
} from "../api";
import AccessPoints from "./AccessPoints.vue";
import router from "../router";

export default defineComponent({
  name: "CreateAccessPoint",
  props: {
    siteID: {
      type: Number,
      required: false,
    },
    apID: {
      type: Number,
      required: false,
    },
    edit: {
      type: Boolean,
      required: false,
    },
  },
  async setup(props: { siteID?: number; apID?: number; edit?: boolean }) {
    const { siteID, apID, edit } = toRefs(props);
    const isEdit = ref<boolean>(false);
    if (edit?.value === true) isEdit.value = true;

    const ap = reactive<AccessPoint>({
      ap_name: "",
      site_id: siteID?.value,
      mac_address: "",
      serialnumber: "",
      location: "",
      model: "",
      group: "fem-ap-group",
      appointment: undefined,
      comment: "",
    });
    async function getAccessPointSettings(id: number) {
      try {
        await getAccessPointByID(id).then((a) => Object.assign(ap, a));
      } catch (e) {
        console.error(e);
      }
    }
    if (apID?.value !== undefined) getAccessPointSettings(apID.value);

    const sites = reactive<Site[]>([]);
    async function getSite(id: number) {
      try {
        await apiGetSite(id).then((s) => Object.assign(sites, [s]));
      } catch (e) {
        console.error(e);
      }
    }
    async function getSites() {
      try {
        await apiGetSites().then((s) => Object.assign(sites, s));
      } catch (e) {
        console.error(e);
      }
    }
    if (siteID?.value !== undefined) {
      getSite(siteID.value);
    } else {
      getSites();
    }

    async function createAccessPoint() {
      try {
        await apiCreateAccessPoint(ap);
        router.push({ name: "AccessPoints" });
      } catch (e) {
        console.error(e);
      }
    }

    return { isEdit, ap, sites, getSites, createAccessPoint };
  },
});
</script>

<style scoped></style>