edwardgalligan/organicityeu-tag-domains.html

## organicityeu-tag-domains.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Data</title>
  <style>
    html, body, #app {
        margin: 0 auto;
        padding: 0;
        height: 100%;
        width: 100%;
        max-width: 800px;
        font-size: 0.8em;
    }
    h1 {
        margin: 5px;
    }
    .domain, .tags, .services, .tag, .service {
        border: 1px solid #000;
        margin: 10px;
        background: rgba(99,99,99,0.2);
    }
    .domain:before {
        content: '[DOMAIN]';
        color: #666;
        font-style: italic;
    }
    .tags:before {
        content: '[TAGS]';
        color: #666;
        font-style: italic;
    }
    .services:before {
        content: '[SERVICES]';
        color: #666;
        font-style: italic;
    }
    .urn:before {
        content: 'URN: ';
        font-weight: 700;
    }
    .user:before {
        content: 'USER: ';
        font-weight: 700;
    }
    ul {
        display: none;
    }
  </style>
</head>
<body>
    <div id="app"></div>
    <script>

function renderService(service) {
    var serviceWrap = document.createElement('div');
    var h1          = document.createElement('h1');
    var ul          = document.createElement('ul');
    var urn         = document.createElement('li');
    var user        = document.createElement('li');

    serviceWrap.setAttribute('class', 'service');
    urn.setAttribute('class', 'urn');
    user.setAttribute('class', 'user');

    h1.appendChild(document.createTextNode(service.description));
    urn.appendChild(document.createTextNode(service.urn));
    user.appendChild(document.createTextNode(service.user));

    ul.appendChild(urn);
    ul.appendChild(user);
    serviceWrap.appendChild(h1);
    serviceWrap.appendChild(ul);
    return serviceWrap;
}
function renderTag(tag) {
    var tagWrap = document.createElement('div');
    var h1          = document.createElement('h1');
    var ul          = document.createElement('ul');
    var urn         = document.createElement('li');

    tagWrap.setAttribute('class', 'tag');
    urn.setAttribute('class', 'urn');

    h1.appendChild(document.createTextNode(tag.name));
    urn.appendChild(document.createTextNode(tag.urn));

    ul.appendChild(urn);
    tagWrap.appendChild(h1);
    tagWrap.appendChild(ul);
    return tagWrap;
}
function renderDomain(domain) {
    var domainWrap   = document.createElement('div');
    var h1           = document.createElement('h1');
    var servicesWrap = document.createElement('div');
    var tagsWrap     = document.createElement('div');

    domainWrap.setAttribute('class', 'domain');
    servicesWrap.setAttribute('class', 'services');
    tagsWrap.setAttribute('class', 'tags');

    h1.appendChild(document.createTextNode(domain.description));
    domain.services.forEach(service => servicesWrap.appendChild(renderService(service)));
    domain.tags.forEach(tag => tagsWrap.appendChild(renderTag(tag)));

    domainWrap.appendChild(h1);
    domainWrap.appendChild(servicesWrap);
    domainWrap.appendChild(tagsWrap);
    return domainWrap;
}

(function() {
    var app = document.getElementById('app');

    fetch('https://annotations.organicity.eu/tagDomains')
    .then(response => response.json())
    .then(domains => {
        domains.forEach(domain => app.appendChild(renderDomain(domain)));
    })
})();

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Data</title>
	<style>
	html, body, #app {
	margin: 0 auto;
	padding: 0;
	height: 100%;
	width: 100%;
	max-width: 800px;
	font-size: 0.8em;
	}
	h1 {
	margin: 5px;
	}
	.domain, .tags, .services, .tag, .service {
	border: 1px solid #000;
	margin: 10px;
	background: rgba(99,99,99,0.2);
	}
	.domain:before {
	content: '[DOMAIN]';
	color: #666;
	font-style: italic;
	}
	.tags:before {
	content: '[TAGS]';
	color: #666;
	font-style: italic;
	}
	.services:before {
	content: '[SERVICES]';
	color: #666;
	font-style: italic;
	}
	.urn:before {
	content: 'URN: ';
	font-weight: 700;
	}
	.user:before {
	content: 'USER: ';
	font-weight: 700;
	}
	ul {
	display: none;
	}
	</style>
	</head>
	<body>
	<div id="app"></div>
	<script>

	function renderService(service) {
	var serviceWrap = document.createElement('div');
	var h1 = document.createElement('h1');
	var ul = document.createElement('ul');
	var urn = document.createElement('li');
	var user = document.createElement('li');

	serviceWrap.setAttribute('class', 'service');
	urn.setAttribute('class', 'urn');
	user.setAttribute('class', 'user');

	h1.appendChild(document.createTextNode(service.description));
	urn.appendChild(document.createTextNode(service.urn));
	user.appendChild(document.createTextNode(service.user));

	ul.appendChild(urn);
	ul.appendChild(user);
	serviceWrap.appendChild(h1);
	serviceWrap.appendChild(ul);
	return serviceWrap;
	}
	function renderTag(tag) {
	var tagWrap = document.createElement('div');
	var h1 = document.createElement('h1');
	var ul = document.createElement('ul');
	var urn = document.createElement('li');

	tagWrap.setAttribute('class', 'tag');
	urn.setAttribute('class', 'urn');

	h1.appendChild(document.createTextNode(tag.name));
	urn.appendChild(document.createTextNode(tag.urn));

	ul.appendChild(urn);
	tagWrap.appendChild(h1);
	tagWrap.appendChild(ul);
	return tagWrap;
	}
	function renderDomain(domain) {
	var domainWrap = document.createElement('div');
	var h1 = document.createElement('h1');
	var servicesWrap = document.createElement('div');
	var tagsWrap = document.createElement('div');

	domainWrap.setAttribute('class', 'domain');
	servicesWrap.setAttribute('class', 'services');
	tagsWrap.setAttribute('class', 'tags');

	h1.appendChild(document.createTextNode(domain.description));
	domain.services.forEach(service => servicesWrap.appendChild(renderService(service)));
	domain.tags.forEach(tag => tagsWrap.appendChild(renderTag(tag)));

	domainWrap.appendChild(h1);
	domainWrap.appendChild(servicesWrap);
	domainWrap.appendChild(tagsWrap);
	return domainWrap;
	}

	(function() {
	var app = document.getElementById('app');

	fetch('https://annotations.organicity.eu/tagDomains')
	.then(response => response.json())
	.then(domains => {
	domains.forEach(domain => app.appendChild(renderDomain(domain)));
	})
	})();

	</script>
	</body>
	</html>