Kevin L'HereecandCopilot
d1c65dbf1e
- Docker infrastructure (Dockerfile, docker-compose.yml, genieacs-sim) - AdonisJS v7 app with Inertia.js + Vue 3 - MongoDB integration - CWMP/TR-069 state machine engine - Configuration engine with compliance tracking - Branding: ADAM ACS (favicon, navbar, locales) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
56 lines
1022 B
Vue
56 lines
1022 B
Vue
<template>
|
|
<span :class="['policy-badge', `policy-${policy}`]">
|
|
<span class="policy-icon">{{ iconChar }}</span>
|
|
{{ policyLabel }}
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
interface Props {
|
|
policy: 'once' | 'maintain'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
policy: 'maintain',
|
|
})
|
|
|
|
const policyLabel = computed(() => {
|
|
const labels: Record<string, string> = {
|
|
once: 'Once',
|
|
maintain: 'Maintain',
|
|
}
|
|
return labels[props.policy] || props.policy
|
|
})
|
|
|
|
const iconChar = computed(() => {
|
|
return props.policy === 'once' ? '✓' : '↻'
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.policy-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
background-color: #f0f0f0;
|
|
color: #333;
|
|
}
|
|
|
|
.policy-once {
|
|
background-color: #e8f4f8;
|
|
color: #0066aa;
|
|
}
|
|
|
|
.policy-maintain {
|
|
background-color: #f0e8f8;
|
|
color: #6600aa;
|
|
}
|
|
</style>
|