Suche in diesem Bereich
Page History
...
| HTML |
|---|
<div id="app">
<h2>Filter Optionen</h2>
<div class="filter row" style="border: 1px solid black; border-radius: 5px;">
<div class="col checkbox-inline">
<h3 class="filter-options">Typ</h3>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldType"
value="CCTLD"
checked
/>
ccTLD
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldType"
value="GTLD"
checked
/>
gTLD
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldType"
value="NEW_GTLD"
checked
/>
New gTLD
</label>
</div>
</div>
<div class="col checkbox-inline">
<h3 class="filter-options">Kategorie</h3>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="AUTOMOTIVE"
/>
Automotive
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="EDUCATION"
/>
Bildung
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="pagination.tldCategory" value="ADULT" />
Erwachsene
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="FOOD_AND_DRINKS"
/>
Essen und Trinken
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="FITNESS_AND_SPORTS"
/>
Fitness und Sport
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="FINANCIAL"
/>
Finanzen
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="GENERIC"
/>
Generisch
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="HEALTH"
/>
Gesundheit
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="REAL_ESTATE"
/>
Immobilien
</label>
</div>
</div>
<div class="col checkbox-inline">
<h2 style="height: 30px;"></h2>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="CULTURE_AND_ART"
/>
Kultur und Kunst
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="LIFESTYLE"
/>
Lifestyle
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="NATURE_AND_ENVIRONMENT"
/>
Natur und Umwelt
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="TRAVEL"
/>
Reisen
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="SHOPPING"
/>
Shopping
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="LOCATION"
/>
Standort
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="TECHNOLOGY"
/>
Technologie
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="ENTERTAINMENT"
/>
Unterhaltung
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldCategory"
value="BUSINESS_AND_PROFESSIONS"
/>
Wirtschaft und Berufe
</label>
</div>
</div>
<div class="col checkbox-inline">
<h3 class="filter-options">Kontinent</h3>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldContinent"
value="AFRICA"
/>
Afrika
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldContinent"
value="ANTARCTICA"
/>
Antarktis
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="pagination.tldContinent" value="ASIA" />
Asien
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldContinent"
value="EUROPE"
/>
Europa
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldContinent"
value="NORTH_AMERICA"
/>
Nordamerika
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldContinent"
value="OCEANIA"
/>
Ozeanien
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldContinent"
value="SOUTH_AMERICA"
/>
Südamerika
</label>
</div>
<i>Sonstiges</i>
<div class="checkbox">
<label>
<input type="checkbox" v-model="pagination.tldGeoPol" value="CARIBIC" />
Karibik
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="pagination.tldGeoPol" value="EU" />
Europäische Union
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="pagination.tldGeoPol" value="DACH" />
D-A-CH
</label>
</div>
<div class="checkbox tooltip">
<label>
<input type="checkbox" v-model="pagination.thirdlevel" /> Third Level
<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
<span class="tooltiptext">Eine Third-Level-Domain ist der Abschnitt eines Domainnamens, der
links vom Punkt einer Second-Level-Domain (SLD) als Domain-Erweiterung gilt.</span>
</label>
</div>
</div>
<div class="col checkbox-inline">
<h3 class="filter-options">Funktionen</h3>
<div class="checkbox tooltip">
<label>
<input type="checkbox" v-model="pagination.authinfo" /> AuthInfo
<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
<span class="tooltiptext">Diese Domains unterstützen und/oder erfordern ein spezielles "Passwort" für bestimmte Domain Transaktionen wie z. B. Domain-Transfers oder Domain-Aktualisierungen.</span>
</label>
</div>
<div class="checkbox tooltip">
<label>
<input type="checkbox" v-model="pagination.contactExtensions" /> Kontakt Erweiterungen
<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
<span class="tooltiptext">Um diese Domains zu registrieren, müssen zusätzliche Kontaktinformationen wie Ausweisnummer, Firmennummer oder TLD-spezifische Informationen angegeben werden.</span>
</label>
</div>
<div class="checkbox tooltip">
<label>
<input type="checkbox" v-model="pagination.dnssec" /> DNSSec
<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
<span class="tooltiptext">Die Registry unterstützt DNSSec-Funktionalität für diese Domains.</span>
</label>
</div>
<div class="checkbox tooltip">
<label>
<input type="checkbox" v-model="pagination.premium" /> Premium
<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
<span class="tooltiptext">Gibt an, ob eine Registrierungsstelle Premium-Domains anbietet, die mehr als eine normale Registrierung kosten.</span>
</label>
</div>
<div class="checkbox tooltip">
<label>
<input type="checkbox" v-model="pagination.privacy" /> Privacy
<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
<span class="tooltiptext">Gibt an, ob die Domäne den Datenschutzdienst unterstützt.</span>
</label>
</div>
<div class="checkbox tooltip">
<label>
<input type="checkbox" v-model="pagination.trustee" /> Trustee
<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
<span class="tooltiptext">Gibt an, ob ein optionaler Trustee zur Erfüllung der Registrierungsanforderungen zur Verfügung steht.</span>
</label>
</div>
<div class="checkbox tooltip">
<label>
<input type="checkbox" v-model="pagination.autoDelete" /> AutoDelete
<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
<span class="tooltiptext">Gibt an, ob für die TLD optional AutoDelete zur Verfügung steht.</span>
</label>
</div>
<div class="checkbox tooltip">
<label>
<input type="checkbox" v-model="pagination.blocking_services" /> Blocking Services
<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
<span class="tooltiptext">Gibt an, ob für die TLD Blocking Services zur Verfügung stehen.</span>
</label>
</div>
<div class="checkbox tooltip">
<label>
<input type="checkbox" v-model="pagination.registry_lock" /> Registry Lock
<span class="aui-icon aui-icon-small aui-iconfont-info"></span>
<span class="tooltiptext">Gibt an, ob für die TLD Registry Lock zur Verfügung steht.</span>
</label>
</div>
</div>
<div class="col checkbox-inline">
<h3 class="filter-options">Amtssprache</h3>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldLanguageOfOffice"
value="AR"
/>
Arabisch
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldLanguageOfOffice"
value="CN"
/>
Chinesisch
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldLanguageOfOffice"
value="DE"
/>
Deutsch
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldLanguageOfOffice"
value="EN"
/>
Englisch
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldLanguageOfOffice"
value="FR"
/>
Französisch
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldLanguageOfOffice"
value="PT"
/>
Portugiesisch
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldLanguageOfOffice"
value="RU"
/>
Russisch
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
v-model="pagination.tldLanguageOfOffice"
value="ES"
/>
Spanisch
</label>
</div>
</div>
</div>
<br>
<div class="filter row">
<div class="col-md-6">
<div class="pull-left">
<input class="text" placeholder="TLD Suche" type="text" v-model=pagination.search>
<div class="aui-button" @click="clearSearch()"><span class="aui-icon aui-icon-small aui-iconfont-remove-label"></span></div>
</div>
</div>
<div class="col-md-6">
<div class="pull-right">
<label for="selectRow">Zeige</label>
<select class="select" style="max-width: 80px;" v-model=pagination.rowsPerPage id="selectRow">
<option v-for="option in rows_per_page" v-bind:value="option">
{{ option }}
</option>
</select>
<span>von {{pagination.totalItems}}</span>
<div class="aui-button" @click="pageDown()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-left"></span></div>
<span>Seite {{pagination.page}} / {{maxPage}}</span>
<div class="aui-button" @click="pageUp()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-right"></span></div>
</div>
</div>
</div>
<br>
<table class="relative-table wrapped confluenceTable" width="100%">
<tr>
<th v-for="header in headers" class="confluenceTh">{{header}}</th>
</tr>
<template v-for="(item,index) in items">
<tr>
<td class="confluenceTd">
<template v-if="!isEmpty(item.confluencePageDe)"><a :href="'/pages/viewpage.action?pageId=' + item.confluencePageDe">{{item.label}}</a></template>
<template v-else>{{item.label}}</template>
</td>
<td class="confluenceTd"><template v-if="item.tldType == 'CCTLD'">ccTLD</template><template v-if="item.tldType == 'GTLD'">gTLD</template><template v-if="item.tldType == 'NEW_GTLD'">New gTLD</template></td>
<td class="confluenceTd"><template v-if="item.tldContinent == 'ASIA'">Asien</template><template v-else-if="item.tldContinent == 'AFRICA'">Afrika</template><template v-else-if="item.tldContinent == 'NORTH_AMERICA'">Nord Amerika</template><template v-else-if="item.tldContinent == 'SOUTH_AMERICA'">Süd Amerika</template><template v-else-if="item.tldContinent == 'EUROPE'">Europa</template><template v-else-if="item.tldContinent == 'OCEANIA'">Ozeanien</template><template v-else-if="item.tldContinent == 'ANTARCTICA'">Antarktis</template><template v-else-if="item.tldContinent == 'GLOBAL'">Global</template></td>
<td class="confluenceTd" v-show="item.country">
<img v-bind:src="'/img/'+ ( item.country && item.country.isoCode.toLowerCase() ) +'.svg'" height="16" width="16" > {{ item.country && item.country.countrynameDe}}
</td>
<td class="confluenceTd" v-show="!item.country">
<img v-bind:src="'/img/global.svg'" height="16" width="16" > Global
</td>
<td class="confluenceTd">
<span v-if="item.transferAuthinfo || item.transferOwnerchange" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
<td class="confluenceTd">
<span v-if="item.dnssecMax > 0" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
<td class="confluenceTd">
<span v-if="item.contactExtensions.length > 0" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
<td class="confluenceTd">
<span v-if="item.privacy" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
<td class="confluenceTd">
<span v-if="item.trustee" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
<td class="confluenceTd">
<span v-if="item.premiumDomains" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
<td class="confluenceTd"><div class="aui-button" @click="item.contentVisible = !item.contentVisible"><span class="aui-icon aui-icon-small aui-iconfont-more"></span></div></td>
</tr>
<tr v-show="item.contentVisible">
<td :colspan="headers.length" style="padding:10px; background: #e9f3f9;">
<div class="filter row">
<div class="col-md-3">
<h4>Technische Informationen</h4>
<table>
<tr>
<td>Zeichenlänge: </td>
<td>{{item.charMin}} - {{item.charMax}}</td>
</tr>
<tr>
<td>Zifferndomains: </td>
<td><span v-if="item.numeralDomains" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
<tr>
<td>IDN: </td>
<td><span v-if="item.idn.length > 0" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
<tr>
<td>DNSSEC: </td>
<td><span v-if="item.dnssecMax > 0" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
<tr>
<td>DNS Check: </td>
<td><span v-if="item.dnsCheck" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
<tr>
<td>Authinfo: </td>
<td><span v-if="item.transferAuthinfo || item.transferOwnerchange" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
<tr>
<td>Premium Domains: </td>
<td><span v-if="item.premiumDomains" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
<tr>
<td>Transferbestätigung: </td>
<td><span v-if="item.transferConfirmation" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
<tr>
<td>Statusupdate: </td>
<td><span v-if="item.taskStatusUpdate" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
<tr>
<td>Restore: </td>
<td><span v-if="item.taskRestore" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
<tr>
<td>AutoDelete: </td>
<td><span v-if="item.autoDelete" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
<tr>
<td>Registry Lock: </td>
<td><span v-if="item.registryLock" class="aui-icon aui-icon-small aui-iconfont-success" style="color:#36B37E"></span>
<span v-else class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
<tr v-if="item.contactExtensions.length == 0" >
<td>Kontakterweiterungen: </td>
<td><span class="aui-icon aui-icon-small aui-iconfont-close-dialog" style="color:#FF5630"></span></td>
</tr>
</table>
</div>
<div class="col-md-6">
<h4>Hinweis</h4>
<template v-if="item.restrictions.length > 0">
<ul>
<template v-for="restriction in item.restrictions">
<li v-if="restriction.language == 'de'">
{{ restriction.text }}
</li>
</template>
</ul>
</template>
<p v-if="!isEmpty(item.commentDe)">{{item.commentDe}}</p>
<template v-if="item.restrictions.length == 0 && isEmpty(item.commentDe)">
<p>Für diese TLD gibt es keine Restriktionen.</p>
</template>
</div>
<div class="col-md-3">
<template v-for="controller in item.dataControllers">
<h4 v-if="controller.type == 'org'">Datenverarbeiter</h4>
<h4 v-if="controller.type == 'escrow'">Escrow</h4>
<h4 v-if="controller.type == 'privacy'">Privacy</h4>
<p><template v-if="!isEmpty(controller.name)">{{controller.name}}<br></template><template v-if="!isEmpty(controller.organisation)"><span v-html="controller.organisation"></span><br></template><template v-for="line in controller.address">{{line}}<br></template></p>
</template>
</div>
</div>
<div class="filter row" v-if="item.contactExtensions.length > 0">
<div class="col-md-12" style="padding-left:17.5px;">
<div class="pull-left">Kontakterweiterungen:</div>
<div class="pull-left" style="padding-left:25px;">
<p v-for="contactExtension in item.contactExtensions" style="margin-top:0px;">{{ contactExtension }}</p>
</div>
</div>
</div>
<div class="filter row">
<div class="col-md-12">
<h4>Optionale Leistungen für diese TLD:</h4>
<p>
<img src="/img/backupmx.svg" height="16" width="16"> <a href="https://www.internetx.com/server/backupmx-20/" target="_blank">BackupMX</a>,
<img src="/img/domainsafe.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/autodns/domain-safe/" target="_blank">DomainSafe</a>,
<img src="/img/monitoring.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/autodns/" target="_blank">Domain Monitoring</a>,
<img src="/img/mailproxy.svg" height="16" width="16"> <a href="https://www.internetx.com/server/mailproxy-20/" target="_blank">MailProxy</a>,
<img src="/img/nameserver.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/autodns/nameserver/" target="_blank">Nameserver</a>,
<img src="/img/nodesecure.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/autodns/nameserver/#c3344" target="_blank">NodeSecure</a>,
<img src="/img/proceed.svg" height="16" width="16"> <a href="https://www.internetx.com/server/proceed/" target="_blank">Proceed</a>,
<img src="/img/redirect.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/#c4302" target="_blank">Redirector</a>,
<img src="/img/ssl.svg" height="16" width="16"> <a href="https://www.internetx.com/domains/#c4302" target="_blank">Gratis SSL</a>
</p>
</div>
</div>
</td>
</tr>
</template>
</table>
<br>
<div class="filter row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="pull-right">
<label for="selectRow">Zeige</label>
<select class="select" style="max-width: 80px;" v-model=pagination.rowsPerPage id="selectRow">
<option v-for="option in rows_per_page" v-bind:value="option">
{{ option }}
</option>
</select>
<span>von {{pagination.totalItems}}</span>
<div class="aui-button" @click="pageDown()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-left"></span></div>
<span>Seite {{pagination.page}} / {{maxPage}}</span>
<div class="aui-button" @click="pageUp()"><span class="aui-icon aui-icon-small aui-iconfont-devtools-arrow-right"></span></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
AJS.$("#searchForm").submit(function(e){
return false;
});
Vue.config.devtools = true;
var app = new Vue({
el: '#app',
data: {
message: '',
headers: ['Tld', 'Typ', 'Kontinent', 'Land', 'Authinfo', 'DNSSEC', 'Kontakterweiterungen', 'Privacy', 'Trustee', 'Premium', 'Mehr'],
search: '',
totalItems: 0,
rows_per_page: [50, 100, 200, 500],
maxPage: 0,
pageChanged: false,
items: [],
pagination: {
rowsPerPage: 50,
descending: false,
page: 1,
sortBy: null,
totalItems: 1,
search: "",
tldType: ['CCTLD','GTLD','NEW_GTLD'],
tldContinent: [],
tldGeoPol: [],
tldLanguageOfOffice: [],
tldCategory: [],
authinfo: false,
dnssec:false,
privacy:false,
trustee:false,
autoDelete:false,
premium: false,
thirdlevel: false,
contactExtensions: false,
registry_lock: false,
blocking_services: false
},
},
mounted() {
var privacy = location.search.split('privacy=')[1]
if(privacy == "true"){
this.pagination.privacy = true;
}
this.getProducts();
},
watch: {
pagination: {
handler() {
if(!this.pageChanged){
this.pagination.page = 1;
}else{
this.pageChanged = false;
}
this.getProducts();
},
deep:true
}
},
methods: {
getProducts() {
console.log("Load products");
axios.get(`https://api.autodns.com/productstore/v1/tld/_paginate?page=${this.pagination.page-1}&per_page=${this.pagination.rowsPerPage}`&sort=tld,asc`, {
params: {
keyword: this.pagination.search,
tldType: this.pagination.tldType,
tldContinent: this.pagination.tldContinent,
tldLanguageOfOffice: this.pagination.tldLanguageOfOffice,
tldCategory: this.pagination.tldCategory,
tldGeoPol: this.pagination.tldGeoPol,
dnssec: this.pagination.dnssec,
privacy: this.pagination.privacy,
trustee: this.pagination.trustee,
autoDelete: this.pagination.autoDelete,
premium: this.pagination.premium,
authinfo: this.pagination.authinfo,
thirdlevel: this.pagination.thirdlevel,
contactExtensions: this.pagination.contactExtensions,
registry_lock: this.pagination.registry_lock,
blocking_services: this.pagination.blocking_services
}
})
.then((response) => {
var data = response.data.content;
data.forEach(function(element) {
element.contentVisible = false;
});
this.items = data;
this.pagination.totalItems = response.data.totalElements;
this.maxPage = response.data.totalPages;
})
.catch(() => {
console.log('handle server error from here');
});
},
printTimePeriod(val) {
if (val == null) {
return "";
}
return val['period'] + val['unit'];
},
pageUp() {
if(this.pagination.page + 1 <= this.maxPage){
this.pagination.page = this.pagination.page + 1;
}
this.pageChanged = true;
},
pageDown() {
this.pagination.page = this.pagination.page - 1;
if (this.pagination.page < 1) {
this.pagination.page = 1;
}
this.pageChanged = true;
},
showRow(item) {
console.log("show data for " + item.label);
console.log(item.contentVisible);
item.contentVisible = !item.contentVisible;
console.log(item.contentVisible);
},
isEmpty(str) {
return (!str || 0 === str.length);
},
clearSearch() {
this.pagination.search = "";
},
}
})
</script>
<style>
.checkbox-inline {
padding: 15px;
min-width: fit-content;
max-width: 200px;
min-height: 180px;
display: inline;
float: left;
}
.checkbox>label {
display: inline;
font-size: 12px;
}
.filter-options {
height:30px;
font-size: 14px !important;
font-weight: bold;
}
.tooltip {
position: relative;
display: block;
cursor:pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 7px;
/* Position the tooltip */
top: 135%;
left: 50%;
margin-left: -50px;
position: absolute;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 20px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
|
Overview
Content Tools