innovatieplatform/resources/js/Pages/Map/MetroMap.vue

<script setup>
import { ref, computed } from 'vue'
import { usePage } from '@inertiajs/vue3'
import MetroCanvas from '@/Components/MetroMap/MetroCanvas.vue'
import Breadcrumb from '@/Components/MetroMap/Breadcrumb.vue'
import NodePreview from '@/Components/MetroMap/NodePreview.vue'
import CliBar from '@/Components/Cli/CliBar.vue'

const page = usePage()

// Navigation state
const currentLevel = ref(1)
const breadcrumbPath = ref([{ label: 'Strategie', level: 1, data: null }])
const selectedNode = ref(null)
const showPreview = ref(false)

// Demo data for Level 1: Strategy map
// Each theme is a metro line, projects are stations
const demoLines = ref([
    { id: 'water-quality', name: 'Waterkwaliteit', color: '#00d2ff' },
    { id: 'smart-infra', name: 'Slimme Infrastructuur', color: '#e94560' },
    { id: 'data-driven', name: 'Data-gedreven Beheer', color: '#00ff88' },
    { id: 'sustainability', name: 'Duurzaamheid', color: '#7b68ee' },
])

const demoNodes = ref([
    // Water Quality line
    { id: 'wq1', name: 'Smart Sensors', lineId: 'water-quality', x: -200, y: -150, order: 1, status: 'actief', description: 'Slimme sensoren voor waterkwaliteitsmonitoring', owner: 'Jan Visser', children: 5, badge: 'Experiment' },
    { id: 'wq2', name: 'Biomonitoring', lineId: 'water-quality', x: 0, y: -150, order: 2, status: 'concept', description: 'Biologische monitoring methoden', owner: 'Sara Jansen', children: 3, badge: 'Concept' },
    { id: 'wq3', name: 'Voorspelmodel', lineId: 'water-quality', x: 200, y: -150, order: 3, status: 'signaal', description: 'Predictief model waterkwaliteit', badge: 'Signaal' },

    // Smart Infrastructure line
    { id: 'si1', name: 'Edge Computing', lineId: 'smart-infra', x: -200, y: -20, order: 1, status: 'actief', description: 'Edge-layer evolutie voor OT-omgevingen', owner: 'Rene de Ren', children: 8, badge: 'Pilot' },
    { id: 'si2', name: 'Digital Twin', lineId: 'smart-infra', x: 50, y: -20, order: 2, status: 'verkenning', description: 'Digitale tweeling van zuiveringsinstallaties', children: 2, badge: 'Verkenning' },
    { id: 'si3', name: 'Predictive Maint.', lineId: 'smart-infra', x: 250, y: -20, order: 3, status: 'concept', description: 'Voorspellend onderhoud op basis van sensordata', badge: 'Concept' },

    // Data-driven line
    { id: 'dd1', name: 'Data Platform', lineId: 'data-driven', x: -150, y: 110, order: 1, status: 'afgerond', description: 'Centraal dataplatform voor operationele data', owner: 'Lisa de Boer', badge: 'Afgerond' },
    { id: 'dd2', name: 'ML Pipeline', lineId: 'data-driven', x: 80, y: 110, order: 2, status: 'actief', description: 'Machine learning pipeline voor anomalie-detectie', owner: 'Tom Bakker', children: 4, badge: 'Experiment' },
    { id: 'dd3', name: 'Dashboard Suite', lineId: 'data-driven', x: 280, y: 110, order: 3, status: 'overdracht_bouwen', description: 'Operationele dashboards voor beheerders', badge: 'Overdracht' },

    // Sustainability line
    { id: 'su1', name: 'Energietransitie', lineId: 'sustainability', x: -100, y: 240, order: 1, status: 'pilot', description: 'Energieneutraal zuiveren', owner: 'Mark de Vries', children: 6, badge: 'Pilot' },
    { id: 'su2', name: 'Circulair Water', lineId: 'sustainability', x: 150, y: 240, order: 2, status: 'verkenning', description: 'Circulaire waterbehandeling', badge: 'Verkenning' },
])

const demoConnections = ref([
    { from: 'wq1', to: 'dd2' }, // Smart sensors feeds ML Pipeline
    { from: 'si1', to: 'dd1' }, // Edge computing depends on data platform
    { from: 'dd2', to: 'si3' }, // ML pipeline enables predictive maintenance
])

// Handlers
const handleNodeClick = (node) => {
    selectedNode.value = node
    showPreview.value = true
}

const handleNodeHover = (node) => {
    // Could highlight related nodes/connections
}

const handleNodeLeave = () => {
    // Reset highlights
}

const handleZoomIn = (node) => {
    showPreview.value = false
    currentLevel.value++
    breadcrumbPath.value.push({
        label: node.name,
        level: currentLevel.value,
        data: node,
    })
    // In real app: load child nodes for this project
}

const handleBreadcrumbNavigate = (item, index) => {
    breadcrumbPath.value = breadcrumbPath.value.slice(0, index + 1)
    currentLevel.value = item.level
    showPreview.value = false
    selectedNode.value = null
}

const handleCliCommand = (command) => {
    console.log('CLI command:', command)
    // Will be connected to AI service
}
</script>

<template>
    <div class="metro-map-page">
        <Breadcrumb
            :path="breadcrumbPath"
            @navigate="handleBreadcrumbNavigate"
        />

        <MetroCanvas
            :nodes="demoNodes"
            :lines="demoLines"
            :connections="demoConnections"
            :current-level="currentLevel"
            @node-click="handleNodeClick"
            @node-hover="handleNodeHover"
            @node-leave="handleNodeLeave"
        />

        <NodePreview
            :node="selectedNode"
            :visible="showPreview"
            @close="showPreview = false"
            @zoom-in="handleZoomIn"
        />

        <CliBar @command="handleCliCommand" />
    </div>
</template>

<style scoped>
.metro-map-page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: #1a1a2e;
}
</style>