static/js/show-shapes.js

class ImageNavigator {
    constructor() {
        this.targets = [
            'blank',
            'circle',
            'rectangle'
        ];
        this.sources = [];
        this.idx = 0;
        this.imgPlaceholder = document.getElementById('imgPlaceholder');
        // this.imgData = null;
        this.prevBtn = document.getElementById('prevBtn');
        this.nextBtn = document.getElementById('nextBtn');
    }

    async getImgData(target) {
        try {
            let res = await fetch(
                '../draw?target=' + target,
                {
                    method: 'GET'
                }
            );
            return await res.json();
        } catch (error) {
            console.log(error);
        }
    }

    async fetchImgData(target) {
        let imgDataObj = await this.getImgData(target);
        if (imgDataObj != null) {
            // this.imgData = imgDataObj.data;
            // this.imgPlaceholder.innerHTML = '<img src=' + this.imgData + '>';
            return imgDataObj.data;
        }
        return null;
    }

    toggleImage(change) {
        this.idx += change;
        if (this.idx < 0)
            this.idx += this.sources.length;
        else
            this.idx %= this.sources.length;
        this.imgPlaceholder.src = this.sources[this.idx];
    }

    toPrevImage() {
        this.toggleImage(-1);
    }

    toNextImage() {
        this.toggleImage(1);
    }

    async initialize() {
        // this.targets.forEach(
        //     target => {
        //         let targetSrc = await this.fetchImgData(target);
        //         this.sources.push(targetSrc);
        //     }
        // )
        for (var i = 0; i < this.targets.length; i++) {
            var target = this.targets[i];
            let targetSrc = await this.fetchImgData(target);
            this.sources.push(targetSrc);
        }
        // this.imgPlaceholder.src = this.sources[this.idx];
        this.toggleImage(0);

        this.prevBtn.addEventListener('mouseup', e => this.toPrevImage());
        this.nextBtn.addEventListener('mouseup', e => this.toNextImage());
    }
}

var imageNav = new ImageNavigator();
imageNav.initialize();


class DropHandler {
    constructor() {
        this.dropZone = document.getElementById('drop_zone');
        this.droppedImages = document.getElementById('droppedImages');
    }

    validateImage(image) {
        var validTypes = ['image/jpeg', 'image/png', 'image/gif'];
        if (validTypes.indexOf(image.type) == -1) {
            console.log('Invalid File Type: ' + image.type);
            return false;
        }

        var maxSizeInBytes = 10e6; //10MB
        if (image.size > maxSizeInBytes) {
            console.log('File is too large: ' + image.size);
            return false
        }

        return true;
    }

    /**
     * Refer to https://soshace.com/the-ultimate-guide-to-drag-and-drop-image-uploading-with-pure-javascript/
     * @param {object} event 
     */
    processDrop(event) {
        console.log('File(s) dropped');

        // Prevent default behavior (Prevent file from being opened)
        event.preventDefault();

        var dt = event.dataTransfer;
        var files = dt.files;
        if (files.length > 0) {
            for (var i = 0; i < files.length; i++) {
                if (this.validateImage(files[i])) {
                    var img = document.createElement('img');
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        img.src = e.target.result;
                        imageNav.sources.push(e.target.result);
                    }
                    reader.readAsDataURL(files[i]);
                    this.droppedImages.appendChild(img);
                }
            }
        }
        else
            console.log('Dropped ' + files.length + ' files.');
    }

    processDragOver(event) {
        console.log('File(s) in drop zone');

        // Prevent default behavior (Prevent file from being opened)
        event.preventDefault();
    }

    initialize() {
        this.dropZone.addEventListener('drop', e => this.processDrop(e));
        this.dropZone.addEventListener('dragover', e => this.processDragOver(e));
    }
}

var dropHandler = new DropHandler();
dropHandler.initialize();