kestrelos/app/pages/poi.vue

<template>
  <div class="p-6">
    <h2 class="mb-2 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
      POI placement
    </h2>
    <p
      v-if="!canEditPois"
      class="mb-4 text-sm text-kestrel-muted"
    >
      View-only. Sign in as admin or leader to add or edit POIs.
    </p>
    <template v-else>
      <form
        class="mb-6 flex flex-wrap items-end gap-3 rounded border border-kestrel-border bg-kestrel-surface p-4"
        @submit.prevent="onAdd"
      >
        <div>
          <label
            for="poi-lat"
            class="mb-1 block text-xs text-kestrel-muted"
          >Lat</label>
          <input
            id="poi-lat"
            v-model.number="form.lat"
            type="number"
            step="any"
            required
            class="w-28 rounded border border-kestrel-border bg-kestrel-bg px-2 py-1 text-sm text-kestrel-text"
          >
        </div>
        <div>
          <label
            for="poi-lng"
            class="mb-1 block text-xs text-kestrel-muted"
          >Lng</label>
          <input
            id="poi-lng"
            v-model.number="form.lng"
            type="number"
            step="any"
            required
            class="w-28 rounded border border-kestrel-border bg-kestrel-bg px-2 py-1 text-sm text-kestrel-text"
          >
        </div>
        <div>
          <label
            for="poi-label"
            class="mb-1 block text-xs text-kestrel-muted"
          >Label</label>
          <input
            id="poi-label"
            v-model="form.label"
            type="text"
            class="w-40 rounded border border-kestrel-border bg-kestrel-bg px-2 py-1 text-sm text-kestrel-text"
          >
        </div>
        <div>
          <label
            for="poi-icon"
            class="mb-1 block text-xs text-kestrel-muted"
          >Icon</label>
          <select
            id="poi-icon"
            v-model="form.iconType"
            class="rounded border border-kestrel-border bg-kestrel-bg px-2 py-1 text-sm text-kestrel-text"
          >
            <option value="pin">
              pin
            </option>
            <option value="flag">
              flag
            </option>
            <option value="waypoint">
              waypoint
            </option>
          </select>
        </div>
        <button
          type="submit"
          class="rounded bg-kestrel-accent px-3 py-1.5 text-sm font-medium text-kestrel-bg hover:opacity-90"
        >
          Add POI
        </button>
      </form>
    </template>
    <div class="overflow-x-auto rounded border border-kestrel-border">
      <table class="w-full text-left text-sm">
        <thead>
          <tr class="border-b border-kestrel-border bg-kestrel-surface-hover">
            <th class="px-4 py-2 font-medium text-kestrel-text">
              Label
            </th>
            <th class="px-4 py-2 font-medium text-kestrel-text">
              Lat
            </th>
            <th class="px-4 py-2 font-medium text-kestrel-text">
              Lng
            </th>
            <th class="px-4 py-2 font-medium text-kestrel-text">
              Icon
            </th>
            <th
              v-if="canEditPois"
              class="px-4 py-2 font-medium text-kestrel-text"
            >
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="p in poisList"
            :key="p.id"
            class="border-b border-kestrel-border"
          >
            <td class="px-4 py-2 text-kestrel-text">
              {{ p.label || '—' }}
            </td>
            <td class="px-4 py-2 text-kestrel-muted">
              {{ p.lat }}
            </td>
            <td class="px-4 py-2 text-kestrel-muted">
              {{ p.lng }}
            </td>
            <td class="px-4 py-2 text-kestrel-muted">
              {{ p.icon_type }}
            </td>
            <td
              v-if="canEditPois"
              class="px-4 py-2"
            >
              <button
                type="button"
                class="text-xs text-red-400 hover:underline"
                @click="remove(p.id)"
              >
                Delete
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
const { data: poisData, refresh } = usePois()
const { canEditPois } = useUser()
const poisList = computed(() => poisData.value ?? [])

const form = ref({ lat: 37.77, lng: -122.42, label: '', iconType: 'pin' })

async function onAdd() {
  const { lat, lng, label, iconType } = form.value
  try {
    await $fetch('/api/pois', { method: 'POST', body: { lat, lng, label, iconType } })
    await refresh()
  }
  catch { /* ignore */ }
}

async function remove(id) {
  try {
    await $fetch(`/api/pois/${id}`, { method: 'DELETE' })
    await refresh()
  }
  catch { /* ignore */ }
}
</script>