MorrisJobke/jodel.html

## jodel.html
<html>
<head>

    <style>
    .grid-item {
       margin-bottom: 15px;
    }
    .grid-item img {
        width: 250px;
        height: 400px;
    }
    .grid-item .vote {
        color: #fff;
        font-weight: bold;
        font-size: 15px;
        padding: 5px;
        position: absolute;
        display: inline;
        bottom: 15px;
        right: 15px;
        width: 25px;
        height: 25px;
        text-align: center;
        border-radius: 25px;
        line-height: 25px;
        font-family: sans-serif;
    }
    </style>
</head>
<body>
    <div class="grid"></div>

    <script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>


    <script>

    var TOKEN = ''

    var nuernberg = {lat: '49.45', lng: '11.08'}
    var chemnitz =  {lat: '50.83', lng: '12.92'}
    var berlin =    {lat: '52.52', lng: '13.40'}

    var town = berlin

    var gridElement = document.querySelector('.grid');
    var msnry = new Masonry( gridElement, {
        // options
        itemSelector: '.grid-item',
        columnWidth: 250,
        gutter: 20
    });

    addPost = function(post) {
        var element = document.getElementById(post["post_id"]);
        if (! element) {
            var image = document.createElement('img');
            image.setAttribute('src', 'https:' + post['image_url'])
            var vote = document.createElement('span')
            vote.setAttribute('class', 'vote')
            vote.setAttribute('style', 'background-color: #' + post.color)
            vote.innerHTML = post.vote_count
            element = document.createElement('div');
            element.setAttribute("id", post["post_id"]);
            element.setAttribute('class', 'grid-item')
            element.appendChild(image);
            element.appendChild(vote);
            gridElement.appendChild(element)
            if (gridElement.children.length > 18) {
                gridElement.firstChild.remove();
                // msnry.remove(gridElement.firstChild)
            }
            msnry.prepended(element)
            // msnry.layout()
        } else {
            var votes = element.getElementsByClassName('vote')
            votes[0].innerHTML = post.vote_count
        }
    }

    doRequest = function() {
        // Vanilla
        var httpRequest = new XMLHttpRequest()
        httpRequest.onreadystatechange = function (data) {
            if (httpRequest.readyState != 4 || httpRequest.status != 200) {
                return
            }
            data = JSON.parse(httpRequest.responseText)
            var i = 0;
            data['posts'].forEach(function(reply){
                if(reply.hasOwnProperty('image_url')) {
                    i++;
                    setTimeout(function() {
                        addPost(reply)
                    }, (Math.random() * 1000) + 2000 * i)
                }
            })
        }

        var url = 'https://api.go-tellm.com/api/v2/posts/location/'
        var params = {
            "lat": town.lat,
            "lng": town.lng,
            "skip": Math.round(Math.random()) * Math.round(Math.random() * 4) * 30,
            "limit": "30"
        }

        var query = ''
        Object.keys(params).forEach(function(key) {
            query += '&' + key + '=' + params[key]
        })
        // trim leftmost &
        query = query.substr(1)

        httpRequest.open('GET', url + '?' + query)
        httpRequest.setRequestHeader('Authorization', 'Bearer ' + TOKEN)
        httpRequest.send()

        var timeout = 10000;
        if (gridElement.children.length < 5) {
            timeout = 1000;
        }

        console.log(timeout, gridElement.children.length, params.skip);
        setTimeout(function() {
            doRequest()
        }, timeout)
    }

    doRequest(true)
    </script>
</body>
</html>
	<html>
	<head>

	<style>
	.grid-item {
	margin-bottom: 15px;
	}
	.grid-item img {
	width: 250px;
	height: 400px;
	}
	.grid-item .vote {
	color: #fff;
	font-weight: bold;
	font-size: 15px;
	padding: 5px;
	position: absolute;
	display: inline;
	bottom: 15px;
	right: 15px;
	width: 25px;
	height: 25px;
	text-align: center;
	border-radius: 25px;
	line-height: 25px;
	font-family: sans-serif;
	}
	</style>
	</head>
	<body>
	<div class="grid"></div>

	<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>


	<script>

	var TOKEN = ''

	var nuernberg = {lat: '49.45', lng: '11.08'}
	var chemnitz = {lat: '50.83', lng: '12.92'}
	var berlin = {lat: '52.52', lng: '13.40'}

	var town = berlin

	var gridElement = document.querySelector('.grid');
	var msnry = new Masonry( gridElement, {
	// options
	itemSelector: '.grid-item',
	columnWidth: 250,
	gutter: 20
	});

	addPost = function(post) {
	var element = document.getElementById(post["post_id"]);
	if (! element) {
	var image = document.createElement('img');
	image.setAttribute('src', 'https:' + post['image_url'])
	var vote = document.createElement('span')
	vote.setAttribute('class', 'vote')
	vote.setAttribute('style', 'background-color: #' + post.color)
	vote.innerHTML = post.vote_count
	element = document.createElement('div');
	element.setAttribute("id", post["post_id"]);
	element.setAttribute('class', 'grid-item')
	element.appendChild(image);
	element.appendChild(vote);
	gridElement.appendChild(element)
	if (gridElement.children.length > 18) {
	gridElement.firstChild.remove();
	// msnry.remove(gridElement.firstChild)
	}
	msnry.prepended(element)
	// msnry.layout()
	} else {
	var votes = element.getElementsByClassName('vote')
	votes[0].innerHTML = post.vote_count
	}
	}

	doRequest = function() {
	// Vanilla
	var httpRequest = new XMLHttpRequest()
	httpRequest.onreadystatechange = function (data) {
	if (httpRequest.readyState != 4 \|\| httpRequest.status != 200) {
	return
	}
	data = JSON.parse(httpRequest.responseText)
	var i = 0;
	data['posts'].forEach(function(reply){
	if(reply.hasOwnProperty('image_url')) {
	i++;
	setTimeout(function() {
	addPost(reply)
	}, (Math.random() * 1000) + 2000 * i)
	}
	})
	}

	var url = 'https://api.go-tellm.com/api/v2/posts/location/'
	var params = {
	"lat": town.lat,
	"lng": town.lng,
	"skip": Math.round(Math.random()) * Math.round(Math.random() * 4) * 30,
	"limit": "30"
	}

	var query = ''
	Object.keys(params).forEach(function(key) {
	query += '&' + key + '=' + params[key]
	})
	// trim leftmost &
	query = query.substr(1)

	httpRequest.open('GET', url + '?' + query)
	httpRequest.setRequestHeader('Authorization', 'Bearer ' + TOKEN)
	httpRequest.send()

	var timeout = 10000;
	if (gridElement.children.length < 5) {
	timeout = 1000;
	}

	console.log(timeout, gridElement.children.length, params.skip);
	setTimeout(function() {
	doRequest()
	}, timeout)
	}

	doRequest(true)
	</script>
	</body>
	</html>