ipwatch/frontend/src/views/TestView.vue

<template>
  <div class="h-screen flex flex-col bg-monokai-bg">
    <!-- Header -->
    <header class="bg-monokai-bg border-b-2 border-monokai-comment p-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <h1 class="text-3xl font-bold text-monokai-green">IPWatch</h1>
          <div class="flex flex-col">
            <span class="text-monokai-comment">Tests réseau</span>
            <span class="text-xs text-monokai-comment/60">bêta</span>
          </div>
        </div>

        <div class="flex items-center gap-6">
          <SystemStats />

          <div class="h-8 w-px bg-monokai-comment"></div>

          <button
            @click="goToDashboard"
            class="px-4 py-2 rounded bg-monokai-yellow text-monokai-bg font-bold hover:bg-monokai-orange transition-colors"
            title="Retour au dashboard"
          >
            ← Dashboard
          </button>

          <button
            @click="openSettings"
            class="px-4 py-2 rounded bg-monokai-purple text-monokai-bg text-sm hover:bg-monokai-pink transition-colors"
            title="Ouvrir les paramètres"
          >
            ⚙ Paramètres
          </button>
        </div>
      </div>
    </header>

    <!-- Layout -->
    <div class="flex-1 flex overflow-hidden">
      <div class="w-80 flex-shrink-0 border-r border-monokai-comment">
        <div class="p-4">
          <h2 class="text-lg font-bold text-monokai-cyan">Commandes</h2>
          <p class="text-sm text-monokai-comment mt-2">
            Commandes de test (à venir).
          </p>
        </div>
      </div>

      <div class="flex-1 overflow-auto p-6">
        <div class="border border-dashed border-monokai-comment rounded-lg h-full flex items-center justify-center text-monokai-comment">
          <div class="text-center">
            <div class="text-xl text-monokai-cyan font-bold">Zone de test</div>
            <div class="text-sm mt-2">Ping, traceroute, etc.</div>
          </div>
        </div>
      </div>

      <div
        class="relative flex-shrink-0 border-l border-monokai-comment"
        :style="{ width: `${rightPanelWidth}px` }"
      >
        <div
          class="absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize"
          @mousedown.prevent="startResize"
        ></div>
        <div class="absolute left-1 top-1/2 -translate-y-1/2 flex flex-col gap-1 opacity-70 pointer-events-none">
          <span class="w-1.5 h-1.5 rounded-full bg-monokai-comment/70"></span>
          <span class="w-1.5 h-1.5 rounded-full bg-monokai-comment/70"></span>
          <span class="w-1.5 h-1.5 rounded-full bg-monokai-comment/70"></span>
          <span class="w-1.5 h-1.5 rounded-full bg-monokai-comment/70"></span>
        </div>
        <div class="p-4 h-full flex flex-col">
          <h2 class="text-lg font-bold text-monokai-pink">Historique</h2>
          <div class="mt-3 bg-monokai-bg border border-monokai-comment rounded flex-1 min-h-0 overflow-auto">
            <pre class="text-xs text-monokai-text font-mono p-3 whitespace-pre-wrap">
{{ scanLogs.length ? scanLogs.join('\n') : 'Aucun log pour le moment.' }}
            </pre>
          </div>
        </div>
      </div>
    </div>

    <SettingsModal
      :isOpen="showSettings"
      @close="showSettings = false"
      @configReloaded="handleConfigReloaded"
    />
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { useIPStore } from '@/stores/ipStore'
import SystemStats from '@/components/SystemStats.vue'
import SettingsModal from '@/components/SettingsModal.vue'
import { storeToRefs } from 'pinia'

const router = useRouter()
const ipStore = useIPStore()
const showSettings = ref(false)
const { scanLogs } = storeToRefs(ipStore)
const rightPanelWidth = ref(384)
const minPanelWidth = 288
const maxPanelWidth = 576
let isResizing = false
let startX = 0
let startWidth = 0

function openSettings() {
  showSettings.value = true
}

function goToDashboard() {
  router.push('/')
}

async function handleConfigReloaded() {
  await ipStore.fetchIPs()
  ipStore.bumpConfigReload()
}

function clampWidth(value) {
  return Math.max(minPanelWidth, Math.min(maxPanelWidth, value))
}

function onMouseMove(event) {
  if (!isResizing) return
  const delta = startX - event.clientX
  rightPanelWidth.value = clampWidth(startWidth + delta)
}

function stopResize() {
  if (!isResizing) return
  isResizing = false
  window.removeEventListener('mousemove', onMouseMove)
  window.removeEventListener('mouseup', stopResize)
}

function startResize(event) {
  isResizing = true
  startX = event.clientX
  startWidth = rightPanelWidth.value
  window.addEventListener('mousemove', onMouseMove)
  window.addEventListener('mouseup', stopResize)
}

onBeforeUnmount(() => {
  stopResize()
})
</script>