fotostore/templates/includes/images_list.html.ep

<div class="container upload-form" id="upload-form">
    
        <input id="fileupload" type="file" name="image" data-url="/upload" multiple>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="/file_uploader/js/vendor/jquery.ui.widget.js"></script>
        <script src="/file_uploader/js/jquery.iframe-transport.js"></script>
        <script src="/file_uploader/js/jquery.fileupload.js"></script>
        <script>
        $(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        $('<p/>').text(file.name).appendTo('#lastUploadLog');
                    });
                },
                sequentialUploads: true,
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress .progress-bar').css(
                        'width',
                        progress + '%'
                    );
                }
            });
        });
        </script>
        
    <div id="progress" class="container">
        <div class="progress-bar" style="width: 0%;"></div>
    </div>
    <div id="lastUploadLog" class="container"></div>
</div>

<!-- display images from server -->
<div class="container">
    <div id="images_list">
        <div class="foto-block row" v-for="image in imagesList">
            <div class="image col-md-3">
                <img v-bind:src="image.thumbnail_url">
                <div class="image_title">
                    {{ image.filename }}
                </div>
            </div>
            <div class="foto-notes col-md-3">
                <div class="image-scale image-original">
                    <div class="image-scale-url">
                        <a v-bind:href="image.original_url">Original</a>
                    </div>
                    <div @click="copyText" class="copy-img">
                        &lt;img src={{ hostname+image.original_url }}&gt;
                    </div>
                    <div @click="copyText" class="copy-bb-more">
                        [MORE=&lt;img src={{ hostname+image.thumbnail_url }}&gt;]&lt;img src={{ hostname+image.original_url }}&gt;[/MORE]
                    </div>
                </div>    
                <div class="image-scale" v-for="scale in image.scales">
                    <div class="image-scale-url">
                        <a v-bind:href="scale.url">{{ scale.size }}</a>
                    </div>
                    <div @click="copyText" class="copy-img">
                        &lt;img src={{ hostname+scale.url }}&gt;
                    </div> 
                    <div @click="copyText" class="copy-bb-more">
                        [MORE=&lt;img src={{ hostname+image.thumbnail_url }}&gt;]&lt;img src={{ hostname+scale.url }}&gt;[/MORE]
                    </div>
                </div>
            </div>
        </div>
        <div class="container paginator">
            <div class="btn-group">
                <button type="button" class="btn btn-default">Prev</button>
                <button type="button" class="btn btn-default" v-for="pageNumber in pagesCount" v-on:click="fetchData(pageNumber)">{{ pageNumber }}</button>
                <button type="button" class="btn btn-default">Next</button>
            </div>
            <div class="container">
                <div class="items-per-page-form">Fotos per page: <input v-model="imagesPerPage">
                    <button type="button" class="btn btn-default" v-on:click="fetchData()">Update</button>
                </div>
            </div>
        </div>
    </div>
    
</div>

<script>
    var apiURL = '<%= url_for('get_images') %>'
    var hostname = window.location.protocol+"//"+window.location.host;

    var demo = new Vue({

        el: '#images_list',
        data: {
            imagesList: null,
            pageNumber: 1,
            pagesCount: 5,
            imagesPerPage: 20,
        },

        created: function () {
           this.fetchData(this.pageNumber)
        },

        methods: {
            fetchData: function (pageNumber) {
                var xhr = new XMLHttpRequest()
                var self = this
                xhr.open('GET', apiURL+"?page="+pageNumber+"&per-page="+self.imagesPerPage)
                xhr.onload = function () {
                    var result = JSON.parse(xhr.responseText);
                    self.imagesList = result.images_list;
                    console.dir(self.imagesList);
                    self.pagesCount = result.pages_count;
                }
                xhr.send()
            },
            copyText(event) {
                //TODO: rewrite it to vue or pure JS from jQuery
                var $temp = $("<input>");
                $("body").append($temp);
                $temp.val($(event.target).text().trim()).select();
                document.execCommand("copy");
                $temp.remove();
            },
        }
        
    });
</script>