Jeppe Bundgaard
5d30690dfd
- Deleted `EdgeGatewayAdvancedOperations.vue` and `EdgeGatewayContextPanel.vue`. - Removed related unit tests in `use-edge-gateway-terminal.spec.js`. - Cleaned up unused exports in `useEdgeGatewayTerminal.js`.
122 lines
3.6 KiB
Vue
122 lines
3.6 KiB
Vue
<script setup>
|
|
defineProps({
|
|
summaryCards: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
fleetFilter: {
|
|
type: String,
|
|
default: "ALL",
|
|
},
|
|
fleetQuery: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
selectedGatewayView: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
filteredGatewayViews: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
initializing: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
fleetDrawerOpen: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits([
|
|
"update:fleetFilter",
|
|
"update:fleetQuery",
|
|
"open-fleet-drawer",
|
|
"close-fleet-drawer",
|
|
"select-gateway",
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="edge-fleet-shell">
|
|
<div class="edge-mobile-toggle" data-testid="gateway-mobile-toggle">
|
|
<button type="button" class="button is-light" data-testid="gateway-mobile-open-rail" @click="emit('open-fleet-drawer')">
|
|
Vælg gateway
|
|
</button>
|
|
<p v-if="selectedGatewayView" class="edge-mobile-toggle__selection">
|
|
{{ selectedGatewayView.displayLabel }} · {{ selectedGatewayView.statusLabel }}
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
v-if="fleetDrawerOpen"
|
|
type="button"
|
|
class="edge-overlay"
|
|
aria-label="Luk gatewayliste"
|
|
@click="emit('close-fleet-drawer')"
|
|
/>
|
|
|
|
<aside class="edge-fleet-rail" :class="{ 'edge-fleet-rail--open': fleetDrawerOpen }" data-testid="gateway-fleet-rail">
|
|
<div class="edge-fleet-rail__header">
|
|
<div>
|
|
<p class="edge-eyebrow">Gateway-flåde</p>
|
|
<h2>Vælg en gateway</h2>
|
|
<p>Skift hurtigt mellem driftsstatus, Shelly-bindinger og gatewaystyring uden at miste kontekst.</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="delete is-hidden-desktop"
|
|
aria-label="Luk gatewayliste"
|
|
@click="emit('close-fleet-drawer')"
|
|
/>
|
|
</div>
|
|
|
|
<label class="edge-search">
|
|
<span>Søg i gateways</span>
|
|
<input
|
|
:value="fleetQuery"
|
|
class="input"
|
|
type="search"
|
|
data-testid="gateway-fleet-search"
|
|
placeholder="Søg gateway, afdeling eller hostnavn"
|
|
@input="emit('update:fleetQuery', $event.target.value)"
|
|
/>
|
|
</label>
|
|
|
|
<div v-if="initializing" class="edge-empty-state edge-empty-state--rail">
|
|
<h3>Indlæser gateway-flåden</h3>
|
|
<p>Vi henter de seneste gateways og deres afdelinger.</p>
|
|
</div>
|
|
|
|
<div v-else-if="!filteredGatewayViews.length" class="edge-empty-state edge-empty-state--rail">
|
|
<h3>Ingen gateways matcher</h3>
|
|
<p>Prøv en anden status eller ryd søgningen for at se hele flåden igen.</p>
|
|
</div>
|
|
|
|
<div v-else class="edge-fleet-list">
|
|
<button
|
|
v-for="gateway in filteredGatewayViews"
|
|
:key="gateway.id"
|
|
type="button"
|
|
class="edge-fleet-item"
|
|
:class="{ 'edge-fleet-item--selected': Number(selectedGatewayView?.id) === Number(gateway.id) }"
|
|
:data-selected="Number(selectedGatewayView?.id) === Number(gateway.id) ? 'true' : 'false'"
|
|
:data-testid="`gateway-fleet-item-${gateway.id}`"
|
|
@click="emit('select-gateway', gateway.id)"
|
|
>
|
|
<div class="edge-fleet-item__topline">
|
|
<strong>{{ gateway.displayLabel }}</strong>
|
|
<span class="edge-pill" :data-tone="gateway.statusTone">
|
|
{{ gateway.statusLabel }}
|
|
</span>
|
|
</div>
|
|
<p class="edge-fleet-item__meta">{{ gateway.departmentName }} · {{ gateway.hostname }}</p>
|
|
<p class="edge-fleet-item__meta">Heartbeat {{ gateway.heartbeatRelative }}</p>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</template>
|