mkunz
/
transceivr


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!DOCTYPE html>
<html lang="en">
<style>
    #myProgress {
        width: 100%;
        background-color: #ddd;
    }

    #myBar {
        width: 1%;
        height: 30px;
        background-color: #4CAF50;
    }
</style>
<head>
    <meta charset="utf-8">
    <title>Transloadr</title>
    <script src="js/vue.js"></script>
    <script src="js/moment.js"></script>

</head>
<body>

<div id="app">
    <table>
        <template v-for="(item, index) in transfers">
            <tr>
                <td> {{ item.id }}</td>
                <td style="width:200px;">
                    <div id="myProgress">
                        <div id="myBar" :style="{width: item.progress + '%'}">{{ item.progress }}</div>
                    </div>
                </td>
                <td style="width:200px;">
                    <pre></pre>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
<pre>id: {{ item.id}}
from: {{ item.from}}
to: {{ item.to}}
bytesRead: {{ item.bytesRead}}
uploadError: {{ item.uploadError}}
uploadCode: {{ item.uploadCode}}
uploadResponseBody: {{ item.uploadResponseBody}}
uploadDone: {{ item.uploadDone}}
downloadDone: {{ item.downloadDone}}
rate: {{ item.rate}}k/s

</pre>
                </td>
                <td></td>
            </tr>
        </template>
    </table>
</div>

<script type="application/javascript">
    new Vue({
        el: '#app',
        data: {
            input: '',
            transfers: [],
        },
        created: function () {
            setInterval(this.update, 330);
        },
        watch: {},
        methods: {
            ts2txt: function (ts) {
                return moment(ts).format('YYYY-MM-DD hh:mm ss.SSS ')
            },
            handleErrors: function (response) {
                if (!response.ok) throw Error(response.statusText);
                return response;
            },
            update: function (event) {
                fetch('/status', {method: "GET"})
                    .then(this.handleErrors)
                    .then(response => {
                        return response.json();
                    })
                    .then(myJson => {
                        this.$data.transfers = myJson;
                    })
                    .catch(error => {
                        this.$data.log = [];
                        console.log(error)
                    });
            }
        }
    })
</script>
</body>
</html>