Add logout button, fix metro label positioning
- Add top bar with breadcrumb (left) and user name + logout button (right) - Move station labels below dots (centered) to prevent line overlap - Move line labels further above stations - Increase vertical spacing between metro lines (160px) for label clearance - Align station x-coordinates for cleaner map layout Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
znetsixe
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { usePage } from '@inertiajs/vue3'
|
||||
import { usePage, router } from '@inertiajs/vue3'
|
||||
import MetroCanvas from '@/Components/MetroMap/MetroCanvas.vue'
|
||||
import Breadcrumb from '@/Components/MetroMap/Breadcrumb.vue'
|
||||
import NodePreview from '@/Components/MetroMap/NodePreview.vue'
|
||||
@@ -24,24 +24,24 @@ const demoLines = ref([
|
||||
])
|
||||
|
||||
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' },
|
||||
// Water Quality line — y spacing of 160px between lines for label clearance
|
||||
{ id: 'wq1', name: 'Smart Sensors', lineId: 'water-quality', x: -200, y: -240, order: 1, status: 'actief', description: 'Slimme sensoren voor waterkwaliteitsmonitoring', owner: 'Jan Visser', children: 5, badge: 'Experiment' },
|
||||
{ id: 'wq2', name: 'Biomonitoring', lineId: 'water-quality', x: 50, y: -240, order: 2, status: 'concept', description: 'Biologische monitoring methoden', owner: 'Sara Jansen', children: 3, badge: 'Concept' },
|
||||
{ id: 'wq3', name: 'Voorspelmodel', lineId: 'water-quality', x: 300, y: -240, 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' },
|
||||
{ id: 'si1', name: 'Edge Computing', lineId: 'smart-infra', x: -200, y: -80, 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: -80, order: 2, status: 'verkenning', description: 'Digitale tweeling van zuiveringsinstallaties', children: 2, badge: 'Verkenning' },
|
||||
{ id: 'si3', name: 'Predictive Maint.', lineId: 'smart-infra', x: 300, y: -80, 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' },
|
||||
{ id: 'dd1', name: 'Data Platform', lineId: 'data-driven', x: -200, y: 80, 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: 50, y: 80, 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: 300, y: 80, 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' },
|
||||
{ id: 'su1', name: 'Energietransitie', lineId: 'sustainability', x: -200, 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: 50, y: 240, order: 2, status: 'verkenning', description: 'Circulaire waterbehandeling', badge: 'Verkenning' },
|
||||
])
|
||||
|
||||
const demoConnections = ref([
|
||||
@@ -86,14 +86,27 @@ const handleCliCommand = (command) => {
|
||||
console.log('CLI command:', command)
|
||||
// Will be connected to AI service
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
router.post('/logout')
|
||||
}
|
||||
|
||||
const user = computed(() => page.props.auth?.user)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="metro-map-page">
|
||||
<Breadcrumb
|
||||
:path="breadcrumbPath"
|
||||
@navigate="handleBreadcrumbNavigate"
|
||||
/>
|
||||
<!-- Top bar: breadcrumb left, user/logout right -->
|
||||
<div class="top-bar">
|
||||
<Breadcrumb
|
||||
:path="breadcrumbPath"
|
||||
@navigate="handleBreadcrumbNavigate"
|
||||
/>
|
||||
<div class="user-controls">
|
||||
<span v-if="user" class="user-name">{{ user.name }}</span>
|
||||
<button @click="logout" class="logout-btn">[LOGOUT]</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MetroCanvas
|
||||
:nodes="demoNodes"
|
||||
@@ -124,4 +137,49 @@ const handleCliCommand = (command) => {
|
||||
position: relative;
|
||||
background: #1a1a2e;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
background: rgba(26, 26, 46, 0.85);
|
||||
border-bottom: 1px solid rgba(0, 210, 255, 0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.user-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 16px;
|
||||
color: #8892b0;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 14px;
|
||||
color: #e94560;
|
||||
background: none;
|
||||
border: 1px solid rgba(233, 69, 96, 0.3);
|
||||
padding: 4px 10px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: rgba(233, 69, 96, 0.15);
|
||||
border-color: #e94560;
|
||||
box-shadow: 0 0 10px rgba(233, 69, 96, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user