Use components to handle services display
This commit is contained in:
parent
40471e2dd9
commit
0bc0380b99
81
htdocs/src/components/hFormData.vue
Normal file
81
htdocs/src/components/hFormData.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<!--
|
||||
Copyright or © or Copr. happyDNS (2020)
|
||||
|
||||
contact@happydns.org
|
||||
|
||||
This software is a computer program whose purpose is to provide a modern
|
||||
interface to interact with DNS systems.
|
||||
|
||||
This software is governed by the CeCILL license under French law and abiding
|
||||
by the rules of distribution of free software. You can use, modify and/or
|
||||
redistribute the software under the terms of the CeCILL license as
|
||||
circulated by CEA, CNRS and INRIA at the following URL
|
||||
"http://www.cecill.info".
|
||||
|
||||
As a counterpart to the access to the source code and rights to copy, modify
|
||||
and redistribute granted by the license, users are provided only with a
|
||||
limited warranty and the software's author, the holder of the economic
|
||||
rights, and the successive licensors have only limited liability.
|
||||
|
||||
In this respect, the user's attention is drawn to the risks associated with
|
||||
loading, using, modifying and/or developing or reproducing the software by
|
||||
the user in light of its specific status of free software, that may mean
|
||||
that it is complicated to manipulate, and that also therefore means that it
|
||||
is reserved for developers and experienced professionals having in-depth
|
||||
computer knowledge. Users are therefore encouraged to load and test the
|
||||
software's suitability as regards their requirements in conditions enabling
|
||||
the security of their systems and/or data to be ensured and, more generally,
|
||||
to use and operate it in the same conditions as regards security.
|
||||
|
||||
The fact that you are presently reading this means that you have had
|
||||
knowledge of the CeCILL license and that you accept its terms.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="mt-2">
|
||||
<b-form-row
|
||||
v-for="(spec, index) in fields"
|
||||
:key="index"
|
||||
v-show="edit || value[spec.id]"
|
||||
>
|
||||
<label :for="'spec-' + index" :title="spec.label" class="col-md-3 col-form-label text-truncate text-right text-primary">{{ spec.label }}</label>
|
||||
<b-col md="9">
|
||||
<b-form-input
|
||||
v-if="spec.choices === undefined"
|
||||
:id="'spec-' + index"
|
||||
v-model="value[spec.id]"
|
||||
size="sm"
|
||||
class="font-weight-bold"
|
||||
:required="spec.required !== undefined && spec.required"
|
||||
:placeholder="spec.placeholder"
|
||||
:plaintext="!edit"
|
||||
/>
|
||||
<b-form-select
|
||||
v-if="spec.choices !== undefined"
|
||||
:id="'spec-' + index"
|
||||
v-model="value[spec.id]"
|
||||
size="sm"
|
||||
:required="spec.required !== undefined && spec.required"
|
||||
:options="spec.choices"
|
||||
/>
|
||||
<p style="line-height: 1.1">
|
||||
<small class="text-muted">{{ spec.description }}</small>
|
||||
</p>
|
||||
</b-col>
|
||||
</b-form-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HFormData',
|
||||
model: {
|
||||
prop: 'value'
|
||||
},
|
||||
props: {
|
||||
edit: Boolean,
|
||||
fields: Array,
|
||||
value: Object
|
||||
}
|
||||
}
|
||||
</script>
|
||||
116
htdocs/src/components/hResourceForm.vue
Normal file
116
htdocs/src/components/hResourceForm.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<!--
|
||||
Copyright or © or Copr. happyDNS (2020)
|
||||
|
||||
contact@happydns.org
|
||||
|
||||
This software is a computer program whose purpose is to provide a modern
|
||||
interface to interact with DNS systems.
|
||||
|
||||
This software is governed by the CeCILL license under French law and abiding
|
||||
by the rules of distribution of free software. You can use, modify and/or
|
||||
redistribute the software under the terms of the CeCILL license as
|
||||
circulated by CEA, CNRS and INRIA at the following URL
|
||||
"http://www.cecill.info".
|
||||
|
||||
As a counterpart to the access to the source code and rights to copy, modify
|
||||
and redistribute granted by the license, users are provided only with a
|
||||
limited warranty and the software's author, the holder of the economic
|
||||
rights, and the successive licensors have only limited liability.
|
||||
|
||||
In this respect, the user's attention is drawn to the risks associated with
|
||||
loading, using, modifying and/or developing or reproducing the software by
|
||||
the user in light of its specific status of free software, that may mean
|
||||
that it is complicated to manipulate, and that also therefore means that it
|
||||
is reserved for developers and experienced professionals having in-depth
|
||||
computer knowledge. Users are therefore encouraged to load and test the
|
||||
software's suitability as regards their requirements in conditions enabling
|
||||
the security of their systems and/or data to be ensured and, more generally,
|
||||
to use and operate it in the same conditions as regards security.
|
||||
|
||||
The fact that you are presently reading this means that you have had
|
||||
knowledge of the CeCILL license and that you accept its terms.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<b-list-group-item v-if="!isLoading">
|
||||
<div class="text-center">
|
||||
<b-button v-if="!editService" type="button" size="sm" variant="outline-primary" class="mx-1" @click="toogleServiceEdit()">
|
||||
<b-icon icon="pencil" />
|
||||
Edit
|
||||
</b-button>
|
||||
<b-button v-else type="button" size="sm" variant="primary" class="mx-1" @click="submitService(index, idx)">
|
||||
<b-icon icon="check" />
|
||||
Save those modifications
|
||||
</b-button>
|
||||
<b-button type="button" size="sm" variant="outline-danger" class="mx-1">
|
||||
<b-icon icon="trash" />
|
||||
Delete
|
||||
</b-button>
|
||||
</div>
|
||||
<h-form-data
|
||||
:edit="editService"
|
||||
:fields="services_specs.fields"
|
||||
v-model="service.Service"
|
||||
/>
|
||||
</b-list-group-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'HResourceForm',
|
||||
|
||||
components: {
|
||||
hFormData: () => import('@/components/hFormData')
|
||||
},
|
||||
|
||||
props: {
|
||||
service: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
editService: false,
|
||||
services_specs: null
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isLoading () {
|
||||
return this.services_specs == null
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
service: function () {
|
||||
this.pullServiceSpecs()
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
if (this.service !== undefined) {
|
||||
this.pullServiceSpecs()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
pullServiceSpecs () {
|
||||
axios
|
||||
.get('/api/service_specs/' + this.service._svctype)
|
||||
.then(
|
||||
(response) => {
|
||||
this.services_specs = response.data
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
toogleServiceEdit () {
|
||||
this.editService = !this.editService
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
94
htdocs/src/components/hResourceItem.vue
Normal file
94
htdocs/src/components/hResourceItem.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<!--
|
||||
Copyright or © or Copr. happyDNS (2020)
|
||||
|
||||
contact@happydns.org
|
||||
|
||||
This software is a computer program whose purpose is to provide a modern
|
||||
interface to interact with DNS systems.
|
||||
|
||||
This software is governed by the CeCILL license under French law and abiding
|
||||
by the rules of distribution of free software. You can use, modify and/or
|
||||
redistribute the software under the terms of the CeCILL license as
|
||||
circulated by CEA, CNRS and INRIA at the following URL
|
||||
"http://www.cecill.info".
|
||||
|
||||
As a counterpart to the access to the source code and rights to copy, modify
|
||||
and redistribute granted by the license, users are provided only with a
|
||||
limited warranty and the software's author, the holder of the economic
|
||||
rights, and the successive licensors have only limited liability.
|
||||
|
||||
In this respect, the user's attention is drawn to the risks associated with
|
||||
loading, using, modifying and/or developing or reproducing the software by
|
||||
the user in light of its specific status of free software, that may mean
|
||||
that it is complicated to manipulate, and that also therefore means that it
|
||||
is reserved for developers and experienced professionals having in-depth
|
||||
computer knowledge. Users are therefore encouraged to load and test the
|
||||
software's suitability as regards their requirements in conditions enabling
|
||||
the security of their systems and/or data to be ensured and, more generally,
|
||||
to use and operate it in the same conditions as regards security.
|
||||
|
||||
The fact that you are presently reading this means that you have had
|
||||
knowledge of the CeCILL license and that you accept its terms.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<b-list-group v-if="!isLoading">
|
||||
<b-list-group-item button @click="toogleShowDetails()">
|
||||
<strong>{{ services[service._svctype].name }}</strong> <span v-if="service._comment" class="text-muted">{{ service._comment }}</span>
|
||||
<span v-if="services[service._svctype].comment" class="text-muted">{{ services[service._svctype].comment }}</span>
|
||||
<b-badge v-for="(categorie, idcat) in services[service._svctype].categories" :key="idcat" variant="gray" class="float-right ml-1">
|
||||
{{ categorie }}
|
||||
</b-badge>
|
||||
<b-badge v-if="service._tmp_hint_nb && service._tmp_hint_nb > 1" variant="danger" class="float-right ml-1">
|
||||
{{ service._tmp_hint_nb }}
|
||||
</b-badge>
|
||||
</b-list-group-item>
|
||||
<h-resource-form v-if="showDetails" :service="service" />
|
||||
</b-list-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'HResourceItem',
|
||||
|
||||
components: {
|
||||
hResourceForm: () => import('@/components/hResourceForm')
|
||||
},
|
||||
|
||||
props: {
|
||||
service: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
showDetails: false,
|
||||
services: null
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isLoading () {
|
||||
return this.services == null
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
axios
|
||||
.get('/api/services')
|
||||
.then(
|
||||
(response) => (this.services = response.data)
|
||||
)
|
||||
},
|
||||
|
||||
methods: {
|
||||
toogleShowDetails () {
|
||||
this.showDetails = !this.showDetails
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
135
htdocs/src/components/hSubdomainItem.vue
Normal file
135
htdocs/src/components/hSubdomainItem.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<!--
|
||||
Copyright or © or Copr. happyDNS (2020)
|
||||
|
||||
contact@happydns.org
|
||||
|
||||
This software is a computer program whose purpose is to provide a modern
|
||||
interface to interact with DNS systems.
|
||||
|
||||
This software is governed by the CeCILL license under French law and abiding
|
||||
by the rules of distribution of free software. You can use, modify and/or
|
||||
redistribute the software under the terms of the CeCILL license as
|
||||
circulated by CEA, CNRS and INRIA at the following URL
|
||||
"http://www.cecill.info".
|
||||
|
||||
As a counterpart to the access to the source code and rights to copy, modify
|
||||
and redistribute granted by the license, users are provided only with a
|
||||
limited warranty and the software's author, the holder of the economic
|
||||
rights, and the successive licensors have only limited liability.
|
||||
|
||||
In this respect, the user's attention is drawn to the risks associated with
|
||||
loading, using, modifying and/or developing or reproducing the software by
|
||||
the user in light of its specific status of free software, that may mean
|
||||
that it is complicated to manipulate, and that also therefore means that it
|
||||
is reserved for developers and experienced professionals having in-depth
|
||||
computer knowledge. Users are therefore encouraged to load and test the
|
||||
software's suitability as regards their requirements in conditions enabling
|
||||
the security of their systems and/or data to be ensured and, more generally,
|
||||
to use and operate it in the same conditions as regards security.
|
||||
|
||||
The fact that you are presently reading this means that you have had
|
||||
knowledge of the CeCILL license and that you accept its terms.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="isCNAME()">
|
||||
<h2 :id="dn">
|
||||
<b-icon icon="link" />
|
||||
<span class="text-monospace">{{ dn }}</span>
|
||||
<a :href="'#' + dn" class="float-right">
|
||||
<b-icon icon="link45deg" />
|
||||
</a>
|
||||
<b-icon icon="arrow-right" />
|
||||
<span class="text-monospace">{{ services[0].Service.Target }}</span>
|
||||
<b-button type="button" variant="outline-danger" size="sm" class="ml-2">
|
||||
<b-icon icon="x-circle" />
|
||||
Drop alias
|
||||
</b-button>
|
||||
</h2>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h2 :id="dn">
|
||||
<b-icon v-if="!showResources" icon="chevron-right" @click="toogleShowResources()" />
|
||||
<b-icon v-if="showResources" icon="chevron-down" @click="toogleShowResources()" />
|
||||
<span class="text-monospace" @click="toogleShowResources()">{{ dn }}</span>
|
||||
<a :href="'#' + dn" class="float-right">
|
||||
<b-icon icon="link45deg" />
|
||||
</a>
|
||||
<b-badge v-if="aliases.length > 0" v-b-popover.hover.focus="{ customClass: 'text-monospace', html: true, content: aliasPopoverCnt(dn) }" class="ml-2">
|
||||
+ {{ pluralizeAlias(aliases.length) }}
|
||||
</b-badge>
|
||||
<b-button type="button" variant="primary" size="sm" class="ml-2">
|
||||
<b-icon icon="plus" />
|
||||
Add a service
|
||||
</b-button>
|
||||
<b-button type="button" variant="outline-primary" size="sm" class="ml-2">
|
||||
<b-icon icon="link" />
|
||||
Add an alias
|
||||
</b-button>
|
||||
</h2>
|
||||
<div v-show="showResources">
|
||||
<h-resource-item v-for="(svc, idx) in services" :key="idx" :service="svc" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HSubdomainItem',
|
||||
|
||||
components: {
|
||||
hResourceItem: () => import('@/components/hResourceItem')
|
||||
},
|
||||
|
||||
props: {
|
||||
aliases: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
dn: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
services: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
showResources: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toogleShowResources () {
|
||||
this.showResources = !this.showResources
|
||||
},
|
||||
|
||||
isCNAME () {
|
||||
return this.services.length === 1 && this.services[0]._svctype === 'git.happydns.org/happydns/services/CNAME'
|
||||
},
|
||||
|
||||
aliasPopoverCnt () {
|
||||
return this.aliases.map(function (alias) {
|
||||
if (this.services[alias]) {
|
||||
return '<a href="#' + this.escapeHTML(alias) + '">' + this.escapeHTML(alias) + '</a>'
|
||||
} else {
|
||||
return this.escapeHTML(alias)
|
||||
}
|
||||
}, this).join('<br>')
|
||||
},
|
||||
|
||||
pluralizeAlias (count) {
|
||||
if (count === 1) {
|
||||
return '1 alias'
|
||||
} else {
|
||||
return count + ' aliases'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
139
htdocs/src/components/hSubdomainList.vue
Normal file
139
htdocs/src/components/hSubdomainList.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<!--
|
||||
Copyright or © or Copr. happyDNS (2020)
|
||||
|
||||
contact@happydns.org
|
||||
|
||||
This software is a computer program whose purpose is to provide a modern
|
||||
interface to interact with DNS systems.
|
||||
|
||||
This software is governed by the CeCILL license under French law and abiding
|
||||
by the rules of distribution of free software. You can use, modify and/or
|
||||
redistribute the software under the terms of the CeCILL license as
|
||||
circulated by CEA, CNRS and INRIA at the following URL
|
||||
"http://www.cecill.info".
|
||||
|
||||
As a counterpart to the access to the source code and rights to copy, modify
|
||||
and redistribute granted by the license, users are provided only with a
|
||||
limited warranty and the software's author, the holder of the economic
|
||||
rights, and the successive licensors have only limited liability.
|
||||
|
||||
In this respect, the user's attention is drawn to the risks associated with
|
||||
loading, using, modifying and/or developing or reproducing the software by
|
||||
the user in light of its specific status of free software, that may mean
|
||||
that it is complicated to manipulate, and that also therefore means that it
|
||||
is reserved for developers and experienced professionals having in-depth
|
||||
computer knowledge. Users are therefore encouraged to load and test the
|
||||
software's suitability as regards their requirements in conditions enabling
|
||||
the security of their systems and/or data to be ensured and, more generally,
|
||||
to use and operate it in the same conditions as regards security.
|
||||
|
||||
The fact that you are presently reading this means that you have had
|
||||
knowledge of the CeCILL license and that you accept its terms.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="!isLoading" class="pt-3">
|
||||
<h-subdomain-item v-for="(dn, index) in sortedDomains" :key="index" :dn="dn" :services="myServices.services[dn]===undefined?[]:myServices.services[dn]" :aliases="myServices.aliases[dn]===undefined?[]:myServices.aliases[dn]" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'HSubdomainList',
|
||||
|
||||
components: {
|
||||
hSubdomainItem: () => import('@/components/hSubdomainItem')
|
||||
},
|
||||
|
||||
props: {
|
||||
domain: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
hideDomain: {},
|
||||
myServices: null
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isLoading () {
|
||||
return this.myServices == null
|
||||
},
|
||||
|
||||
sortedDomains () {
|
||||
if (this.myServices === null) {
|
||||
return []
|
||||
}
|
||||
|
||||
var domains = Object.keys(this.myServices.services)
|
||||
domains.sort(function (a, b) {
|
||||
var as = a.split('.').reverse()
|
||||
var bs = b.split('.').reverse()
|
||||
|
||||
var maxDepth = Math.min(as.length, bs.length)
|
||||
for (var i = 0; i < maxDepth; i++) {
|
||||
var cmp = as[i].localeCompare(bs[i])
|
||||
if (cmp !== 0) {
|
||||
return cmp
|
||||
}
|
||||
}
|
||||
|
||||
return as.length - bs.length
|
||||
})
|
||||
|
||||
return domains
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
domain: function () {
|
||||
this.pullDomain()
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
if (this.domain !== undefined) {
|
||||
this.pullDomain()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
goToAnchor () {
|
||||
var hash = this.$route.hash.substr(1)
|
||||
if (!this.isLoading && hash.length > 0) {
|
||||
setTimeout(function () {
|
||||
window.scrollTo(0, document.getElementById(hash).offsetTop)
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
|
||||
pullDomain () {
|
||||
axios
|
||||
.post('/api/domains/' + this.domain.domain + '/analyze')
|
||||
.then(
|
||||
(response) => {
|
||||
this.myServices = response.data
|
||||
// this.goToAnchor()
|
||||
},
|
||||
(error) => {
|
||||
this.$root.$bvToast.toast(
|
||||
'Unfortunately, we were unable to retrieve information for the domain ' + this.domain.domain + ': ' + error.response.data.errmsg, {
|
||||
title: 'Unable to retrieve domain information',
|
||||
autoHideDelay: 5000,
|
||||
variant: 'danger',
|
||||
toaster: 'b-toaster-content-right'
|
||||
}
|
||||
)
|
||||
this.$router.push('/domains/' + this.domain.domain)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -32,213 +32,20 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="!isLoading" class="pt-3">
|
||||
<div v-for="(dn, index) in sortedDomains" :key="index">
|
||||
<div v-if="isCNAME(dn)">
|
||||
<h2 :id="dn" :class="index !== 0 ? 'mt-4' : ''">
|
||||
<b-icon icon="link" />
|
||||
<span class="text-monospace">{{ dn }}</span>
|
||||
<a :href="'#' + dn" class="float-right">
|
||||
<b-icon icon="link45deg" />
|
||||
</a>
|
||||
<b-icon icon="arrow-right" />
|
||||
<span class="text-monospace">{{ myServices.services[dn][0].Service.Target }}</span>
|
||||
<b-button type="button" variant="outline-danger" size="sm" class="ml-2">
|
||||
<b-icon icon="x-circle" />
|
||||
Drop alias
|
||||
</b-button>
|
||||
</h2>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h2 :id="dn" :class="index !== 0 ? 'mt-4' : ''">
|
||||
<b-icon v-if="hideDomain[index]" icon="chevron-right" @click="toogleHideDomain(index)" />
|
||||
<b-icon v-if="!hideDomain[index]" icon="chevron-down" @click="toogleHideDomain(index)" />
|
||||
<span class="text-monospace" @click="toogleHideDomain(index)">{{ dn }}</span>
|
||||
<a :href="'#' + dn" class="float-right">
|
||||
<b-icon icon="link45deg" />
|
||||
</a>
|
||||
<b-badge class="ml-2" v-if="myServices.aliases && myServices.aliases[dn]" v-b-popover.hover.focus="{ customClass: 'text-monospace', html: true, content: aliasPopoverCnt(dn) }">+ {{ myServices.aliases[dn].length }} aliases</b-badge>
|
||||
<b-button type="button" variant="primary" size="sm" class="ml-2">
|
||||
<b-icon icon="plus" />
|
||||
Add a service
|
||||
</b-button>
|
||||
<b-button type="button" variant="outline-primary" size="sm" class="ml-2">
|
||||
<b-icon icon="link" />
|
||||
Add an alias
|
||||
</b-button>
|
||||
</h2>
|
||||
<b-list-group v-show="!hideDomain[index]" v-for="(svc, idx) in myServices.services[dn]" :key="idx">
|
||||
<b-list-group-item @click="toogleRR(index, idx)" button>
|
||||
<strong>{{ services[svc._svctype].name }}</strong> <span v-if="svc._comment" class="text-muted">{{ svc._comment }}</span>
|
||||
<span class="text-muted" v-if="services[svc._svctype].comment">{{ services[svc._svctype].comment }}</span>
|
||||
<b-badge v-for="(categorie, idcat) in services[svc._svctype].categories" :key="idcat" variant="gray" class="float-right ml-1">{{ categorie }}</b-badge>
|
||||
<b-badge v-if="svc._tmp_hint_nb && svc._tmp_hint_nb > 1" variant="danger" class="float-right ml-1">{{ svc._tmp_hint_nb }}</b-badge>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item v-if="expandrrs['' + index + '.' + idx]">
|
||||
{{ svc }}
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h-subdomain-list :domain="domain" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import Vue from 'vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
hSubdomainList: () => import('@/components/hSubdomainList')
|
||||
},
|
||||
|
||||
props: {
|
||||
domain: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
expandrrs: {},
|
||||
hideDomain: {},
|
||||
myServices: null,
|
||||
services: null
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isLoading () {
|
||||
return this.myServices == null || this.services == null
|
||||
},
|
||||
|
||||
sortedDomains () {
|
||||
if (this.myServices === null) {
|
||||
return []
|
||||
}
|
||||
|
||||
var domains = Object.keys(this.myServices.services)
|
||||
domains.sort(function (a, b) {
|
||||
var as = a.split('.').reverse()
|
||||
var bs = b.split('.').reverse()
|
||||
|
||||
var maxDepth = Math.min(as.length, bs.length)
|
||||
for (var i = 0; i < maxDepth; i++) {
|
||||
var cmp = as[i].localeCompare(bs[i])
|
||||
if (cmp !== 0) {
|
||||
return cmp
|
||||
}
|
||||
}
|
||||
|
||||
return as.length - bs.length
|
||||
})
|
||||
|
||||
return domains
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route: 'fetchData',
|
||||
|
||||
domain: function () {
|
||||
this.pullDomain()
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.fetchData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchData () {
|
||||
if (this.domain !== undefined && Object.keys(this.domain).length !== 0) {
|
||||
this.pullDomain()
|
||||
}
|
||||
|
||||
axios
|
||||
.get('/api/services')
|
||||
.then(
|
||||
(response) => {
|
||||
this.services = response.data
|
||||
this.goToAnchor()
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
toogleHideDomain (idx) {
|
||||
Vue.set(this.hideDomain, idx, !this.hideDomain[idx])
|
||||
},
|
||||
|
||||
toogleRR (index, idx) {
|
||||
Vue.set(this.expandrrs, index + '.' + idx, !this.expandrrs[index + '.' + idx])
|
||||
},
|
||||
|
||||
goToAnchor () {
|
||||
var hash = this.$route.hash.substr(1)
|
||||
if (!this.isLoading && hash.length > 0) {
|
||||
setTimeout(function () {
|
||||
window.scrollTo(0, document.getElementById(hash).offsetTop)
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
|
||||
isCNAME (dn) {
|
||||
return this.myServices.services[dn].length === 1 && this.myServices.services[dn][0]._svctype === 'git.happydns.org/happydns/services/CNAME'
|
||||
},
|
||||
|
||||
aliasPopoverCnt (dn) {
|
||||
return this.myServices.aliases[dn].map(function (alias) {
|
||||
if (this.myServices.services[alias]) {
|
||||
return '<a href="#' + this.escapeHTML(alias) + '">' + this.escapeHTML(alias) + '</a>'
|
||||
} else {
|
||||
return this.escapeHTML(alias)
|
||||
}
|
||||
}, this).join('<br>')
|
||||
},
|
||||
|
||||
pullDomain () {
|
||||
axios
|
||||
.post('/api/domains/' + this.domain.domain + '/analyze')
|
||||
.then(
|
||||
(response) => {
|
||||
this.myServices = response.data
|
||||
this.goToAnchor()
|
||||
},
|
||||
(error) => {
|
||||
this.$root.$bvToast.toast(
|
||||
'Unfortunately, we were unable to retrieve information for the domain ' + this.domain.domain + ': ' + error.response.data.errmsg, {
|
||||
title: 'Unable to retrieve domain information',
|
||||
autoHideDelay: 5000,
|
||||
variant: 'danger',
|
||||
toaster: 'b-toaster-content-right'
|
||||
}
|
||||
)
|
||||
this.$router.push('/domains/' + this.domain.domain)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.services {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.service {
|
||||
box-shadow: 2px 2px black;
|
||||
border: 1px solid black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 2.5%;
|
||||
width: 20%;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.service img {
|
||||
max-width: 100%;
|
||||
max-height: 90%;
|
||||
padding: 2%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user