Search in this section

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HTML
<div id="app">

<div class="filter row">
    <div class="col-md-2">
        <h2>Type</h2>
        <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-md-2">
        <h2>Continent</h2>
        <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="AFRICA"> Africa
            </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="SOUTH_AMERICA"> South America
            </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="OCEANIA"> Oceania
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.tldContinent value="ANTARCTICA"> Antarctica
            </label>
        </div>
    </div>
    <div class="col-md-2">
        <h2>Other</h2>
        <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="CARIBIC"> Caribic
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.thirdlevel> Third Level
            </label>
        </div>
    </div>
    <div class="col-md-2">
        <h2>Kategorie</h2>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.tldCategory value="BUSINESS"> Business
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.tldCategory value="COMMUNITY"> Community
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.tldCategory value="ECOMMERCE"> Ecommerce
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.tldCategory value="FOOD"> Food
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.tldCategory value="GEO_TRAVEL"> Geo-Travel
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.tldCategory value="SPORT_FUN"> Sport-Fun
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.tldCategory value="WEB_TECH"> Web-Tech
            </label>
        </div>
    </div>
    <div class="col-md-2">
        <h2>Official Language</h2>
        <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="ES"> Spanish
            </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="CN"> Chinese
            </label>
        </div>
        <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="EN"> English
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.tldLanguageOfOffice value="DE"> German
            </label>
        </div>
    </div>
    <div class="col-md-2">
        <h2>Functions</h2>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.trustee> Trustee
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.privacy> Privacy
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.dnssec> DNSSec
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.premium> Premium
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.contactExtensions> Contact Extensions
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" v-model=pagination.authinfo> AuthInfo
            </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.countryIso && item.countryIso.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>Contact Extensions: </td>
        <td><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>
    </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>
</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)">{{controller.organisation}}<br></template><template v-for="line in controller.address">{{line}}<br></template></p>
    </template>
</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: [],
                tldCategory: [],
                tldGeoPol: [],
				tldLanguageOfOffice: [],
 				authinfo: false,
				dnssec:false,
				privacy:false,
                thirdlevel: false,
                trustee:false,
				premium: false,
				contactExtensions: 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}&per_page=${this.pagination.rowsPerPage}`, {
                        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,
                            thirdlevel: this.pagination.thirdlevel,
                            premium: this.pagination.premium,
 							authinfo: this.pagination.authinfo,
							contactExtensions: this.pagination.contactExtensions,
						 }
                    })
                    .then((response) => {
                        var data = response.data.data;
						data.forEach(function(element) {
  							element.contentVisible = false;
						});
						this.items = data;
 						this.pagination.totalItems = response.data.total;
						this.maxPage = Math.ceil(response.data.total / this.pagination.rowsPerPage)
                    })
                    .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>