Use SettingsItem in network view

This commit is contained in:
Johannes Zellner
2025-03-14 21:09:15 +01:00
parent 9676cabcb8
commit 5a34244854

View File

@@ -1,8 +1,9 @@
<script setup>
import { ref, onMounted, useTemplateRef, computed } from 'vue';
import { Dialog, FormGroup } from 'pankow';
import { Dialog, Button, FormGroup } from 'pankow';
import Section from '../components/Section.vue';
import SettingsItem from '../components/SettingsItem.vue';
import NetworkModel from '../models/NetworkModel.js';
const networkModel = NetworkModel.create();
@@ -153,14 +154,27 @@ onMounted(async () => {
</Dialog>
<Section :title="$t('network.firewall.title')">
<div class="info-row">
<div class="info-label">{{ $t('network.firewall.blockedIpRanges') }}</div>
<div class="info-value actionable" @click="onBlocklistConfigure()">{{ $t('network.firewall.blocklist', { blockCount: blocklistLength }) }} <i class="fa-solid fa-edit text-small"></i></div>
</div>
<div class="info-row">
<div class="info-label">{{ $t('network.trustedIpRanges') }}</div>
<div class="info-value actionable" @click="onTrustedIpsConfigure()">{{ $t('network.trustedIps.summary', { trustCount: trustedIpsLength }) }} <i class="fa-solid fa-edit text-small"></i></div>
</div>
<SettingsItem>
<FormGroup>
<label>{{ $t('network.firewall.blockedIpRanges') }}</label>
<div>{{ $t('network.firewall.blocklist', { blockCount: blocklistLength }) }}</div>
</FormGroup>
<div style="display: flex; align-items: center">
<!-- TODO -->
<Button tool plain @click="onBlocklistConfigure()">Edit</Button>
</div>
</SettingsItem>
<SettingsItem>
<FormGroup>
<label>{{ $t('network.trustedIpRanges') }}</label>
<div>{{ $t('network.trustedIps.summary', { trustCount: trustedIpsLength }) }}</div>
</FormGroup>
<div style="display: flex; align-items: center">
<!-- TODO -->
<Button tool plain @click="onTrustedIpsConfigure()">Edit</Button>
</div>
</SettingsItem>
</Section>
</div>
</template>