Projekt: Dashboard API z dyrektywami i pluginami

To jest główny projekt modułu! Połączymy wszystko, czego się nauczyliśmy: custom directives, plugins i komunikację HTTP/API w jeden spójny system — Dashboard Centrum Dowodzenia NOVA LAB.

Architektura projektu

Nasz dashboard zawiera:

1. Toast Plugin — powiadomienia o zdarzeniach stacji
2. Custom Directives — v-focus, v-tooltip, v-highlight
3. Composable useFetch — pobieranie danych z API
4. Stany loading/error/data — obsługa błędów
5. Akcje CRUD — dodawanie, usuwanie danych

Struktura kodu

Plugin Toast:

1const ToastPlugin = {
2  install(app) {
3    const toasts = ref([])
4    let id = 0
5
6    app.provide('toast', {
7      show(message, type = 'info') {
8        const toastId = id++
9        toasts.value.push({ id: toastId, message, type })
10        setTimeout(() => {
11          toasts.value = toasts.value.filter(t => t.id !== toastId)
12        }, 3000)
13      },
14      success(msg) { this.show(msg, 'success') },
15      error(msg) { this.show(msg, 'error') },
16      list: toasts
17    })
18  }
19}

Custom Directives:

1app.directive('focus', {
2  mounted(el) { el.focus() }
3})
4
5app.directive('highlight', (el, binding) => {
6  el.style.border = `2px solid ${binding.value || '#00ff88'}`
7})

Composable:

1function useFetch(url) {
2  const data = ref(null)
3  const loading = ref(false)
4  const error = ref(null)
5
6  async function execute() {
7    loading.value = true
8    error.value = null
9    try {
10      const res = await fetch(url)
11      data.value = await res.json()
12    } catch (err) {
13      error.value = err.message
14    } finally {
15      loading.value = false
16    }
17  }
18
19  execute()
20  return { data, loading, error, refetch: execute }
21}

Łączenie w dashboard

Dashboard wyświetla:

• Liste misji pobraną z API
• Formularz dodawania nowych misji
• Toast notifications przy akcjach
• Dyrektywy do interaktywności (focus, highlight)

Ten projekt demonstruje, jak różne części Vue (dyrektywy, pluginy, composables) współpracują w realnej aplikacji.