ipwatch

frontend/src/views/TestView.vue

@@ -0,0 +1,151 @@
+<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>