specimens-of-composite-portraiture/www/composite_loader.js

class Face {
    constructor(id) {
        this.id = id;
        this.value = 0;
        // this.name = name;
        this.imgEls = [];
        this.valueEls = [];

        let els = document.querySelectorAll(`[data-face='${this.id}']`);
        for(let el of els) {
            if(el.tagName == 'IMG') {
                this.imgEls.push(el);
            } else {
                this.valueEls.push(el);
            }
        }
    }

    addImgEl(el) {
        this.imgEls.push(el)
    }

    addValueEl(el) {
        this.valueEls.push(el)
    }

    update(imgUrl, value) {
        for(let el of this.valueEls) {
            el.textContent = new Intl.NumberFormat("nl").format(value);
        }
        for(let el of this.imgEls) {
            el.src = imgUrl;
        }
    }
}

class Bar {
    constructor(el) {
        this.el = el;
        this.values = {};
    }

    setValue(id, value) {
        this.values[id] = value;
        this.update();
    }

    update() {
        for(let id in this.values) {
            let el = document.getElementById('graph--' + id);
            if(!el) continue;

            let nrEls = el.getElementsByClassName('nr');
            for(let nrEl of nrEls) {
                nrEl.textContent =  new Intl.NumberFormat("nl").format(this.values[id]);
            }

            el.style.flex = parseInt(this.values[id]);
        }
    }

}

var bar = new Bar(document.getElementById('graph'));

var faces = {
    'front': new Face('front'),
    'side': new Face('side'),
    'male_front': new Face('male_front'),
    'female_front': new Face('female_front'),
    'unknown_front': new Face('unknown_front'),
    'male_side': new Face('male_side'),
    'female_side': new Face('female_side'),
    'unknown_side': new Face('unknown_side')
}

var update = function() {
    let req = new XMLHttpRequest();
    req.addEventListener("load", function(e){
        let data = JSON.parse(this.responseText);
        console.log(data);
        for(let name in data){
            faces[name].update('/output/'+data[name]['img'], data[name]['count']);
        }

        bar.setValue('male', data['male_front']['count'] + data['male_side']['count'])
        bar.setValue('female', data['female_front']['count'] + data['female_side']['count'])
        bar.setValue('unknown', data['unknown_front']['count'] + data['unknown_side']['count'])
    });
    req.open("GET", "/output/composites.json?v=" + Date.now());
    req.send();
}

var socket = new ReconnectingWebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws")
socket.addEventListener('message', function (event) {
    //trigger update
    update();
});

update();