Files
cloudron-box/dashboard/src/components/PortBindings.vue
2025-01-10 12:24:00 +01:00

38 lines
1.3 KiB
Vue

<template>
<div v-for="ports in [ tcpPorts, udpPorts ]" :key="ports">
<FormGroup v-for="(port, key) in ports" :key="key">
<Checkbox :label="port.title" v-model="port.enabled" />
<small>{{ port.description + '.' + (port.portCount >=1 ? (port.portCount + ' ports. ') : '') }}</small>
<small v-show="port.readOnly">{{ $t('appstore.installDialog.portReadOnly') }}</small>
<small class="has-error" v-show="error.port === port.value">Port already taken</small>
<NumberInput v-model="port.value" :disabled="!port.enabled" :min="1"/>
<!-- TODO <p class="text-small text-warning text-bold" ng-show="appInstall.domain.provider === 'cloudflare'">{{ 'appstore.installDialog.cloudflarePortWarning' | tr }} </p> -->
</FormGroup>
</div>
</template>
<script setup>
import { FormGroup, Checkbox, NumberInput } from 'pankow';
const props = defineProps([ 'tcpPorts', 'udpPorts', 'error' ]);
defineEmits([ 'update:tcpPorts', 'update:udpPorts' ]);
// copy value so we can use value as model value
for (const p in props.tcpPorts) {
const port = props.tcpPorts[p];
port.value = port.defaultValue;
port.enabled = true;
}
for (const p in props.udpPorts) {
const port = props.udpPorts[p];
port.value = port.defaultValue;
port.enabled = true;
}
</script>
<style scoped>
</style>