Search in this section
Page History
...
HTML |
---|
<div id="app"> <h2>Filter options</h2> <div class="filter row" style="border: 1px solid black; border-radius: 5px;"> <div class="col checkbox-inline"> <h3 class="filter-options">Type</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">Category</h3> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldCategory" value="ADULT" /> Adult </label> </div> <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="BUSINESS_AND_PROFESSIONS" /> Business and Professions </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldCategory" value="CULTURE_AND_ART" /> Culture and Art </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldCategory" value="EDUCATION" /> Education </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldCategory" value="ENTERTAINMENT" /> Entertainment </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldCategory" value="FITNESS_AND_SPORTS" /> Fitness and Sports </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldCategory" value="FINANCIAL" /> Financial </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldCategory" value="FOOD_AND_DRINKS" /> Food and Drinks </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="GENERIC" /> Generic </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldCategory" value="HEALTH" /> Health </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="LOCATION" /> Location </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldCategory" value="NATURE_AND_ENVIRONMENT" /> Nature and Environment </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldCategory" value="REAL_ESTATE" /> Real Estate </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="TECHNOLOGY" /> Technology </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldCategory" value="TRAVEL" /> Travel </label> </div> </div> <div class="col checkbox-inline"> <h3 class="filter-options">Continent</h3> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldContinent" value="ANTARCTICA" /> Antarctica </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldContinent" value="AFRICA" /> Africa </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldContinent" value="ASIA" /> Asia </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldContinent" value="EUROPE" /> Europe </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldContinent" value="NORTH_AMERICA" /> North America </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldContinent" value="OCEANIA" /> Oceania </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldContinent" value="SOUTH_AMERICA" /> South America </label> </div> <i>Other</i> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldGeoPol" value="CARIBIC" /> Caribbean </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldGeoPol" value="EU" /> European 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">A third-level domain is the section of a domain name that is to the left of the dot of a second-level domain (SLD) that is considered a domain extension.</span> </label> </div> </div> <div class="col checkbox-inline"> <h3 class="filter-options">Functions</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">These domains support and/or require a special "password" for certain domain transactions such as domain transfers or domain updates.</span> </label> </div> <div class="checkbox tooltip"> <label> <input type="checkbox" v-model="pagination.contactExtensions" /> Contact Extensions <span class="aui-icon aui-icon-small aui-iconfont-info"></span> <span class="tooltiptext">In order to register these domains, additional information in the contact handle such as: ID card number, Company number or TLD-specific information is required.</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">The registry support DNSSec functionality for these 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">Denotes if a registry offers premium domains which costs more than a normal registration.</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">Denotes if the domain supports the privacy service.</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">Denotes if an optional trustee is available to fulfill the registration requirements.</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">Denotes whether AutoDelete is optionally available for the TLD.</span> </label> </div> </div> <div class="col checkbox-inline"> <h3 class="filter-options">Official Language</h3> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldLanguageOfOffice" value="AR" /> Arabic </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldLanguageOfOffice" value="CN" /> Chinese </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldLanguageOfOffice" value="EN" /> English </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldLanguageOfOffice" value="FR" /> French </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldLanguageOfOffice" value="DE" /> German </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldLanguageOfOffice" value="PT" /> Portuguese </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldLanguageOfOffice" value="RU" /> Russian </label> </div> <div class="checkbox"> <label> <input type="checkbox" v-model="pagination.tldLanguageOfOffice" value="ES" /> Spanish </label> </div> </div> </div> <br> <div class="filter row"> <div class="col-md-6"> <div class="pull-left"> <input class="text" placeholder="TLD Search" 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">Show</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'">Asia</template><template v-else-if="item.tldContinent == 'AFRICA'">Africa</template><template v-else-if="item.tldContinent == 'NORTH_AMERICA'">North America</template><template v-else-if="item.tldContinent == 'SOUTH_AMERICA'">South America</template><template v-else-if="item.tldContinent == 'EUROPE'">Europe</template><template v-else-if="item.tldContinent == 'OCEANIA'">Oceania</template><template v-else-if="item.tldContinent == 'ANTARCTICA'">Antarctica</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.countrynameEn)}} </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>Technical Information</h4> <table> <tr> <td>Character length: </td> <td>{{item.charMin}} - {{item.charMax}}</td> </tr> <tr> <td>Numeral domains: </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>Transfer Confirmation: </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 v-if="item.contactExtensions.length == 0" > <td>Contact Extensions: </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>Note</h4> <template v-if="item.restrictions.length > 0"> <ul> <template v-for="restriction in item.restrictions"> <li v-if="restriction.language == 'en'"> {{ restriction.text }} </li> </template> </ul> </template> <p v-if="!isEmpty(item.commentEn)">{{item.commentEn}}</p> <template v-if="item.restrictions.length == 0 && isEmpty(item.commentEn)"> <p>There are no notes for this TLD.</p> </template> </div> <div class="col-md-3"> <template v-for="controller in item.dataControllers"> <h4 v-if="controller.type == 'org'">Data processor</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">Contact Extensions:</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>Optional services for this 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">Show</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', 'Type', 'Continent', 'Country', 'AuthInfo', 'DNSSEC', 'Contact Extensions', 'Privacy', 'Trustee', 'Premium', 'More'], 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